@contentful/experiences-visual-editor-react 1.40.0-alpha-20250604T0813-1f6e699.0 → 1.40.0-alpha-20250604T1545-078bcac.0

package/dist/index.js

@@ -4228,7 +4228,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 +4255,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 +4276,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 = () => {