fix(richtext-lexical): copying and pasting a single block in Lexical results in an error due to duplicate ID (#14738)

Fixes #14425, #14560 (duplicated)

Which are a specific instance of the issue #14130 that wasn’t resolved
in its PR (#14137)

### Description 

When the selection is on a decoratorNode, it's synthetic. In other
words, `windows.selection` doesn't actually contain anything from the
editor, and therefore the `COPY_COMMAND` event received with `cmd+c` is
a `KeyboardEvent`, not a `ClipboardEvent`.

I resolved this with a conditional block for the case where the
selection is of type `NodeSelection`.

### Tests

I added tests for the RangeSelection case as well as for NodeSelection

Author: GermanJablo

packages/richtext-lexical/src/lexical/plugins/ClipboardPlugin/index.tsx

@@ -4,14 +4,38 @@ import { copyToClipboard } from '@lexical/clipboard'
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext.js'
 import { objectKlassEquals } from '@lexical/utils'
 import ObjectID from 'bson-objectid'
-import { COMMAND_PRIORITY_LOW, COPY_COMMAND } from 'lexical'
+import { $getSelection, $isNodeSelection, COMMAND_PRIORITY_LOW, COPY_COMMAND } from 'lexical'
 import { useEffect } from 'react'
 
 type SerializedUnknownLexicalNode = {
   children?: SerializedUnknownLexicalNode[]
   type: string
 }
 
+type LexicalClipboardData = {
+  namespace: string
+  nodes: SerializedUnknownLexicalNode[]
+}
+
+const changeIds = (node: SerializedUnknownLexicalNode) => {
+  if (
+    'fields' in node &&
+    typeof node.fields === 'object' &&
+    node.fields !== null &&
+    'id' in node.fields
+  ) {
+    node.fields.id = new ObjectID.default().toHexString()
+  } else if ('id' in node) {
+    node.id = new ObjectID.default().toHexString()
+  }
+
+  if (node.children) {
+    for (const child of node.children) {
+      changeIds(child)
+    }
+  }
+}
+
 export function ClipboardPlugin() {
   const [editor] = useLexicalComposerContext()
 
@@ -22,6 +46,32 @@ export function ClipboardPlugin() {
     return editor.registerCommand(
       COPY_COMMAND,
       (event) => {
+        // Handle decorator node case
+        const selection = $getSelection()
+        if ($isNodeSelection(selection)) {
+          const node = selection.getNodes()[0]
+
+          const serializedNode = node?.exportJSON() as SerializedUnknownLexicalNode
+          const deepCloneSerializedNode = JSON.parse(JSON.stringify(serializedNode))
+          changeIds(deepCloneSerializedNode)
+
+          const lexicalClipboardData: LexicalClipboardData = {
+            namespace: editor._config.namespace,
+            nodes: [deepCloneSerializedNode],
+          }
+
+          const stringifiedLexicalClipboardData = JSON.stringify(lexicalClipboardData)
+
+          copyToClipboard(editor, null, {
+            'application/x-lexical-editor': stringifiedLexicalClipboardData,
+            'text/plain': '',
+          }).catch((error) => {
+            throw error
+          })
+          return true
+        }
+
+        // Handle range selection case
         copyToClipboard(editor, objectKlassEquals(event, ClipboardEvent) ? event : null)
           .then(() => {
             if (!(event instanceof ClipboardEvent) || !event.clipboardData) {
@@ -35,24 +85,7 @@ export function ClipboardPlugin() {
             const lexical = JSON.parse(lexicalStringified) as {
               nodes: SerializedUnknownLexicalNode[]
             }
-            const changeIds = (node: SerializedUnknownLexicalNode) => {
-              if (
-                'fields' in node &&
-                typeof node.fields === 'object' &&
-                node.fields !== null &&
-                'id' in node.fields
-              ) {
-                node.fields.id = new ObjectID.default().toHexString()
-              } else if ('id' in node) {
-                node.id = new ObjectID.default().toHexString()
-              }
 
-              if (node.children) {
-                for (const child of node.children) {
-                  changeIds(child)
-                }
-              }
-            }
             for (const node of lexical.nodes) {
               changeIds(node)
             }

test/lexical/collections/_LexicalFullyFeatured/e2e.spec.ts

@@ -230,6 +230,70 @@ describe('Lexical Fully Featured', () => {
     await page.keyboard.type("import { APIError } from 'payload'")
     await expect(codeBlock.locator('.monaco-editor .view-overlays .squiggly-error')).toHaveCount(0)
   })
+
+  test('copy pasting a inline block within range selection should not duplicate the inline block id', async ({
+    page,
+  }) => {
+    await page.keyboard.type('Hello ')
+    await lexical.slashCommand('inline')
+    await lexical.drawer.locator('input').first().fill('World')
+    await lexical.drawer.getByText('Save changes').click()
+    await expect(lexical.drawer).toBeHidden()
+    const inlineBlock = lexical.editor.locator('.LexicalEditorTheme__inlineBlock')
+    await expect(inlineBlock).toHaveCount(1)
+
+    await page.keyboard.press('ControlOrMeta+A')
+    await page.keyboard.press('ControlOrMeta+C')
+    // needed for some reason
+    // eslint-disable-next-line playwright/no-wait-for-timeout
+    await page.waitForTimeout(1000)
+    await page.keyboard.press('ArrowRight')
+    await page.keyboard.press('ControlOrMeta+V')
+    await expect(inlineBlock).toHaveCount(2)
+    await inlineBlock.nth(1).locator('button').first().click()
+    await expect(lexical.drawer).toBeVisible()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World')
+    await lexical.drawer.locator('input').first().fill('World changed')
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World changed')
+    await lexical.drawer.getByText('Save changes').click()
+    await inlineBlock.nth(0).locator('button').first().click()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World')
+    await lexical.drawer.getByLabel('Close').click()
+    await expect(lexical.drawer).toBeHidden()
+    await inlineBlock.nth(1).locator('button').first().click()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World changed')
+  })
+
+  test('copy pasting a inline block within node selection should not duplicate the inline block id', async ({
+    page,
+  }) => {
+    await page.keyboard.type('Hello ')
+    await lexical.slashCommand('inline')
+    await lexical.drawer.locator('input').first().fill('World')
+    await lexical.drawer.getByText('Save changes').click()
+    await expect(lexical.drawer).toBeHidden()
+    const inlineBlock = lexical.editor.locator('.LexicalEditorTheme__inlineBlock')
+    await expect(inlineBlock).toHaveCount(1)
+    await inlineBlock.click()
+    await expect(lexical.drawer).toBeHidden()
+    await page.keyboard.press('ControlOrMeta+C')
+    await page.keyboard.press('ArrowRight')
+    await page.keyboard.press('ControlOrMeta+V')
+    await expect(inlineBlock).toHaveCount(2)
+    await inlineBlock.nth(1).locator('button').first().click()
+    await expect(lexical.drawer).toBeVisible()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World')
+    await lexical.drawer.locator('input').first().fill('World changed')
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World changed')
+    await lexical.drawer.getByText('Save changes').click()
+    await expect(lexical.drawer).toBeHidden()
+    await inlineBlock.nth(0).locator('button').first().click()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World')
+    await lexical.drawer.getByLabel('Close').click()
+    await expect(lexical.drawer).toBeHidden()
+    await inlineBlock.nth(1).locator('button').first().click()
+    await expect(lexical.drawer.locator('input').first()).toHaveValue('World changed')
+  })
 })
 
 describe('Lexical Fully Featured, admin panel in RTL', () => {