Fix big emoji in replies (#10932)

* Add test for big emoji in replies

* Fix big emoji in replies

* Update test snapshot

* Iterate

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>
+`;