@contentful/experiences-visual-editor-react 1.0.8 → 1.0.9-beta.0

package/dist/index.js

@@ -1716,8 +1716,8 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
     return deepReferences;
 }
 
-var css_248z$8 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 1;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  border-radius: 0 0 2px 0;\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.2s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id]:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id]:before,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly']:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
-var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","userIsDragging":"styles-module_userIsDragging__lqbjG","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
+var css_248z$8 = ".styles-module_DraggableComponent__m5-dA {\n  pointer-events: all;\n  position: relative;\n  transition: outline 0.2s;\n  cursor: grab;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableComponent__m5-dA:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -2px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  pointer-events: none;\n}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableClone__X8zTA,\n.styles-module_DraggableClone__X8zTA * {\n  pointer-events: none !important;\n}\n\n.styles-module_DraggableComponent__m5-dA:not(.styles-module_userIsDragging__lqbjG) :not(.styles-module_DraggableComponent__m5-dA) {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isSelected__BzICQ:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_overlay__r4th9 {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  min-width: max-content;\n  height: 24px;\n  z-index: 2;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 14px;\n  font-weight: 500;\n  background-color: var(--exp-builder-gray500);\n  color: var(--exp-builder-color-white);\n  padding: 4px 12px 4px 12px;\n  transition: opacity 0.1s;\n  opacity: 0;\n  text-wrap: nowrap;\n}\n\n.styles-module_overlayContainer__eiX-5 {\n  opacity: 0;\n}\n\n.styles-module_overlayAssembly__tOzZU {\n  background-color: var(--exp-builder-purple600);\n}\n\n.styles-module_userIsDragging__lqbjG > .styles-module_overlay__r4th9,\n.styles-module_userIsDragging__lqbjG > .styles-module_overlayContainer__eiX-5 {\n  opacity: 0 !important;\n}\n\n.styles-module_userIsDragging__lqbjG:before {\n  outline: 2px solid transparent !important;\n}\n\n.styles-module_isHoveringComponent__RSeDG > .styles-module_overlay__r4th9,\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(.styles-module_DraggableComponent__m5-dA:hover)) > .styles-module_overlay__r4th9 {\n  opacity: 1;\n}\n\n/* hovering related component in layers tab */\n\n.styles-module_DraggableComponent__m5-dA:has(.styles-module_isHoveringComponent__RSeDG):not(.styles-module_isAssemblyBlock__Y3Avk):before,\n.styles-module_DraggableComponent__m5-dA:has(.styles-module_isHoveringComponent__RSeDG):not(.styles-module_isAssemblyBlock__Y3Avk) .styles-module_DraggableComponent__m5-dA:not(.styles-module_isHoveringComponent__RSeDG):not(.styles-module_isAssemblyBlock__Y3Avk):before,\n.styles-module_isHoveringComponent__RSeDG:not(.styles-module_isAssemblyBlock__Y3Avk) .styles-module_DraggableComponent__m5-dA:not(.styles-module_isAssemblyBlock__Y3Avk):before,\n\n.styles-module_DraggableComponent__m5-dA:hover:before,\n.styles-module_DraggableComponent__m5-dA:hover .styles-module_DraggableComponent__m5-dA:before {\n  outline: 2px dashed var(--exp-builder-gray500);\n}\n\n/* hovering component in layers tab */\n\n.styles-module_isHoveringComponent__RSeDG:not(.styles-module_isAssemblyBlock__Y3Avk):before,\n\n.styles-module_DraggableComponent__m5-dA:hover:not(:has(.styles-module_DraggableComponent__m5-dA:hover)):before {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n/* hovering related pattern in layers tab */\n\n.styles-module_isAssemblyBlock__Y3Avk:has(.styles-module_isHoveringComponent__RSeDG):before,\n.styles-module_isAssemblyBlock__Y3Avk:has(.styles-module_isHoveringComponent__RSeDG) .styles-module_isAssemblyBlock__Y3Avk:not(.styles-module_isHoveringComponent__RSeDG):before,\n.styles-module_isHoveringComponent__RSeDG .styles-module_isAssemblyBlock__Y3Avk:before,\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:before,\n.styles-module_isAssemblyBlock__Y3Avk:hover .styles-module_DraggableComponent__m5-dA:before,\n.styles-module_DraggableComponent__m5-dA:hover .styles-module_isAssemblyBlock__Y3Avk:before {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n/* hovering pattern in layers tab */\n\n.styles-module_isAssemblyBlock__Y3Avk.styles-module_isHoveringComponent__RSeDG:before,\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(.styles-module_DraggableComponent__m5-dA:hover)):before {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+var styles$3 = {"DraggableComponent":"styles-module_DraggableComponent__m5-dA","DraggableClone":"styles-module_DraggableClone__X8zTA","userIsDragging":"styles-module_userIsDragging__lqbjG","isDragging":"styles-module_isDragging__WHjPU","isSelected":"styles-module_isSelected__BzICQ","overlay":"styles-module_overlay__r4th9","overlayContainer":"styles-module_overlayContainer__eiX-5","overlayAssembly":"styles-module_overlayAssembly__tOzZU","isHoveringComponent":"styles-module_isHoveringComponent__RSeDG","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
 styleInject(css_248z$8);
 
 const SCROLL_STATES = {
@@ -1947,6 +1947,7 @@ const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer }) => {
 
 const useDraggedItemStore = create((set) => ({
     draggedItem: undefined,
+    hoveredComponentId: undefined,
     domRect: undefined,
     componentId: '',
     isDraggingOnCanvas: false,
@@ -1957,6 +1958,9 @@ const useDraggedItemStore = create((set) => ({
     setComponentId(id) {
         set({ componentId: id });
     },
+    setHoveredComponentId(id) {
+        set({ hoveredComponentId: id });
+    },
     updateItem: (item) => {
         set({ draggedItem: item });
     },
@@ -2207,6 +2211,7 @@ function getStyle$2(style, snapshot) {
 const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, wrapperProps, isContainer, blockId, isDragDisabled = false, placeholder, definition, ...rest }) => {
     const ref = useRef(null);
     const setDomRect = useDraggedItemStore((state) => state.setDomRect);
+    const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === id);
     useDraggablePosition({
         draggableId: id,
         draggableRef: ref,
@@ -2220,6 +2225,7 @@ const DraggableComponent = ({ children, id, index, isAssemblyBlock = false, isSe
             [styles$3.isDragging]: snapshot.isDragging,
             [styles$3.isSelected]: isSelected,
             [styles$3.userIsDragging]: userIsDragging,
+            [styles$3.isHoveringComponent]: isHoveredComponent,
         }), style: {
             ...style,
             ...getStyle$2(provided.draggableProps.style, snapshot),
@@ -2859,6 +2865,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
  */
 const DraggableChildComponent = (props) => {
     const { elementToRender, id, index, isAssemblyBlock = false, isSelected = false, onClick = () => null, coordinates, userIsDragging, style, isContainer, blockId, isDragDisabled = false, wrapperProps, definition, } = props;
+    const isHoveredComponent = useDraggedItemStore((state) => state.hoveredComponentId === id);
     return (React.createElement(Draggable, { key: id, draggableId: id, index: index, isDragDisabled: isDragDisabled }, (provided, snapshot) => elementToRender({
         ['data-ctfl-draggable-id']: id,
         ['data-test-id']: `draggable-${blockId}`,
@@ -2870,6 +2877,7 @@ const DraggableChildComponent = (props) => {
             [styles$3.isDragging]: snapshot.isDragging,
             [styles$3.isSelected]: isSelected,
             [styles$3.userIsDragging]: userIsDragging,
+            [styles$3.isHoveringComponent]: isHoveredComponent,
         }),
         dragHandleProps: provided.dragHandleProps,
         style: {
@@ -3428,10 +3436,10 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
     };
     if (node.data.blockId === CONTENTFUL_COMPONENTS.singleColumn.id) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(DraggableChildComponent, { elementToRender: elementToRender, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isSingleColumn, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, definition: definition }),
+            React.createElement(DraggableChildComponent, { elementToRender: elementToRender, id: componentId, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: isSingleColumn, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick, definition: definition }),
             isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, isEmptyZone: isEmptyZone }))));
     }
-    return (React.createElement(DraggableComponent, { placeholder: placeholder, definition: definition, id: componentId, index: index, isAssemblyBlock: isAssemblyBlock, isDragDisabled: isAssemblyBlock, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick },
+    return (React.createElement(DraggableComponent, { placeholder: placeholder, definition: definition, id: componentId, index: index, isAssemblyBlock: isAssembly || isAssemblyBlock, isDragDisabled: isAssemblyBlock, isSelected: selectedNodeId === componentId, userIsDragging: userIsDragging, isContainer: isContainer, blockId: node.data.blockId, coordinates: coordinates, wrapperProps: wrapperProps, onClick: onClick },
         elementToRender(),
         isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, isEmptyZone: isEmptyZone }))));
 };
@@ -3530,8 +3538,8 @@ function DropzoneClone({ node, zoneId, resolveDesignValue, className, WrapperCom
 function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', ...rest }) {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const draggedItem = useDraggedItemStore((state) => state.draggedItem);
-    const newComponentId = useDraggedItemStore((state) => state.componentId);
-    const hoveringZone = useZoneStore((state) => state.hoveringZone);
+    const isDraggingNewComponent = useDraggedItemStore((state) => Boolean(state.componentId));
+    const isHoveringZone = useZoneStore((state) => state.hoveringZone === zoneId);
     const tree = useTreeStore((state) => state.tree);
     const content = node?.children || tree.root?.children || [];
     const direction = useDropzoneDirection({ resolveDesignValue, node, zoneId });
@@ -3541,8 +3549,6 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
             return;
         return getItem({ id: draggedItem.draggableId }, tree)?.data.blockId;
     }, [draggedItem, tree]);
-    const isDraggingNewComponent = !!newComponentId;
-    const isHoveringZone = hoveringZone === zoneId;
     const isRootZone = zoneId === ROOT_ID;
     const isDestination = draggedDestinationId === zoneId;
     const isEmptyCanvas = isRootZone && !content.length;
@@ -3682,173 +3688,6 @@ const useBreakpoints = (breakpoints) => {
     return { resolveDesignValue };
 };
 
-class MouseOverHandler {
-    constructor() {
-        this.currentHoveredElementId = null;
-        this.getMargins = (element) => {
-            if (typeof window === 'undefined')
-                return undefined;
-            const styles = window.getComputedStyle(element);
-            const top = parseInt(styles.marginTop);
-            const bottom = parseInt(styles.marginBottom);
-            const left = parseInt(styles.marginLeft);
-            const right = parseInt(styles.marginRight);
-            return { top, bottom, left, right };
-        };
-        this.getFullCoordinates = (element) => {
-            const validChildren = Array.from(element.children).filter((child) => child instanceof HTMLElement && child.dataset.cfNodeBlockType === 'block');
-            const { left, top, width, height } = this.getBoundingClientRect(element);
-            const margins = this.getMargins(element);
-            const childrenCoordinates = validChildren.map((child) => {
-                const { left, top, width, height } = this.getBoundingClientRect(child);
-                return { left, top, width, height, margins };
-            });
-            return {
-                left,
-                top,
-                width,
-                height,
-                margins,
-                childrenCoordinates,
-            };
-        };
-        this.getClosestComponentInformation = (element) => {
-            let target = element;
-            // If the target is outside on the root or anywhere else on the iframes body
-            if (target?.id === 'VisualEditorRoot' || target?.tagName === 'BODY') {
-                const rootElement = document.getElementById('VisualEditorRoot');
-                const hoveredRootElement = {
-                    nodeId: 'root',
-                    blockType: 'root',
-                    blockId: 'root',
-                };
-                return [rootElement, hoveredRootElement];
-            }
-            // Find the closest contentful container or direct parent that is a contentful container
-            while (target) {
-                if (
-                // is itself a section?
-                target.dataset.cfNodeId ||
-                    // Or a direct child of a section
-                    (target.parentElement && target.parentElement.dataset.cfNodeBlockId === 'ContentfulSection')) {
-                    const sectionId = target.dataset.cfNodeId;
-                    const sectionBlockId = target.dataset.cfNodeBlockId;
-                    const sectionBlockType = target.dataset.cfNodeBlockType;
-                    const hoveredElement = {
-                        nodeId: sectionId,
-                        blockId: sectionBlockId,
-                        blockType: sectionBlockType,
-                    };
-                    return [target, hoveredElement];
-                }
-                target = target.parentElement;
-            }
-        };
-        this.getNewlyHoveredElement = (element) => {
-            let parentElement = null;
-            let parentSectionIndex = -1;
-            const [hoveredElement, hoveredInfo] = this.getClosestComponentInformation(element) || [
-                null,
-                null,
-            ];
-            if (!hoveredElement)
-                return;
-            // if hovered element is already hovered and the information is already sent
-            // ignore the rest and don't proceed.
-            if (hoveredInfo.nodeId === this.currentHoveredElementId)
-                return;
-            let parentHTMLElement = hoveredElement?.parentElement || null;
-            while (parentHTMLElement) {
-                const parentIsRoot = parentHTMLElement.id === 'VisualEditorRoot';
-                if (parentHTMLElement.dataset.cfNodeId || parentIsRoot) {
-                    parentElement = {
-                        nodeId: parentIsRoot ? 'root' : parentHTMLElement.dataset.cfNodeId,
-                        blockType: parentHTMLElement.dataset.cfNodeBlockType,
-                        blockId: parentHTMLElement.dataset.cfNodeBlockId,
-                    };
-                    const parentChildrenElements = parentHTMLElement.children;
-                    parentSectionIndex = Array.from(parentChildrenElements).findIndex((child) => child === hoveredElement);
-                    break;
-                }
-                parentHTMLElement = parentHTMLElement.parentElement;
-            }
-            const coordinates = this.getFullCoordinates(hoveredElement);
-            return { coordinates, hoveredElement: hoveredInfo, parentElement, parentSectionIndex };
-        };
-        this.handleMouseMove = (target) => {
-            const hoveredElementInfo = this.getNewlyHoveredElement(target);
-            if (!hoveredElementInfo) {
-                return;
-            }
-            const { coordinates, hoveredElement, parentElement, parentSectionIndex } = hoveredElementInfo;
-            this.currentHoveredElementId = hoveredElementInfo.hoveredElement.nodeId || null;
-            sendMessage(OUTGOING_EVENTS.NewHoveredElement, {
-                hoveredElement,
-                parentElement,
-                parentSectionIndex,
-                coordinates,
-            });
-        };
-        this.onMouseMove = (event) => {
-            const target = event.target;
-            this.handleMouseMove(target);
-        };
-        this.onMouseLeave = () => {
-            this.currentHoveredElementId = null;
-        };
-    }
-    getBoundingClientRect(element) {
-        const isAssembly = element.getAttribute('data-cf-node-block-type') === ASSEMBLY_NODE_TYPE;
-        if (!isAssembly) {
-            return element.getBoundingClientRect();
-        }
-        else {
-            // As we use `display: contents` for assemblies, there is no real "block"
-            // in the DOM and thus the browser fails to calculate the bounding rect.
-            // Instead, we calculate it for each child and add it up:
-            if (!element.firstElementChild) {
-                return { left: 0, top: 0, width: 0, height: 0 };
-            }
-            const firstChildRect = element.firstElementChild.getBoundingClientRect();
-            let fullHeight = firstChildRect.height;
-            let nextChild = element.firstElementChild.nextElementSibling;
-            while (nextChild) {
-                const nextChildRect = nextChild.getBoundingClientRect();
-                fullHeight += nextChildRect.height;
-                nextChild = nextChild.nextElementSibling;
-            }
-            // The root of a assembly positions its first level containers vertically.
-            // So we just need to add up the height and use the remaining properties from the first child.
-            return {
-                left: firstChildRect.left,
-                top: firstChildRect.top,
-                width: firstChildRect.width,
-                height: fullHeight,
-            };
-        }
-    }
-    attachEvent() {
-        document.addEventListener('mousemove', this.onMouseMove);
-        document.addEventListener('mouseout', this.onMouseLeave);
-    }
-    detachEvent() {
-        document.removeEventListener('mousemove', this.onMouseMove);
-        document.removeEventListener('mouseout', this.onMouseLeave);
-    }
-}
-
-/**
- * This function gets the element co-ordinates of a specified component in the DOM and its parent
- * and sends the DOM Rect to the client app
- */
-const sendHoveredComponentCoordinates = (instanceId) => {
-    const selectedElement = instanceId
-        ? document.querySelector(`[data-cf-node-id="${instanceId}"]`)
-        : undefined;
-    const mouseOverHandler = new MouseOverHandler();
-    mouseOverHandler.handleMouseMove(selectedElement || null);
-};
-
 class DragState {
     constructor() {
         this.isDragStartedOnParent = false;
@@ -3935,6 +3774,7 @@ function useEditorSubscriber() {
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
     const setComponentId = useDraggedItemStore((state) => state.setComponentId);
+    const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
     const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
     const setScrollY = useDraggedItemStore((state) => state.setScrollY);
@@ -4128,7 +3968,7 @@ function useEditorSubscriber() {
                 }
                 case INCOMING_EVENTS.HoverComponent: {
                     const { hoveredNodeId } = payload;
-                    sendHoveredComponentCoordinates(hoveredNodeId);
+                    setHoveredComponentId(hoveredNodeId);
                     break;
                 }
                 case INCOMING_EVENTS.ComponentDraggingChanged: {
@@ -4224,6 +4064,7 @@ function useEditorSubscriber() {
         updateNodesByUpdatedEntity,
         setMousePosition,
         resetEntityStore,
+        setHoveredComponentId,
     ]);
     /*
      * Handles on scroll business
@@ -4494,12 +4335,17 @@ const RootRenderer = ({ onChange }) => {
     useEditorSubscriber();
     const dragItem = useDraggedItemStore((state) => state.componentId);
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
+    const setHoveredComponentId = useDraggedItemStore((state) => state.setHoveredComponentId);
     const breakpoints = useTreeStore((state) => state.breakpoints);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const containerRef = useRef(null);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
     const [containerStyles, setContainerStyles] = useState({});
     const tree = useTreeStore((state) => state.tree);
+    const handleMouseOver = useCallback(() => {
+        // Remove hover state set by UI when mouse is over canvas
+        setHoveredComponentId();
+    }, [setHoveredComponentId]);
     const handleClickOutside = useCallback((e) => {
         const element = e.target;
         const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
@@ -4548,6 +4394,12 @@ const RootRenderer = ({ onChange }) => {
         if (onChange)
             onChange(tree);
     }, [tree, onChange]);
+    useEffect(() => {
+        window.addEventListener('mouseover', handleMouseOver);
+        return () => {
+            window.removeEventListener('mouseover', handleMouseOver);
+        };
+    }, [handleMouseOver]);
     useEffect(() => {
         document.addEventListener('click', handleClickOutside);
         return () => {