fix: triple click around inline elements (links) (facebook#7055)

GermanJablo · Jan 15, 2025 · 415c576 · 415c576
1 parent a3ef4f3
commit 415c576
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 5 deletions.
diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs
@@ -578,6 +578,53 @@ test.describe.parallel('Selection', () => {
     );
   });
 
+  test('Can adjust tripple click selection with', async ({
+    page,
+    isPlainText,
+    isCollab,
+  }) => {
+    test.skip(isPlainText || isCollab);
+
+    await pasteFromClipboard(page, {
+      'text/html': `<p><a href="https://test.com">Hello</a>world</p><p>!</p>`,
+    });
+
+    await page
+      .locator('div[contenteditable="true"] > p')
+      .first()
+      .click({clickCount: 3});
+
+    await pressToggleBold(page);
+
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <a
+            class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            href="https://test.com">
+            <strong
+              class="PlaygroundEditorTheme__textBold"
+              data-lexical-text="true">
+              Hello
+            </strong>
+          </a>
+          <strong
+            class="PlaygroundEditorTheme__textBold"
+            data-lexical-text="true">
+            world
+          </strong>
+        </p>
+        <p class="PlaygroundEditorTheme__paragraph">
+          <span data-lexical-text="true">!</span>
+        </p>
+      `,
+    );
+  });
+
   test('Select all from Node selection #4658', async ({page, isPlainText}) => {
     // TODO selectAll is bad for Linux #4665
     test.skip(isPlainText || IS_LINUX);

diff --git a/packages/lexical/src/LexicalEvents.ts b/packages/lexical/src/LexicalEvents.ts
@@ -77,6 +77,7 @@ import {
 } from './LexicalSelection';
 import {getActiveEditor, updateEditorSync} from './LexicalUpdates';
 import {
+  $findMatchingParent,
   $flushMutations,
   $getNodeByKey,
   $isSelectionCapturedInDecorator,
@@ -189,7 +190,6 @@ let collapsedSelectionFormat: [number, string, number, NodeKey, number] = [
 // work as intended between different browsers and across word, line and character
 // boundary/formats. It also is important for text replacement, node schemas and
 // composition mechanics.
-
 function $shouldPreventDefaultAndInsertText(
   selection: RangeSelection,
   domTargetRange: null | StaticRange,
@@ -447,10 +447,12 @@ function onClick(event: PointerEvent, editor: LexicalEditor): void {
           const focus = selection.focus;
           const focusNode = focus.getNode();
           if (anchorNode !== focusNode) {
-            if ($isElementNode(anchorNode)) {
-              anchorNode.select(0);
-            } else {
-              anchorNode.getParentOrThrow().select(0);
+            const parentNode = $findMatchingParent(
+              anchorNode,
+              (node) => $isElementNode(node) && !node.isInline(),
+            );
+            if ($isElementNode(parentNode)) {
+              parentNode.select(0);
             }
           }
         }