Merge pull request Expensify#67817 from Expensify/youssef_fix_description_html

Allow description to render markdown

Author: Julesssss

src/components/TextWithTooltip/index.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import type TextWithTooltipProps from './types';
@@ -7,7 +8,7 @@ type LayoutChangeEvent = {
     target: HTMLElement;
 };
 
-function TextWithTooltip({text, shouldShowTooltip, style, numberOfLines = 1}: TextWithTooltipProps) {
+function TextWithTooltip({text, shouldShowTooltip, style, numberOfLines = 1, shouldRenderAsHTML}: TextWithTooltipProps) {
     const [showTooltip, setShowTooltip] = useState(false);
 
     return (
@@ -30,7 +31,7 @@ function TextWithTooltip({text, shouldShowTooltip, style, numberOfLines = 1}: Te
                     setShowTooltip(false);
                 }}
             >
-                {text}
+                {shouldRenderAsHTML ? <RenderHTML html={text} /> : text}
             </Text>
         </Tooltip>
     );

src/components/TextWithTooltip/types.ts

@@ -12,6 +12,9 @@ type TextWithTooltipProps = {
 
     /** Custom number of lines for text wrapping */
     numberOfLines?: number;
+
+    /** Whether the supplied text can be markdown */
+    shouldRenderAsHTML?: boolean;
 };
 
 export default TextWithTooltipProps;

src/components/TransactionItemRow/DataCells/MerchantCell.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import TextWithTooltip from '@components/TextWithTooltip';
 import useThemeStyles from '@hooks/useThemeStyles';
+import Parser from '@libs/Parser';
 
 function MerchantOrDescriptionCell({
     merchantOrDescription,
@@ -13,11 +14,16 @@ function MerchantOrDescriptionCell({
 }) {
     const styles = useThemeStyles();
 
+    const html = useMemo(() => {
+        return Parser.replace(merchantOrDescription, {shouldEscapeText: false});
+    }, [merchantOrDescription]);
+
     return (
         <TextWithTooltip
             shouldShowTooltip={shouldShowTooltip}
-            text={merchantOrDescription}
+            text={html}
             style={[!shouldUseNarrowLayout ? styles.lineHeightLarge : styles.lh20, styles.pre, styles.justifyContentCenter, styles.flex1]}
+            shouldRenderAsHTML
         />
     );
 }