fix: detach slot content before unwrap (#5790)

Author: kof

apps/builder/app/shared/instance-utils.test.tsx

@@ -3351,6 +3351,47 @@ describe("unwrap instance", () => {
     expect($instances.get().has("slot")).toBe(false);
     expect($instances.get().has("fragment")).toBe(false);
   });
+
+  test("unwrap command detaches selected duplicated slot occurrence", () => {
+    const { instances, props } = renderData(
+      <$.Body ws:id="body">
+        <$.Slot ws:id="slot1">
+          <$.Fragment ws:id="fragment">
+            <ws.element ws:tag="div" ws:id="div"></ws.element>
+          </$.Fragment>
+        </$.Slot>
+        <$.Slot ws:id="slot2">
+          {/* same ids */}
+          <$.Fragment ws:id="fragment">
+            <ws.element ws:tag="div" ws:id="div"></ws.element>
+          </$.Fragment>
+        </$.Slot>
+      </$.Body>
+    );
+    $instances.set(instances);
+    $props.set(props);
+    const pages = createDefaultPages({ rootInstanceId: "body" });
+    $pages.set(pages);
+    $selectedPageId.set(pages.homePageId);
+    selectInstance(["div", "fragment", "slot1", "body"]);
+
+    unwrapInstance();
+
+    const bodyChildren = $instances.get().get("body")?.children;
+    const unwrappedDivId =
+      bodyChildren?.[0]?.type === "id" ? bodyChildren[0].value : undefined;
+
+    expect(unwrappedDivId).toBeDefined();
+    expect(unwrappedDivId).not.toBe("div");
+    expect($selectedInstanceSelector.get()).toEqual([unwrappedDivId, "body"]);
+    expect($instances.get().get("slot1")).toBeUndefined();
+    expect($instances.get().get("slot2")?.children).toEqual([
+      { type: "id", value: "fragment" },
+    ]);
+    expect($instances.get().get("fragment")?.children).toEqual([
+      { type: "id", value: "div" },
+    ]);
+  });
 });
 
 describe("canUnwrapInstance", () => {

apps/builder/app/shared/instance-utils.ts

@@ -1194,18 +1194,22 @@ export const unwrapInstance = () => {
     return;
   }
 
-  const [selectedItem, defaultParentItem] = instancePath;
-  const parentItem =
-    defaultParentItem?.instance.component === "Fragment" &&
-    instancePath[2]?.instance.component === "Slot"
-      ? instancePath[2]
-      : defaultParentItem;
-  if (parentItem === undefined) {
-    return;
-  }
-
   try {
     updateWebstudioData((data) => {
+      const detachedInstancePath = detachSharedSlotContentMutable(
+        data,
+        instancePath
+      );
+      const [selectedItem, defaultParentItem] = detachedInstancePath;
+      const parentItem =
+        defaultParentItem?.instance.component === "Fragment" &&
+        detachedInstancePath[2]?.instance.component === "Slot"
+          ? detachedInstancePath[2]
+          : defaultParentItem;
+      if (parentItem === undefined) {
+        return;
+      }
+
       const result = unwrapInstanceMutable({
         instances: data.instances,
         props: data.props,
@@ -1218,12 +1222,13 @@ export const unwrapInstance = () => {
         toast.error(result.error ?? "Cannot unwrap instance");
         throw Error("Abort transaction");
       }
+
+      // After unwrap, select the child that replaced the parent.
+      selectInstance([
+        selectedItem.instance.id,
+        ...parentItem.instanceSelector.slice(1),
+      ]);
     });
-    // After unwrap, select the child that replaced the parent
-    selectInstance([
-      selectedItem.instance.id,
-      ...parentItem.instanceSelector.slice(1),
-    ]);
   } catch {
     // do nothing
   }