[lexical] Bug Fix: Merge pasted paragraph into empty quote (#6367)

Co-authored-by: Bob Ippolito <bob@redivi.com>
facebook · Aug 2, 2024 · 3c53e64 · 3c53e64
1 parent f373759
commit 3c53e64
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 4 deletions.
diff --git a/packages/lexical-list/src/LexicalListItemNode.ts b/packages/lexical-list/src/LexicalListItemNode.ts
@@ -404,6 +404,10 @@ export class ListItemNode extends ElementNode {
   createParentElementNode(): ElementNode {
     return $createListNode('bullet');
   }
+
+  canMergeWhenEmpty(): true {
+    return true;
+  }
 }
 
 function $setListItemThemeClassNames(

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs
@@ -914,4 +914,37 @@ test.describe('CopyAndPaste', () => {
       `,
     );
   });
+
+  test('Copy and paste paragraph into quote', async ({page, isPlainText}) => {
+    test.skip(isPlainText);
+    await focusEditor(page);
+
+    await page.keyboard.type('Hello world');
+    await page.keyboard.press('Enter');
+    await page.keyboard.type('Some text');
+
+    await selectAll(page);
+
+    const clipboard = await copyToClipboard(page);
+
+    await page.keyboard.type('> ');
+
+    await pasteFromClipboard(page, clipboard);
+
+    await assertHTML(
+      page,
+      html`
+        <blockquote
+          class="PlaygroundEditorTheme__quote PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">Hello world</span>
+        </blockquote>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">Some text</span>
+        </p>
+      `,
+    );
+  });
 });
diff --git a/packages/lexical-rich-text/src/index.ts b/packages/lexical-rich-text/src/index.ts
@@ -202,6 +202,10 @@ export class QuoteNode extends ElementNode {
     this.replace(paragraph);
     return true;
   }
+
+  canMergeWhenEmpty(): true {
+    return true;
+  }
 }
 
 export function $createQuoteNode(): QuoteNode {

diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
@@ -1255,14 +1255,12 @@ export class RangeSelection implements BaseSelection {
     const blocksParent = $wrapInlineNodes(nodes);
     const nodeToSelect = blocksParent.getLastDescendant()!;
     const blocks = blocksParent.getChildren();
-    const isLI = (node: LexicalNode) =>
-      '__value' in node && '__checked' in node;
     const isMergeable = (node: LexicalNode): node is ElementNode =>
       $isElementNode(node) &&
       INTERNAL_$isBlock(node) &&
       !node.isEmpty() &&
       $isElementNode(firstBlock) &&
-      (!firstBlock.isEmpty() || isLI(firstBlock));
+      (!firstBlock.isEmpty() || firstBlock.canMergeWhenEmpty());
 
     const shouldInsert = !$isElementNode(firstBlock) || !firstBlock.isEmpty();
     const insertedParagraph = shouldInsert ? this.insertParagraph() : null;
@@ -1284,7 +1282,7 @@ export class RangeSelection implements BaseSelection {
     if (
       insertedParagraph &&
       $isElementNode(lastInsertedBlock) &&
-      (isLI(insertedParagraph) || INTERNAL_$isBlock(lastToInsert))
+      (insertedParagraph.canMergeWhenEmpty() || INTERNAL_$isBlock(lastToInsert))
     ) {
       lastInsertedBlock.append(...insertedParagraph.getChildren());
       insertedParagraph.remove();

diff --git a/packages/lexical/src/nodes/LexicalElementNode.ts b/packages/lexical/src/nodes/LexicalElementNode.ts
@@ -582,6 +582,23 @@ export class ElementNode extends LexicalNode {
   ): boolean {
     return false;
   }
+
+  /**
+   * Determines whether this node, when empty, can merge with a first block
+   * of nodes being inserted.
+   *
+   * This method is specifically called in {@link RangeSelection.insertNodes}
+   * to determine merging behavior during nodes insertion.
+   *
+   * @example
+   * // In a ListItemNode or QuoteNode implementation:
+   * canMergeWhenEmpty(): true {
+   *  return true;
+   * }
+   */
+  canMergeWhenEmpty(): boolean {
+    return false;
+  }
 }
 
 export function $isElementNode(