diff --git a/apps/designer/app/designer/shared/tree/tree.tsx b/apps/designer/app/designer/shared/tree/tree.tsx index 722792c76c..427299ccaf 100644 --- a/apps/designer/app/designer/shared/tree/tree.tsx +++ b/apps/designer/app/designer/shared/tree/tree.tsx @@ -7,12 +7,13 @@ import { import { type DropTarget, type Rect, + type Placement, useDrag, useDrop, useHold, - Box, useAutoScroll, - Placement, + useDragCursor, + Box, } from "@webstudio-is/design-system"; import { findInstanceById, @@ -358,6 +359,8 @@ export const Tree = ({ const autoScrollHandlers = useAutoScroll(); + useDragCursor(dragItem !== undefined); + return ( { + useEffect(() => { + // possible + if (document.body === null) { + return; + } + + if (isDragging) { + const originalValue = document.body.style.getPropertyValue("cursor"); + const originalPriority = + document.body.style.getPropertyPriority("cursor"); + document.body.style.setProperty("cursor", cursor, "important"); + return () => { + document.body.style.setProperty( + "cursor", + originalValue, + originalPriority + ); + }; + } + }, [isDragging, cursor]); +};