From d0b77cc3aa826dce6e6069d70372c8d00c85b45c Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 18 May 2023 09:32:14 +0100
Subject: [PATCH] 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                          | 18 +++++++++-------
 test/HtmlUtils-test.tsx                    | 25 ++++++++++++++++++++++
 test/__snapshots__/HtmlUtils-test.tsx.snap | 17 +++++++++++++++
 3 files changed, 52 insertions(+), 8 deletions(-)
 create mode 100644 test/__snapshots__/HtmlUtils-test.tsx.snap

diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx
index f8dd52a4f03..6593a308c87 100644
--- a/src/HtmlUtils.tsx
+++ b/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,
diff --git a/test/HtmlUtils-test.tsx b/test/HtmlUtils-test.tsx
index d63470e1222..d90e35c088f 100644
--- a/test/HtmlUtils-test.tsx
+++ b/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();
+    });
 });
diff --git a/test/__snapshots__/HtmlUtils-test.tsx.snap b/test/__snapshots__/HtmlUtils-test.tsx.snap
new file mode 100644
index 00000000000..0101de429e0
--- /dev/null
+++ b/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>
+`;