Fix insertNodes after selection swap (#5175)

packages/lexical-selection/src/__tests__/unit/LexicalSelectionHelpers.test.ts

@@ -15,13 +15,15 @@ import {
 import {
   $createLineBreakNode,
   $createParagraphNode,
+  $createRangeSelection,
   $createTextNode,
   $getNodeByKey,
   $getRoot,
   $getSelection,
   $insertNodes,
   $isNodeSelection,
   $isRangeSelection,
+  $setSelection,
   RangeSelection,
   TextNode,
 } from 'lexical';
@@ -30,6 +32,7 @@ import {
   $createTestElementNode,
   $createTestShadowRootNode,
   createTestEditor,
+  createTestHeadlessEditor,
   TestDecoratorNode,
 } from 'lexical/src/__tests__/utils';
 
@@ -2669,6 +2672,35 @@ describe('insertNodes', () => {
         '<p dir="ltr"><span data-lexical-text="true">Text after</span></p>',
     );
   });
+
+  it('can insert when previous selection was null', async () => {
+    const editor = createTestHeadlessEditor();
+    await editor.update(() => {
+      const selection = $createRangeSelection();
+      selection.anchor.set('root', 0, 'element');
+      selection.focus.set('root', 0, 'element');
+
+      selection.insertNodes([
+        $createParagraphNode().append($createTextNode('Text')),
+      ]);
+
+      expect($getRoot().getTextContent()).toBe('Text');
+
+      $setSelection(null);
+    });
+    await editor.update(() => {
+      const selection = $createRangeSelection();
+      const text = $getRoot().getLastDescendant();
+      selection.anchor.set(text.getKey(), 0, 'text');
+      selection.focus.set(text.getKey(), 0, 'text');
+
+      selection.insertNodes([
+        $createParagraphNode().append($createTextNode('Before ')),
+      ]);
+
+      expect($getRoot().getTextContent()).toBe('Before Text');
+    });
+  });
 });
 
 describe('$patchStyleText', () => {

packages/lexical/src/LexicalSelection.ts

@@ -1522,12 +1522,18 @@ export class RangeSelection implements BaseSelection {
    *
    * @param nodes - the nodes to insert
    */
-  insertNodes(nodes: Array<LexicalNode>) {
+  insertNodes(nodes: Array<LexicalNode>): void {
     if (nodes.length === 0) {
       return;
     }
     if (this.anchor.key === 'root') {
       this.insertParagraph();
+      const selection = $getSelection();
+      invariant(
+        $isRangeSelection(selection),
+        'Expected RangeSelection after insertParagraph',
+      );
+      return selection.insertNodes(nodes);
     }
     const firstBlock = $getAncestor(this.anchor.getNode(), INTERNAL_$isBlock)!;
 

packages/lexical/src/__tests__/utils/index.tsx

@@ -8,6 +8,7 @@
 
 import {CodeHighlightNode, CodeNode} from '@lexical/code';
 import {HashtagNode} from '@lexical/hashtag';
+import {createHeadlessEditor} from '@lexical/headless';
 import {AutoLinkNode, LinkNode} from '@lexical/link';
 import {ListItemNode, ListNode} from '@lexical/list';
 import {OverflowNode} from '@lexical/overflow';
@@ -504,6 +505,15 @@ export function createTestEditor(
   return editor;
 }
 
+export function createTestHeadlessEditor(): LexicalEditor {
+  return createHeadlessEditor({
+    namespace: '',
+    onError: (error) => {
+      throw error;
+    },
+  });
+}
+
 export function $assertRangeSelection(selection): RangeSelection {
   if (!$isRangeSelection(selection)) {
     throw new Error(`Expected RangeSelection, got ${selection}`);