@contentful/experiences-visual-editor-react 3.8.1 → 3.8.2-dev-20251007T1425-20923d2.0

package/dist/renderApp.js

@@ -51307,26 +51307,6 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     }
     node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
-function waitForImageToBeLoaded(imageNode) {
-    if (imageNode.complete && (imageNode.naturalWidth > 0 || imageNode.naturalHeight > 0)) {
-        return Promise.resolve();
-    }
-    return new Promise((resolve, reject) => {
-        const handleImageLoad = (event) => {
-            imageNode.removeEventListener('load', handleImageLoad);
-            imageNode.removeEventListener('error', handleImageLoad);
-            if (event.type === 'error') {
-                debug$1.warn('[experiences-visual-editor-react::canvasGeometry] Image failed to load:', imageNode);
-                reject();
-            }
-            else {
-                resolve();
-            }
-        };
-        imageNode.addEventListener('load', handleImageLoad);
-        imageNode.addEventListener('error', handleImageLoad);
-    });
-}
 // calculates the content height by finding the deepest node in the first 2 levels of the body
 function measureBodyContentHeight(depth = 2, node = document.body) {
     if (depth <= 0)
@@ -51366,9 +51346,24 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         // yet show the need for this. So we might be able to drop this later to boost performance.
         trailing: true,
     }), []);
-    const debouncedCollectImages = reactExports.useMemo(() => debounce(() => {
-        setImages((prev) => ({ ...prev, allImages: findAllImages() }));
-    }, 300, { trailing: true }), []);
+    // Handling image or video resizing separately,
+    // as they can load at a different time, some might be hidden or lazy loaded
+    // resulting in a layout shift.
+    //
+    // We observe every media element for resizing using the same ResizeObserver instance.
+    // It's safe to call .observe() multiple times on the same element.
+    // Also don't need to unobserve removed elements, as they should be garbage collected.
+    const [mediaResizeObserver] = reactExports.useState(() => {
+        return new ResizeObserver(() => {
+            debouncedUpdateGeometry(treeRef.current, 'mediaResize');
+        });
+    });
+    const debouncedObserveMediaResizing = reactExports.useMemo(() => debounce(() => {
+        const allMedia = findAllMedia();
+        for (const media of allMedia) {
+            mediaResizeObserver.observe(media);
+        }
+    }, 300, { trailing: true }), [mediaResizeObserver]);
     // Store tree in a ref to avoid the need to deactivate & reactivate the mutation observer
     // when the tree changes. This is important to avoid missing out on some mutation events.
     const treeRef = reactExports.useRef(tree);
@@ -51379,23 +51374,16 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     reactExports.useEffect(() => {
         const resizeEventListener = () => {
             debouncedUpdateGeometry(treeRef.current, 'resize');
-            // find all images on resize
-            debouncedCollectImages();
         };
         window.addEventListener('resize', resizeEventListener);
         return () => window.removeEventListener('resize', resizeEventListener);
-    }, [debouncedCollectImages, debouncedUpdateGeometry]);
-    const [{ allImages, loadedImages }, setImages] = reactExports.useState(() => {
-        const allImages = findAllImages();
-        const loadedImages = new WeakMap();
-        return { allImages, loadedImages };
-    });
+    }, [debouncedUpdateGeometry]);
     // Handling DOM mutations
     reactExports.useEffect(() => {
         const observer = new MutationObserver(() => {
             debouncedUpdateGeometry(treeRef.current, 'mutation');
-            // find all images on any DOM change
-            debouncedCollectImages();
+            // start observing all media on any DOM change, as there can be newly added elements
+            debouncedObserveMediaResizing();
         });
         // send initial geometry in case the tree is empty
         debouncedUpdateGeometry(treeRef.current, 'mutation');
@@ -51405,27 +51393,7 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
             attributes: true,
         });
         return () => observer.disconnect();
-    }, [debouncedCollectImages, debouncedUpdateGeometry]);
-    // Handling image loading separately,
-    // as each image can load at a different time, some might be hidden or lazy loaded
-    reactExports.useEffect(() => {
-        let isCurrent = true;
-        allImages.forEach(async (imageNode) => {
-            const lastSrc = loadedImages.get(imageNode);
-            if (lastSrc === imageNode.currentSrc) {
-                return;
-            }
-            // update the geometry after each image is loaded, as it can shift the layout
-            await waitForImageToBeLoaded(imageNode);
-            if (isCurrent) {
-                loadedImages.set(imageNode, imageNode.currentSrc);
-                debouncedUpdateGeometry(treeRef.current, 'imageLoad');
-            }
-        });
-        return () => {
-            isCurrent = false;
-        };
-    }, [allImages, loadedImages, debouncedUpdateGeometry]);
+    }, [debouncedObserveMediaResizing, debouncedUpdateGeometry]);
     // Delegate scrolling to the canvas
     reactExports.useEffect(() => {
         if (canvasMode !== StudioCanvasMode$2.EDITOR)
@@ -51445,8 +51413,8 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         return () => document.removeEventListener('wheel', onWheel);
     }, [canvasMode]);
 };
-function findAllImages() {
-    return Array.from(document.querySelectorAll('img'));
+function findAllMedia() {
+    return Array.from(document.querySelectorAll('img, video'));
 }
 
 var css_248z = "body {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";