@contentful/experiences-visual-editor-react 1.0.6 → 1.0.7-beta.0

package/dist/index.js

@@ -198,6 +198,9 @@ const tryParseMessage = (event) => {
     return eventData;
 };
 
+// Keep this for backwards compatilibity - deleting this would be a breaking change
+// because existing components on a users experience will have the width value as fill
+// rather than 100%
 const transformFill = (value) => (value === 'fill' ? '100%' : value);
 const transformGridColumn = (span) => {
     if (!span) {
@@ -368,7 +371,7 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
 };
 /**
  * Container/section default behavior:
- * Default height => height: EMPTY_CONTAINER_HEIGHT (120px)
+ * Default height => height: EMPTY_CONTAINER_HEIGHT
  * If a container component has children => height: 'fit-content'
  */
 const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
@@ -494,7 +497,7 @@ const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', fo
 };
 
 const MAX_WIDTH_ALLOWED = 4000;
-const getOptimizedImageAsset = (file, sizes, quality = '100%', format) => {
+const getOptimizedImageAsset = ({ file, sizes, loading, quality = '100%', format, }) => {
     const qualityNumber = Number(quality.replace('%', ''));
     if (!validateParams(file, qualityNumber, format)) ;
     const url = file.url;
@@ -514,6 +517,7 @@ const getOptimizedImageAsset = (file, sizes, quality = '100%', format) => {
         srcSet,
         sizes,
         file,
+        loading,
     };
     return optimizedImageAsset;
 };
@@ -536,7 +540,13 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
-            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, options.quality, options.format);
+            value = getOptimizedImageAsset({
+                file: asset.fields.file,
+                loading: options.loading,
+                sizes: options.targetSize,
+                quality: options.quality,
+                format: options.format,
+            });
             return value;
         }
         catch (error) {
@@ -679,7 +689,7 @@ const builtInStyles = {
         type: 'Text',
         group: 'style',
         description: 'The width of the section',
-        defaultValue: 'fill',
+        defaultValue: '100%',
     },
     cfHeight: {
         displayName: 'Height',
@@ -2166,7 +2176,8 @@ function useDraggablePosition({ draggableId, draggableRef, position }) {
     const draggingId = useDraggedItemStore((state) => state.onBeforeCaptureId);
     const preDragDomRect = useDraggedItemStore((state) => state.domRect);
     useEffect(() => {
-        const el = draggableRef?.current;
+        const el = draggableRef?.current ??
+            document.querySelector(`[${CTFL_DRAGGING_ELEMENT}][data-cf-node-id="${draggableId}"]`);
         if (!isDraggingOnCanvas || draggingId !== draggableId || !el) {
             return;
         }
@@ -2540,7 +2551,6 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
             }),
             ...(userIsDragging &&
                 isContentfulStructureComponent(node?.data.blockId) &&
-                node?.data.blockId !== CONTENTFUL_COMPONENTS.divider.id &&
                 node?.data.blockId !== CONTENTFUL_COMPONENTS.columns.id && {
                 padding: addExtraDropzonePadding(componentStyles.padding?.toString() || '0 0 0 0'),
             }),
@@ -2568,13 +2578,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
 };
 const addExtraDropzonePadding = (padding) => padding
     .split(' ')
-    .map((value) => {
-    if (value.endsWith('px')) {
-        const parsedValue = parseInt(value.replace(/px$/, ''), 10);
-        return (parsedValue < DRAG_PADDING ? DRAG_PADDING : parsedValue) + 'px';
-    }
-    return `${DRAG_PADDING}px`;
-})
+    .map((value) => parseFloat(value) === 0 ? `${DRAG_PADDING}px` : `calc(${value} + ${DRAG_PADDING}px)`)
     .join(' ');
 
 var PostMessageMethods;
@@ -3301,7 +3305,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect, scrollY, offsetRect, }
             return {
                 width: WIDTH,
                 height: height - HEIGHT,
-                left: right + offsetWidth - calcOffsetDepth(zoneDepth) - WIDTH / 2,
+                left: right + offsetWidth + calcOffsetDepth(zoneDepth) - WIDTH / 2,
                 top: top + HEIGHT / 2 - scrollY,
                 zIndex: 100 + zoneDepth,
             };
@@ -3325,7 +3329,7 @@ const getHitboxStyles = ({ direction, zoneDepth, domRect, scrollY, offsetRect, }
             return {
                 width: width - DRAGGABLE_WIDTH * 2,
                 height,
-                left: left + (DRAGGABLE_WIDTH * 2) / 2,
+                left: left + DRAGGABLE_WIDTH,
                 top: top - scrollY,
                 zIndex: 1000 + zoneDepth,
             };
@@ -3340,35 +3344,26 @@ const Hitboxes = ({ zoneId, parentZoneId, isEmptyZone }) => {
     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 zones = useZoneStore((state) => state.zones);
+    const hoveringZone = useZoneStore((state) => state.hoveringZone);
     const isHoveringZone = hoveringZone === zoneId;
-    useEffect(() => {
-        /**
-         * A bit hacky but we need to wait a very small amount
-         * of time to fetch the dom getBoundingClientRect once a
-         * drag starts because we need pre-drag styles like padding
-         * applied before we calculate positions of hitboxes
-         */
-        setTimeout(() => {
-            setFetchDomRect(Date.now());
-        }, 50);
-    }, [isDraggingOnCanvas]);
     const hitboxContainer = useMemo(() => {
         return document.querySelector('[data-ctfl-hitboxes]');
     }, []);
     const domRect = useMemo(() => {
+        if (!isDraggingOnCanvas)
+            return;
         return document.querySelector(`[${CTFL_ZONE_ID}="${zoneId}"]`)?.getBoundingClientRect();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [zoneId, fetchDomRect]);
+    }, [zoneId, isDraggingOnCanvas]);
     // 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)
+        if (!isDraggingOnCanvas || isEmptyZone || !isHoveringZone)
             return;
         return document.querySelector(`[${CTFL_DRAGGING_ELEMENT}]`)?.getBoundingClientRect();
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isEmptyZone, isHoveringZone, fetchDomRect]);
+    }, [isEmptyZone, isHoveringZone, isDraggingOnCanvas]);
     const zoneDirection = zones[parentZoneId]?.direction || 'vertical';
     const isVertical = zoneDirection === 'vertical';
     const isRoot = parentZoneId === ROOT_ID;
@@ -4376,7 +4371,7 @@ function useCanvasInteractions() {
     return { onAddComponent, onMoveComponent };
 }
 
-const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, onDragUpdate, children, }) => {
+const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, onDragStart, onDragUpdate, children, }) => {
     const handleDragStart = (event) => {
         const draggedItem = event.nativeEvent;
         const start = {
@@ -4386,6 +4381,7 @@ const TestDNDContainer = ({ onDragEnd, onBeforeDragStart, onDragUpdate, children
             source: draggedItem.source,
         };
         onBeforeDragStart(start);
+        onDragStart(start, {});
     };
     const handleDrag = (event) => {
         const draggedItem = event.nativeEvent;
@@ -4425,10 +4421,12 @@ const DNDProvider = ({ children }) => {
     const selectedNodeId = useEditorStore((state) => state.selectedNodeId);
     const prevSelectedNodeId = useRef(null);
     const isTestRun = typeof window !== 'undefined' && Object.prototype.hasOwnProperty.call(window, 'Cypress');
-    const dragStart = ({ source }) => {
+    const beforeDragStart = ({ source }) => {
         prevSelectedNodeId.current = selectedNodeId;
-        //Unselect the current node when dragging and remove the outline
+        // Unselect the current node when dragging and remove the outline
         setSelectedNodeId('');
+        // Set dragging state here to make sure that DnD capture phase has completed
+        setDraggingOnCanvas(true);
         sendMessage(OUTGOING_EVENTS.ComponentSelected, {
             nodeId: '',
         });
@@ -4437,16 +4435,18 @@ const DNDProvider = ({ children }) => {
         }
     };
     const beforeCapture = ({ draggableId }) => {
-        setDraggingOnCanvas(true);
         setOnBeforeCaptureId(draggableId);
     };
+    const dragStart = (start) => {
+        updateItem(start);
+    };
     const dragUpdate = (update) => {
         updateItem(update);
     };
     const dragEnd = (dropResult) => {
         setDraggingOnCanvas(false);
         setOnBeforeCaptureId('');
-        updateItem(undefined);
+        updateItem();
         SimulateDnD$1.reset();
         if (!dropResult.destination) {
             if (!draggedItem?.destination) {
@@ -4479,7 +4479,7 @@ const DNDProvider = ({ children }) => {
             nodeId: dropResult.draggableId,
         });
     };
-    return (React.createElement(DragDropContext, { onBeforeCapture: beforeCapture, onDragUpdate: dragUpdate, onBeforeDragStart: dragStart, onDragEnd: dragEnd }, isTestRun ? (React.createElement(TestDNDContainer, { onDragEnd: dragEnd, onBeforeDragStart: dragStart, onDragUpdate: dragUpdate }, children)) : (children)));
+    return (React.createElement(DragDropContext, { onBeforeCapture: beforeCapture, onDragUpdate: dragUpdate, onBeforeDragStart: beforeDragStart, onDragStart: dragStart, onDragEnd: dragEnd }, isTestRun ? (React.createElement(TestDNDContainer, { onDragEnd: dragEnd, onBeforeDragStart: beforeDragStart, onDragStart: dragStart, onDragUpdate: dragUpdate }, children)) : (children)));
 };
 
 const RootRenderer = ({ onChange }) => {