🐛(frontend) fix selection click past end of content

On Chrome, when we click at the end of a line,
the cursor is placed at the beginning of the line.
We fix this behavior, now the cursor is placed
at the end of the line.

Author: AntoLC

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to
 ## Fixed
 
 - 🐛(back) validate document content in serializer #822
+- 🐛(frontend) fix selection click past end of content #840
 
 ## [3.0.0] - 2025-03-28
 

src/frontend/apps/e2e/__tests__/app-impress/config.spec.ts

@@ -134,7 +134,7 @@ test.describe('Config', () => {
     await createDoc(page, 'doc-ai-feature', browserName, 1);
 
     await page.locator('.bn-block-outer').last().fill('Anything');
-    await page.getByText('Anything').dblclick();
+    await page.getByText('Anything').selectText();
     expect(
       await page.locator('button[data-test="convertMarkdown"]').count(),
     ).toBe(1);

src/frontend/apps/e2e/__tests__/app-impress/doc-editor.spec.ts

@@ -25,7 +25,11 @@ test.describe('Doc Editor', () => {
     await editor.click();
     await editor.fill('test content');
 
-    await editor.getByText('test content').dblclick();
+    await editor
+      .getByText('test content', {
+        exact: true,
+      })
+      .selectText();
 
     const toolbar = page.locator('.bn-formatting-toolbar');
     await expect(toolbar.locator('button[data-test="bold"]')).toBeVisible();
@@ -126,7 +130,7 @@ test.describe('Doc Editor', () => {
 
     await expect(editor.getByText('[test markdown]')).toBeVisible();
 
-    await editor.getByText('[test markdown]').dblclick();
+    await editor.getByText('[test markdown]').selectText();
     await page.locator('button[data-test="convertMarkdown"]').click();
 
     await expect(editor.getByText('[test markdown]')).toBeHidden();
@@ -219,11 +223,8 @@ test.describe('Doc Editor', () => {
     await editor.fill('Hello World Doc persisted 2');
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
 
-    await page.goto('/');
-
-    await goToGridDoc(page, {
-      title: doc,
-    });
+    const urlDoc = page.url();
+    await page.goto(urlDoc);
 
     await expect(editor.getByText('Hello World Doc persisted 2')).toBeVisible();
   });
@@ -297,7 +298,7 @@ test.describe('Doc Editor', () => {
     await page.locator('.bn-block-outer').last().fill('Hello World');
 
     const editor = page.locator('.ProseMirror');
-    await editor.getByText('Hello').dblclick();
+    await editor.getByText('Hello').selectText();
 
     await page.getByRole('button', { name: 'AI' }).click();
 
@@ -380,7 +381,7 @@ test.describe('Doc Editor', () => {
       await page.locator('.bn-block-outer').last().fill('Hello World');
 
       const editor = page.locator('.ProseMirror');
-      await editor.getByText('Hello').dblclick();
+      await editor.getByText('Hello').selectText();
 
       /* eslint-disable playwright/no-conditional-expect */
       /* eslint-disable playwright/no-conditional-in-test */

src/frontend/apps/e2e/__tests__/app-impress/doc-search.spec.ts

@@ -86,7 +86,7 @@ test.describe('Document search', () => {
     const editor = page.locator('.ProseMirror');
     await editor.click();
     await editor.fill('Hello world');
-    await editor.getByText('Hello world').dblclick();
+    await editor.getByText('Hello world').selectText();
 
     await page.keyboard.press('Control+k');
     await expect(page.getByRole('textbox', { name: 'Edit URL' })).toBeVisible();

src/frontend/apps/impress/src/features/docs/doc-editor/styles.tsx

@@ -105,6 +105,12 @@ export const cssEditor = (readonly: boolean) => css`
     padding: 2px;
     border-radius: 4px;
   }
+  & .bn-inline-content {
+    width: 100%;
+  }
+  .bn-block-content[data-content-type='checkListItem'] > div {
+    width: 100%;
+  }
 
   @media screen and (width <= 768px) {
     & .bn-editor {