@contentful/experiences-visual-editor-react 3.1.0-dev-20250807T0841-78e6af6.0 → 3.1.1-beta.0

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import { EntityStore, InMemoryEntitiesStore } from '@contentful/experiences-core';
+import { StudioCanvasMode } from '@contentful/experiences-core/constants';
 import { Experience } from '@contentful/experiences-core/types';
 
-declare const VisualEditorRoot: ({ experience, inMemoryEntitiesStore, }: {
+declare const VisualEditorRoot: ({ experience, inMemoryEntitiesStore, canvasMode, }: {
     experience?: Experience<EntityStore>;
     inMemoryEntitiesStore?: InMemoryEntitiesStore;
+    canvasMode?: StudioCanvasMode;
 }) => React.JSX.Element | null;
 
 export { VisualEditorRoot as default };

package/dist/index.js

@@ -4398,8 +4398,13 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
                 case INCOMING_EVENTS.RequestEditorMode: {
                     break;
                 }
-                default:
-                    console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
+                default: {
+                    const knownEvents = Object.values(INCOMING_EVENTS);
+                    const isDeprecatedMessage = knownEvents.includes(eventData.eventType);
+                    if (!isDeprecatedMessage) {
+                        console.error(`[experiences-sdk-react::onMessage] Logic error, unsupported eventType: [${eventData.eventType}]`);
+                    }
+                }
             }
         };
         window.addEventListener('message', onMessage);
@@ -4815,10 +4820,14 @@ const EmptyCanvasMessage = () => {
 const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
     const nodeToCoordinatesMap = {};
     collectNodeCoordinates(tree.root, nodeToCoordinatesMap);
+    const rootRect = document.documentElement.getBoundingClientRect();
+    const bodyRect = document.body.getBoundingClientRect();
+    const width = Math.max(document.documentElement.offsetWidth, rootRect.width, bodyRect.width);
+    const height = Math.max(document.documentElement.offsetHeight, rootRect.height, bodyRect.height);
     sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
         size: {
-            width: document.documentElement.offsetWidth,
-            height: document.documentElement.offsetHeight,
+            width,
+            height,
         },
         nodes: nodeToCoordinatesMap,
         sourceEvent,
@@ -4863,7 +4872,7 @@ function waitForImageToBeLoaded(imageNode) {
     });
 }
 
-const useCanvasGeometryUpdates = ({ tree }) => {
+const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     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).
@@ -4934,6 +4943,8 @@ const useCanvasGeometryUpdates = ({ tree }) => {
     }, [allImages, loadedImages, debouncedUpdateGeometry]);
     // Delegate scrolling to the canvas
     useEffect(() => {
+        if (canvasMode !== StudioCanvasMode$2.EDITOR)
+            return;
         const onWheel = (e) => {
             e.preventDefault();
             sendMessage(OUTGOING_EVENTS.CanvasPan, {
@@ -4947,13 +4958,13 @@ const useCanvasGeometryUpdates = ({ tree }) => {
         };
         document.addEventListener('wheel', onWheel, { passive: false });
         return () => document.removeEventListener('wheel', onWheel);
-    }, []);
+    }, [canvasMode]);
 };
 
-const RootRenderer = ({ inMemoryEntitiesStore }) => {
+const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     useEditorSubscriber(inMemoryEntitiesStore);
     const tree = useTreeStore((state) => state.tree);
-    useCanvasGeometryUpdates({ tree });
+    useCanvasGeometryUpdates({ tree, canvasMode });
     const breakpoints = useTreeStore((state) => state.breakpoints);
     const { resolveDesignValue } = useBreakpoints(breakpoints);
     // If the root blockId is defined but not the default string, it is the entry ID
@@ -5002,7 +5013,7 @@ const useInitializeEditor = (inMemoryEntitiesStore) => {
     return initialized;
 };
 
-const VisualEditorRoot = ({ experience, inMemoryEntitiesStore: inMemoryEntitiesStore$1 = inMemoryEntitiesStore, }) => {
+const VisualEditorRoot = ({ experience, inMemoryEntitiesStore: inMemoryEntitiesStore$1 = inMemoryEntitiesStore, canvasMode, }) => {
     const initialized = useInitializeEditor(inMemoryEntitiesStore$1);
     const setHyperLinkPattern = useEditorStore((state) => state.setHyperLinkPattern);
     useEffect(() => {
@@ -5012,7 +5023,7 @@ const VisualEditorRoot = ({ experience, inMemoryEntitiesStore: inMemoryEntitiesS
     }, [experience?.hyperlinkPattern, setHyperLinkPattern]);
     if (!initialized)
         return null;
-    return React.createElement(RootRenderer, { inMemoryEntitiesStore: inMemoryEntitiesStore$1 });
+    return React.createElement(RootRenderer, { inMemoryEntitiesStore: inMemoryEntitiesStore$1, canvasMode: canvasMode });
 };
 
 export { VisualEditorRoot as default };