Fix big emoji in replies (#10932)

* Add test for big emoji in replies

* Fix big emoji in replies

* Update test snapshot

* Iterate

src/HtmlUtils.tsx

@@ -571,9 +571,6 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
                 });
                 safeBody = phtml.html();
             }
-            if (bodyHasEmoji) {
-                safeBody = formatEmojis(safeBody, true).join("");
-            }
         } else if (highlighter) {
             safeBody = highlighter.applyHighlights(escapeHtml(plainBody), safeHighlights!).join("");
         }
@@ -581,13 +578,9 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         delete sanitizeParams.textFilter;
     }
 
-    const contentBody = safeBody ?? strippedBody;
-    if (opts.returnString) {
-        return contentBody;
-    }
-
     let emojiBody = false;
     if (!opts.disableBigEmoji && bodyHasEmoji) {
+        const contentBody = safeBody ?? strippedBody;
         let contentBodyTrimmed = contentBody !== undefined ? contentBody.trim() : "";
 
         // Remove zero width joiner, zero width spaces and other spaces in body
@@ -607,6 +600,15 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
                 (!content.formatted_body.includes("http:") && !content.formatted_body.includes("https:")));
     }
 
+    if (isFormattedBody && bodyHasEmoji && safeBody) {
+        // This has to be done after the emojiBody check above as to not break big emoji on replies
+        safeBody = formatEmojis(safeBody, true).join("");
+    }
+
+    if (opts.returnString) {
+        return safeBody ?? strippedBody;
+    }
+
     const className = classNames({
         "mx_EventTile_body": true,
         "mx_EventTile_bigEmoji": emojiBody,

test/HtmlUtils-test.tsx

@@ -106,4 +106,29 @@ describe("bodyToHtml", () => {
 
         expect(html).toMatchInlineSnapshot(`"<span class="mx_EventTile_searchHighlight">test</span> foo &lt;b&gt;bar"`);
     });
+
+    it("should generate big emoji for an emoji-only reply to a message", () => {
+        const { asFragment } = render(
+            bodyToHtml(
+                {
+                    "body": "> <@sender1:server> Test\n\n🥰",
+                    "format": "org.matrix.custom.html",
+                    "formatted_body":
+                        '<mx-reply><blockquote><a href="https://matrix.to/#/!roomId:server/$eventId">In reply to</a> <a href="https://matrix.to/#/@sender1:server">@sender1:server</a><br>Test</blockquote></mx-reply>🥰',
+                    "m.relates_to": {
+                        "m.in_reply_to": {
+                            event_id: "$eventId",
+                        },
+                    },
+                    "msgtype": "m.text",
+                },
+                [],
+                {
+                    stripReplyFallback: true,
+                },
+            ) as ReactElement,
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
 });

test/__snapshots__/HtmlUtils-test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`bodyToHtml should generate big emoji for an emoji-only reply to a message 1`] = `
+<DocumentFragment>
+  <span
+    class="mx_EventTile_body mx_EventTile_bigEmoji"
+    dir="auto"
+  >
+    <span
+      class="mx_Emoji"
+      title=":smiling_face_with_3_hearts:"
+    >
+      🥰
+    </span>
+  </span>
+</DocumentFragment>
+`;