Handle emoji tooltip

src/pages/home/report/comment/TextCommentFragment.tsx

@@ -16,6 +16,7 @@ import CONST from '@src/CONST';
 import type {OriginalMessageSource} from '@src/types/onyx/OriginalMessage';
 import type {Message} from '@src/types/onyx/ReportAction';
 import RenderCommentHTML from './RenderCommentHTML';
+import shouldRenderAsText from './shouldRenderAsText';
 
 type TextCommentFragmentProps = {
     /** The reportAction's source */
@@ -44,13 +45,10 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs
     const {translate} = useLocalize();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    // If the only difference between fragment.text and fragment.html is <br /> tags
-    // we render it as text, not as html.
-    // This is done to render emojis with line breaks between them as text.
-    const differByLineBreaksOnly = Str.replaceAll(html, '<br />', '\n') === text;
-
-    // Only render HTML if we have html in the fragment
-    if (!differByLineBreaksOnly) {
+    // If the only difference between fragment.text and fragment.html is <br /> tags and emoji tag
+    // on native, we render it as text, not as html
+    // on other device, only render it as text if the only difference is <br /> tag
+    if (!shouldRenderAsText(html, text)) {
         const editedTag = fragment.isEdited ? `<edited ${styleAsDeleted ? 'deleted' : ''}></edited>` : '';
         const htmlWithDeletedTag = styleAsDeleted ? `<del>${html}</del>` : html;
 

src/pages/home/report/comment/shouldRenderAsText.native.ts

@@ -0,0 +1,12 @@
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Whether to render the report action as text
+ */
+export default function shouldRenderAsText(html: string, text: string): boolean {
+    // On native, we render emoji as text to prevent the large emoji is cut off when the action is edited.
+    // More info: https://github.com/Expensify/App/pull/35838#issuecomment-1964839350
+    const htmlWithoutLineBreak = Str.replaceAll(html, '<br />', '\n');
+    const htmlWithoutEmojiOpenTag = Str.replaceAll(htmlWithoutLineBreak, '<emoji>', '');
+    return Str.replaceAll(htmlWithoutEmojiOpenTag, '</emoji>', '') === text;
+}

src/pages/home/report/comment/shouldRenderAsText.ts

@@ -0,0 +1,8 @@
+import Str from 'expensify-common/lib/str';
+
+/**
+ * Whether to render the report action as text
+ */
+export default function shouldRenderAsText(html: string, text: string): boolean {
+    return Str.replaceAll(html, '<br />', '\n') === text;
+}