@contentful/experiences-visual-editor-react 1.40.0-alpha-20250604T0813-1f6e699.0 → 1.40.0-alpha-20250626T1127-cab6b9d.0

package/dist/index.js

@@ -1433,6 +1433,10 @@ const findOutermostCoordinates = (first, second) => {
         left: Math.min(first.left, second.left),
     };
 };
+const isElementHidden = (rect) => {
+    /** if the rect has no size and position, its element is not rendered in the DOM */
+    return rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+};
 const getElementCoordinates = (element) => {
     const rect = element.getBoundingClientRect();
     /**
@@ -4192,6 +4196,9 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     const selectedElement = document.querySelector(`[data-cf-node-id="${node.data.id}"]`);
     if (selectedElement) {
         const rect = getElementCoordinates(selectedElement);
+        if (isElementHidden(rect)) {
+            return;
+        }
         nodeToCoordinatesMap[node.data.id] = {
             coordinates: {
                 x: rect.x + window.scrollX,
@@ -4228,7 +4235,7 @@ const waitForAllImagesToBeLoaded = () => {
     }));
 };
 
-const useCanvasGeometryUpdates = ({ tree, rootContainerRef, }) => {
+const useCanvasGeometryUpdates = ({ tree }) => {
     const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {
         // When the DOM changed, we still need to wait for the next frame to ensure that
         // rendering is complete (e.g. this is required when deleting a node).
@@ -4255,22 +4262,19 @@ const useCanvasGeometryUpdates = ({ tree, rootContainerRef, }) => {
     }, [debouncedUpdateGeometry]);
     // Handling DOM mutations
     useEffect(() => {
-        if (!rootContainerRef.current)
-            return;
         const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
-        observer.observe(rootContainerRef.current, {
+        observer.observe(document.documentElement, {
             childList: true,
             subtree: true,
             attributes: true,
         });
         return () => observer.disconnect();
-    }, [debouncedUpdateGeometry, rootContainerRef]);
+    }, [debouncedUpdateGeometry]);
 };
 
 const RootRenderer = () => {
-    const rootContainerRef = useRef(null);
     const tree = useTreeStore((state) => state.tree);
-    useCanvasGeometryUpdates({ tree, rootContainerRef });
+    useCanvasGeometryUpdates({ tree });
     useEditorSubscriber();
     const breakpoints = useTreeStore((state) => state.breakpoints);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
@@ -4279,7 +4283,7 @@ const RootRenderer = () => {
     const rootBlockId = tree.root.data.blockId ?? ROOT_ID;
     const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
     return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer, ref: rootContainerRef }, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds })))))));
+        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer }, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds })))))));
 };
 
 const useInitializeEditor = () => {