diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts index f34fa15e82..569d295b9e 100644 --- a/playwright/e2e/messages/messages.spec.ts +++ b/playwright/e2e/messages/messages.spec.ts @@ -24,7 +24,34 @@ async function sendMessage(page: Page, message: string): Promise { 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"); + const msgTile = page.locator(".mx_EventTile_last"); + await msgTile.locator(".mx_EventTile_receiptSent").waitFor(); + return msgTile; +} + +async function sendMultilineMessages(page: Page, messages: string[]) { + await page.getByRole("textbox", { name: "Send a message…" }).focus(); + for (let i = 0; i < messages.length; i++) { + await page.keyboard.type(messages[i]); + if (i < messages.length - 1) await page.keyboard.press("Shift+Enter"); + } + + await page.getByRole("button", { name: "Send message" }).click(); + + const msgTile = page.locator(".mx_EventTile_last"); + await msgTile.locator(".mx_EventTile_receiptSent").waitFor(); + return msgTile; +} + +async function replyMessage(page: Page, message: Locator, replyMessage: string): Promise { + const line = message.locator(".mx_EventTile_line"); + await line.hover(); + await line.getByRole("button", { name: "Reply", exact: true }).click(); + + await page.getByRole("textbox", { name: "Send a reply…" }).fill(replyMessage); + await page.getByRole("button", { name: "Send message" }).click(); + + const msgTile = page.locator(".mx_EventTile_last"); await msgTile.locator(".mx_EventTile_receiptSent").waitFor(); return msgTile; } @@ -88,6 +115,22 @@ test.describe("Message rendering", () => { }); }); + test("should render a reply of a LTR message", async ({ page, user, app, room }) => { + await page.goto(`#/room/${room.roomId}`); + + const msgTile = await sendMultilineMessages(page, [ + "Fist line", + "Second line", + "Third line", + "Fourth line", + ]); + + await replyMessage(page, msgTile, "response to multiline message"); + await expect(msgTile).toMatchScreenshot(`reply-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}`); @@ -122,6 +165,22 @@ test.describe("Message rendering", () => { mask: [page.locator(".mx_MessageTimestamp")], }); }); + + test("should render a reply of a RTL message", async ({ page, user, app, room }) => { + await page.goto(`#/room/${room.roomId}`); + + const msgTile = await sendMultilineMessages(page, [ + "مرحبا بالعالم!", + "مرحبا بالعالم!", + "مرحبا بالعالم!", + "مرحبا بالعالم!", + ]); + + await replyMessage(page, msgTile, "مرحبا بالعالم!"); + await expect(msgTile).toMatchScreenshot(`reply-message-trl-${direction}displayname.png`, { + mask: [page.locator(".mx_MessageTimestamp")], + }); + }); }); }); }); diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png new file mode 100644 index 0000000000..eebd533079 Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png new file mode 100644 index 0000000000..ed0c69fb8d Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/reply-message-ltr-rtldisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png new file mode 100644 index 0000000000..1a0f5577b6 Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-ltrdisplayname-linux.png differ diff --git a/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png new file mode 100644 index 0000000000..587170ee1c Binary files /dev/null and b/playwright/snapshots/messages/messages.spec.ts/reply-message-trl-rtldisplayname-linux.png differ diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss index 0b8b984a95..1c53246a4d 100644 --- a/res/css/views/elements/_ReplyChain.pcss +++ b/res/css/views/elements/_ReplyChain.pcss @@ -25,7 +25,7 @@ limitations under the License. white-space: nowrap; /* Enforce 'In reply to' to be a single line */ color: $secondary-content; transition: color ease 0.15s; - font-weight: var(--cpd-font-weight-normal); + font-weight: var(--cpd-font-weight-regular); text-decoration: inherit; &:hover { diff --git a/res/css/views/rooms/_EventTile.pcss b/res/css/views/rooms/_EventTile.pcss index 62204b52c3..155c6cc37e 100644 --- a/res/css/views/rooms/_EventTile.pcss +++ b/res/css/views/rooms/_EventTile.pcss @@ -126,7 +126,8 @@ $left-gutter: 64px; .mx_ReplyChain--expanded { .mx_EventTile_body { - display: block; + /* !important needed to override .mx_ReplyTile .mx_EventTile_content .mx_EventTile_body */ + display: block !important; overflow-y: scroll; } @@ -899,7 +900,7 @@ $left-gutter: 64px; object-fit: contain; object-position: left top; - /* Override the default colors of the 'github-markdown-css' library + /* Override the default colors of the 'github-markdown-css' library (#fff for light theme, #000 for dark theme) to match the inherited theme */ background-color: inherit !important; } diff --git a/res/css/views/rooms/_ReplyTile.pcss b/res/css/views/rooms/_ReplyTile.pcss index 980e0b00d3..c60a2a021f 100644 --- a/res/css/views/rooms/_ReplyTile.pcss +++ b/res/css/views/rooms/_ReplyTile.pcss @@ -77,6 +77,11 @@ limitations under the License. font-size: $font-14px !important; /* Override the big emoji override */ } + // in order to keep the message on two lines, we need to make the body inline + .mx_EventTile_body { + display: inline; + } + // Hide line numbers and edited indicator .mx_EventTile_lineNumbers, .mx_EventTile_edited {