Fix list selection when first node followed by an element node (#5583)

packages/lexical-playground/__tests__/regression/5583-select-list-followed-by-element-node.spec.mjs

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {
+  click,
+  dragMouse,
+  focusEditor,
+  initialize,
+  mouseMoveToSelector,
+  selectFromInsertDropdown,
+  selectorBoundingBox,
+  test,
+  waitForSelector,
+} from '../utils/index.mjs';
+
+async function toggleBulletList(page) {
+  await click(page, '.block-controls');
+  await click(page, '.dropdown .icon.bullet-list');
+}
+test.describe('Regression test #5251', () => {
+  test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+  test(`Element node in the middle of a bullet list and selecting doesn't crash`, async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+
+    page.on('console', (msg) => {
+      if (msg.type() === 'error') {
+        if (
+          msg.text().includes('error #68') ||
+          msg.text().includes('getNodesBetween: ancestor is null')
+        ) {
+          test.fail();
+        }
+      }
+    });
+
+    await toggleBulletList(page);
+    await page.keyboard.type('one');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('two');
+    await page.keyboard.press('Enter');
+    await selectFromInsertDropdown(page, '.horizontal-rule');
+    await waitForSelector(page, 'hr');
+    await page.keyboard.type('three');
+    await page.keyboard.press('Enter');
+    await mouseMoveToSelector(page, 'li:has-text("one")');
+    await page.mouse.down();
+    await dragMouse(
+      page,
+      await selectorBoundingBox(page, 'li:has-text("one")'),
+      await selectorBoundingBox(page, 'li:has-text("three")'),
+      'middle',
+      'end',
+    );
+  });
+});

packages/lexical/src/LexicalNode.ts

@@ -584,8 +584,11 @@ export class LexicalNode {
     const isBefore = this.isBefore(targetNode);
     const nodes = [];
     const visited = new Set();
-    let node: LexicalNode | this = this;
+    let node: LexicalNode | this | null = this;
     while (true) {
+      if (node === null) {
+        break;
+      }
       const key = node.__key;
       if (!visited.has(key)) {
         visited.add(key);
@@ -594,7 +597,7 @@ export class LexicalNode {
       if (node === targetNode) {
         break;
       }
-      const child = $isElementNode(node)
+      const child: LexicalNode | null = $isElementNode(node)
         ? isBefore
           ? node.getFirstChild()
           : node.getLastChild()
@@ -603,22 +606,22 @@ export class LexicalNode {
         node = child;
         continue;
       }
-      const nextSibling = isBefore
+      const nextSibling: LexicalNode | null = isBefore
         ? node.getNextSibling()
         : node.getPreviousSibling();
       if (nextSibling !== null) {
         node = nextSibling;
         continue;
       }
-      const parent = node.getParentOrThrow();
+      const parent: LexicalNode | null = node.getParentOrThrow();
       if (!visited.has(parent.__key)) {
         nodes.push(parent);
       }
       if (parent === targetNode) {
         break;
       }
       let parentSibling = null;
-      let ancestor: ElementNode | null = parent;
+      let ancestor: LexicalNode | null = parent;
       do {
         if (ancestor === null) {
           invariant(false, 'getNodesBetween: ancestor is null');
@@ -631,6 +634,8 @@ export class LexicalNode {
           if (parentSibling === null && !visited.has(ancestor.__key)) {
             nodes.push(ancestor);
           }
+        } else {
+          break;
         }
       } while (parentSibling === null);
       node = parentSibling;