From 63a68afbc67915fd8c490fd0889768703dcd81c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Polowczyk?= Date: Mon, 19 Jun 2023 17:48:42 +0000 Subject: [PATCH 1/4] support message translation in chat --- src/HtmlUtils.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 89e9d76629a..ffb34600944 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -609,6 +609,7 @@ export function bodyToHtml(content: IContent, highlights: Optional, op "mx_EventTile_body": true, "mx_EventTile_bigEmoji": emojiBody, "markdown-body": isHtmlMessage && !emojiBody, + "translate": true, }); let emojiBodyElements: JSX.Element[] | undefined; From a915f5fe6cefa3b6fb78663d4a68ec2256edcfb4 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Date: Thu, 11 Jul 2024 15:55:16 +0100 Subject: [PATCH 2/4] Update src/HtmlUtils.tsx --- src/HtmlUtils.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index b157d4933d7..3b11176c550 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -399,6 +399,7 @@ export function bodyToHtml(content: IContent, highlights: Optional, op "mx_EventTile_body": true, "mx_EventTile_bigEmoji": emojiBody, "markdown-body": isHtmlMessage && !emojiBody, + // Override the global `notranslate` class set by the top-level `matrixchat` div. "translate": true, }); From 450becfcd7b8a030107be380691a1dc68e585f19 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 25 Jul 2024 13:09:32 +0100 Subject: [PATCH 3/4] update snapshots --- test/__snapshots__/HtmlUtils-test.tsx.snap | 6 +++--- .../MessageEditHistoryDialog-test.tsx.snap | 4 ++-- .../__snapshots__/TextualBody-test.tsx.snap | 16 ++++++++-------- .../__snapshots__/PinnedEventTile-test.tsx.snap | 2 +- .../__snapshots__/LayoutSwitcher-test.tsx.snap | 6 +++--- .../AppearanceUserSettingsTab-test.tsx.snap | 6 +++--- .../__snapshots__/HTMLExport-test.ts.snap | 2 +- 7 files changed, 21 insertions(+), 21 deletions(-) diff --git a/test/__snapshots__/HtmlUtils-test.tsx.snap b/test/__snapshots__/HtmlUtils-test.tsx.snap index c69eaa7d952..1a6e6dfe48a 100644 --- a/test/__snapshots__/HtmlUtils-test.tsx.snap +++ b/test/__snapshots__/HtmlUtils-test.tsx.snap @@ -3,7 +3,7 @@ exports[`bodyToHtml does not mistake characters in text presentation mode for emoji 1`] = ` ↔ ❗︎ @@ -22,7 +22,7 @@ exports[`bodyToHtml feature_latex_maths should render inline katex 1`] = `"hello exports[`bodyToHtml generates big emoji for emoji made of multiple characters 1`] = ` should match the snapshot 1`] = ` class="mx_EventTile_content" > My Great Massage @@ -291,7 +291,7 @@ exports[` should support events with 1`] = ` class="mx_EventTile_content" > My Great Missage diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index 96bb641f9bf..fbc0c283413 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -2,7 +2,7 @@ exports[` renders formatted m.text correctly linkification is not applied to code blocks 1`] = `

@@ -43,7 +43,7 @@ exports[` renders formatted m.text correctly linkification is not exports[` renders formatted m.text correctly pills appear for an MXID permalink 1`] = ` Chat with @@ -90,7 +90,7 @@ exports[` renders formatted m.text correctly pills appear for eve class="mx_MTextBody mx_EventTile_content" > See this message @@ -139,7 +139,7 @@ exports[` renders formatted m.text correctly pills appear for roo class="mx_MTextBody mx_EventTile_content" > A @@ -189,7 +189,7 @@ exports[` renders formatted m.text correctly pills do not appear class="mx_MTextBody mx_EventTile_content" > An @@ -207,7 +207,7 @@ exports[` renders formatted m.text correctly pills do not appear exports[` renders formatted m.text correctly pills do not appear in code blocks 1`] = `

@@ -247,7 +247,7 @@ exports[` renders formatted m.text correctly pills do not appear exports[` renders formatted m.text correctly pills get injected correctly into the DOM 1`] = ` Hey @@ -294,7 +294,7 @@ exports[` renders plain-text m.text correctly should pillify a pe exports[` renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = ` Visit diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap index 269ac9475db..45b1bf2e3aa 100644 --- a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap +++ b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap @@ -27,7 +27,7 @@ exports[` should render pinned event 1`] = ` class="mx_MTextBody mx_EventTile_content" > First pinned message diff --git a/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index fef33c497bf..b9883aee651 100644 --- a/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap @@ -102,7 +102,7 @@ exports[` should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! @@ -218,7 +218,7 @@ exports[` should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! @@ -334,7 +334,7 @@ exports[` should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! diff --git a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap index 71172620716..aa490abe1d7 100644 --- a/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap +++ b/test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap @@ -245,7 +245,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! @@ -361,7 +361,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! @@ -477,7 +477,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = ` class="mx_MTextBody mx_EventTile_content" > Hey you. You're the best! diff --git a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap index 3958005c5b0..a41287c9c97 100644 --- a/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap +++ b/test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap @@ -62,7 +62,7 @@ exports[`HTMLExport should export 1`] = `

-
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
    • +
  • @user49:example.com
    Message #49
  • @user48:example.com
    Message #48
  • @user47:example.com
    Message #47
  • @user46:example.com
    Message #46
  • @user45:example.com
    Message #45
  • @user44:example.com
    Message #44
  • @user43:example.com
    Message #43
  • @user42:example.com
    Message #42
  • @user41:example.com
    Message #41
  • @user40:example.com
    Message #40
  • @user39:example.com
    Message #39
  • @user38:example.com
    Message #38
  • @user37:example.com
    Message #37
  • @user36:example.com
    Message #36
  • @user35:example.com
    Message #35
  • @user34:example.com
    Message #34
  • @user33:example.com
    Message #33
  • @user32:example.com
    Message #32
  • @user31:example.com
    Message #31
  • @user30:example.com
    Message #30
  • @user29:example.com
    Message #29
  • @user28:example.com
    Message #28
  • @user27:example.com
    Message #27
  • @user26:example.com
    Message #26
  • @user25:example.com
    Message #25
  • @user24:example.com
    Message #24
  • @user23:example.com
    Message #23
  • @user22:example.com
    Message #22
  • @user21:example.com
    Message #21
  • @user20:example.com
    Message #20
  • @user19:example.com
    Message #19
  • @user18:example.com
    Message #18
  • @user17:example.com
    Message #17
  • @user16:example.com
    Message #16
  • @user15:example.com
    Message #15
  • @user14:example.com
    Message #14
  • @user13:example.com
    Message #13
  • @user12:example.com
    Message #12
  • @user11:example.com
    Message #11
  • @user10:example.com
    Message #10
  • @user9:example.com
    Message #9
  • @user8:example.com
    Message #8
  • @user7:example.com
    Message #7
  • @user6:example.com
    Message #6
  • @user5:example.com
    Message #5
  • @user4:example.com
    Message #4
  • @user3:example.com
    Message #3
  • @user2:example.com
    Message #2
  • @user1:example.com
    Message #1
  • @user0:example.com
    Message #0
    • From c0ae9fa6143a53b6d5e73c833fcee42b73ae4a03 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 25 Jul 2024 16:28:48 +0100 Subject: [PATCH 4/4] Convert TextualBody-test to use snapshots --- .../views/messages/TextualBody-test.tsx | 33 ++---- .../__snapshots__/TextualBody-test.tsx.snap | 105 ++++++++++++++++++ 2 files changed, 113 insertions(+), 25 deletions(-) diff --git a/test/components/views/messages/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index fc7fe5511c5..2bef3cb76c5 100644 --- a/test/components/views/messages/TextualBody-test.tsx +++ b/test/components/views/messages/TextualBody-test.tsx @@ -135,7 +135,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); expect(container).toHaveTextContent("* sender winks"); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML('winks'); + expect(content).toMatchSnapshot(); }); it("renders m.notice correctly", () => { @@ -155,7 +155,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); expect(container).toHaveTextContent(ev.getContent().body); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML(`${ev.getContent().body}`); + expect(content).toMatchSnapshot(); }); describe("renders plain-text m.text correctly", () => { @@ -168,7 +168,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); expect(container).toHaveTextContent(ev.getContent().body); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML(`${ev.getContent().body}`); + expect(content).toMatchSnapshot(); }); // If pills were rendered within a Portal/same shadow DOM then it'd be easier to test @@ -177,11 +177,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }); expect(container).toHaveTextContent(ev.getContent().body); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML( - '' + - 'Visit ' + - "https://matrix.org/", - ); + expect(content).toMatchSnapshot(); }); it("should not pillify MXIDs", () => { @@ -266,11 +262,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }, matrixClient); expect(container).toHaveTextContent("foo baz bar del u"); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML( - '' + - ev.getContent().formatted_body + - "", - ); + expect(content).toMatchSnapshot(); }); it("spoilers get injected properly into the DOM", () => { @@ -281,14 +273,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }, matrixClient); expect(container).toHaveTextContent("Hey (movie) the movie was awesome"); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML( - '' + - "Hey " + - '", - ); + expect(content).toMatchSnapshot(); }); it("linkification is not applied to code blocks", () => { @@ -366,7 +351,7 @@ describe("", () => { expect(content).toMatchSnapshot(); }); - it("renders formatted body without html corretly", () => { + it("renders formatted body without html correctly", () => { const ev = mkEvent({ type: "m.room.message", room: "room_id", @@ -383,9 +368,7 @@ describe("", () => { const { container } = getComponent({ mxEvent: ev }, matrixClient); const content = container.querySelector(".mx_EventTile_body"); - expect(content).toContainHTML( - '' + "escaped *markdown*" + "", - ); + expect(content).toMatchSnapshot(); }); }); diff --git a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap index fbc0c283413..a9934fb32da 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -1,5 +1,29 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` renders formatted m.text correctly italics, bold, underline and strikethrough render as expected 1`] = ` + + foo + + baz + + + + bar + + + + del + + + + u + + +`; + exports[` renders formatted m.text correctly linkification is not applied to code blocks 1`] = ` renders formatted m.text correctly pills get injected c `; +exports[` renders formatted m.text correctly renders formatted body without html correctly 1`] = ` + + escaped *markdown* + +`; + +exports[` renders formatted m.text correctly spoilers get injected properly into the DOM 1`] = ` + + Hey + + + + +`; + +exports[` renders m.emote correctly 1`] = ` + + winks + +`; + +exports[` renders m.notice correctly 1`] = ` + + this is a notice, probably from a bot + +`; + +exports[` renders plain-text m.text correctly linkification get applied correctly into the DOM 1`] = ` + + Visit + + https://matrix.org/ + + +`; + exports[` renders plain-text m.text correctly should pillify a permalink to a message in the same room with the label »Message from Member« 1`] = `"Visit Message from Member"`; exports[` renders plain-text m.text correctly should pillify a permalink to an event in another room with the label »Message in Room 2« 1`] = `"Visit Message in Room 2"`; @@ -317,3 +413,12 @@ exports[` renders plain-text m.text correctly should pillify a pe     `; + +exports[` renders plain-text m.text correctly simple message renders as expected 1`] = ` + + this is a plaintext message + +`;