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`] = `
