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, 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, 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, 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(`"test foo <b>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":
+ 'In reply to @sender1:server
Test
🥰',
+ "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`] = `
+
+
+
+ 🥰
+
+
+
+`;