From c776166e8a1479069c7ba6eae396dcbb31e17f3e Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <opensource@trysound.io>
Date: Sun, 26 Jan 2025 20:24:18 +0400
Subject: [PATCH] fix: prevent dropping into image instance (#4789)

User reported he was able to drop components into images. Added lookup
for containers first and then for matching ones.

Testing

- add image
- try to drop box into it
---
 apps/builder/app/canvas/shared/use-drag-drop.ts | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/apps/builder/app/canvas/shared/use-drag-drop.ts b/apps/builder/app/canvas/shared/use-drag-drop.ts
index 8852f8f50e..17617a50b1 100644
--- a/apps/builder/app/canvas/shared/use-drag-drop.ts
+++ b/apps/builder/app/canvas/shared/use-drag-drop.ts
@@ -30,6 +30,7 @@ import {
   getAncestorInstanceSelector,
 } from "~/shared/tree-utils";
 import {
+  findClosestContainer,
   findClosestInstanceMatchingFragment,
   isTreeMatching,
 } from "~/shared/matcher";
@@ -67,7 +68,16 @@ const findClosestDroppableInstanceSelector = (
   const instances = $instances.get();
   const metas = $registeredComponentMetas.get();
 
-  let droppableIndex = -1;
+  // prevent dropping anything into non containers like image
+  let droppableIndex = findClosestContainer({
+    metas,
+    instances,
+    instanceSelector,
+  });
+  if (droppableIndex === -1) {
+    return;
+  }
+  instanceSelector = instanceSelector.slice(droppableIndex);
   if (dragPayload?.type === "insert") {
     const fragment = getComponentTemplateData(dragPayload.dragComponent);
     if (fragment) {