@contentful/experiences-visual-editor-react 1.39.0-alpha-20250528T1549-bd210e1.0 → 1.39.0-alpha-20250603T1549-6807858.0

package/dist/index.js

@@ -2,7 +2,7 @@ import styleInject from 'style-inject';
 import React, { useState, useEffect, useCallback, forwardRef, useMemo, useLayoutEffect, useRef } from 'react';
 import { create } from 'zustand';
 import { produce } from 'immer';
-import { isEqual, omit, isArray, get as get$1 } from 'lodash-es';
+import { isEqual, omit, isArray, get as get$1, debounce } from 'lodash-es';
 import { z } from 'zod';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
@@ -228,6 +228,7 @@ const OUTGOING_EVENTS = {
     OutsideCanvasClick: 'outsideCanvasClick',
     SDKFeatures: 'sdkFeatures',
     RequestEntities: 'REQUEST_ENTITIES',
+    CanvasGeometryUpdated: 'canvasGeometryUpdated',
 };
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
@@ -1398,6 +1399,51 @@ let DebugLogger$1 = class DebugLogger {
 DebugLogger$1.instance = null;
 DebugLogger$1.getInstance();
 
+const findOutermostCoordinates = (first, second) => {
+    return {
+        top: Math.min(first.top, second.top),
+        right: Math.max(first.right, second.right),
+        bottom: Math.max(first.bottom, second.bottom),
+        left: Math.min(first.left, second.left),
+    };
+};
+const getElementCoordinates = (element) => {
+    const rect = element.getBoundingClientRect();
+    /**
+     * If element does not have children, or element has it's own width or height,
+     * return the element's coordinates.
+     */
+    if (element.children.length === 0 || rect.width !== 0 || rect.height !== 0) {
+        return rect;
+    }
+    const rects = [];
+    /**
+     * If element has children, or element does not have it's own width and height,
+     * we find the cordinates of the children, and assume the outermost coordinates of the children
+     * as the coordinate of the element.
+     *
+     * E.g child1 => {top: 2, bottom: 3, left: 4, right: 6} & child2 => {top: 1, bottom: 8, left: 12, right: 24}
+     * The final assumed coordinates of the element would be => { top: 1, right: 24, bottom: 8, left: 4 }
+     */
+    for (const child of element.children) {
+        const childRect = getElementCoordinates(child);
+        if (childRect.width !== 0 || childRect.height !== 0) {
+            const { top, right, bottom, left } = childRect;
+            rects.push({ top, right, bottom, left });
+        }
+    }
+    if (rects.length === 0) {
+        return rect;
+    }
+    const { top, right, bottom, left } = rects.reduce(findOutermostCoordinates);
+    return DOMRect.fromRect({
+        x: left,
+        y: top,
+        height: bottom - top,
+        width: right - left,
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isLinkToAsset = (variable) => {
     if (!variable)
@@ -4073,18 +4119,115 @@ const EmptyCanvasMessage = () => {
         React.createElement("span", { className: styles['empty-canvas-label'] }, "Add components to begin")));
 };
 
+/**
+ * This function gets the element co-ordinates of a specified component in the DOM and its parent
+ * and sends the DOM Rect to the client app.
+ */
+const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
+    const nodeToCoordinatesMap = {};
+    await waitForAllImagesToBeLoaded();
+    collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
+    sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
+        size: {
+            width: document.documentElement.offsetWidth,
+            height: document.documentElement.offsetHeight,
+        },
+        nodes: nodeToCoordinatesMap,
+        sourceEvent,
+    });
+};
+const collectNodeCoordinates = (node, nodeToCoordinatesMap) => {
+    const selectedElement = document.querySelector(`[data-cf-node-id="${node.data.id}"]`);
+    if (selectedElement) {
+        const rect = getElementCoordinates(selectedElement);
+        nodeToCoordinatesMap[node.data.id] = {
+            coordinates: {
+                x: rect.x + window.scrollX,
+                y: rect.y + window.scrollY,
+                width: rect.width,
+                height: rect.height,
+            },
+        };
+    }
+    node.children.forEach((child) => collectNodeCoordinates(child, nodeToCoordinatesMap));
+};
+const waitForAllImagesToBeLoaded = () => {
+    // If the document contains an image, wait for this image to be loaded before collecting & sending all geometry data.
+    const allImageNodes = document.querySelectorAll('img');
+    return Promise.all(Array.from(allImageNodes).map((imageNode) => {
+        if (imageNode.complete) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            const handleImageLoad = (event) => {
+                imageNode.removeEventListener('load', handleImageLoad);
+                imageNode.removeEventListener('error', handleImageLoad);
+                if (event.type === 'error') {
+                    console.warn('Image failed to load:', imageNode);
+                    reject();
+                }
+                else {
+                    resolve();
+                }
+            };
+            imageNode.addEventListener('load', handleImageLoad);
+            imageNode.addEventListener('error', handleImageLoad);
+        });
+    }));
+};
+
+const useCanvasGeometryUpdates = ({ tree, rootContainerRef, }) => {
+    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).
+        window.requestAnimationFrame(() => {
+            sendCanvasGeometryUpdatedMessage(tree, sourceEvent);
+        });
+    }, 100, {
+        leading: true,
+        // To be sure, we recalculate it at the end of the frame again. Though, we couldn't
+        // yet show the need for this. So we might be able to drop this later to boost performance.
+        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);
+    useEffect(() => {
+        treeRef.current = tree;
+    }, [tree]);
+    // Handling window resize events
+    useEffect(() => {
+        const resizeEventListener = () => debouncedUpdateGeometry(treeRef.current, 'resize');
+        window.addEventListener('resize', resizeEventListener);
+        return () => window.removeEventListener('resize', resizeEventListener);
+    }, [debouncedUpdateGeometry]);
+    // Handling DOM mutations
+    useEffect(() => {
+        if (!rootContainerRef.current)
+            return;
+        const observer = new MutationObserver(() => debouncedUpdateGeometry(treeRef.current, 'mutation'));
+        observer.observe(rootContainerRef.current, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+        });
+        return () => observer.disconnect();
+    }, [debouncedUpdateGeometry, rootContainerRef]);
+};
+
 const RootRenderer = () => {
+    const rootContainerRef = useRef(null);
+    const tree = useTreeStore((state) => state.tree);
+    useCanvasGeometryUpdates({ tree, rootContainerRef });
     useEditorSubscriber();
     const breakpoints = useTreeStore((state) => state.breakpoints);
-    const containerRef = useRef(null);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
-    const tree = useTreeStore((state) => state.tree);
     // If the root blockId is defined but not the default string, it is the entry ID
     // of the experience/ pattern to properly detect circular dependencies.
     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: containerRef }, !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, 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 })))))));
 };
 
 const useInitializeEditor = () => {