Add component duplication

README.md

@@ -60,6 +60,7 @@ By clicking on a component containing children, you will see a Children panel ap
 | ---------------- | ------------------------- |
 | `cmd+Z` `ctrl+Z` | Undo last action          |
 | `cmd+Y` `ctrl+y` | Redo action               |
+| `cmd+D` `ctrl+d` | Duplicate component       |
 | `del`            | Delete selected component |
 | `c`              | Toggle Code panel         |
 | `b`              | Toggle Builder mode       |

src/core/models/components.ts

@@ -259,6 +259,46 @@ const components = createModel({
         selectedId: state.components[selectedComponent.parent].id,
       }
     },
+    duplicate(state: ComponentsState): ComponentsState {
+      const selectedComponent = state.components[state.selectedId]
+      const parentElement = state.components[selectedComponent.parent]
+
+      const clonedComponents: IComponents = {}
+
+      const cloneComponent = (component: IComponent) => {
+        const newid = generateId()
+        const children = component.children.map(child => {
+          return cloneComponent(state.components[child])
+        })
+
+        clonedComponents[newid] = {
+          ...component,
+          id: newid,
+          props: { ...component.props },
+          children,
+        }
+
+        children.forEach(child => {
+          clonedComponents[child].parent = newid
+        })
+
+        return newid
+      }
+
+      const newId = cloneComponent(selectedComponent)
+
+      return {
+        ...state,
+        components: {
+          ...state.components,
+          ...clonedComponents,
+          [parentElement.id]: {
+            ...parentElement,
+            children: [...parentElement.children, newId],
+          },
+        },
+      }
+    },
   },
 })
 

src/hooks/useShortcuts.ts

@@ -11,6 +11,7 @@ export const keyMap = {
   REDO: ['ctrl+y', 'cmd+y'],
   UNSELECT: ['Escape'],
   PARENT: 'p',
+  DUPLICATE: ['ctrl+d', 'cmd+d'],
 }
 
 const hasNoSpecialKeyPressed = (event: KeyboardEvent | undefined) =>
@@ -75,6 +76,14 @@ const useShortcuts = () => {
     }
   }
 
+  const onDuplicate = (event: KeyboardEvent | undefined) => {
+    if (event) {
+      event.preventDefault()
+    }
+
+    dispatch.components.duplicate()
+  }
+
   const handlers = {
     DELETE_NODE: deleteNode,
     TOGGLE_BUILDER_MODE: toggleBuilderMode,
@@ -83,6 +92,7 @@ const useShortcuts = () => {
     REDO: redo,
     UNSELECT: onUnselect,
     PARENT: onSelectParent,
+    DUPLICATE: onDuplicate,
   }
 
   return { handlers }

src/utils/undo.ts

@@ -12,6 +12,7 @@ export default function filterActions(action: Action) {
       'components/moveComponent',
       'components/addMetaComponent',
       'components/moveSelectedComponentChildren',
+      'components/duplicate',
     ].includes(action.type)
   ) {
     return true