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

package/dist/index.js

@@ -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,
@@ -2120,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;
     },
 }));
 
@@ -3102,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";
@@ -3633,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);
@@ -3654,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 = () => {
@@ -3725,10 +3728,7 @@ function useEditorSubscriber() {
         finally {
             endFetching();
         }
-    }, [
-        /* dataSource, */ entityStore,
-        setEntitiesFetched /* setFetchingEntities, assembliesRegistry */,
-    ]);
+    }, [setEntitiesFetched /* setFetchingEntities, assembliesRegistry */]);
     useEffect(() => {
         const onMessage = async (event) => {
             let reason;
@@ -3758,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) {
                         /**
@@ -3770,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({
@@ -3778,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: {
@@ -3924,6 +3925,7 @@ function useEditorSubscriber() {
         updateTree,
         updateNodesByUpdatedEntity,
         setMousePosition,
+        resetEntityStore,
     ]);
     /*
      * Handles on scroll business
@@ -4304,20 +4306,8 @@ const useInitializeEditor = () => {
 
 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);