[Breaking Change][lexical][lexical-link] Bug Fix: Collapse through inline elements in deleteCharacter (#7180)

Author: etrepum

packages/lexical-playground/__tests__/e2e/List.spec.mjs

@@ -14,7 +14,9 @@ import {
   moveRight,
   moveToEditorBeginning,
   moveToEditorEnd,
+  moveToLineBeginning,
   moveToParagraphEnd,
+  pressBackspace,
   redo,
   selectAll,
   selectCharacters,
@@ -1946,4 +1948,95 @@ test.describe.parallel('Nested List', () => {
       `,
     );
   });
+  test('collapseAtStart for trivial bullet list', async ({page}) => {
+    await focusEditor(page);
+    await toggleBulletList(page);
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li class="PlaygroundEditorTheme__listItem" value="1">
+            <br />
+          </li>
+        </ul>
+      `,
+    );
+    await pressBackspace(page);
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+      `,
+    );
+  });
+  test('collapseAtStart for bullet list with text', async ({page}) => {
+    await focusEditor(page);
+    await toggleBulletList(page);
+    await page.keyboard.type('Hello World');
+    await moveToLineBeginning(page);
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <span data-lexical-text="true">Hello World</span>
+          </li>
+        </ul>
+      `,
+    );
+    await pressBackspace(page);
+    await assertHTML(
+      page,
+      html`
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">Hello World</span>
+        </p>
+      `,
+    );
+  });
+  test('collapseAtStart for bullet list with text inside autolink', async ({
+    page,
+  }) => {
+    await focusEditor(page);
+    await toggleBulletList(page);
+    await page.keyboard.type('www.example.com');
+    await moveToLineBeginning(page);
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <a
+              class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
+              dir="ltr"
+              href="https://www.example.com">
+              <span data-lexical-text="true">www.example.com</span>
+            </a>
+          </li>
+        </ul>
+      `,
+    );
+    await pressBackspace(page);
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph">
+          <a
+            class="PlaygroundEditorTheme__link PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            href="https://www.example.com">
+            <span data-lexical-text="true">www.example.com</span>
+          </a>
+        </p>
+      `,
+    );
+  });
 });

packages/lexical/src/LexicalSelection.ts

@@ -1842,11 +1842,7 @@ export class RangeSelection implements BaseSelection {
         $updateCaretSelectionForUnicodeCharacter(this, isBackward);
       } else if (isBackward && anchor.offset === 0) {
         // Special handling around rich text nodes
-        const element =
-          anchor.type === 'element'
-            ? anchor.getNode()
-            : anchor.getNode().getParentOrThrow();
-        if (element.collapseAtStart(this)) {
+        if ($collapseAtStart(this, anchor.getNode())) {
           return;
         }
       }
@@ -1863,9 +1859,9 @@ export class RangeSelection implements BaseSelection {
       if (
         anchorNode.isEmpty() &&
         $isRootNode(anchorNode.getParent()) &&
-        anchorNode.getIndexWithinParent() === 0
+        anchorNode.getPreviousSibling() === null
       ) {
-        anchorNode.collapseAtStart(this);
+        $collapseAtStart(this, anchorNode);
       }
     }
   }
@@ -1972,6 +1968,30 @@ export function $getCharacterOffsets(
   return [getCharacterOffset(anchor), getCharacterOffset(focus)];
 }
 
+function $collapseAtStart(
+  selection: RangeSelection,
+  startNode: LexicalNode,
+): boolean {
+  for (
+    let node: null | LexicalNode = startNode;
+    node;
+    node = node.getParent()
+  ) {
+    if ($isElementNode(node)) {
+      if (node.collapseAtStart(selection)) {
+        return true;
+      }
+      if (!node.isInline()) {
+        break;
+      }
+    }
+    if (node.getPreviousSibling()) {
+      break;
+    }
+  }
+  return false;
+}
+
 function $swapPoints(selection: RangeSelection): void {
   const focus = selection.focus;
   const anchor = selection.anchor;

packages/lexical/src/nodes/LexicalElementNode.ts

@@ -880,9 +880,15 @@ export class ElementNode extends LexicalNode {
     return true;
   }
   /*
-   * This method controls the behavior of a the node during backwards
+   * This method controls the behavior of the node during backwards
    * deletion (i.e., backspace) when selection is at the beginning of
-   * the node (offset 0)
+   * the node (offset 0). You may use this to have the node replace
+   * itself, change its state, or do nothing. When you do make such
+   * a change, you should return true.
+   *
+   * When true is returned, the collapse phase will stop.
+   * When false is returned, and isInline() is true, and getPreviousSibling() is null,
+   * then this function will be called on its parent.
    */
   collapseAtStart(selection: RangeSelection): boolean {
     return false;