Update cut+paste so cut doesn't actually remove the component from the tree and use new patch function

packages/builder/src/builderStore/store/frontend.js

@@ -534,13 +534,10 @@ export const getFrontendStore = () => {
           return state
         })
 
-        // Remove the component from its parent if we're cutting
+        // Select the parent if cutting
         if (cut) {
           const parent = findComponentParent(selectedAsset.props, component._id)
           if (parent) {
-            parent._children = parent._children.filter(
-              child => child._id !== component._id
-            )
             if (selectParent) {
               store.update(state => {
                 state.selectedComponentId = parent._id
@@ -551,23 +548,41 @@ export const getFrontendStore = () => {
         }
       },
       paste: async (targetComponent, mode) => {
-        let promises = []
+        const state = get(store)
-        store.update(state => {
-          // Stop if we have nothing to paste
         if (!state.componentToPaste) {
-            return state
+          return
+        }
+        let newComponentId
+
+        // Patch screen
+        const patch = screen => {
+          // Get up to date ref to target
+          targetComponent = findComponent(screen.props, targetComponent._id)
+          if (!targetComponent) {
+            return
           }
           const cut = state.componentToPaste.isCut
-
+          const originalId = state.componentToPaste._id
-          // Clone the component to paste and make unique if copying
-          delete state.componentToPaste.isCut
           let componentToPaste = cloneDeep(state.componentToPaste)
-          if (cut) {
+          delete componentToPaste.isCut
-            state.componentToPaste = null
+
-          } else {
+          // Make new component unique if copying
+          if (!cut) {
             makeComponentUnique(componentToPaste)
           }
+          newComponentId = componentToPaste._id
 
+          // Delete old component if cutting
+          if (cut) {
+            const parent = findComponentParent(screen.props, originalId)
+            if (parent?._children) {
+              parent._children = parent._children.filter(
+                component => component._id !== originalId
+              )
+            }
+          }
+
+          // Paste new component
           if (mode === "inside") {
             // Paste inside target component if chosen
             if (!targetComponent._children) {
@@ -575,32 +590,29 @@ export const getFrontendStore = () => {
             }
             targetComponent._children.push(componentToPaste)
           } else {
-            // Otherwise find the parent so we can paste in the correct order
+            // Otherwise paste in the correct order in the parent's children
-            // in the parents child components
-            const selectedAsset = get(currentAsset)
-            if (!selectedAsset) {
-              return state
-            }
             const parent = findComponentParent(
-              selectedAsset.props,
+              screen.props,
               targetComponent._id
             )
-            if (!parent) {
+            if (!parent?._children) {
-              return state
+              return false
             }
-
+            const targetIndex = parent._children.findIndex(component => {
-            // Insert the component in the correct position
+              return component._id === targetComponent._id
-            const targetIndex = parent._children.indexOf(targetComponent)
+            })
             const index = mode === "above" ? targetIndex : targetIndex + 1
-            parent._children.splice(index, 0, cloneDeep(componentToPaste))
+            parent._children.splice(index, 0, componentToPaste)
           }
+        }
+        await store.actions.screens.patch(state.selectedScreenId, patch)
 
-          // Save and select the new component
+        // Update state
-          promises.push(store.actions.preview.saveSelected())
+        store.update(state => {
-          state.selectedComponentId = componentToPaste._id
+          delete state.componentToPaste
+          state.selectedComponentId = newComponentId
           return state
         })
-        await Promise.all(promises)
       },
       updateStyle: async (name, value) => {
         const selected = get(selectedComponent)

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentTree.svelte

@@ -18,6 +18,13 @@
 
   let closedNodes = {}
 
+  $: filteredComponents = components?.filter(component => {
+    return (
+      !$store.componentToPaste?.isCut ||
+      component._id !== $store.componentToPaste?._id
+    )
+  })
+
   const dragover = (component, index) => e => {
     const mousePosition = e.offsetY / e.currentTarget.offsetHeight
     dndStore.actions.dragover({
@@ -91,7 +98,7 @@
 </script>
 
 <ul>
-  {#each components || [] as component, index (component._id)}
+  {#each filteredComponents || [] as component, index (component._id)}
     {@const opened = isOpen(component, $selectedComponentPath, closedNodes)}
     <li
       on:click|stopPropagation={() => {