From 491cdcdb2af2295111ace06152b650296b794062 Mon Sep 17 00:00:00 2001
From: Roman Pominov <rpominov+github@gmail.com>
Date: Fri, 5 Aug 2022 10:31:07 +0300
Subject: [PATCH] fix a bug: <script> tags are considered during dnd

---
 apps/designer/app/canvas/shared/use-drag-drop.ts     | 12 ++++++++++++
 .../src/components/primitives/dnd/dom-utils.ts       |  7 +++++--
 .../src/components/primitives/dnd/use-drop.ts        | 10 +++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/apps/designer/app/canvas/shared/use-drag-drop.ts b/apps/designer/app/canvas/shared/use-drag-drop.ts
index 971e73ab77..752ea8b081 100644
--- a/apps/designer/app/canvas/shared/use-drag-drop.ts
+++ b/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>({
diff --git a/packages/design-system/src/components/primitives/dnd/dom-utils.ts b/packages/design-system/src/components/primitives/dnd/dom-utils.ts
index a40df7f86d..4c860eeb41 100644
--- a/packages/design-system/src/components/primitives/dnd/dom-utils.ts
+++ b/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())
   );
 };
diff --git a/packages/design-system/src/components/primitives/dnd/use-drop.ts b/packages/design-system/src/components/primitives/dnd/use-drop.ts
index 01ec0f2ce5..3c52bc500f 100644
--- a/packages/design-system/src/components/primitives/dnd/use-drop.ts
+++ b/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;
     };