imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix alignment of RTL messages (#12837)

Browse source 
* Fix alignment of RTL messages

Inspired by https://github.com/matrix-org/matrix-react-sdk/pull/5453 but
hopefully with the edited marker in the right place.

This is a PoC: types aren't correct and the style needs pulling
out to a class. Plus it would probably need more visual tests added.
If this looks acceptable, I can make these changes.

* Fix spacing between text and edited annotation

* Update snapshot

* Update more snapshots

* More snapshots

* More more snapshots

* Split out style

* Fix emotes

This will cause them always be right-justified if the display name
is rtl.

* Add playwright test for ltr/rtl message rendering

* Better snapshots

* Await on message sending

* Better waiting, hopefully

* Old snapshot files

* Really hopefully fixed screenshots this time

* Don't include the message action bar in the screenshots
This commit is contained in:
David Baker 2024-07-31 23:23:46 +01:00 • committed by GitHub
parent f3ac6692da
commit a0c029c3c1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 242 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

10
test/HtmlUtils-test.tsx
View file

@ -19,7 +19,7 @@ import { mocked } from "jest-mock";
import { render, screen } from "@testing-library/react";
import { IContent } from "matrix-js-sdk/src/matrix";
import { bodyToNode, formatEmojis, topicToHtml } from "../src/HtmlUtils";
import { bodyToSpan, formatEmojis, topicToHtml } from "../src/HtmlUtils";
import SettingsStore from "../src/settings/SettingsStore";
jest.mock("../src/settings/SettingsStore");
@ -66,7 +66,7 @@ describe("topicToHtml", () => {
describe("bodyToHtml", () => {
function getHtml(content: IContent, highlights?: string[]): string {
return (bodyToNode(content, highlights, {}) as ReactElement).props.dangerouslySetInnerHTML.__html;
return (bodyToSpan(content, highlights, {}) as ReactElement).props.dangerouslySetInnerHTML.__html;
}
it("should apply highlights to HTML messages", () => {
@ -108,14 +108,14 @@ describe("bodyToHtml", () => {
});
it("generates big emoji for emoji made of multiple characters", () => {
const { asFragment } = render(bodyToNode({ body: "👨‍👩‍👧‍👦 ↔️ 🇮🇸", msgtype: "m.text" }, [], {}) as ReactElement);
const { asFragment } = render(bodyToSpan({ body: "👨‍👩‍👧‍👦 ↔️ 🇮🇸", msgtype: "m.text" }, [], {}) as ReactElement);
expect(asFragment()).toMatchSnapshot();
});
it("should generate big emoji for an emoji-only reply to a message", () => {
const { asFragment } = render(
bodyToNode(
bodyToSpan(
{
"body": "> <@sender1:server> Test\n\n🥰",
"format": "org.matrix.custom.html",
@ -139,7 +139,7 @@ describe("bodyToHtml", () => {
});
it("does not mistake characters in text presentation mode for emoji", () => {
const { asFragment } = render(bodyToNode({ body: "↔ ❗︎", msgtype: "m.text" }, [], {}) as ReactElement);
const { asFragment } = render(bodyToSpan({ body: "↔ ❗︎", msgtype: "m.text" }, [], {}) as ReactElement);
expect(asFragment()).toMatchSnapshot();
});

57
test/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
View file

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TextualBody /> renders formatted m.text correctly italics, bold, underline and strikethrough render as expected 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -21,11 +21,11 @@ exports[`<TextualBody /> renders formatted m.text correctly italics, bold, under
<u>
u
</u>
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly linkification is not applied to code blocks 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -62,11 +62,11 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
</div>
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly pills appear for an MXID permalink 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -105,7 +105,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
</a>
</bdi>
</span>
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly pills appear for event permalinks without a custom label 1`] = `
@ -113,7 +113,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -152,7 +152,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
</a>
</bdi>
</span>
</span>
</div>
</div>
</DocumentFragment>
`;
@ -162,7 +162,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -202,7 +202,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
</bdi>
</span>
with vias
</span>
</div>
</div>
</DocumentFragment>
`;
@ -212,7 +212,7 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -224,13 +224,13 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
event link
</a>
with text
</span>
</div>
</div>
</DocumentFragment>
`;
exports[`<TextualBody /> renders formatted m.text correctly pills do not appear in code blocks 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -266,11 +266,11 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</div>
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly pills get injected correctly into the DOM 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -309,20 +309,20 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
</a>
</bdi>
</span>
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly renders formatted body without html correctly 1`] = `
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
escaped *markdown*
</span>
</div>
`;
exports[`<TextualBody /> renders formatted m.text correctly spoilers get injected properly into the DOM 1`] = `
<span
<div
class="mx_EventTile_body markdown-body translate"
dir="auto"
>
@ -346,29 +346,28 @@ exports[`<TextualBody /> renders formatted m.text correctly spoilers get injecte
</span>
</button>
</span>
</span>
</div>
`;
exports[`<TextualBody /> renders m.emote correctly 1`] = `
<span
class="mx_EventTile_body translate"
dir="auto"
>
winks
</span>
`;
exports[`<TextualBody /> renders m.notice correctly 1`] = `
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
this is a notice, probably from a bot
</span>
</div>
`;
exports[`<TextualBody /> renders plain-text m.text correctly linkification get applied correctly into the DOM 1`] = `
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
@ -381,7 +380,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly linkification get a
>
https://matrix.org/
</a>
</span>
</div>
`;
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>"`;
@ -389,7 +388,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
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>"`;
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`] = `
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
@ -411,14 +410,14 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
</a>
</bdi>
</span>
</span>
</div>
`;
exports[`<TextualBody /> renders plain-text m.text correctly simple message renders as expected 1`] = `
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
this is a plaintext message
</span>
</div>
`;

4
test/components/views/rooms/__snapshots__/PinnedEventTile-test.tsx.snap
View file

@ -26,12 +26,12 @@ exports[`<PinnedEventTile /> should render pinned event 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
First pinned message
</span>
</div>
</div>
</div>
<div

12
test/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap
View file

@ -101,12 +101,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -217,12 +217,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -333,12 +333,12 @@ exports[`<LayoutSwitcher /> should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"

12
test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap
View file

@ -244,12 +244,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -360,12 +360,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"
@ -476,12 +476,12 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
<div
class="mx_MTextBody mx_EventTile_content"
>
<span
<div
class="mx_EventTile_body translate"
dir="auto"
>
Hey you. You're the best!
</span>
</div>
</div>
<div
aria-label="Message Actions"

2
test/utils/exportUtils/__snapshots__/HTMLExport-test.ts.snap
View file

File diff suppressed because one or more lines are too long