fix a bug: <script> tags are considered during dnd

apps/designer/app/canvas/shared/use-drag-drop.ts

@@ -136,6 +136,18 @@ export const useDragAndDrop = () => {
         },
       });
     },
+
+    getValidChildren: (parent) => {
+      if (!(parent instanceof HTMLBodyElement)) {
+        return parent.children;
+      }
+      return Array.from(parent.children).filter((child) => {
+        return (
+          !(child instanceof HTMLScriptElement) &&
+          !(child instanceof HTMLLinkElement)
+        );
+      });
+    },
   });
 
   const dragHandlers = useDrag<Instance>({

packages/design-system/src/components/primitives/dnd/dom-utils.ts

@@ -38,7 +38,10 @@ export const getLocalChildrenOrientation = (
   return getRectsOrientation(previous, current, next);
 };
 
-export const getChildrenRects = (parent: Element) => {
+export const getChildrenRects = (
+  parent: Element,
+  children: Element[] | HTMLCollection
+) => {
   const parentRect = parent.getBoundingClientRect();
 
   // We convert to relative coordinates to be able to store the result in cache.
@@ -50,7 +53,7 @@ export const getChildrenRects = (parent: Element) => {
     height: rect.height,
   });
 
-  return Array.from(parent.children).map((child) =>
+  return Array.from(children).map((child) =>
     toRelativeCoordinates(child.getBoundingClientRect())
   );
 };

packages/design-system/src/components/primitives/dnd/use-drop.ts

@@ -45,6 +45,10 @@ export type UseDropProps<Data> = {
   ) => PartialDropTarget<Data>;
 
   onDropTargetChange: (dropTarget: DropTarget<Data>) => void;
+
+  // Allows you to customize children
+  // that will be used to determine placement and indexWithinChildren
+  getValidChildren?: (parent: Element) => Element[] | HTMLCollection;
 };
 
 export type UseDropHandlers = {
@@ -81,7 +85,11 @@ export const useDrop = <Data>(props: UseDropProps<Data>): UseDropHandlers => {
       if (fromCache !== undefined) {
         return fromCache;
       }
-      const result = getChildrenRects(parent);
+      const children =
+        latestProps.current.getValidChildren !== undefined
+          ? latestProps.current.getValidChildren(parent)
+          : parent.children;
+      const result = getChildrenRects(parent, children);
       state.current.childrenRectsCache.set(parent, result);
       return result;
     };