Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit c1420ba

Browse files
lukaszpolowczykrichvdh
lukaszpolowczyk
and
richvdh
authored
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 <richard@matrix.org>
1 parent 3c370c6 commit c1420ba

File tree

9 files changed

+136
-46
lines changed

9 files changed

+136
-46
lines changed

‎src/HtmlUtils.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,8 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
423423
"mx_EventTile_body": true,
424424
"mx_EventTile_bigEmoji": emojiBody,
425425
"markdown-body": isHtmlMessage && !emojiBody,
426+
// Override the global `notranslate` class set by the top-level `matrixchat` div.
427+
"translate": true,
426428
});
427429

428430
let emojiBodyElements: JSX.Element[] | undefined;

‎test/__snapshots__/HtmlUtils-test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`bodyToHtml does not mistake characters in text presentation mode for emoji 1`] = `
44
<DocumentFragment>
55
<span
6-
class="mx_EventTile_body"
6+
class="mx_EventTile_body translate"
77
dir="auto"
88
>
99
↔ ❗︎
@@ -22,7 +22,7 @@ exports[`bodyToHtml feature_latex_maths should render inline katex 1`] = `"hello
2222
exports[`bodyToHtml generates big emoji for emoji made of multiple characters 1`] = `
2323
<DocumentFragment>
2424
<span
25-
class="mx_EventTile_body mx_EventTile_bigEmoji"
25+
class="mx_EventTile_body mx_EventTile_bigEmoji translate"
2626
dir="auto"
2727
>
2828
<span
@@ -52,7 +52,7 @@ exports[`bodyToHtml generates big emoji for emoji made of multiple characters 1`
5252
exports[`bodyToHtml should generate big emoji for an emoji-only reply to a message 1`] = `
5353
<DocumentFragment>
5454
<span
55-
class="mx_EventTile_body mx_EventTile_bigEmoji"
55+
class="mx_EventTile_body mx_EventTile_bigEmoji translate"
5656
dir="auto"
5757
>
5858
<span

‎test/components/views/dialogs/__snapshots__/MessageEditHistoryDialog-test.tsx.snap

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ exports[`<MessageEditHistory /> should match the snapshot 1`] = `
7777
class="mx_EventTile_content"
7878
>
7979
<span
80-
class="mx_EventTile_body"
80+
class="mx_EventTile_body translate"
8181
dir="auto"
8282
>
8383
My Great Massage
@@ -291,7 +291,7 @@ exports[`<MessageEditHistory /> should support events with 1`] = `
291291
class="mx_EventTile_content"
292292
>
293293
<span
294-
class="mx_EventTile_body"
294+
class="mx_EventTile_body translate"
295295
dir="auto"
296296
>
297297
My Great Missage

‎test/components/views/messages/TextualBody-test.tsx

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ describe("<TextualBody />", () => {
135135
const { container } = getComponent({ mxEvent: ev });
136136
expect(container).toHaveTextContent("* sender winks");
137137
const content = container.querySelector(".mx_EventTile_body");
138-
expect(content).toContainHTML('<span class="mx_EventTile_body" dir="auto">winks</span>');
138+
expect(content).toMatchSnapshot();
139139
});
140140

141141
it("renders m.notice correctly", () => {
@@ -155,7 +155,7 @@ describe("<TextualBody />", () => {
155155
const { container } = getComponent({ mxEvent: ev });
156156
expect(container).toHaveTextContent(ev.getContent().body);
157157
const content = container.querySelector(".mx_EventTile_body");
158-
expect(content).toContainHTML(`<span class="mx_EventTile_body" dir="auto">${ev.getContent().body}</span>`);
158+
expect(content).toMatchSnapshot();
159159
});
160160

161161
describe("renders plain-text m.text correctly", () => {
@@ -168,7 +168,7 @@ describe("<TextualBody />", () => {
168168
const { container } = getComponent({ mxEvent: ev });
169169
expect(container).toHaveTextContent(ev.getContent().body);
170170
const content = container.querySelector(".mx_EventTile_body");
171-
expect(content).toContainHTML(`<span class="mx_EventTile_body" dir="auto">${ev.getContent().body}</span>`);
171+
expect(content).toMatchSnapshot();
172172
});
173173

174174
// If pills were rendered within a Portal/same shadow DOM then it'd be easier to test
@@ -177,11 +177,7 @@ describe("<TextualBody />", () => {
177177
const { container } = getComponent({ mxEvent: ev });
178178
expect(container).toHaveTextContent(ev.getContent().body);
179179
const content = container.querySelector(".mx_EventTile_body");
180-
expect(content).toContainHTML(
181-
'<span class="mx_EventTile_body" dir="auto">' +
182-
'Visit <a href="https://matrix.org/" class="linkified" target="_blank" rel="noreferrer noopener">' +
183-
"https://matrix.org/</a></span>",
184-
);
180+
expect(content).toMatchSnapshot();
185181
});
186182

187183
it("should not pillify MXIDs", () => {
@@ -266,11 +262,7 @@ describe("<TextualBody />", () => {
266262
const { container } = getComponent({ mxEvent: ev }, matrixClient);
267263
expect(container).toHaveTextContent("foo baz bar del u");
268264
const content = container.querySelector(".mx_EventTile_body");
269-
expect(content).toContainHTML(
270-
'<span class="mx_EventTile_body markdown-body" dir="auto">' +
271-
ev.getContent().formatted_body +
272-
"</span>",
273-
);
265+
expect(content).toMatchSnapshot();
274266
});
275267

276268
it("spoilers get injected properly into the DOM", () => {
@@ -281,14 +273,7 @@ describe("<TextualBody />", () => {
281273
const { container } = getComponent({ mxEvent: ev }, matrixClient);
282274
expect(container).toHaveTextContent("Hey (movie) the movie was awesome");
283275
const content = container.querySelector(".mx_EventTile_body");
284-
expect(content).toContainHTML(
285-
'<span class="mx_EventTile_body markdown-body" dir="auto">' +
286-
"Hey <span>" +
287-
'<button class="mx_EventTile_spoiler">' +
288-
'<span class="mx_EventTile_spoiler_reason">(movie)</span>&nbsp;' +
289-
'<span class="mx_EventTile_spoiler_content"><span>the movie was awesome</span></span>' +
290-
"</span></button></span>",
291-
);
276+
expect(content).toMatchSnapshot();
292277
});
293278

294279
it("linkification is not applied to code blocks", () => {
@@ -366,7 +351,7 @@ describe("<TextualBody />", () => {
366351
expect(content).toMatchSnapshot();
367352
});
368353

369-
it("renders formatted body without html corretly", () => {
354+
it("renders formatted body without html correctly", () => {
370355
const ev = mkEvent({
371356
type: "m.room.message",
372357
room: "room_id",
@@ -383,9 +368,7 @@ describe("<TextualBody />", () => {
383368
const { container } = getComponent({ mxEvent: ev }, matrixClient);
384369

385370
const content = container.querySelector(".mx_EventTile_body");
386-
expect(content).toContainHTML(
387-
'<span class="mx_EventTile_body" dir="auto">' + "escaped *markdown*" + "</span>",
388-
);
371+
expect(content).toMatchSnapshot();
389372
});
390373
});
391374

‎test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap

Lines changed: 113 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,32 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`<TextualBody /> renders formatted m.text correctly italics, bold, underline and strikethrough render as expected 1`] = `
4+
<span
5+
class="mx_EventTile_body markdown-body translate"
6+
dir="auto"
7+
>
8+
foo
9+
<em>
10+
baz
11+
</em>
12+
13+
<strong>
14+
bar
15+
</strong>
16+
17+
<del>
18+
del
19+
</del>
20+
21+
<u>
22+
u
23+
</u>
24+
</span>
25+
`;
26+
327
exports[`<TextualBody /> renders formatted m.text correctly linkification is not applied to code blocks 1`] = `
428
<span
5-
class="mx_EventTile_body markdown-body"
29+
class="mx_EventTile_body markdown-body translate"
630
dir="auto"
731
>
832
<p>
@@ -43,7 +67,7 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
4367

4468
exports[`<TextualBody /> renders formatted m.text correctly pills appear for an MXID permalink 1`] = `
4569
<span
46-
class="mx_EventTile_body markdown-body"
70+
class="mx_EventTile_body markdown-body translate"
4771
dir="auto"
4872
>
4973
Chat with
@@ -90,7 +114,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
90114
class="mx_MTextBody mx_EventTile_content"
91115
>
92116
<span
93-
class="mx_EventTile_body markdown-body"
117+
class="mx_EventTile_body markdown-body translate"
94118
dir="auto"
95119
>
96120
See this message
@@ -139,7 +163,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
139163
class="mx_MTextBody mx_EventTile_content"
140164
>
141165
<span
142-
class="mx_EventTile_body markdown-body"
166+
class="mx_EventTile_body markdown-body translate"
143167
dir="auto"
144168
>
145169
A
@@ -189,7 +213,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
189213
class="mx_MTextBody mx_EventTile_content"
190214
>
191215
<span
192-
class="mx_EventTile_body markdown-body"
216+
class="mx_EventTile_body markdown-body translate"
193217
dir="auto"
194218
>
195219
An
@@ -207,7 +231,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
207231

208232
exports[`<TextualBody /> renders formatted m.text correctly pills do not appear in code blocks 1`] = `
209233
<span
210-
class="mx_EventTile_body markdown-body"
234+
class="mx_EventTile_body markdown-body translate"
211235
dir="auto"
212236
>
213237
<p>
@@ -247,7 +271,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
247271

248272
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `
249273
<span
250-
class="mx_EventTile_body markdown-body"
274+
class="mx_EventTile_body markdown-body translate"
251275
dir="auto"
252276
>
253277
Hey
@@ -288,13 +312,85 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
288312
</span>
289313
`;
290314

315+
exports[`<TextualBody /> renders formatted m.text correctly renders formatted body without html correctly 1`] = `
316+
<span
317+
class="mx_EventTile_body translate"
318+
dir="auto"
319+
>
320+
escaped *markdown*
321+
</span>
322+
`;
323+
324+
exports[`<TextualBody /> renders formatted m.text correctly spoilers get injected properly into the DOM 1`] = `
325+
<span
326+
class="mx_EventTile_body markdown-body translate"
327+
dir="auto"
328+
>
329+
Hey
330+
<span>
331+
<button
332+
class="mx_EventTile_spoiler"
333+
>
334+
<span
335+
class="mx_EventTile_spoiler_reason"
336+
>
337+
(movie)
338+
</span>
339+
 
340+
<span
341+
class="mx_EventTile_spoiler_content"
342+
>
343+
<span>
344+
the movie was awesome
345+
</span>
346+
</span>
347+
</button>
348+
</span>
349+
</span>
350+
`;
351+
352+
exports[`<TextualBody /> renders m.emote correctly 1`] = `
353+
<span
354+
class="mx_EventTile_body translate"
355+
dir="auto"
356+
>
357+
winks
358+
</span>
359+
`;
360+
361+
exports[`<TextualBody /> renders m.notice correctly 1`] = `
362+
<span
363+
class="mx_EventTile_body translate"
364+
dir="auto"
365+
>
366+
this is a notice, probably from a bot
367+
</span>
368+
`;
369+
370+
exports[`<TextualBody /> renders plain-text m.text correctly linkification get applied correctly into the DOM 1`] = `
371+
<span
372+
class="mx_EventTile_body translate"
373+
dir="auto"
374+
>
375+
Visit
376+
<a
377+
class="linkified"
378+
href="https://matrix.org/"
379+
rel="noreferrer noopener"
380+
target="_blank"
381+
>
382+
https://matrix.org/
383+
</a>
384+
</span>
385+
`;
386+
291387
exports[`<TextualBody /> 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 <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room1:example.com/%event_id%"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message from Member</span></a></bdi></span>"`;
292388
293389
exports[`<TextualBody /> 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 <span><bdi><a class="mx_Pill mx_EventPill" href="https://matrix.to/#/!room2:example.com/%event_id%"><span aria-label="Avatar" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="2" class="_avatar_mcap2_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/room.png" referrerpolicy="no-referrer" class="_image_mcap2_50" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Message in Room 2</span></a></bdi></span>"`;
294390
295391
exports[`<TextualBody /> renders plain-text m.text correctly should pillify a permalink to an unknown message in the same room with the label »Message« 1`] = `
296392
<span
297-
class="mx_EventTile_body"
393+
class="mx_EventTile_body translate"
298394
dir="auto"
299395
>
300396
Visit
@@ -317,3 +413,12 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
317413
</span>
318414
</span>
319415
`;
416+
417+
exports[`<TextualBody /> renders plain-text m.text correctly simple message renders as expected 1`] = `
418+
<span
419+
class="mx_EventTile_body translate"
420+
dir="auto"
421+
>
422+
this is a plaintext message
423+
</span>
424+
`;

‎test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
2727
class="mx_MTextBody mx_EventTile_content"
2828
>
2929
<span
30-
class="mx_EventTile_body"
30+
class="mx_EventTile_body translate"
3131
dir="auto"
3232
>
3333
First pinned message

‎test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
102102
class="mx_MTextBody mx_EventTile_content"
103103
>
104104
<span
105-
class="mx_EventTile_body"
105+
class="mx_EventTile_body translate"
106106
dir="auto"
107107
>
108108
Hey you. You're the best!
@@ -218,7 +218,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
218218
class="mx_MTextBody mx_EventTile_content"
219219
>
220220
<span
221-
class="mx_EventTile_body"
221+
class="mx_EventTile_body translate"
222222
dir="auto"
223223
>
224224
Hey you. You're the best!
@@ -334,7 +334,7 @@ exports[`<LayoutSwitcher /> should render 1`] = `
334334
class="mx_MTextBody mx_EventTile_content"
335335
>
336336
<span
337-
class="mx_EventTile_body"
337+
class="mx_EventTile_body translate"
338338
dir="auto"
339339
>
340340
Hey you. You're the best!

‎test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
245245
class="mx_MTextBody mx_EventTile_content"
246246
>
247247
<span
248-
class="mx_EventTile_body"
248+
class="mx_EventTile_body translate"
249249
dir="auto"
250250
>
251251
Hey you. You're the best!
@@ -361,7 +361,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
361361
class="mx_MTextBody mx_EventTile_content"
362362
>
363363
<span
364-
class="mx_EventTile_body"
364+
class="mx_EventTile_body translate"
365365
dir="auto"
366366
>
367367
Hey you. You're the best!
@@ -477,7 +477,7 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
477477
class="mx_MTextBody mx_EventTile_content"
478478
>
479479
<span
480-
class="mx_EventTile_body"
480+
class="mx_EventTile_body translate"
481481
dir="auto"
482482
>
483483
Hey you. You're the best!

‎test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)