Paste decorators before empty text nodes (facebook#4672)

fforres · Aug 7, 2023 · 565d580 · 565d580
1 parent d4b1922
commit 565d580
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/lexical/CopyAndPaste.spec.mjs
@@ -20,9 +20,11 @@ import {
  focusEditor,
  html,
  initialize,
+ insertYouTubeEmbed,
  IS_LINUX,
  pasteFromClipboard,
  test,
+ YOUTUBE_SAMPLE_URL,
 } from '../../../utils/index.mjs';
 
 test.describe('CopyAndPaste', () => {
@@ -855,4 +857,51 @@ test.describe('CopyAndPaste', () => {
  `,
  );
  });
+
+ test('Pasting a decorator node on a blank line inserts before the line', async ({
+ page,
+ isPlainText,
+ }) => {
+ test.skip(isPlainText);
+
+ // copying and pasting the node is easier than creating the clipboard data
+ await focusEditor(page);
+ await insertYouTubeEmbed(page, YOUTUBE_SAMPLE_URL);
+ await page.keyboard.press('ArrowLeft'); // this selects the node
+ const clipboard = await copyToClipboard(page);
+ await page.keyboard.press('ArrowRight'); // this moves to a new line (empty paragraph node)
+ await pasteFromClipboard(page, clipboard);
+
+ await assertHTML(
+ page,
+ html`
+ <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+ <div contenteditable="false" data-lexical-decorator="true">
+ <div class="PlaygroundEditorTheme__embedBlock">
+ <iframe
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen=""
+ frameborder="0"
+ height="315"
+ src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw"
+ title="YouTube video"
+ width="560"></iframe>
+ </div>
+ </div>
+ <div contenteditable="false" data-lexical-decorator="true">
+ <div class="PlaygroundEditorTheme__embedBlock">
+ <iframe
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen=""
+ frameborder="0"
+ height="315"
+ src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw"
+ title="YouTube video"
+ width="560"></iframe>
+ </div>
+ </div>
+ <p class="PlaygroundEditorTheme__paragraph"><br /></p>
+ `,
+ );
+ });
 });
diff --git a/packages/lexical/src/LexicalSelection.ts b/packages/lexical/src/LexicalSelection.ts
@@ -1655,7 +1655,11 @@ export class RangeSelection implements BaseSelection {
  if ($isElementNode(target) && !target.isInline()) {
  lastNode = node;
  if ($isDecoratorNode(node) && !node.isInline()) {
- target = target.insertAfter(node, false);
+ if (nodes.length === 1 && target.canBeEmpty() && target.isEmpty()) {
+ target = target.insertBefore(node, false);
+ } else {
+ target = target.insertAfter(node, false);
+ }
  } else if (!$isElementNode(node)) {
  const firstChild = target.getFirstChild();
  if (firstChild !== null) {