diff --git a/playwright/e2e/permalinks/permalinks.spec.ts b/playwright/e2e/permalinks/permalinks.spec.ts index e7657b1394..3f6fddbd0d 100644 --- a/playwright/e2e/permalinks/permalinks.spec.ts +++ b/playwright/e2e/permalinks/permalinks.spec.ts @@ -100,3 +100,51 @@ test.describe("permalinks", () => { }); }); }); + +test.describe("triple-click message selection", () => { + test.use({ + displayName: "Alice", + }); + + test("should select entire message line when triple-clicking on message with pills", async ({ + page, + app, + user, + bot, + }) => { + await bot.prepareClient(); + + const roomId = await app.client.createRoom({ name: "Test Room" }); + await app.client.inviteUser(roomId, bot.credentials.userId); + await app.viewRoomByName("Test Room"); + + // Send a message with user and room pills + await app.client.sendMessage( + roomId, + `Testing triple-click message selection. ` + + `User: ${permalinkPrefix}${bot.credentials.userId}, ` + + `Room: ${permalinkPrefix}${roomId}, ` + + `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` + + `and @room mention.`, + ); + + const timeline = page.locator(".mx_RoomView_timeline"); + const messageTile = timeline.locator(".mx_EventTile").last(); + + // Triple-click on the message body to select its entire content + const messageBody = messageTile.locator(".mx_EventTile_body"); + await messageBody.click({ clickCount: 3 }); + + // Get the expected text content of the message, including pills + const expectedText = await messageBody.innerText(); + + // Get the currently selected text from the page + const selectedText = await page.evaluate(() => { + const selection = window.getSelection(); + return selection ? selection.toString().trim() : ""; + }); + + // Verify that the selected text exactly matches the message content + expect(selectedText).toBe(expectedText); + }); +}); diff --git a/res/css/views/elements/_Pill.pcss b/res/css/views/elements/_Pill.pcss index d692f812a4..4b3fd3bb68 100644 --- a/res/css/views/elements/_Pill.pcss +++ b/res/css/views/elements/_Pill.pcss @@ -11,8 +11,7 @@ Please see LICENSE files in the repository root for full details. line-height: $font-17px; border-radius: $font-16px; vertical-align: text-top; - display: inline-flex; - align-items: center; + display: inline-block; box-sizing: border-box; max-width: 100%; overflow: hidden; @@ -57,6 +56,8 @@ Please see LICENSE files in the repository root for full details. margin-inline-start: -0.3em; /* Otherwise the gap is too large */ margin-inline-end: 0.2em; min-width: $font-16px; /* ensure the avatar is not compressed */ + user-select: text; + vertical-align: -2.5px; } .mx_Pill_text {