diff --git a/src/index.js b/src/index.js index 1120451..ccea198 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ import { ColumnsWidget, LayoutSelectWidget } from './Widgets'; import ColorPickerWidget from './Widgets/SimpleColorPickerWidget.jsx'; import { gridSizes, variants } from './grid'; import { COLUMNSBLOCK } from './constants'; +import { cloneColumnsBlockData } from './utils'; export default function install(config) { config.blocks.blocksConfig[COLUMNSBLOCK] = { @@ -43,6 +44,7 @@ export default function install(config) { '#BED3F3', '#D4C4FB', ], + cloneData: cloneColumnsBlockData, }; config.widgets.type.columns = ColumnsWidget; diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..5c31b87 --- /dev/null +++ b/src/utils.js @@ -0,0 +1,63 @@ +import { v4 as uuid } from 'uuid'; +import { + getBlocksFieldname, + getBlocksLayoutFieldname, + getBlocks, +} from '@plone/volto/helpers'; +import { blocks } from '~/config'; + +const columnConfig = { + cloneData(blockData) { + // console.log('column', blockData); + return cloneFormData(blockData); + }, +}; + +function cloneFormData(formData) { + const formBlocks = getBlocks(formData); + + const cloneWithIds = formBlocks + .filter(([id, blockData]) => { + return blockData.blocks ? true : !!blockData['@type']; // support "columns" + }) + .map(([id, blockData]) => { + const blockConfig = + blocks.blocksConfig[blockData['@type']] || columnConfig; + return blockConfig.cloneData + ? blockConfig.cloneData(blockData) + : [uuid(), blockData]; + }) + .filter((info) => !!info); // some blocks may refuse to be copied + + const blocksFieldname = getBlocksFieldname(formData); + const blocksLayoutFieldname = getBlocksLayoutFieldname(formData); + + const newBlockData = { + [blocksFieldname]: { + ...formData[blocksFieldname], + ...Object.assign( + {}, + ...cloneWithIds.map(([id, data]) => ({ [id]: data })), + ), + }, + [blocksLayoutFieldname]: { + ...formData[blocksLayoutFieldname], + items: [...cloneWithIds.map(([id]) => id)], + }, + }; + return [uuid(), newBlockData]; +} + +export function cloneColumnsBlockData(blockData) { + const columnsData = blockData.data; + const cloneWithIds = cloneFormData(columnsData); + + const [id, newBlockData] = cloneWithIds; + return [ + id, + { + ...blockData, + data: newBlockData, + }, + ]; +}