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`] = ` + + + + 🥰 + + + +`;