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

package/dist/index.js

@@ -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',
@@ -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  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 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 = {
@@ -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,
@@ -2016,9 +2061,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}"]`)
@@ -2511,7 +2558,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 !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);
 
@@ -4143,27 +4190,28 @@ 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 = () => {
+    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]`);
+        if (clickedOnCanvas && !isRoot) {
+            return;
+        }
         sendMessage(OUTGOING_EVENTS.OutsideCanvasClick, {
             outsideCanvasClick: true,
         });
-    };
+        sendMessage(OUTGOING_EVENTS.ComponentSelected, {
+            selectedId: '',
+        });
+        setSelectedNodeId('');
+    }, [setSelectedNodeId]);
     const handleResizeCanvas = useCallback(() => {
         const parentElement = containerRef.current?.parentElement;
         if (!parentElement) {
@@ -4193,6 +4241,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
@@ -4244,16 +4302,6 @@ 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);
@@ -4274,7 +4322,7 @@ const VisualEditorRoot = () => {
         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);
             }