diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts index bd56d772e8b..f34fa15e82c 100644 --- a/playwright/e2e/messages/messages.spec.ts +++ b/playwright/e2e/messages/messages.spec.ts @@ -69,6 +69,13 @@ test.describe("Message rendering", () => { await expect(msgTile).toMatchScreenshot(`emote-ltr-${direction}displayname.png`); }); + test("should render an LTR rich text emote", async ({ page, user, app, room }) => { + await page.goto(`#/room/${room.roomId}`); + + const msgTile = await sendMessage(page, "/me lays a *free range* egg"); + await expect(msgTile).toMatchScreenshot(`emote-rich-ltr-${direction}displayname.png`); + }); + test("should render an edited LTR message", async ({ page, user, app, room }) => { await page.goto(`#/room/${room.roomId}`); @@ -97,6 +104,13 @@ test.describe("Message rendering", () => { await expect(msgTile).toMatchScreenshot(`emote-rtl-${direction}displayname.png`); }); + test("should render a richtext RTL emote", async ({ page, user, app, room }) => { + await page.goto(`#/room/${room.roomId}`); + + const msgTile = await sendMessage(page, "/me أضع بيضة *حرة النطاق*"); + await expect(msgTile).toMatchScreenshot(`emote-rich-rtl-${direction}displayname.png`); + }); + test("should render an edited RTL message", async ({ page, user, app, room }) => { await page.goto(`#/room/${room.roomId}`); diff --git a/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png new file mode 100644 index 00000000000..8cc8d6e0887 Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png new file mode 100644 index 00000000000..feb0651650b Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/emote-rich-ltr-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png new file mode 100644 index 00000000000..181e1fb9cab Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png new file mode 100644 index 00000000000..ffae099bdc6 Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/emote-rich-rtl-rtldisplayname-linux.png differ diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 810a00ebdd8..62204b52c34 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -787,6 +787,17 @@ $left-gutter: 64px; ul { list-style-type: disc; } + + /* override styles from the base markdown CSS that put markdown content on its own line, + as this isn't what we want for richtext emote content. + */ + &::before { + display: none; + } + + &::after { + display: none; + } } }