diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx index f8151accde..dc8a44c6f6 100644 --- a/packages/core/components/DropZone/index.tsx +++ b/packages/core/components/DropZone/index.tsx @@ -94,7 +94,6 @@ const DropZoneEdit = forwardRef( inNextDeepestArea, draggedComponentType, userIsDragging, - preview, } = useContextStore(ZoneStoreContext, (s) => { return { isDeepestZone: s.zoneDepthIndex[zoneCompound] ?? false, @@ -102,7 +101,6 @@ const DropZoneEdit = forwardRef( draggedItemId: s.draggedItem?.id, draggedComponentType: s.draggedItem?.data.componentType, userIsDragging: !!s.draggedItem, - preview: s.previewIndex[zoneCompound], }; }); @@ -189,7 +187,10 @@ const DropZoneEdit = forwardRef( 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 acd8b8851d..434b84ced2 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 + ); 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]; };