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

package/dist/index.js

@@ -16,7 +16,7 @@ styleInject(css_248z$7);
 
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
-    CompositionUpdated: 'componentTreeUpdated',
+    ExperienceUpdated: 'componentTreeUpdated',
     ComponentDraggingChanged: 'componentDraggingChanged',
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
@@ -520,7 +520,7 @@ const builtInStyles = {
         type: 'Text',
         group: 'style',
         description: 'The border of the section',
-        defaultValue: '1px solid rgba(0, 0, 0, 0)',
+        defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
     cfGap: {
         displayName: 'Gap',
@@ -1187,6 +1187,13 @@ class EntityStoreBase {
         }
         return this.entryMap.get(id);
     }
+    toJSON() {
+        return {
+            entryMap: Object.fromEntries(this.entryMap),
+            assetMap: Object.fromEntries(this.assetMap),
+            locale: this.locale,
+        };
+    }
 }
 
 /**
@@ -1435,7 +1442,7 @@ 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  outline-offset: -2px;\n  outline: 2px solid transparent;\n  box-sizing: border-box;\n  display: flex;\n}\n\n.styles-module_DraggableClone__X8zTA {\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 {\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 {\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,\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id] {\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)) {\n  outline: 2px solid var(--exp-builder-gray500);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover,\n.styles-module_isAssemblyBlock__Y3Avk:hover div[data-rfd-draggable-id],\n.styles-module_DraggableComponent__m5-dA:hover div[data-rfd-draggable-id][data-cf-node-block-type^='assembly'] {\n  outline: 2px dashed var(--exp-builder-purple600);\n}\n\n.styles-module_isAssemblyBlock__Y3Avk:hover:not(:has(div[data-rfd-draggable-id]:hover)) {\n  outline: 2px solid var(--exp-builder-purple600);\n}\n";
+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"};
 styleInject(css_248z$6);
 
@@ -1467,7 +1474,7 @@ const OUTGOING_EVENTS = {
 };
 const INCOMING_EVENTS = {
     RequestEditorMode: 'requestEditorMode',
-    CompositionUpdated: 'componentTreeUpdated',
+    ExperienceUpdated: 'componentTreeUpdated',
     ComponentDraggingChanged: 'componentDraggingChanged',
     ComponentDragCanceled: 'componentDragCanceled',
     ComponentDragStarted: 'componentDragStarted',
@@ -2009,9 +2016,11 @@ const useSelectedInstanceCoordinates = ({ node }) => {
         if (selectedNodeId !== node.data.id) {
             return;
         }
+        // Allows the drop animation to finish before
+        // calculating the components coordinates
         setTimeout(() => {
             sendSelectedComponentCoordinates(node.data.id);
-        }, 200);
+        }, 10);
     }, [node, selectedNodeId]);
     const selectedElement = node.data.id
         ? document.querySelector(`[data-cf-node-id="${selectedNodeId}"]`)
@@ -2388,7 +2397,9 @@ const resolveAssembly = ({ node, entityStore, }) => {
         });
         return node;
     }
-    const componentFields = entityStore?.getValue(assembly, ['fields']);
+    const componentFields = entityStore?.getValue(assembly, [
+        'fields',
+    ]);
     if (!componentFields) {
         console.warn(`Entry for assembly with ID '${componentId}' not found`, { entityStore });
         return node;
@@ -2502,7 +2513,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  outline-offset: -2px;\n  outline: 2px solid transparent;\n  width: 100%;\n  background-color: transparent;\n  transition:\n    outline 0.2s,\n    background-color 0.2s;\n  pointer-events: all;\n}\n\n.styles-module_container__te-1H:not(.styles-module_isRoot__5cn-i) {\n  outline-offset: -1px;\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) {\n  outline: 2px dashed var(--exp-builder-gray300);\n}\n\n.styles-module_isDestination__5sCQx:not(.styles-module_isRoot__5cn-i) {\n  outline: 2px dashed var(--exp-builder-blue400);\n  background-color: rgba(var(--exp-builder-blue100-rgb), 0.5);\n  z-index: 100;\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;\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 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);
 
@@ -3067,7 +3078,7 @@ const EmptyContainer = ({ isDragging }) => {
             React.createElement("rect", { width: "11.676", height: "11.676", x: "18.011", y: "18.625", rx: "1.621", transform: "rotate(45 18.01 18.625)" }),
             React.createElement("rect", { width: "11.676", height: "11.676", x: "30.557", y: "10.131", rx: "1.621", transform: "rotate(60 30.557 10.13)" }),
             React.createElement("path", { fill: "#fff", stroke: "#fff", strokeWidth: ".243", d: "M31.113 17.038a.463.463 0 0 0-.683-.517l-1.763 1.032-1.033-1.763a.464.464 0 0 0-.8.469l1.034 1.763-1.763 1.033a.463.463 0 1 0 .468.8l1.763-1.033 1.033 1.763a.463.463 0 1 0 .8-.469l-1.033-1.763 1.763-1.033a.463.463 0 0 0 .214-.282Z" })),
-        React.createElement("span", { className: styles$1.label }, "Add elements to begin")));
+        React.createElement("span", { className: styles$1.label }, "Add components to begin")));
 };
 
 const getZoneParents = (zoneId) => {
@@ -3694,7 +3705,7 @@ function useEditorSubscriber() {
             console.debug(`[experiences-sdk-react::onMessage] Received message [${eventData.eventType}]`, eventData);
             const { payload } = eventData;
             switch (eventData.eventType) {
-                case INCOMING_EVENTS.CompositionUpdated: {
+                case INCOMING_EVENTS.ExperienceUpdated: {
                     const { tree, locale, changedNode, changedValueType, assemblies, } = payload;
                     // Make sure to first store the assemblies before setting the tree and thus triggering a rerender
                     if (assemblies) {
@@ -4150,10 +4161,19 @@ const RootRenderer = ({ onChange }) => {
             document.removeEventListener('click', handleClickOutside);
         };
     }, []);
-    const handleClickOutside = () => {
+    const handleClickOutside = (e) => {
+        const element = e.target;
+        const isRoot = element.getAttribute('data-ctfl-zone-id') === ROOT_ID;
+        const clickedOnCanvas = element.closest(`[data-ctfl-root]`);
+        if (clickedOnCanvas && !isRoot) {
+            return;
+        }
         sendMessage(OUTGOING_EVENTS.OutsideCanvasClick, {
             outsideCanvasClick: true,
         });
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            selectedId: '',
+        });
     };
     const handleResizeCanvas = useCallback(() => {
         const parentElement = containerRef.current?.parentElement;