@contentful/experiences-visual-editor-react 1.0.2 → 1.0.3-beta.0

package/README.md

@@ -1 +1,7 @@
-# visual-editor
+# @contentful/experiences-visual-editor-react
+
+This package provides a visual editor for the [Experiences SDK](https://www.contentful.com/developers/docs/experiences/set-up-experiences-sdk/). It implements drag-and-drop functionality into the canvas, making the creation and editing of experiences more intuitive and user-friendly.
+
+## Documentation
+
+Please refer to our [Documentation](https://www.contentful.com/developers/docs/experiences/) to learn more about it.

package/dist/index.js

@@ -89,6 +89,7 @@ const structureComponents = new Set([
     CONTENTFUL_COMPONENTS$1.singleColumn.id,
 ]);
 const isContentfulStructureComponent = (componentId) => structureComponents.has(componentId ?? '');
+const isComponentAllowedOnRoot = (componentId) => isContentfulStructureComponent(componentId) || componentId === CONTENTFUL_COMPONENTS$1.divider.id;
 const isEmptyStructureWithRelativeHeight = (children, componentId, height) => {
     return (children === 0 &&
         isContentfulStructureComponent(componentId) &&
@@ -2763,7 +2764,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 !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\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  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;\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);
 
@@ -3155,13 +3156,14 @@ const { WIDTH, HEIGHT, INITIAL_OFFSET, OFFSET_INCREMENT, MIN_HEIGHT, MIN_DEPTH_H
 const calcOffsetDepth = (depth) => {
     return INITIAL_OFFSET - OFFSET_INCREMENT * depth;
 };
-const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
+const getHitboxStyles = ({ direction, zoneDepth, domRect, scrollY, offsetRect, }) => {
     if (!domRect) {
         return {
             display: 'none',
         };
     }
     const { width, height, top, left, bottom, right } = domRect;
+    const { height: offsetHeight, width: offsetWidth } = offsetRect || { height: 0, width: 0 };
     const MAX_SELF_HEIGHT = DRAGGABLE_HEIGHT * 2;
     const isDeepZone = zoneDepth > DEEP_ZONE;
     const isAboveMaxHeight = height > MAX_SELF_HEIGHT;
@@ -3170,7 +3172,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width,
                 height: HEIGHT,
-                top: top - calcOffsetDepth(zoneDepth) - scrollY,
+                top: top + offsetHeight - calcOffsetDepth(zoneDepth) - scrollY,
                 left,
                 zIndex: 100 + zoneDepth,
             };
@@ -3178,7 +3180,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width,
                 height: HEIGHT,
-                top: bottom + calcOffsetDepth(zoneDepth) - scrollY,
+                top: bottom + offsetHeight + calcOffsetDepth(zoneDepth) - scrollY,
                 left,
                 zIndex: 100 + zoneDepth,
             };
@@ -3186,7 +3188,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width: WIDTH,
                 height: height - HEIGHT,
-                left: left - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                left: left + offsetWidth - calcOffsetDepth(zoneDepth) - WIDTH / 2,
                 top: top + HEIGHT / 2 - scrollY,
                 zIndex: 100 + zoneDepth,
             };
@@ -3194,7 +3196,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
             return {
                 width: WIDTH,
                 height: height - HEIGHT,
-                left: right - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                left: right + offsetWidth - calcOffsetDepth(zoneDepth) - WIDTH / 2,
                 top: top + HEIGHT / 2 - scrollY,
                 zIndex: 100 + zoneDepth,
             };
@@ -3228,12 +3230,14 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect }) => {
     }
 };
 
-const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
+const Hitboxes = ({ zoneId, parentZoneId, isEmptyZone }) => {
     const tree = useTreeStore((state) => state.tree);
     const isDraggingOnCanvas = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const scrollY = useDraggedItemStore((state) => state.scrollY);
     const zoneDepth = useMemo(() => getItemDepthFromNode({ id: parentZoneId }, tree.root), [tree, parentZoneId]);
     const [fetchDomRect, setFetchDomRect] = useState(Date.now());
+    const { zones, hoveringZone } = useZoneStore();
+    const isHoveringZone = hoveringZone === zoneId;
     useEffect(() => {
         /**
          * A bit hacky but we need to wait a very small amount
@@ -3252,16 +3256,27 @@ const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
         return document.querySelector(`[${CTFL_ZONE_ID}="${zoneId}"]`)?.getBoundingClientRect();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [zoneId, fetchDomRect]);
-    const zones = useZoneStore((state) => state.zones);
+    // Use the size of the cloned dragging element to offset the position of the hitboxes
+    // So that when dragging causes a dropzone to expand, the hitboxes will be in the correct position
+    const offsetRect = useMemo(() => {
+        if (isEmptyZone || !isHoveringZone)
+            return;
+        return document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`)?.getBoundingClientRect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isEmptyZone, isHoveringZone, fetchDomRect]);
     const zoneDirection = zones[parentZoneId]?.direction || 'vertical';
     const isVertical = zoneDirection === 'vertical';
     const isRoot = parentZoneId === ROOT_ID;
-    const showRootHitboxes = isRoot && enableRootHitboxes;
-    const getStyles = useCallback((direction) => getHitboxStyles({ direction, zoneDepth, domRect, scrollY }), [zoneDepth, domRect, scrollY]);
+    const getStyles = useCallback((direction) => getHitboxStyles({
+        direction,
+        zoneDepth,
+        domRect,
+        scrollY,
+        offsetRect,
+    }), [zoneDepth, domRect, scrollY, offsetRect]);
     const ActiveHitboxes = (React.createElement(React.Fragment, null,
         React.createElement("div", { "data-ctfl-zone-id": zoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.SELF_VERTICAL : HitboxDirection.SELF_HORIZONTAL) }),
-        showRootHitboxes && (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) })),
-        !isRoot && (React.createElement(React.Fragment, null,
+        isRoot ? (React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(HitboxDirection.BOTTOM) })) : (React.createElement(React.Fragment, null,
             React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.TOP : HitboxDirection.LEFT) }),
             React.createElement("div", { "data-ctfl-zone-id": parentZoneId, className: styles$2.hitbox, style: getStyles(isVertical ? HitboxDirection.BOTTOM : HitboxDirection.RIGHT) })))));
     if (!hitboxContainer) {
@@ -3270,7 +3285,7 @@ const Hitboxes = ({ zoneId, parentZoneId, enableRootHitboxes }) => {
     return createPortal(ActiveHitboxes, hitboxContainer);
 };
 
-const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggingNewComponent, index, zoneId, userIsDragging, placeholder, }) => {
+const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, }) => {
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const { node, componentId, wrapperProps, definition, elementToRender } = useComponent({
@@ -3285,8 +3300,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, draggi
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isAssembly = node.type === ASSEMBLY_NODE_TYPE;
     const isStructureComponent = isContentfulStructureComponent(node.data.blockId);
-    const isRootComponent = zoneId === ROOT_ID;
-    const enableRootHitboxes = isRootComponent && !!draggingNewComponent;
+    const isEmptyZone = !node.children.length;
     const onClick = (e) => {
         e.stopPropagation();
         if (!userIsDragging) {
@@ -3307,11 +3321,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 && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+            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 },
         elementToRender(),
-        isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, enableRootHitboxes: enableRootHitboxes }))));
+        isStructureComponent && !isSingleColumn && userIsDragging && (React.createElement(Hitboxes, { parentZoneId: zoneId, zoneId: componentId, isEmptyZone: isEmptyZone }))));
 };
 
 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";
@@ -3331,27 +3345,6 @@ const EmptyContainer = ({ isDragging }) => {
         React.createElement("span", { className: styles$1.label }, "Add components to begin")));
 };
 
-const getZoneParents = (zoneId) => {
-    const element = document.querySelector(`[data-rfd-droppable-id='${zoneId}']`);
-    if (!element) {
-        return [];
-    }
-    function getZonesToRoot(element, parentIds = []) {
-        if (!element) {
-            return parentIds;
-        }
-        const attribute = element.getAttribute('data-rfd-droppable-id');
-        if (attribute === ROOT_ID) {
-            return parentIds;
-        }
-        if (attribute) {
-            parentIds.push(attribute);
-        }
-        return getZonesToRoot(element.parentElement, parentIds);
-    }
-    return getZonesToRoot(element);
-};
-
 const useDropzoneDirection = ({ resolveDesignValue, node, zoneId }) => {
     const zone = useZoneStore((state) => state.zones);
     const upsertZone = useZoneStore((state) => state.upsertZone);
@@ -3434,8 +3427,12 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     const tree = useTreeStore((state) => state.tree);
     const content = node?.children || tree.root?.children || [];
     const direction = useDropzoneDirection({ resolveDesignValue, node, zoneId });
-    const draggedSourceId = draggedItem && draggedItem.source.droppableId;
     const draggedDestinationId = draggedItem && draggedItem.destination?.droppableId;
+    const draggedBlockId = useMemo(() => {
+        if (!draggedItem)
+            return;
+        return getItem({ id: draggedItem.draggableId }, tree)?.data.blockId;
+    }, [draggedItem, tree]);
     const isDraggingNewComponent = !!newComponentId;
     const isHoveringZone = hoveringZone === zoneId;
     const isRootZone = zoneId === ROOT_ID;
@@ -3449,43 +3446,33 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     const renderClonedDropzone = useCallback((node, props) => {
         return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, ...props }));
     }, [resolveDesignValue]);
-    if (!resolveDesignValue) {
-        return null;
-    }
-    /**
-     * The Rules of Dropzones
-     *
-     * 1. A dropzone is disabled unless the mouse is hovering over it
-     *
-     * 2. Dragging a new component onto the canvas has no addtional rules
-     * besides rule #1
-     *
-     * 3. Dragging a component that is a direct descendant of the root
-     * (parentId === ROOT_ID) then only the Root Dropzone is enabled
-     *
-     * 4. Dragging a nested component (parentId !== ROOT_ID) then the Root
-     * Dropzone is disabled, all other Dropzones follow rule #1
-     *
-     * 5. Assemblies and the SingleColumn component are always disabled
-     *
-     */
-    const isDropzoneEnabled = () => {
+    const isDropzoneEnabled = useMemo(() => {
+        // Disable dropzone for Columns component
         if (node?.data.blockId === CONTENTFUL_COMPONENTS.columns.id) {
             return false;
         }
+        // Disable dropzone for Assembly
         if (isAssembly) {
             return false;
         }
-        if (isDraggingNewComponent) {
-            return isHoveringZone;
+        // Enable dropzone for the non-root hovered zones if component is not allowed on root
+        if (!isDraggingNewComponent && !isComponentAllowedOnRoot(draggedBlockId)) {
+            return isHoveringZone && !isRootZone;
         }
-        const draggingParentIds = getZoneParents(draggedSourceId || '');
-        if (!draggingParentIds.length) {
-            return isRootZone;
-        }
-        return isHoveringZone && !isRootZone;
-    };
-    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled(), renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone })) }, (provided, snapshot) => {
+        // Enable dropzone for the hovered zone only
+        return isHoveringZone;
+    }, [
+        node?.data.blockId,
+        isAssembly,
+        isHoveringZone,
+        isRootZone,
+        isDraggingNewComponent,
+        draggedBlockId,
+    ]);
+    if (!resolveDesignValue) {
+        return null;
+    }
+    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone })) }, (provided, snapshot) => {
         return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ref: provided?.innerRef, id: zoneId, "data-ctfl-zone-id": zoneId, className: classNames(styles$2.container, {
                 [styles$2.isEmptyCanvas]: isEmptyCanvas,
                 [styles$2.isDragging]: userIsDragging && !isAssembly,