diff --git a/playwright/e2e/messages/messages.spec.ts b/playwright/e2e/messages/messages.spec.ts
index f34fa15e82cf0aea962c307e5a1d1ba6684d537e..569d295b9e9ee6e19a7c86b20e19ac04f7496dca 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<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");
+ 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<Locator> {
+ 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 0000000000000000000000000000000000000000..eebd5330793f8e7e77913472ccd918d3f4533451
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 0000000000000000000000000000000000000000..ed0c69fb8dd2e77adf030982d105f436eed10ea9
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 0000000000000000000000000000000000000000..1a0f5577b68f8e7079b9c1164fbc6fd867c9229c
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 0000000000000000000000000000000000000000..587170ee1cef02cacd74eef12b2634442714b3c5
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 0b8b984a95a8d61ee47b4b01f46665f645c0ca92..1c53246a4d470f6c26add7b685b5dd753bed7acf 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 62204b52c34c209005b9d68bab402c1bbba126e3..155c6cc37e86b3dd57e3a67e294b21cc4ee1470f 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 980e0b00d33dc6588d546cab49dc8b5c09d54c54..c60a2a021fd4ed0e44c1ce4dea75ac332e5bfa0f 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 {