Fix alignment of RTL messages (#12837)

* 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

playwright/e2e/messages/messages.spec.ts

@@ -0,0 +1,113 @@
+/*
+Copyright 2024 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* See readme.md for tips on writing these tests. */
+
+import { Locator, Page } from "playwright-core";
+
+import { test, expect } from "../../element-web-test";
+
+async function sendMessage(page: Page, message: string): Promise<Locator> {
+    await page.getByRole("textbox", { name: "Send a message…" }).fill(message);
+    await page.getByRole("button", { name: "Send message" }).click();
+
+    const msgTile = await page.locator(".mx_EventTile_last");
+    await msgTile.locator(".mx_EventTile_receiptSent").waitFor();
+    return msgTile;
+}
+
+async function editMessage(page: Page, message: Locator, newMsg: string): Promise<void> {
+    const line = message.locator(".mx_EventTile_line");
+    await line.hover();
+    await line.getByRole("button", { name: "Edit" }).click();
+    const editComposer = page.getByRole("textbox", { name: "Edit message" });
+    await page.getByLabel("User menu").hover(); // Just to un-hover the message line
+    await editComposer.fill(newMsg);
+    await editComposer.press("Enter");
+}
+
+test.describe("Message rendering", () => {
+    [
+        { direction: "ltr", displayName: "Quentin" },
+        { direction: "rtl", displayName: "كوينتين" },
+    ].forEach(({ direction, displayName }) => {
+        test.describe(`with ${direction} display name`, () => {
+            test.use({
+                displayName,
+                room: async ({ user, app }, use) => {
+                    const roomId = await app.client.createRoom({ name: "Test room" });
+                    await use({ roomId });
+                },
+            });
+
+            test("should render a basic LTR text message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "Hello, world!");
+                await expect(msgTile).toMatchScreenshot(`basic-message-ltr-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
+
+            test("should render an LTR emote", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "/me lays an egg");
+                await expect(msgTile).toMatchScreenshot(`emote-ltr-${direction}displayname.png`);
+            });
+
+            test("should render an edited LTR message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "Hello, world!");
+
+                await editMessage(page, msgTile, "Hello, universe!");
+
+                await expect(msgTile).toMatchScreenshot(`edited-message-ltr-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
+
+            test("should render a basic RTL text message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "مرحبا بالعالم!");
+                await expect(msgTile).toMatchScreenshot(`basic-message-rtl-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
+
+            test("should render an RTL emote", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "/me يضع بيضة");
+                await expect(msgTile).toMatchScreenshot(`emote-rtl-${direction}displayname.png`);
+            });
+
+            test("should render an edited RTL message", async ({ page, user, app, room }) => {
+                await page.goto(`#/room/${room.roomId}`);
+
+                const msgTile = await sendMessage(page, "مرحبا بالعالم!");
+
+                await editMessage(page, msgTile, "مرحبا بالكون!");
+
+                await expect(msgTile).toMatchScreenshot(`edited-message-rtl-${direction}displayname.png`, {
+                    mask: [page.locator(".mx_MessageTimestamp")],
+                });
+            });
+        });
+    });
+});