Merge pull request #53707 from bernhardoj/fix/53546-emoji-cut-off-at-…

…top-when-wrapped-with-md Fix emoji only is cut off if wrapped with markdown and contains whitespaces
Expensify · Jan 10, 2025 · d22d9b5 · d22d9b5
2 parents d0a2d5e + 6b86ca8
commit d22d9b5
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.tsx
@@ -49,12 +49,22 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             }),
             comment: HTMLElementModel.fromCustomModel({
                 tagName: 'comment',
-                mixedUAStyles: {whiteSpace: 'pre'},
+                getMixedUAStyles: (tnode) => {
+                    if (tnode.attributes.islarge === undefined) {
+                        return {whiteSpace: 'pre'};
+                    }
+                    return {whiteSpace: 'pre', ...styles.onlyEmojisText};
+                },
                 contentModel: HTMLContentModel.block,
             }),
             'email-comment': HTMLElementModel.fromCustomModel({
                 tagName: 'email-comment',
-                mixedUAStyles: {whiteSpace: 'normal'},
+                getMixedUAStyles: (tnode) => {
+                    if (tnode.attributes.islarge === undefined) {
+                        return {whiteSpace: 'normal'};
+                    }
+                    return {whiteSpace: 'normal', ...styles.onlyEmojisText};
+                },
                 contentModel: HTMLContentModel.block,
             }),
             strong: HTMLElementModel.fromCustomModel({
@@ -102,6 +112,7 @@ function BaseHTMLEngineProvider({textSelectable = false, children, enableExperim
             styles.textSupporting,
             styles.textLineThrough,
             styles.mutedNormalTextLabel,
+            styles.onlyEmojisText,
             styles.onlyEmojisTextLineHeight,
         ],
     );

diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/EditedRenderer.tsx
@@ -12,9 +12,8 @@ function EditedRenderer({tnode, TDefaultRenderer, style, ...defaultRendererProps
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const isPendingDelete = !!(tnode.attributes.deleted !== undefined);
-    const isLarge = !!(tnode.attributes.islarge !== undefined);
     return (
-        <Text style={isLarge && styles.onlyEmojisTextLineHeight}>
+        <Text fontSize={variables.fontSizeSmall}>
             <Text
                 style={styles.userSelectNone}
                 fontSize={variables.fontSizeSmall}

diff --git a/src/pages/home/report/comment/AttachmentCommentFragment.tsx b/src/pages/home/report/comment/AttachmentCommentFragment.tsx
@@ -18,6 +18,7 @@ function AttachmentCommentFragment({addExtraMargin, html, source, styleAsDeleted
     return (
         <View style={addExtraMargin ? styles.mt2 : {}}>
             <RenderCommentHTML
+                containsOnlyEmojis={false}
                 source={source}
                 html={htmlContent}
             />

diff --git a/src/pages/home/report/comment/RenderCommentHTML.tsx b/src/pages/home/report/comment/RenderCommentHTML.tsx
@@ -5,10 +5,12 @@ import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 type RenderCommentHTMLProps = {
     source: OriginalMessageSource;
     html: string;
+    containsOnlyEmojis: boolean;
 };
 
-function RenderCommentHTML({html, source}: RenderCommentHTMLProps) {
-    const commentHtml = source === 'email' ? `<email-comment>${html}</email-comment>` : `<comment>${html}</comment>`;
+function RenderCommentHTML({html, source, containsOnlyEmojis}: RenderCommentHTMLProps) {
+    const commentHtml =
+        source === 'email' ? `<email-comment ${containsOnlyEmojis ? 'islarge' : ''}>${html}</email-comment>` : `<comment ${containsOnlyEmojis ? 'islarge' : ''}>${html}</comment>`;
 
     return <RenderHTML html={commentHtml} />;
 }

diff --git a/src/pages/home/report/comment/TextCommentFragment.tsx b/src/pages/home/report/comment/TextCommentFragment.tsx
@@ -68,13 +68,12 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
     const containsOnlyEmojis = EmojiUtils.containsOnlyEmojis(text ?? '');
     const containsEmojis = CONST.REGEX.ALL_EMOJIS.test(text ?? '');
     if (!shouldRenderAsText(html, text ?? '') && !(containsOnlyEmojis && styleAsDeleted)) {
-        const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''} ${containsOnlyEmojis ? 'islarge' : ''}></edited>` : '';
+        const editedTag = fragment?.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
         const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
 
         let htmlContent = htmlWithDeletedTag;
         if (containsOnlyEmojis) {
             htmlContent = Str.replaceAll(htmlContent, '<emoji>', '<emoji islarge>');
-            htmlContent = Str.replaceAll(htmlContent, '<blockquote>', '<blockquote isemojisonly>');
         } else if (containsEmojis) {
             htmlContent = Str.replaceAll(htmlWithDeletedTag, '<emoji>', '<emoji ismedium>');
         }
@@ -87,6 +86,7 @@ function TextCommentFragment({fragment, styleAsDeleted, styleAsMuted = false, so
 
         return (
             <RenderCommentHTML
+                containsOnlyEmojis={containsOnlyEmojis}
                 source={source}
                 html={htmlWithTag}
             />