[Breaking Change][lexical][lexical-utils]: Bug Fix: Handle canBeEmpty in $splitNodes

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

@@ -15,6 +15,7 @@ import {
 import {
   assertHTML,
   assertSelection,
+  click,
   copyToClipboard,
   focusEditor,
   html,
@@ -26,6 +27,11 @@ import {
   withExclusiveClipboardAccess,
 } from '../utils/index.mjs';
 
+async function toggleBulletList(page) {
+  await click(page, '.block-controls');
+  await click(page, '.dropdown .icon.bullet-list');
+}
+
 test.describe('HorizontalRule', () => {
   test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
   test(
@@ -209,7 +215,7 @@ test.describe('HorizontalRule', () => {
     });
   });
 
-  test('Will add a horizontal rule and split a TextNode across 2 paragraphs if the carat is in the middle of the TextNode, moving selection to the start of the new ParagraphNode.', async ({
+  test('Will add a horizontal rule and split a TextNode across 2 paragraphs if the caret is in the middle of the TextNode, moving selection to the start of the new ParagraphNode.', async ({
     page,
     isPlainText,
   }) => {
@@ -277,6 +283,142 @@ test.describe('HorizontalRule', () => {
     });
   });
 
+  test('Will add a horizontal rule and split a TextNode across 2 ListItemNode if the caret is in the middle of the TextNode, moving selection to the start of the new ParagraphNode', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await toggleBulletList(page);
+
+    await page.keyboard.type('Test');
+
+    await assertSelection(page, {
+      anchorOffset: 4,
+      anchorPath: [0, 0, 0, 0],
+      focusOffset: 4,
+      focusPath: [0, 0, 0, 0],
+    });
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <span data-lexical-text="true">Test</span>
+          </li>
+        </ul>
+      `,
+    );
+
+    await moveLeft(page, 2);
+
+    await assertSelection(page, {
+      anchorOffset: 2,
+      anchorPath: [0, 0, 0, 0],
+      focusOffset: 2,
+      focusPath: [0, 0, 0, 0],
+    });
+
+    await selectFromInsertDropdown(page, '.horizontal-rule');
+
+    await waitForSelector(page, 'hr');
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <span data-lexical-text="true">Te</span>
+          </li>
+        </ul>
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
+        <ul class="PlaygroundEditorTheme__ul">
+          <li
+            class="PlaygroundEditorTheme__listItem PlaygroundEditorTheme__ltr"
+            dir="ltr"
+            value="1">
+            <span data-lexical-text="true">st</span>
+          </li>
+        </ul>
+      `,
+    );
+
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [2, 0, 0, 0],
+      focusOffset: 0,
+      focusPath: [2, 0, 0, 0],
+    });
+  });
+
+  test('Will add a horizontal rule and split a TextNode across 2 ListItemNode if the caret is in an empty ListItemNode, moving selection to the start of the new ListItemNode (#6849)', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+    await toggleBulletList(page);
+
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [0, 0],
+      focusOffset: 0,
+      focusPath: [0, 0],
+    });
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li class="PlaygroundEditorTheme__listItem" value="1">
+            <br />
+          </li>
+        </ul>
+      `,
+    );
+
+    await selectFromInsertDropdown(page, '.horizontal-rule');
+
+    await waitForSelector(page, 'hr');
+
+    await assertHTML(
+      page,
+      html`
+        <ul class="PlaygroundEditorTheme__ul">
+          <li class="PlaygroundEditorTheme__listItem" value="1">
+            <br />
+          </li>
+        </ul>
+        <hr
+          class="PlaygroundEditorTheme__hr"
+          contenteditable="false"
+          data-lexical-decorator="true" />
+        <ul class="PlaygroundEditorTheme__ul">
+          <li class="PlaygroundEditorTheme__listItem" value="1">
+            <br />
+          </li>
+        </ul>
+      `,
+    );
+
+    await assertSelection(page, {
+      anchorOffset: 0,
+      anchorPath: [2, 0],
+      focusOffset: 0,
+      focusPath: [2, 0],
+    });
+  });
+
   test('Can copy and paste a horizontal rule', async ({page, isPlainText}) => {
     test.skip(isPlainText);
 

packages/lexical-utils/flow/LexicalUtils.js.flow

@@ -15,6 +15,8 @@ import type {
   CaretDirection,
   SiblingCaret,
   RootMode,
+  SplitAtPointCaretNextOptions,
+  PointCaret,
 } from 'lexical';
 declare export function addClassNamesToElement(
   element: HTMLElement,
@@ -102,7 +104,9 @@ declare export function $restoreEditorState(
   editorState: EditorState,
 ): void;
 
+
 declare export function $insertNodeToNearestRoot<T: LexicalNode>(node: T): T;
+declare export function $insertNodeToNearestRootAtCaret<T: LexicalNode>(node: T, caret: PointCaret<CaretDirection>, options?: SplitAtPointCaretNextOptions): T;
 
 declare export function $wrapNodeInElement(
   node: LexicalNode,

packages/lexical-utils/src/__tests__/unit/LexicalUtilsInsertNodeToNearestRoot.test.tsx

@@ -86,7 +86,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
         '<test-decorator></test-decorator>' +
         '<p><br></p>',
       initialHtml: '<p>Hello world</p>',
-      selectionOffset: 12, // Selection on text node after "Hello" world
+      selectionOffset: 'Hello world'.length, // Selection on text node after "Hello" world
       selectionPath: [0, 0],
     },
     {
@@ -96,7 +96,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
         '<test-decorator></test-decorator>' +
         '<p><span style="white-space: pre-wrap;">Hello world</span></p>',
       initialHtml: '<p>Hello world</p>',
-      selectionOffset: 0, // Selection on text node after "Hello" world
+      selectionOffset: 0, // Selection on text node before "Hello" world
       selectionPath: [0, 0],
     },
     {
@@ -175,7 +175,7 @@ describe('LexicalUtils#insertNodeToNearestRoot', () => {
         );
         $setSelection(selection);
 
-        $insertNodeToNearestRoot($createTestDecoratorNode());
+        $insertNodeToNearestRoot($createTestDecoratorNode().setIsInline(false));
 
         // Cleaning up list value attributes as it's not really needed in this test
         // and it clutters expected output

packages/lexical-utils/src/index.ts

@@ -7,12 +7,14 @@
  */
 
 import {
+  $caretFromPoint,
   $cloneWithProperties,
   $createParagraphNode,
   $getAdjacentChildCaret,
+  $getCaretInDirection,
   $getChildCaret,
-  $getChildCaretAtIndex,
   $getChildCaretOrSelf,
+  $getCollapsedCaretRange,
   $getPreviousSelection,
   $getRoot,
   $getSelection,
@@ -21,13 +23,14 @@ import {
   $isChildCaret,
   $isElementNode,
   $isRangeSelection,
-  $isRootOrShadowRoot,
   $isSiblingCaret,
-  $isTextNode,
+  $isTextPointCaret,
+  $normalizeCaret,
   $rewindSiblingCaret,
   $setSelection,
+  $setSelectionFromCaretRange,
   $setState,
-  $splitNode,
+  $splitAtPointCaretNext,
   type CaretDirection,
   type EditorState,
   ElementNode,
@@ -37,8 +40,10 @@ import {
   makeStepwiseIterator,
   type NodeCaret,
   type NodeKey,
+  PointCaret,
   RootMode,
   type SiblingCaret,
+  SplitAtPointCaretNextOptions,
   StateConfig,
   ValueOrUpdater,
 } from 'lexical';
@@ -550,53 +555,75 @@ export function $restoreEditorState(
  * If the selected insertion area is the root/shadow root node (see {@link lexical!$isRootOrShadowRoot}),
  * the node will be appended there, otherwise, it will be inserted before the insertion area.
  * If there is no selection where the node is to be inserted, it will be appended after any current nodes
- * within the tree, as a child of the root node. A paragraph node will then be added after the inserted node and selected.
+ * within the tree, as a child of the root node. A paragraph will then be added after the inserted node and selected.
  * @param node - The node to be inserted
  * @returns The node after its insertion
  */
 export function $insertNodeToNearestRoot<T extends LexicalNode>(node: T): T {
   const selection = $getSelection() || $getPreviousSelection();
-
+  let initialCaret: undefined | PointCaret<'next'>;
   if ($isRangeSelection(selection)) {
-    const {focus} = selection;
-    const focusNode = focus.getNode();
-    const focusOffset = focus.offset;
-
-    if ($isRootOrShadowRoot(focusNode)) {
-      $getChildCaretAtIndex(focusNode, focusOffset, 'next').insert(node);
-      node.selectNext();
-    } else {
-      let splitNode: ElementNode;
-      let splitOffset: number;
-      if ($isTextNode(focusNode)) {
-        splitNode = focusNode.getParentOrThrow();
-        splitOffset = focusNode.getIndexWithinParent();
-        if (focusOffset > 0) {
-          splitOffset += 1;
-          focusNode.splitText(focusOffset);
-        }
-      } else {
-        splitNode = focusNode;
-        splitOffset = focusOffset;
-      }
-      const [, rightTree] = $splitNode(splitNode, splitOffset);
-      rightTree.insertBefore(node);
-      rightTree.selectStart();
-    }
+    initialCaret = $caretFromPoint(selection.focus, 'next');
   } else {
     if (selection != null) {
       const nodes = selection.getNodes();
-      nodes[nodes.length - 1].getTopLevelElementOrThrow().insertAfter(node);
-    } else {
-      $getRoot().append(node);
+      const lastNode = nodes[nodes.length - 1];
+      if (lastNode) {
+        initialCaret = $getSiblingCaret(lastNode, 'next');
+      }
     }
-    const paragraphNode = $createParagraphNode();
-    node.insertAfter(paragraphNode);
-    paragraphNode.select();
+    initialCaret =
+      initialCaret ||
+      $getChildCaret($getRoot(), 'previous')
+        .getFlipped()
+        .insert($createParagraphNode());
   }
+  const insertCaret = $insertNodeToNearestRootAtCaret(node, initialCaret);
+  const adjacent = $getAdjacentChildCaret(insertCaret);
+  const selectionCaret = $isChildCaret(adjacent)
+    ? $normalizeCaret(adjacent)
+    : insertCaret;
+  $setSelectionFromCaretRange($getCollapsedCaretRange(selectionCaret));
   return node.getLatest();
 }
 
+/**
+ * If the insertion caret is the root/shadow root node (see {@link lexical!$isRootOrShadowRoot}),
+ * the node will be inserted there, otherwise the parent nodes will be split according to the
+ * given options.
+ * @param node - The node to be inserted
+ * @param caret - The location to insert or split from
+ * @returns The node after its insertion
+ */
+export function $insertNodeToNearestRootAtCaret<
+  T extends LexicalNode,
+  D extends CaretDirection,
+>(
+  node: T,
+  caret: PointCaret<D>,
+  options?: SplitAtPointCaretNextOptions,
+): NodeCaret<D> {
+  let insertCaret: PointCaret<'next'> = $getCaretInDirection(caret, 'next');
+  for (
+    let nextCaret: null | PointCaret<'next'> = insertCaret;
+    nextCaret;
+    nextCaret = $splitAtPointCaretNext(nextCaret, options)
+  ) {
+    insertCaret = nextCaret;
+  }
+  invariant(
+    !$isTextPointCaret(insertCaret),
+    '$insertNodeToNearestRootAtCaret: An unattached TextNode can not be split',
+  );
+  insertCaret.insert(
+    node.isInline() ? $createParagraphNode().append(node) : node,
+  );
+  return $getCaretInDirection(
+    $getSiblingCaret(node.getLatest(), 'next'),
+    caret.direction,
+  );
+}
+
 /**
  * Wraps the node into another node created from a createElementNode function, eg. $createParagraphNode
  * @param node - Node to be wrapped.

packages/lexical/flow/Lexical.js.flow

@@ -1227,7 +1227,22 @@ declare export function $getCommonAncestor<
 declare export function $extendCaretToRange<D: CaretDirection>(
   anchor: PointCaret<D>,
 ): CaretRange<D>;
-
+declare export function $getCollapsedCaretRange<D: CaretDirection>(
+  anchor: PointCaret<D>,
+): CaretRange<D>;
 declare export function $isExtendableTextPointCaret<D: CaretDirection>(
   caret: PointCaret<D>
 ): implies caret is TextPointCaret<TextNode, D>;
+
+export interface SplitAtPointCaretNextOptions {
+  $copyElementNode?: (node: ElementNode) => ElementNode;
+  $splitTextPointCaretNext?: (
+    caret: TextPointCaret<TextNode, 'next'>,
+  ) => NodeCaret<'next'>;
+  rootMode?: RootMode;
+  $shouldSplit?: (node: ElementNode, edge: 'first' | 'last') => boolean;
+}
+declare export function $splitAtPointCaretNext(
+  pointCaret: PointCaret<'next'>,
+  options?: SplitAtPointCaretNextOptions,
+): null | NodeCaret<'next'>;