@contentful/experiences-visual-editor-react 1.37.1 → 1.37.2-dev-20250515T1505-4c9ed48.0

package/dist/index.js

@@ -1365,6 +1365,7 @@ const transformVisibility = (value) => {
     // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
     return {};
 };
+// TODO: Remove in next major version v2 since the change is 17 months old
 // Keep this for backwards compatibility - deleting this would be a breaking change
 // because existing components on a users experience will have the width value as fill
 // rather than 100%
@@ -1890,6 +1891,23 @@ const transformBoundContentValue = (variables, entityStore, binding, resolveDesi
     }
 };
 
+function treeVisit(initialNode, onNode) {
+    // returns last used index
+    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
+        // Copy children in case of onNode removing it as we pass the node by reference
+        const children = [...currentNode.children];
+        onNode(currentNode, currentIndex, currentDepth);
+        let nextAvailableIndex = currentIndex + 1;
+        const lastUsedIndex = currentIndex;
+        for (const child of children) {
+            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
+            nextAvailableIndex = lastUsedIndex + 1;
+        }
+        return lastUsedIndex;
+    };
+    _treeVisit(initialNode, 0, 0);
+}
+
 const getDataFromTree = (tree) => {
     let dataSource = {};
     let unboundValues = {};
@@ -2389,23 +2407,6 @@ var VisualEditorMode$1;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode$1 || (VisualEditorMode$1 = {}));
 
-function treeVisit$1(initialNode, onNode) {
-    // returns last used index
-    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
-        // Copy children in case of onNode removing it as we pass the node by reference
-        const children = [...currentNode.children];
-        onNode(currentNode, currentIndex, currentDepth);
-        let nextAvailableIndex = currentIndex + 1;
-        const lastUsedIndex = currentIndex;
-        for (const child of children) {
-            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
-            nextAvailableIndex = lastUsedIndex + 1;
-        }
-        return lastUsedIndex;
-    };
-    _treeVisit(initialNode, 0, 0);
-}
-
 class DeepReference {
     constructor({ path, dataSource }) {
         const { key, field, referentField } = parseDataSourcePathWithL1DeepBindings(path);
@@ -2443,7 +2444,7 @@ class DeepReference {
 }
 function gatherDeepReferencesFromTree(startingNode, dataSource) {
     const deepReferences = [];
-    treeVisit$1(startingNode, (node) => {
+    treeVisit(startingNode, (node) => {
         if (!node.data.props)
             return;
         for (const [, variableMapping] of Object.entries(node.data.props)) {
@@ -2953,26 +2954,6 @@ function getTreeDiffs(tree1, tree2, originalTree) {
     return differences.filter((diff) => diff);
 }
 
-/**
- * @deprecated in favor of one in 'core' package
- */
-function treeVisit(initialNode, onNode) {
-    // returns last used index
-    const _treeVisit = (currentNode, currentIndex, currentDepth) => {
-        // Copy children in case of onNode removing it as we pass the node by reference
-        const children = [...currentNode.children];
-        onNode(currentNode, currentIndex, currentDepth);
-        let nextAvailableIndex = currentIndex + 1;
-        const lastUsedIndex = currentIndex;
-        for (const child of children) {
-            const lastUsedIndex = _treeVisit(child, nextAvailableIndex, currentDepth + 1);
-            nextAvailableIndex = lastUsedIndex + 1;
-        }
-        return lastUsedIndex;
-    };
-    _treeVisit(initialNode, 0, 0);
-}
-
 const useTreeStore = create((set, get) => ({
     tree: {
         root: {
@@ -3228,8 +3209,6 @@ const useEditorStore = create((set, get) => ({
     dataSource: {},
     hyperLinkPattern: undefined,
     unboundValues: {},
-    isDragging: false,
-    dragItem: '',
     selectedNodeId: null,
     locale: null,
     setHyperLinkPattern: (pattern) => {
@@ -3298,7 +3277,7 @@ styleInject(css_248z$5);
 var css_248z$4 = ".cf-text {\n  white-space: pre-line;\n}\n\n.cf-text-link .cf-text {\n  margin: 0;\n}\n";
 styleInject(css_248z$4);
 
-var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\nimg.cf-placeholder-image {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\nsvg.cf-placeholder-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\nsvg.cf-placeholder-icon path {\n  fill: var(--cf-color-gray400);\n}\n";
+var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\ndiv.cf-placeholder-wrapper {\n  /* Required for the absolute positioned icon to render in the center */\n  position: relative;\n}\n\nimg.cf-placeholder-image {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n  width: 100%;\n  height: 100%;\n}\n\nsvg.cf-placeholder-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\nsvg.cf-placeholder-icon path {\n  fill: var(--cf-color-gray400);\n}\n";
 styleInject(css_248z$3);
 
 /**
@@ -5405,29 +5384,23 @@ const Tooltip = ({ coordinates, id, label, isAssemblyBlock, isContainer, isSelec
 function useSingleColumn(node, resolveDesignValue) {
     const tree = useTreeStore((store) => store.tree);
     const isSingleColumn = node.data.blockId === CONTENTFUL_COMPONENTS$1.singleColumn.id;
-    const { isWrapped, wrapColumnsCount } = useMemo(() => {
-        let isWrapped = false;
-        let wrapColumnsCount = 0;
+    const isWrapped = useMemo(() => {
         if (!node.parentId || !isSingleColumn) {
-            return { isWrapped, wrapColumnsCount };
+            return false;
         }
         const parentNode = getItem({ id: node.parentId }, tree);
         if (!parentNode || parentNode.data.blockId !== CONTENTFUL_COMPONENTS$1.columns.id) {
-            return { isWrapped, wrapColumnsCount };
-        }
-        const { cfWrapColumns, cfWrapColumnsCount } = parentNode.data.props;
-        if (cfWrapColumns.type === 'DesignValue') {
-            isWrapped = resolveDesignValue(cfWrapColumns.valuesByBreakpoint, 'cfWrapColumns');
+            return false;
         }
-        if (cfWrapColumnsCount.type === 'DesignValue') {
-            wrapColumnsCount = resolveDesignValue(cfWrapColumnsCount.valuesByBreakpoint, 'cfWrapColumnsCount');
+        const { cfWrapColumns } = parentNode.data.props;
+        if (cfWrapColumns.type !== 'DesignValue') {
+            return false;
         }
-        return { isWrapped, wrapColumnsCount };
+        return resolveDesignValue(cfWrapColumns.valuesByBreakpoint, 'cfWrapColumns');
     }, [tree, node, isSingleColumn, resolveDesignValue]);
     return {
         isSingleColumn,
         isWrapped,
-        wrapColumnsCount,
     };
 }
 
@@ -5920,7 +5893,7 @@ const VisualEditorRoot = ({ experience }) => {
             }
             SimulateDnD$1.updateDrag(e.clientX, e.clientY);
             sendMessage(OUTGOING_EVENTS.MouseMove, {
-                clientX: e.pageX,
+                clientX: e.pageX - window.scrollX,
                 clientY: e.pageY - window.scrollY,
             });
         };
@@ -5928,8 +5901,7 @@ const VisualEditorRoot = ({ experience }) => {
         return () => {
             document.removeEventListener('mousemove', onMouseMove);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [setHoveringZone, setMousePosition]);
     if (!initialized)
         return null;
     return React.createElement(RootRenderer, null);