fix(ui): copy & pasting block content duplicates array items in editor UI (#15941)

**What?**
When copying a block row that contains an array field and pasting it
into a new block of the same type, the array items in the pasted block
appeared doubled in the UI (e.g. 3 items → 6 items) immediately after
pasting. After saving, the duplicates disappeared since the persisted
data was always correct, making this a pure UI state issue.

**Why?**
When pasting a block row, `mergeFormStateFromClipboard` intentionally
skips `.id` fields to avoid overwriting the target block's identity.
However, the condition clipboardPath.endsWith('.id') was too broad. It
skipped **all** `.id` paths, including nested array item IDs inside the
block (e.g. `ctas.0.buttons.0.id`).

This left the pasted block's array field with the correct rows metadata
(copied from clipboard, containing the source block's IDs), but no
corresponding .id form state entries. On the next onChange, the server
rebuilt form state from the submitted data, couldn't match any array
rows by ID (since the `.id` fields were missing), and marked all of them
as `addedByServer: true`. When the server response was merged back via
`mergeServerFormState`, those rows were appended to the already-existing
client rows doubling them.

**How?**
Changed the skip condition from matching any `.id` path to matching only
the direct block row ID:

`- (!pasteIntoField && clipboardPath.endsWith('.id'))`
`+ (!pasteIntoField && clipboardPath === `${pathToReplace}.id`)`
Nested IDs now fall through to the existing ID-regeneration logic, which
assigns fresh IDs and updates the `rows` metadata. The server can then
match the rows by their new IDs, so no duplication occurs on merge. The
target block's direct ID is still protected from being overwritten.

A unit test was added to `mergeFormStateFromClipboard.spec.ts` covering
the exact scenario.

Fixes #15940

Author: LeonGatt

packages/ui/src/elements/ClipboardAction/mergeFormStateFromClipboard.spec.ts

@@ -233,6 +233,114 @@ describe('mergeFormStateFromClipboard', () => {
     })
   })
 
+  describe('block row paste with nested array', () => {
+    it('should regenerate nested array item IDs when pasting a block row', () => {
+      const copiedBlockID = new ObjectId().toHexString()
+      const copiedArrayItemID1 = new ObjectId().toHexString()
+      const copiedArrayItemID2 = new ObjectId().toHexString()
+      const copiedArrayItemID3 = new ObjectId().toHexString()
+      const targetBlockID = new ObjectId().toHexString()
+
+      // Target form state: block at index 1 with empty buttons array
+      const formState: FormState = {
+        ctas: {
+          valid: true,
+          value: 2,
+          initialValue: 2,
+          rows: [
+            { id: copiedBlockID, blockType: 'callToAction', isLoading: false },
+            { id: targetBlockID, blockType: 'callToAction', isLoading: false },
+          ],
+        },
+        'ctas.0': { value: 'callToAction', valid: true },
+        'ctas.0.id': { value: copiedBlockID, valid: true },
+        'ctas.0.buttons': {
+          valid: true,
+          value: 3,
+          rows: [
+            { id: copiedArrayItemID1, isLoading: false },
+            { id: copiedArrayItemID2, isLoading: false },
+            { id: copiedArrayItemID3, isLoading: false },
+          ],
+        },
+        'ctas.0.buttons.0.id': { value: copiedArrayItemID1, valid: true },
+        'ctas.0.buttons.1.id': { value: copiedArrayItemID2, valid: true },
+        'ctas.0.buttons.2.id': { value: copiedArrayItemID3, valid: true },
+        'ctas.1': { value: 'callToAction', valid: true },
+        'ctas.1.id': { value: targetBlockID, valid: true },
+        'ctas.1.buttons': {
+          valid: true,
+          value: 0,
+          rows: [],
+        },
+      }
+
+      // Clipboard: block row 0 (source) with 3 buttons
+      const clipboardData: ClipboardPasteData = {
+        type: 'blocks',
+        path: 'ctas',
+        blocks: [],
+        rowIndex: 0,
+        data: {
+          'ctas.0': { value: 'callToAction', valid: true },
+          'ctas.0.id': { value: copiedBlockID, valid: true },
+          'ctas.0.buttons': {
+            valid: true,
+            value: 3,
+            rows: [
+              { id: copiedArrayItemID1, isLoading: false },
+              { id: copiedArrayItemID2, isLoading: false },
+              { id: copiedArrayItemID3, isLoading: false },
+            ],
+          },
+          'ctas.0.buttons.0.id': { value: copiedArrayItemID1, valid: true },
+          'ctas.0.buttons.0.label': { value: 'Button 1', valid: true },
+          'ctas.0.buttons.1.id': { value: copiedArrayItemID2, valid: true },
+          'ctas.0.buttons.1.label': { value: 'Button 2', valid: true },
+          'ctas.0.buttons.2.id': { value: copiedArrayItemID3, valid: true },
+          'ctas.0.buttons.2.label': { value: 'Button 3', valid: true },
+        },
+      }
+
+      // Paste into block row 1 (target)
+      const result = mergeFormStateFromClipboard({
+        dataFromClipboard: clipboardData,
+        formState,
+        path: 'ctas',
+        rowIndex: 1,
+      })
+
+      // Target block ID should NOT be overwritten
+      expect(result['ctas.1.id'].value).toEqual(targetBlockID)
+
+      // Nested array items should have NEW IDs (not the source IDs)
+      expect(result['ctas.1.buttons.0.id']).toBeDefined()
+      expect(result['ctas.1.buttons.0.id'].value).not.toEqual(copiedArrayItemID1)
+      expect(ObjectId.isValid(result['ctas.1.buttons.0.id'].value as string)).toBe(true)
+
+      expect(result['ctas.1.buttons.1.id']).toBeDefined()
+      expect(result['ctas.1.buttons.1.id'].value).not.toEqual(copiedArrayItemID2)
+
+      expect(result['ctas.1.buttons.2.id']).toBeDefined()
+      expect(result['ctas.1.buttons.2.id'].value).not.toEqual(copiedArrayItemID3)
+
+      // The rows metadata in ctas.1.buttons should have the new IDs
+      expect(result['ctas.1.buttons'].rows).toHaveLength(3)
+      expect(result['ctas.1.buttons'].rows![0].id).toEqual(result['ctas.1.buttons.0.id'].value)
+      expect(result['ctas.1.buttons'].rows![1].id).toEqual(result['ctas.1.buttons.1.id'].value)
+      expect(result['ctas.1.buttons'].rows![2].id).toEqual(result['ctas.1.buttons.2.id'].value)
+
+      // Field values should be copied
+      expect(result['ctas.1.buttons.0.label'].value).toEqual('Button 1')
+      expect(result['ctas.1.buttons.1.label'].value).toEqual('Button 2')
+      expect(result['ctas.1.buttons.2.label'].value).toEqual('Button 3')
+
+      // Source block should be untouched
+      expect(result['ctas.0.id'].value).toEqual(copiedBlockID)
+      expect(result['ctas.0.buttons'].rows).toHaveLength(3)
+    })
+  })
+
   describe('array ID regeneration', () => {
     it('should generate new IDs when pasting arrays to prevent duplicates', () => {
       const copiedArrayID = new ObjectId().toHexString()

packages/ui/src/elements/ClipboardAction/mergeFormStateFromClipboard.ts

@@ -114,9 +114,11 @@ export function mergeFormStateFromClipboard({
   const idReplacements: Map<string, string> = new Map()
 
   for (const clipboardPath in dataFromClipboard) {
-    // Pasting a row id, skip overwriting
+    // When pasting into a specific row, skip only the direct row ID to avoid overwriting
+    // the target row's identity. Nested IDs (array item IDs within the block) should
+    // still be processed so they get regenerated below, preventing server-side duplication.
     if (
-      (!pasteIntoField && clipboardPath.endsWith('.id')) ||
+      (!pasteIntoField && clipboardPath === `${pathToReplace}.id`) ||
       !clipboardPath.startsWith(pathToReplace)
     ) {
       continue