feat(editor): ✨ Duplicate blocks & steps

apps/builder/contexts/TypebotContext/actions/blocks.ts

@@ -1,4 +1,5 @@
 import { Coordinates } from 'contexts/GraphContext'
+import cuid from 'cuid'
 import { produce } from 'immer'
 import { WritableDraft } from 'immer/dist/internal'
 import {
@@ -21,6 +22,7 @@ export type BlocksActions = {
     }
   ) => void
   updateBlock: (blockIndex: number, updates: Partial<Omit<Block, 'id'>>) => void
+  duplicateBlock: (blockIndex: number) => void
   deleteBlock: (blockIndex: number) => void
 }
 
@@ -54,7 +56,24 @@ const blocksActions = (setTypebot: SetTypebot): BlocksActions => ({
         typebot.blocks[blockIndex] = { ...block, ...updates }
       })
     ),
-
+  duplicateBlock: (blockIndex: number) =>
+    setTypebot((typebot) =>
+      produce(typebot, (typebot) => {
+        const block = typebot.blocks[blockIndex]
+        const id = cuid()
+        const newBlock: Block = {
+          ...block,
+          title: `${block.title} copy`,
+          id,
+          steps: block.steps.map((s) => ({ ...s, blockId: id })),
+          graphCoordinates: {
+            x: block.graphCoordinates.x + 200,
+            y: block.graphCoordinates.y + 100,
+          },
+        }
+        typebot.blocks.splice(blockIndex + 1, 0, newBlock)
+      })
+    ),
   deleteBlock: (blockIndex: number) =>
     setTypebot((typebot) =>
       produce(typebot, (typebot) => {

apps/builder/contexts/TypebotContext/actions/steps.ts

@@ -11,6 +11,7 @@ import { WritableDraft } from 'immer/dist/types/types-external'
 import { SetTypebot } from '../TypebotContext'
 import produce from 'immer'
 import { cleanUpEdgeDraft, deleteEdgeDraft } from './edges'
+import cuid from 'cuid'
 
 export type StepsActions = {
   createStep: (
@@ -22,6 +23,7 @@ export type StepsActions = {
     indices: StepIndices,
     updates: Partial<Omit<Step, 'id' | 'type'>>
   ) => void
+  duplicateStep: (indices: StepIndices) => void
   detachStepFromBlock: (indices: StepIndices) => void
   deleteStep: (indices: StepIndices) => void
 }
@@ -47,6 +49,18 @@ const stepsAction = (setTypebot: SetTypebot): StepsActions => ({
         typebot.blocks[blockIndex].steps[stepIndex] = { ...step, ...updates }
       })
     ),
+  duplicateStep: ({ blockIndex, stepIndex }: StepIndices) =>
+    setTypebot((typebot) =>
+      produce(typebot, (typebot) => {
+        const step = typebot.blocks[blockIndex].steps[stepIndex]
+        const id = cuid()
+        const newStep: Step = {
+          ...step,
+          id,
+        }
+        typebot.blocks[blockIndex].steps.splice(stepIndex + 1, 0, newStep)
+      })
+    ),
   detachStepFromBlock: (indices: StepIndices) =>
     setTypebot((typebot) => produce(typebot, removeStepFromBlock(indices))),
   deleteStep: ({ blockIndex, stepIndex }: StepIndices) =>