toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Align latex with text (#6900)

Browse source 
* Align latex with text

* fix tests

* fix markdown bold

Co-authored-by: Elias Nahum <nahumhbl@gmail.com>
This commit is contained in:
Daniel Espino García 2022-12-23 13:21:50 +01:00 committed by GitHub
parent 9753334ff2
commit 450b6e1a21
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 219 additions and 242 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
app/components/markdown/markdown.tsx
View file

@ -39,7 +39,6 @@ import type {
type MarkdownProps = {
autolinkedUrlSchemes?: string[];
baseTextStyle: StyleProp<TextStyle>;
baseParagraphStyle?: StyleProp<TextStyle>;
blockStyles?: MarkdownBlockStyles;
channelId?: string;
channelMentions?: ChannelMentions;
@ -86,7 +85,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
return {
block: {
alignItems: 'flex-start',
alignItems: 'center',
flexDirection: 'row',
flexWrap: 'wrap',
},
@ -129,7 +128,7 @@ const Markdown = ({
enableInlineLatex, enableLatex,
imagesMetadata, isEdited, isReplyPost, isSearchResult, layoutHeight, layoutWidth,
location, mentionKeys, minimumHashtagLength = 3, onPostPress, postId, searchPatterns,
textStyles = {}, theme, value = '', baseParagraphStyle,
textStyles = {}, theme, value = '',
}: MarkdownProps) => {
const style = getStyleSheet(theme);
const managedConfig = useManagedConfig<ManagedConfig>();
@ -384,13 +383,11 @@ const Markdown = ({
}
return (
<Text>
<MarkdownLatexInline
content={latexCode}
maxMathWidth={Dimensions.get('window').width * 0.75}
theme={theme}
/>
</Text>
<MarkdownLatexInline
content={latexCode}
maxMathWidth={Dimensions.get('window').width * 0.75}
theme={theme}
/>
);
};
@ -443,9 +440,7 @@ const Markdown = ({
style={blockStyle}
testID='markdown_paragraph'
>
<Text style={baseParagraphStyle}>
{children}
</Text>
{children}
</View>
);
};

3
app/components/markdown/markdown_latex_inline/index.tsx
View file

@ -3,7 +3,7 @@
import React from 'react';
import {useIntl} from 'react-intl';
import {Platform, Text, View} from 'react-native';
import {Text, View} from 'react-native';
import MathView from 'react-native-math-view';
import ErrorBoundary from '@components/markdown/error_boundary';
@ -23,7 +23,6 @@ type MathViewErrorProps = {
const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
return {
mathStyle: {
marginBottom: Platform.select({default: -10, ios: 2.5}),
color: theme.centerChannelColor,
},
viewStyle: {

432
app/components/post_list/post/system_message/__snapshots__/system_message_helpers.test.js.snap
View file

@ -12,7 +12,7 @@ exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] =
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -20,45 +20,43 @@ exports[`renderSystemMessage uses renderer for Channel Display Name update 1`] =
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
updated the channel display name from: old displayname to: new displayname
@username
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
updated the channel display name from: old displayname to: new displayname
</Text>
</View>
</View>
`;
@ -75,7 +73,7 @@ exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -83,45 +81,43 @@ exports[`renderSystemMessage uses renderer for Channel Header update 1`] = `
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
updated the channel header from: old header to: new header
@username
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
updated the channel header from: old header to: new header
</Text>
</View>
</View>
`;
@ -154,7 +150,7 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 1
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -162,45 +158,43 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 1
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
joined the channel as a guest.
@username
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
joined the channel as a guest.
</Text>
</View>
</View>
`;
@ -217,7 +211,7 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -225,65 +219,63 @@ exports[`renderSystemMessage uses renderer for Guest added and join to channel 2
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@other.user
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
added to the channel as a guest by
</Text>
},
{
"opacity": 1,
},
]
}
>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
style={[]}
>
<Text
style={[]}
>
@username.
</Text>
@other.user
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
added to the channel as a guest by
</Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username.
</Text>
</Text>
</View>
@ -302,7 +294,7 @@ exports[`renderSystemMessage uses renderer for OLD archived channel without a us
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -310,22 +302,20 @@ exports[`renderSystemMessage uses renderer for OLD archived channel without a us
}
testID="markdown_paragraph"
>
<Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
testID="markdown_text"
>
archived the channel
</Text>
}
testID="markdown_text"
>
archived the channel
</Text>
</View>
</View>
@ -343,7 +333,7 @@ exports[`renderSystemMessage uses renderer for archived channel 1`] = `
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -351,45 +341,43 @@ exports[`renderSystemMessage uses renderer for archived channel 1`] = `
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
archived the channel
@username
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
archived the channel
</Text>
</View>
</View>
`;
@ -406,7 +394,7 @@ exports[`renderSystemMessage uses renderer for unarchived channel 1`] = `
style={
[
{
"alignItems": "flex-start",
"alignItems": "center",
"flexDirection": "row",
"flexWrap": "wrap",
},
@ -414,45 +402,43 @@ exports[`renderSystemMessage uses renderer for unarchived channel 1`] = `
}
testID="markdown_paragraph"
>
<Text>
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
@username
</Text>
</Text>
<Text
selectable={false}
style={
<Text
style={
[
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
},
{
"opacity": 1,
},
]
}
>
<Text
style={[]}
>
unarchived the channel
@username
</Text>
</Text>
<Text
selectable={false}
style={
{
"color": "rgba(63,67,80,0.6)",
"fontFamily": "OpenSans",
"fontSize": 16,
"fontWeight": "400",
"lineHeight": 24,
}
}
testID="markdown_text"
>
unarchived the channel
</Text>
</View>
</View>
`;

4
app/screens/permalink/permalink_error.tsx
View file

@ -42,9 +42,6 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
color: theme.centerChannelColor,
...typography('Body', 200, 'Regular'),
},
errorTextParagraph: {
textAlign: 'center',
},
errorButtonContainer: {
borderTopWidth: 1,
borderTopColor: changeOpacity(theme.centerChannelColor, 0.16),
@ -131,7 +128,6 @@ function PermalinkError({
theme={theme}
value={text}
baseTextStyle={style.errorText}
baseParagraphStyle={style.errorTextParagraph}
disableAtMentions={true}
disableAtChannelMentionHighlight={true}
disableChannelLink={true}

1
app/utils/markdown/index.ts
View file

@ -30,6 +30,7 @@ export const getMarkdownTextStyles = makeStyleSheetFromTheme((theme: Theme) => {
},
strong: {
fontFamily: 'OpenSans-SemiBold',
fontWeight: '600',
},
del: {
textDecorationLine: 'line-through',