Prevent duplicated UUUIDs in inner blocks when copying container blocks

packages/volto/news/6112.bugfix

@@ -0,0 +1 @@
+Prevent duplicated UUIDs in inner blocks when copying container blocks @sneridagh

packages/volto/src/components/manage/Form/BlocksToolbar.jsx

@@ -20,6 +20,7 @@ import copySVG from '@plone/volto/icons/copy.svg';
 import cutSVG from '@plone/volto/icons/cut.svg';
 import pasteSVG from '@plone/volto/icons/paste.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
 
 export class BlocksToolbarComponent extends React.Component {
   constructor(props) {
@@ -79,9 +80,9 @@ export class BlocksToolbarComponent extends React.Component {
     const { formData } = this.props;
     const blocksFieldname = getBlocksFieldname(formData);
     const blocks = formData[blocksFieldname];
-    const blocksData = this.props.selectedBlocks.map(
-      (blockId) => blocks[blockId],
-    );
+    const blocksData = this.props.selectedBlocks
+      .map((blockId) => [blockId, blocks[blockId]])
+      .filter(([blockId]) => !!blockId); // Removes null blocks
     this.props.setBlocksClipboard({ [actionType]: blocksData });
     this.props.onSetSelectedBlocks([]);
   }
@@ -91,14 +92,14 @@ export class BlocksToolbarComponent extends React.Component {
     const mode = Object.keys(blocksClipboard).includes('cut') ? 'cut' : 'copy';
     const blocksData = blocksClipboard[mode] || [];
     const cloneWithIds = blocksData
-      .filter((blockData) => !!blockData['@type'])
-      .map((blockData) => {
+      .filter(([blockId, blockData]) => blockId && !!blockData['@type']) // Removes null blocks
+      .map(([blockId, blockData]) => {
         const blockConfig = config.blocks.blocksConfig[blockData['@type']];
         return mode === 'copy'
           ? blockConfig.cloneData
             ? blockConfig.cloneData(blockData)
-            : [uuid(), blockData]
-          : [uuid(), blockData]; // if cut/pasting blocks, we don't clone
+            : [uuid(), cloneBlocks(blockData)]
+          : [blockId, blockData]; // if cut/pasting blocks, we don't clone
       })
       .filter((info) => !!info); // some blocks may refuse to be copied
     const blocksFieldname = getBlocksFieldname(formData);

packages/volto/src/helpers/Blocks/cloneBlocks.test.js

@@ -0,0 +1,54 @@
+import { cloneDeep } from 'lodash';
+import { cloneBlocks } from './cloneBlocks';
+
+describe('cloneBlocks', () => {
+  it('cloneBlocks - basic', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+
+  it('cloneBlocks - nested', () => {
+    const blocksData = {
+      blocks: {
+        a: { '@type': 'slate', value: 1 },
+        b: { '@type': 'slate', value: 2 },
+      },
+      blocks_layout: { items: ['a', 'b'] },
+    };
+    blocksData.blocks.c = cloneDeep(blocksData);
+    blocksData.blocks_layout.items.push('c');
+
+    const result = cloneBlocks(blocksData);
+
+    expect(result.blocks_layout.items[0]).not.toBe('a');
+    expect(result.blocks[result.blocks_layout.items[0]]).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0],
+    ).not.toBe('c');
+
+    expect(
+      result.blocks[result.blocks_layout.items[2]].blocks[
+        result.blocks[result.blocks_layout.items[2]].blocks_layout.items[0]
+      ],
+    ).toStrictEqual({
+      '@type': 'slate',
+      value: 1,
+    });
+  });
+});

packages/volto/src/helpers/Blocks/cloneBlocks.ts

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import { v4 as uuid } from 'uuid';
+import {
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+  hasBlocksData,
+} from './Blocks';
+import config from '@plone/registry';
+
+export function cloneBlocks(blocksData) {
+  if (hasBlocksData(blocksData)) {
+    const blocksFieldname = getBlocksFieldname(blocksData);
+    const blocksLayoutFieldname = getBlocksLayoutFieldname(blocksData);
+
+    const cloneWithIds = Object.keys(blocksData.blocks)
+      .map((key) => {
+        const block = blocksData.blocks[key];
+        const blockConfig = config.blocks.blocksConfig[blocksData['@type']];
+        return blockConfig?.cloneData
+          ? blockConfig.cloneData(block)
+          : [uuid(), cloneBlocks(block)];
+      })
+      .filter((info) => !!info); // some blocks may refuse to be copied
+
+    const newBlockData = {
+      ...blocksData,
+      [blocksFieldname]: {
+        ...Object.assign(
+          {},
+          ...cloneWithIds.map(([id, data]) => ({ [id]: data })),
+        ),
+      },
+      [blocksLayoutFieldname]: {
+        ...blocksData[blocksLayoutFieldname],
+        items: [...cloneWithIds.map(([id]) => id)],
+      },
+    };
+
+    return newBlockData;
+  }
+
+  return blocksData;
+}