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

Author: TrySound

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) {