[lexical-rich-text] Bug Fix: HeadingNode.insertNewAfter (#6435)

facebook · Jul 24, 2024 · 5a7d9c7 · 5a7d9c7
1 parent 24b58d8
commit 5a7d9c7
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/packages/lexical-rich-text/src/__tests__/unit/LexicalHeadingNode.test.ts b/packages/lexical-rich-text/src/__tests__/unit/LexicalHeadingNode.test.ts
@@ -84,7 +84,7 @@ describe('LexicalHeadingNode tests', () => {
       });
     });
 
-    test('HeadingNode.insertNewAfter()', async () => {
+    test('HeadingNode.insertNewAfter() empty', async () => {
       const {editor} = testEnv;
       let headingNode: HeadingNode;
       await editor.update(() => {
@@ -106,6 +106,56 @@ describe('LexicalHeadingNode tests', () => {
       );
     });
 
+    test('HeadingNode.insertNewAfter() middle', async () => {
+      const {editor} = testEnv;
+      let headingNode: HeadingNode;
+      await editor.update(() => {
+        const root = $getRoot();
+        headingNode = new HeadingNode('h1');
+        const headingTextNode = $createTextNode('hello world');
+        root.append(headingNode.append(headingTextNode));
+        headingTextNode.select(5, 5);
+      });
+      expect(testEnv.outerHTML).toBe(
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1></div>',
+      );
+      await editor.update(() => {
+        const selection = $getSelection() as RangeSelection;
+        const result = headingNode.insertNewAfter(selection);
+        expect(result).toBeInstanceOf(HeadingNode);
+        expect(result.getDirection()).toEqual(headingNode.getDirection());
+      });
+      expect(testEnv.outerHTML).toBe(
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello world</span></h1><h1><br></h1></div>',
+      );
+    });
+
+    test('HeadingNode.insertNewAfter() end', async () => {
+      const {editor} = testEnv;
+      let headingNode: HeadingNode;
+      await editor.update(() => {
+        const root = $getRoot();
+        headingNode = new HeadingNode('h1');
+        const headingTextNode1 = $createTextNode('hello');
+        const headingTextNode2 = $createTextNode(' world');
+        headingTextNode2.setFormat('bold');
+        root.append(headingNode.append(headingTextNode1, headingTextNode2));
+        headingTextNode2.selectEnd();
+      });
+      expect(testEnv.outerHTML).toBe(
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1></div>',
+      );
+      await editor.update(() => {
+        const selection = $getSelection() as RangeSelection;
+        const result = headingNode.insertNewAfter(selection);
+        expect(result).toBeInstanceOf(ParagraphNode);
+        expect(result.getDirection()).toEqual(headingNode.getDirection());
+      });
+      expect(testEnv.outerHTML).toBe(
+        '<div contenteditable="true" style="user-select: text; white-space: pre-wrap; word-break: break-word;" data-lexical-editor="true"><h1 dir="ltr"><span data-lexical-text="true">hello</span><strong data-lexical-text="true"> world</strong></h1><p><br></p></div>',
+      );
+    });
+
     test('$createHeadingNode()', async () => {
       const {editor} = testEnv;
       await editor.update(() => {

diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -355,8 +355,14 @@ export class HeadingNode extends ElementNode {
     restoreSelection = true,
   ): ParagraphNode | HeadingNode {
     const anchorOffet = selection ? selection.anchor.offset : 0;
+    const lastDesc = this.getLastDescendant();
+    const isAtEnd =
+      !lastDesc ||
+      (selection &&
+        selection.anchor.key === lastDesc.getKey() &&
+        anchorOffet === lastDesc.getTextContentSize());
     const newElement =
-      anchorOffet === this.getTextContentSize() || !selection
+      isAtEnd || !selection
         ? $createParagraphNode()
         : $createHeadingNode(this.getTag());
     const direction = this.getDirection();