From c1420ba12621282399025878c63690a26df081f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Polowczyk?= Date: Thu, 25 Jul 2024 18:58:33 +0200 Subject: [PATCH] Allow Chrome page translator to translate messages in rooms (#11113) * support message translation in chat * Update src/HtmlUtils.tsx * update snapshots * Convert TextualBody-test to use snapshots --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: Richard van der Hoff --- src/HtmlUtils.tsx | 2 + test/__snapshots__/HtmlUtils-test.tsx.snap | 6 +- .../MessageEditHistoryDialog-test.tsx.snap | 4 +- .../views/messages/TextualBody-test.tsx | 33 ++--- .../__snapshots__/TextualBody-test.tsx.snap | 121 ++++++++++++++++-- .../PinnedEventTile-test.tsx.snap | 2 +- .../LayoutSwitcher-test.tsx.snap | 6 +- .../AppearanceUserSettingsTab-test.tsx.snap | 6 +- .../__snapshots__/HTMLExport-test.ts.snap | 2 +- 9 files changed, 136 insertions(+), 46 deletions(-) diff --git a/src/HtmlUtils.tsx b/src/HtmlUtils.tsx index 888c30d76c..33f242b4fc 100644 --- a/src/HtmlUtils.tsx +++ b/src/HtmlUtils.tsx @@ -423,6 +423,8 @@ 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, }); let emojiBodyElements: JSX.Element[] | undefined; diff --git a/test/__snapshots__/HtmlUtils-test.tsx.snap b/test/__snapshots__/HtmlUtils-test.tsx.snap index c69eaa7d95..1a6e6dfe48 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/TextualBody-test.tsx b/test/components/views/messages/TextualBody-test.tsx index fc7fe5511c..2bef3cb76c 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 96bb641f9b..a9934fb32d 100644 --- a/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap +++ b/test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap @@ -1,8 +1,32 @@ // 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`] = `

@@ -43,7 +67,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 +114,7 @@ exports[` renders formatted m.text correctly pills appear for eve class="mx_MTextBody mx_EventTile_content" > See this message @@ -139,7 +163,7 @@ exports[` renders formatted m.text correctly pills appear for roo class="mx_MTextBody mx_EventTile_content" > A @@ -189,7 +213,7 @@ exports[` renders formatted m.text correctly pills do not appear class="mx_MTextBody mx_EventTile_content" > An @@ -207,7 +231,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 +271,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 @@ -288,13 +312,85 @@ exports[` 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"`; 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 @@ -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 + +`; diff --git a/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap b/test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap index 269ac9475d..45b1bf2e3a 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 fef33c497b..b9883aee65 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 7117262071..aa490abe1d 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 3958005c5b..a41287c9c9 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