From f1dec0e6fc6da9956d2e8b810d8e1ea88347294c Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Mon, 20 Jan 2025 17:12:07 +0000
Subject: [PATCH] refactor: keep local DropZone preview in sync with Zustand
 state

---
 packages/core/components/DropZone/index.tsx              | 7 ++++---
 .../components/DropZone/lib/use-content-with-preview.ts  | 9 +++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
index f8151accd..dc8a44c6f 100644
--- a/packages/core/components/DropZone/index.tsx
+++ b/packages/core/components/DropZone/index.tsx
@@ -94,7 +94,6 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       inNextDeepestArea,
       draggedComponentType,
       userIsDragging,
-      preview,
     } = useContextStore(ZoneStoreContext, (s) => {
       return {
         isDeepestZone: s.zoneDepthIndex[zoneCompound] ?? false,
@@ -102,7 +101,6 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
         draggedItemId: s.draggedItem?.id,
         draggedComponentType: s.draggedItem?.data.componentType,
         userIsDragging: !!s.draggedItem,
-        preview: s.previewIndex[zoneCompound],
       };
     });
 
@@ -189,7 +187,10 @@ const DropZoneEdit = forwardRef<HTMLDivElement, DropZoneProps>(
       isEnabled = acceptsTarget(draggedComponentType);
     }
 
-    const contentWithPreview = useContentWithPreview(content, zoneCompound);
+    const [contentWithPreview, preview] = useContentWithPreview(
+      content,
+      zoneCompound
+    );
 
     const isDropEnabled =
       isEnabled &&
diff --git a/packages/core/components/DropZone/lib/use-content-with-preview.ts b/packages/core/components/DropZone/lib/use-content-with-preview.ts
index acd8b8851..434b84ced 100644
--- a/packages/core/components/DropZone/lib/use-content-with-preview.ts
+++ b/packages/core/components/DropZone/lib/use-content-with-preview.ts
@@ -10,7 +10,7 @@ import { useAppContext } from "../../Puck/context";
 export const useContentWithPreview = (
   content: Content,
   zoneCompound: string
-) => {
+): [Content, Preview | undefined] => {
   const { draggedItemId, preview, previewExists } = useContextStore(
     ZoneStoreContext,
     (s) => {
@@ -30,6 +30,9 @@ export const useContentWithPreview = (
   } = useAppContext();
 
   const [contentWithPreview, setContentWithPreview] = useState(content);
+  const [localPreview, setLocalPreview] = useState<Preview | undefined>(
+    preview
+  );
 
   const updateContent = useRenderedCallback(
     (content: Content, preview: Preview | undefined, isDragging: boolean) => {
@@ -71,6 +74,8 @@ export const useContentWithPreview = (
             : content
         );
       }
+
+      setLocalPreview(preview);
     },
     [draggedItemId, previewExists]
   );
@@ -79,5 +84,5 @@ export const useContentWithPreview = (
     updateContent(content, preview, isDragging);
   }, [content, preview, isDragging]);
 
-  return contentWithPreview;
+  return [contentWithPreview, localPreview];
 };