@contentful/experiences-visual-editor-react 3.2.0-dev-20250812T1256-c477cd9.0 → 3.2.0-dev-20250812T1437-66fa8cb.0

package/dist/index.js

@@ -4920,7 +4920,7 @@ const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
     node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
 };
 function waitForImageToBeLoaded(imageNode) {
-    if (imageNode.complete) {
+    if (imageNode.complete && (imageNode.naturalWidth > 0 || imageNode.naturalHeight > 0)) {
         return Promise.resolve();
     }
     return new Promise((resolve, reject) => {
@@ -4954,8 +4954,8 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         trailing: true,
     }), []);
     const debouncedCollectImages = useMemo(() => debounce(() => {
-        return Array.from(document.querySelectorAll('img'));
-    }, 300, { leading: true, trailing: true }), []);
+        setImages((prev) => ({ ...prev, allImages: findAllImages() }));
+    }, 300, { trailing: true }), []);
     // 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 = useRef(tree);
@@ -4964,13 +4964,17 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     }, [tree]);
     // Handling window resize events
     useEffect(() => {
-        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
+        const resizeEventListener = () => {
+            debouncedUpdateGeometry(treeRef.current, 'resize');
+            // find all images on resize
+            debouncedCollectImages();
+        };
         window.addEventListener('resize', resizeEventListener);
         return () => window.removeEventListener('resize', resizeEventListener);
-    }, [debouncedUpdateGeometry]);
+    }, [debouncedCollectImages, debouncedUpdateGeometry]);
     const [{ allImages, loadedImages }, setImages] = useState(() => {
-        const allImages = debouncedCollectImages();
-        const loadedImages = new WeakSet();
+        const allImages = findAllImages();
+        const loadedImages = new WeakMap();
         return { allImages, loadedImages };
     });
     // Handling DOM mutations
@@ -4978,8 +4982,7 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         const observer = new MutationObserver(() => {
             debouncedUpdateGeometry(treeRef.current, 'mutation');
             // find all images on any DOM change
-            const allImages = debouncedCollectImages();
-            setImages((prevState) => ({ ...prevState, allImages }));
+            debouncedCollectImages();
         });
         // send initial geometry in case the tree is empty
         debouncedUpdateGeometry(treeRef.current, 'mutation');
@@ -4995,13 +4998,14 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     useEffect(() => {
         let isCurrent = true;
         allImages.forEach(async (imageNode) => {
-            if (loadedImages.has(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.add(imageNode);
+                loadedImages.set(imageNode, imageNode.currentSrc);
                 debouncedUpdateGeometry(treeRef.current, 'imageLoad');
             }
         });
@@ -5028,6 +5032,9 @@ const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
         return () => document.removeEventListener('wheel', onWheel);
     }, [canvasMode]);
 };
+function findAllImages() {
+    return Array.from(document.querySelectorAll('img'));
+}
 
 const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     useEditorSubscriber(inMemoryEntitiesStore);