Fix pasting text near decorator nodes (facebook#3280)

* Fix pasting text near decorator nodes * attempt setting cursor differently
vanmeegen · Nov 1, 2022 · 0e18b29 · 0e18b29
1 parent f1744dd
commit 0e18b29
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 1 deletion.
diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs
@@ -2804,4 +2804,72 @@ test.describe('CopyAndPaste', () => {
       `,
     );
   });
+
+  test('HTML Copy + paste a paragraph element between horizontal rules', async ({
+    page,
+    isPlainText,
+  }) => {
+    test.skip(isPlainText);
+
+    await focusEditor(page);
+
+    let clipboard = {'text/html': '<hr/><hr/>'};
+
+    await pasteFromClipboard(page, clipboard);
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+        <div
+          contenteditable="false"
+          style="display: contents;"
+          data-lexical-decorator="true">
+          <hr />
+        </div>
+        <div
+          contenteditable="false"
+          style="display: contents;"
+          data-lexical-decorator="true">
+          <hr />
+        </div>
+      `,
+    );
+    await click(page, 'hr:first-of-type');
+
+    // sets focus between HRs
+    await page.keyboard.press('ArrowRight');
+
+    clipboard = {'text/html': '<p>Text between HRs</p>'};
+
+    await pasteFromClipboard(page, clipboard);
+    await assertHTML(
+      page,
+      html`
+        <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+        <div
+          contenteditable="false"
+          style="display: contents;"
+          data-lexical-decorator="true">
+          <hr />
+        </div>
+        <p
+          class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
+          dir="ltr">
+          <span data-lexical-text="true">Text between HRs</span>
+        </p>
+        <div
+          contenteditable="false"
+          style="display: contents;"
+          data-lexical-decorator="true">
+          <hr />
+        </div>
+      `,
+    );
+    await assertSelection(page, {
+      anchorOffset: 16,
+      anchorPath: [2, 0, 0],
+      focusOffset: 16,
+      focusPath: [2, 0, 0],
+    });
+  });
 });
diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
@@ -1290,7 +1290,11 @@ export class RangeSelection implements BaseSelection {
     // Time to insert the nodes!
     for (let i = 0; i < nodes.length; i++) {
       const node = nodes[i];
-      if ($isElementNode(node) && !node.isInline()) {
+      if (
+        !$isDecoratorNode(target) &&
+        $isElementNode(node) &&
+        !node.isInline()
+      ) {
         // -----
         // Heuristics for the replacement or merging of elements
         // -----