From 0e18b29ee623d671d20922bc63a85db9491195e4 Mon Sep 17 00:00:00 2001
From: Ruslan Piliuta <piliuta.r@gmail.com>
Date: Tue, 1 Nov 2022 20:29:07 +0200
Subject: [PATCH] Fix pasting text near decorator nodes (#3280)

* Fix pasting text near decorator nodes

* attempt setting cursor differently
---
 .../__tests__/e2e/CopyAndPaste.spec.mjs       | 68 +++++++++++++++++++
 packages/lexical/src/LexicalSelection.ts      |  6 +-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste.spec.mjs
index 333572d1a1b..b6c3e34af31 100644
--- 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
index d33b2a78872..ecc602e9a6c 100644
--- 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
         // -----