@contentful/experiences-visual-editor-react 0.0.1-alpha.5 → 0.0.1-alpha.7

package/dist/index.js

@@ -1442,8 +1442,8 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
     return deepReferences;
 }
 
-var css_248z$6 = ".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}\n\n.styles-module_DraggableClone__X8zTA:before {\n  outline: 2px solid var(--exp-builder-blue500);\n}\n\n.styles-module_DraggableComponent__m5-dA > * {\n  pointer-events: none;\n}\n\n.styles-module_isDragging__WHjPU {\n  overflow: hidden;\n}\n\n.styles-module_isDragging__WHjPU * {\n  pointer-events: none !important;\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","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","userIsDragging":"styles-module_userIsDragging__lqbjG","isAssemblyBlock":"styles-module_isAssemblyBlock__Y3Avk"};
+var css_248z$6 = ".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"};
 styleInject(css_248z$6);
 
 const SCROLL_STATES = {
@@ -1703,7 +1703,7 @@ const NEW_COMPONENT_ID = 'ctfl-new-draggable';
 const CTFL_ZONE_ID = 'data-ctfl-zone-id';
 const CTFL_DRAGGING_ELEMENT = 'data-ctfl-dragging-element';
 const HITBOX = {
-    WIDTH: 80,
+    WIDTH: 70,
     HEIGHT: 20,
     INITIAL_OFFSET: 10,
     OFFSET_INCREMENT: 8,
@@ -1741,6 +1741,41 @@ var DraggablePosition;
     DraggablePosition[DraggablePosition["MOUSE_POSITION"] = 1] = "MOUSE_POSITION";
 })(DraggablePosition || (DraggablePosition = {}));
 
+const calcOffsetLeft = (parentElement, placeholderWidth, nodeWidth) => {
+    if (!parentElement) {
+        return 0;
+    }
+    const alignItems = window.getComputedStyle(parentElement).alignItems;
+    if (alignItems === 'center') {
+        return -(placeholderWidth - nodeWidth) / 2;
+    }
+    if (alignItems === 'end') {
+        return -placeholderWidth + nodeWidth + 2;
+    }
+    return 0;
+};
+const calcOffsetTop = (parentElement, placeholderHeight, nodeHeight) => {
+    if (!parentElement) {
+        return 0;
+    }
+    const alignItems = window.getComputedStyle(parentElement).alignItems;
+    if (alignItems === 'center') {
+        return -(placeholderHeight - nodeHeight) / 2;
+    }
+    if (alignItems === 'end') {
+        return -placeholderHeight + nodeHeight + 2;
+    }
+    return 0;
+};
+const getPaddingOffset = (element) => {
+    const paddingLeft = parseFloat(window.getComputedStyle(element).paddingLeft);
+    const paddingRight = parseFloat(window.getComputedStyle(element).paddingRight);
+    const paddingTop = parseFloat(window.getComputedStyle(element).paddingTop);
+    const paddingBottom = parseFloat(window.getComputedStyle(element).paddingBottom);
+    const horizontalOffset = paddingLeft + paddingRight;
+    const verticalOffset = paddingTop + paddingBottom;
+    return [horizontalOffset, verticalOffset];
+};
 /**
  * Calculate the size and position of the dropzone indicator
  * when dragging a new component onto the canvas
@@ -1758,10 +1793,15 @@ const calcNewComponentStyles = (params) => {
     }
     const elementSizes = element.getBoundingClientRect();
     const dropzoneSizes = dropzone.getBoundingClientRect();
-    const width = isHorizontal ? DRAGGABLE_WIDTH : dropzoneSizes.width;
-    const height = isHorizontal ? dropzoneSizes.height : DRAGGABLE_HEIGHT;
-    const top = isHorizontal ? -(height - elementSizes.height) / 2 : -height;
-    const left = isHorizontal ? -width : -(width - elementSizes.width) / 2;
+    const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
+    const width = isHorizontal ? DRAGGABLE_WIDTH : dropzoneSizes.width - horizontalPadding;
+    const height = isHorizontal ? dropzoneSizes.height - verticalPadding : DRAGGABLE_HEIGHT;
+    const top = isHorizontal
+        ? calcOffsetTop(element.parentElement, height, elementSizes.height)
+        : -height;
+    const left = isHorizontal
+        ? -width
+        : calcOffsetLeft(element.parentElement, width, elementSizes.width);
     return {
         width,
         height,
@@ -1792,10 +1832,15 @@ const calcMovementStyles = (params) => {
     const elementSizes = element.getBoundingClientRect();
     const dropzoneSizes = dropzone.getBoundingClientRect();
     const draggableSizes = draggable.getBoundingClientRect();
-    const width = isHorizontal ? draggableSizes.width : dropzoneSizes.width;
-    const height = isHorizontal ? dropzoneSizes.height : draggableSizes.height;
-    const top = isHorizontal ? -(height - elementSizes.height) / 2 : -height;
-    const left = isHorizontal ? -width : -(width - elementSizes.width) / 2;
+    const [horizontalPadding, verticalPadding] = getPaddingOffset(dropzone);
+    const width = isHorizontal ? draggableSizes.width : dropzoneSizes.width - horizontalPadding;
+    const height = isHorizontal ? dropzoneSizes.height - verticalPadding : draggableSizes.height;
+    const top = isHorizontal
+        ? calcOffsetTop(element.parentElement, height, elementSizes.height)
+        : -height;
+    const left = isHorizontal
+        ? -width
+        : calcOffsetLeft(element.parentElement, width, elementSizes.width);
     return {
         width,
         height,
@@ -2075,10 +2120,12 @@ const useEntityStore = create((set) => ({
     },
     resetEntityStore(locale, entities = []) {
         console.debug(`[experiences-sdk-react] Resetting entity store because the locale changed to '${locale}'.`);
+        const newEntityStore = new EditorModeEntityStore({ locale, entities });
         set({
-            entityStore: new EditorModeEntityStore({ locale, entities }),
+            entityStore: newEntityStore,
             areEntitiesFetched: false,
         });
+        return newEntityStore;
     },
 }));
 
@@ -2513,7 +2560,7 @@ const DraggableChildComponent = (props) => {
     })));
 };
 
-var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  transition: background-color 0.2s;\n  pointer-events: all;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -1px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):before {\n  transition: outline 0.2s, background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
+var css_248z$2 = ".styles-module_container__te-1H {\n  margin-left: auto;\n  margin-right: auto;\n  position: relative;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  transition: background-color 0.2s;\n  pointer-events: all !important;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i):before {\n  content: '';\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  outline-offset: -1px;\n  outline: 2px solid transparent;\n  z-index: 1;\n  transition: outline 0.2s;\n  pointer-events: none;\n}\n\n.styles-module_isRoot__5cn-i,\n.styles-module_isEmptyCanvas__0XHZR {\n  flex: 1;\n}\n\n.styles-module_isEmptyZone__zVpnZ {\n  min-height: 80px;\n}\n\n.styles-module_isDragging__Gm8v5:not(.styles-module_isRoot__5cn-i):before {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i):before {\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 2;\n}\n\n.styles-module_hitbox__YQ-1Z {\n  position: fixed;\n  pointer-events: all !important;\n}\n";
 var styles$2 = {"container":"styles-module_container__te-1H","isRoot":"styles-module_isRoot__5cn-i","isEmptyCanvas":"styles-module_isEmptyCanvas__0XHZR","isEmptyZone":"styles-module_isEmptyZone__zVpnZ","isDragging":"styles-module_isDragging__Gm8v5","isDestination":"styles-module_isDestination__5sCQx","hitbox":"styles-module_hitbox__YQ-1Z"};
 styleInject(css_248z$2);
 
@@ -3057,11 +3104,11 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggi
     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 }),
-            isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+            isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
     }
     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 },
         elementToRender(),
-        isStructureComponent && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+        isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
 };
 
 var css_248z$1 = ".EmptyContainer-module_container__XPH5b {\n  height: 200px;\n  display: flex;\n  width: 100%;\n  position: absolute;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  transition: all 0.2s;\n  color: var(--exp-builder-gray400);\n  font-size: var(--exp-builder-font-size-l);\n  font-family: var(--exp-builder-font-stack-primary);\n  outline: 2px dashed var(--exp-builder-gray400);\n  outline-offset: -2px;\n}\n\n.EmptyContainer-module_highlight__lcICy:hover {\n  outline: 2px dashed var(--exp-builder-blue500);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  cursor: grabbing;\n}\n\n.EmptyContainer-module_icon__82-2O rect {\n  fill: var(--exp-builder-gray400);\n}\n\n.EmptyContainer-module_label__4TxRa {\n  margin-left: var(--exp-builder-spacing-s);\n}\n";
@@ -3588,6 +3635,7 @@ function useEditorSubscriber() {
     const setDataSource = useEditorStore((state) => state.setDataSource);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
+    const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
     const setComponentId = useDraggedItemStore((state) => state.setComponentId);
     const setDraggingOnCanvas = useDraggedItemStore((state) => state.setDraggingOnCanvas);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
@@ -3609,7 +3657,7 @@ function useEditorSubscriber() {
      * Fills up entityStore with entities from newDataSource and from the tree.
      * Also manages "entity status" variables (areEntitiesFetched, isFetchingEntities)
      */
-    const fetchMissingEntities = useCallback(async (newDataSource, tree) => {
+    const fetchMissingEntities = useCallback(async (entityStore, newDataSource, tree) => {
         // if we realize that there's nothing missing and nothing to fill-fetch before we do any async call,
         // then we can simply return and not lock the EntityStore at all.
         const startFetching = () => {
@@ -3680,10 +3728,7 @@ function useEditorSubscriber() {
         finally {
             endFetching();
         }
-    }, [
-        /* dataSource, */ entityStore,
-        setEntitiesFetched /* setFetchingEntities, assembliesRegistry */,
-    ]);
+    }, [setEntitiesFetched /* setFetchingEntities, assembliesRegistry */]);
     useEffect(() => {
         const onMessage = async (event) => {
             let reason;
@@ -3713,6 +3758,11 @@ function useEditorSubscriber() {
                         // If the assemblyEntry is not yet fetched, this will be done below by
                         // the imperative calls to fetchMissingEntities.
                     }
+                    let newEntityStore = entityStore;
+                    if (entityStore.locale !== locale) {
+                        newEntityStore = resetEntityStore(locale);
+                        setLocale(locale);
+                    }
                     // Below are mutually exclusive cases
                     if (changedNode) {
                         /**
@@ -3725,7 +3775,7 @@ function useEditorSubscriber() {
                         if (changedValueType === 'BoundValue') {
                             const newDataSource = { ...dataSource, ...changedNode.data.dataSource };
                             setDataSource(newDataSource);
-                            await fetchMissingEntities(newDataSource, tree);
+                            await fetchMissingEntities(newEntityStore, newDataSource, tree);
                         }
                         else if (changedValueType === 'UnboundValue') {
                             setUnboundValues({
@@ -3733,19 +3783,15 @@ function useEditorSubscriber() {
                                 ...changedNode.data.unboundValues,
                             });
                         }
-                        // Update the tree when all necessary data is fetched and ready for rendering.
-                        updateTree(tree);
-                        setLocale(locale);
                     }
                     else {
                         const { dataSource, unboundValues } = getDataFromTree(tree);
                         setDataSource(dataSource);
                         setUnboundValues(unboundValues);
-                        await fetchMissingEntities(dataSource, tree);
-                        // Update the tree when all necessary data is fetched and ready for rendering.
-                        updateTree(tree);
-                        setLocale(locale);
+                        await fetchMissingEntities(newEntityStore, dataSource, tree);
                     }
+                    // Update the tree when all necessary data is fetched and ready for rendering.
+                    updateTree(tree);
                     break;
                 }
                 case INCOMING_EVENTS.AssembliesRegistered: {
@@ -3879,6 +3925,7 @@ function useEditorSubscriber() {
         updateTree,
         updateNodesByUpdatedEntity,
         setMousePosition,
+        resetEntityStore,
     ]);
     /*
      * Handles on scroll business
@@ -4145,23 +4192,14 @@ const RootRenderer = ({ onChange }) => {
     const dragItem = useDraggedItemStore((state) => state.componentId);
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const breakpoints = useTreeStore((state) => state.breakpoints);
+    const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const draggableSourceId = useDraggedItemStore((state) => state.draggedItem?.source.droppableId);
     const draggingNewComponent = !!draggableSourceId?.startsWith(COMPONENT_LIST_ID);
     const containerRef = useRef(null);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
     const [containerStyles, setContainerStyles] = useState({});
     const tree = useTreeStore((state) => state.tree);
-    useEffect(() => {
-        if (onChange)
-            onChange(tree);
-    }, [tree, onChange]);
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    const handleClickOutside = (e) => {
+    const handleClickOutside = useCallback((e) => {
         const element = e.target;
         const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
         const clickedOnCanvas = element.closest(`[data-ctfl-root]`);
@@ -4174,7 +4212,8 @@ const RootRenderer = ({ onChange }) => {
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             selectedId: '',
         });
-    };
+        setSelectedNodeId('');
+    }, [setSelectedNodeId]);
     const handleResizeCanvas = useCallback(() => {
         const parentElement = containerRef.current?.parentElement;
         if (!parentElement) {
@@ -4204,6 +4243,16 @@ const RootRenderer = ({ onChange }) => {
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [containerRef.current]);
+    useEffect(() => {
+        if (onChange)
+            onChange(tree);
+    }, [tree, onChange]);
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [handleClickOutside]);
     useEffect(() => {
         handleResizeCanvas();
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -4255,37 +4304,15 @@ const useInitializeEditor = () => {
     return initialized;
 };
 
-const findNearestDropzone = (element) => {
-    const zoneId = element.getAttribute(CTFL_ZONE_ID);
-    if (!element.parentElement) {
-        return null;
-    }
-    if (element.tagName === 'BODY') {
-        return null;
-    }
-    return zoneId ?? findNearestDropzone(element.parentElement);
-};
 const VisualEditorRoot = () => {
     const initialized = useInitializeEditor();
-    const locale = useEditorStore((state) => state.locale);
     const setMousePosition = useDraggedItemStore((state) => state.setMousePosition);
-    const entityStore = useEntityStore((state) => state.entityStore);
     const setHoveringZone = useZoneStore((state) => state.setHoveringZone);
-    const resetEntityStore = useEntityStore((state) => state.resetEntityStore);
-    useEffect(() => {
-        if (!locale) {
-            return;
-        }
-        if (entityStore.locale === locale) {
-            return;
-        }
-        resetEntityStore(locale);
-    }, [locale, resetEntityStore, entityStore.locale]);
     useEffect(() => {
         const onMouseMove = (e) => {
             setMousePosition(e.clientX, e.clientY);
             const target = e.target;
-            const zoneId = findNearestDropzone(target);
+            const zoneId = target.closest(`[${CTFL_ZONE_ID}]`)?.getAttribute(CTFL_ZONE_ID);
             if (zoneId) {
                 setHoveringZone(zoneId);
             }