From ee484639b592fedd0e7239e11c11685b6800aab1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 24 Aug 2022 08:37:53 +0100
Subject: [PATCH] Update block ejection to account for children of blocks

---
 .../src/builderStore/store/frontend.js        | 25 ++++++++++++++-----
 .../src/components/BlockComponent.svelte      |  2 ++
 .../app/blocks/RepeaterBlock.svelte           |  1 +
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 47a02518cb..0c52e68296 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -912,19 +912,32 @@ export const getFrontendStore = () => {
         let nextSelectedComponentId
 
         await store.actions.screens.patch(screen => {
+          const block = findComponent(screen.props, componentId)
           const parent = findComponentParent(screen.props, componentId)
 
-          // Sanity check parent is found
-          if (!parent?._children?.length) {
+          // Sanity check
+          if (!block || !parent?._children?.length) {
             return false
           }
 
+          // Attach block children back into ejected definition, using the
+          // _containsSlot flag to know where to insert them
+          const slotContainer = findAllMatchingComponents(
+            ejectedDefinition,
+            x => x._containsSlot
+          )[0]
+          if (slotContainer) {
+            delete slotContainer._containsSlot
+            slotContainer._children = [
+              ...(slotContainer._children || []),
+              ...(block._children || []),
+            ]
+          }
+
           // Replace block with ejected definition
-          const childIndex = parent._children.findIndex(
-            child => child._id === componentId
-          )
           makeComponentUnique(ejectedDefinition)
-          parent._children[childIndex] = ejectedDefinition
+          const index = parent._children.findIndex(x => x._id === componentId)
+          parent._children[index] = ejectedDefinition
           nextSelectedComponentId = ejectedDefinition._id
         })
 
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index e77158fe5f..fe2eb0bd02 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -10,6 +10,7 @@
   export let css
   export let context
   export let order = 0
+  export let containsSlot = false
 
   // ID is only exposed as a prop so that it can be bound to from parent
   // block components
@@ -32,6 +33,7 @@
       },
       custom: css,
     },
+    _containsSlot: containsSlot,
     ...props,
   }
 
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index 247a8b0d51..c7e8f28dd7 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -44,6 +44,7 @@
         <BlockComponent
           type="repeater"
           context="repeater"
+          containsSlot
           props={{
             dataProvider: `{{ literal ${safe(providerId)} }}`,
             noRowsMessage,