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({ 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 = { ) => PartialDropTarget; onDropTargetChange: (dropTarget: DropTarget) => 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 = (props: UseDropProps): 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; };