Fix inline code blocks in thread preview (#6835)

app/components/markdown/markdown.tsx

@@ -10,7 +10,8 @@ import CompassIcon from '@components/compass_icon';
 import Emoji from '@components/emoji';
 import FormattedText from '@components/formatted_text';
 import Hashtag from '@components/markdown/hashtag';
-import {blendColors, changeOpacity, concatStyles, makeStyleSheetFromTheme} from '@utils/theme';
+import {computeTextStyle} from '@utils/markdown';
+import {blendColors, changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {getScheme} from '@utils/url';
 
 import AtMention from './at_mention';
@@ -120,11 +121,6 @@ const getExtraPropsForNode = (node: any) => {
     return extraProps;
 };
 
-const computeTextStyle = (textStyles: MarkdownTextStyles, baseStyle: StyleProp<TextStyle>, context: string[]) => {
-    const contextStyles: TextStyle[] = context.map((type) => textStyles[type]).filter((f) => f !== undefined);
-    return contextStyles.length ? concatStyles(baseStyle, contextStyles) : baseStyle;
-};
-
 const Markdown = ({
     autolinkedUrlSchemes, baseTextStyle, blockStyles, channelId, channelMentions,
     disableAtChannelMentionHighlight, disableAtMentions, disableBlockQuote, disableChannelLink,

app/components/post_list/post/body/message/message.tsx

@@ -10,6 +10,7 @@ import {SEARCH} from '@constants/screens';
 import {useShowMoreAnimatedStyle} from '@hooks/show_more';
 import {getMarkdownTextStyles, getMarkdownBlockStyles} from '@utils/markdown';
 import {makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 import ShowMoreButton from './show_more_button';
 
@@ -42,9 +43,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
         },
         message: {
             color: theme.centerChannelColor,
-            fontFamily: 'OpenSans',
-            fontSize: 16,
-            lineHeight: 24,
+            ...typography('Body', 200),
         },
         pendingPost: {
             opacity: 0.5,

app/components/remove_markdown/index.tsx

@@ -7,36 +7,59 @@ import React, {ReactElement, useCallback, useMemo, useRef} from 'react';
 import {StyleProp, Text, TextStyle} from 'react-native';
 
 import Emoji from '@components/emoji';
+import {computeTextStyle} from '@utils/markdown';
 
-import type {MarkdownEmojiRenderer} from '@typings/global/markdown';
+import type {MarkdownBaseRenderer, MarkdownEmojiRenderer, MarkdownTextStyles} from '@typings/global/markdown';
 
 type Props = {
     enableEmoji?: boolean;
+    enableCodeSpan?: boolean;
     enableHardBreak?: boolean;
     enableSoftBreak?: boolean;
-    textStyle?: StyleProp<TextStyle>;
+    baseStyle?: StyleProp<TextStyle>;
+    textStyle?: MarkdownTextStyles;
     value: string;
 };
 
-const RemoveMarkdown = ({enableEmoji, enableHardBreak, enableSoftBreak, textStyle, value}: Props) => {
+const RemoveMarkdown = ({enableEmoji, enableHardBreak, enableSoftBreak, enableCodeSpan, baseStyle, textStyle = {}, value}: Props) => {
     const renderEmoji = useCallback(({emojiName, literal}: MarkdownEmojiRenderer) => {
+        if (!enableEmoji) {
+            return renderText({literal});
+        }
+
         return (
             <Emoji
                 emojiName={emojiName}
                 literal={literal}
                 testID='markdown_emoji'
-                textStyle={textStyle}
+                textStyle={baseStyle}
             />
         );
-    }, [textStyle]);
+    }, [baseStyle, enableEmoji]);
 
     const renderBreak = useCallback(() => {
         return '\n';
     }, []);
 
     const renderText = useCallback(({literal}: {literal: string}) => {
-        return <Text style={textStyle}>{literal}</Text>;
-    }, [textStyle]);
+        return <Text style={baseStyle}>{literal}</Text>;
+    }, [baseStyle]);
+
+    const renderCodeSpan = useCallback(({context, literal}: MarkdownBaseRenderer) => {
+        if (!enableCodeSpan) {
+            return renderText({literal});
+        }
+
+        const {code} = textStyle;
+        return (
+            <Text
+                style={computeTextStyle(textStyle, [baseStyle, code], context)}
+                testID='markdown_code_span'
+            >
+                {literal}
+            </Text>
+        );
+    }, [baseStyle, textStyle, enableCodeSpan]);
 
     const renderNull = () => {
         return null;
@@ -50,12 +73,12 @@ const RemoveMarkdown = ({enableEmoji, enableHardBreak, enableSoftBreak, textStyl
                 emph: Renderer.forwardChildren,
                 strong: Renderer.forwardChildren,
                 del: Renderer.forwardChildren,
-                code: Renderer.forwardChildren,
+                code: renderCodeSpan,
                 link: Renderer.forwardChildren,
                 image: renderNull,
                 atMention: Renderer.forwardChildren,
                 channelLink: Renderer.forwardChildren,
-                emoji: enableEmoji ? renderEmoji : renderNull,
+                emoji: renderEmoji,
                 hashtag: Renderer.forwardChildren,
                 latexinline: Renderer.forwardChildren,
 

app/screens/global_threads/threads_list/thread/thread.tsx

@@ -14,6 +14,7 @@ import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
 import {useIsTablet} from '@hooks/device';
 import {bottomSheetModalOptions, showModal, showModalOverCurrentContext} from '@screens/navigation';
+import {getMarkdownTextStyles} from '@utils/markdown';
 import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
@@ -125,6 +126,7 @@ const Thread = ({author, channel, location, post, teammateNameDisplay, testID, t
     const isTablet = useIsTablet();
     const theme = useTheme();
     const styles = getStyleSheet(theme);
+    const textStyles = getMarkdownTextStyles(theme);
     const serverUrl = useServerUrl();
 
     const showThread = useCallback(preventDoubleTap(() => {
@@ -197,10 +199,12 @@ const Thread = ({author, channel, location, post, teammateNameDisplay, testID, t
             postBody = (
                 <Text numberOfLines={2}>
                     <RemoveMarkdown
+                        enableCodeSpan={true}
                         enableEmoji={true}
                         enableHardBreak={true}
                         enableSoftBreak={true}
-                        textStyle={styles.message}
+                        textStyle={textStyles}
+                        baseStyle={styles.message}
                         value={post.message}
                     />
                 </Text>

app/utils/markdown/index.ts

@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {Platform, StyleSheet} from 'react-native';
+import {Platform, StyleProp, StyleSheet, TextStyle} from 'react-native';
 
 import {getViewPortWidth} from '@utils/images';
-import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
+import {changeOpacity, concatStyles, makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
+import type {MarkdownTextStyles} from '@typings/global/markdown';
+
 type LanguageObject = {
     [key: string]: {
         name: string;
@@ -279,3 +281,8 @@ export const getMarkdownImageSize = (
     const width = layoutWidth || getViewPortWidth(isReplyPost, isTablet);
     return {width, height: layoutHeight || width};
 };
+
+export const computeTextStyle = (textStyles: MarkdownTextStyles, baseStyle: StyleProp<TextStyle>, context: string[]) => {
+    const contextStyles: TextStyle[] = context.map((type) => textStyles[type]).filter((f) => f !== undefined);
+    return contextStyles.length ? concatStyles(baseStyle, contextStyles) : baseStyle;
+};