@contentful/experiences-visual-editor-react 3.2.1-dev-20250819T1408-2dcca7e.0 → 3.3.0-beta.0

package/dist/index.js

@@ -1298,6 +1298,11 @@ const isLink$1 = (maybeLink) => {
 /**
  * This module encapsulates format of the path to a deep reference.
  */
+const isPreboundProp = (variable) => {
+    return (variable.type === 'BoundValue' &&
+        typeof variable.isPrebound === 'boolean' &&
+        !!variable.pathsByContentType);
+};
 const parseDataSourcePathIntoFieldset$1 = (path) => {
     const parsedPath = parseDeepPath$1(path);
     if (null === parsedPath) {
@@ -1336,6 +1341,35 @@ const isDeepPath$1 = (deepPathCandidate) => {
     }
     return deepPathParsed.fields.length > 1;
 };
+const isDeepPrebinding = (boundValueProperty) => {
+    if (!boundValueProperty?.path || boundValueProperty.type !== 'BoundValue') {
+        return false;
+    }
+    if (!isPreboundProp(boundValueProperty)) {
+        return false;
+    }
+    if (isDeepPath$1(boundValueProperty.path)) {
+        return true;
+    }
+    const hasDeepPathByContentType = Object.values(boundValueProperty.pathsByContentType || {}).some((val) => isDeepPath$1(val.path));
+    return hasDeepPathByContentType;
+};
+const getPrebindingPathBySourceEntry = (preboundValueProperty, getHeadEntityByDataSourceKey) => {
+    if (!isPreboundProp(preboundValueProperty)) {
+        return undefined;
+    }
+    // incomplete path due to several content types and not known default source
+    const [, dataSourceKey] = preboundValueProperty.path.split('/');
+    if (!dataSourceKey) {
+        return undefined;
+    }
+    const headEntity = getHeadEntityByDataSourceKey(dataSourceKey);
+    if (headEntity?.sys.type !== 'Entry') {
+        return undefined;
+    }
+    const contentTypeId = headEntity.sys.contentType.sys.id;
+    return preboundValueProperty.pathsByContentType?.[contentTypeId]?.path;
+};
 const parseDeepPath$1 = (deepPathCandidate) => {
     // ALGORITHM:
     // We start with deep path in form:
@@ -2672,7 +2706,7 @@ class DeepReference {
         return new DeepReference(opt);
     }
 }
-function gatherDeepReferencesFromTree(startingNode, dataSource) {
+function gatherDeepReferencesFromTree(startingNode, dataSource, getEntityFromLink) {
     const deepReferences = [];
     treeVisit(startingNode, (node) => {
         if (!node.data.props)
@@ -2680,12 +2714,27 @@ function gatherDeepReferencesFromTree(startingNode, dataSource) {
         for (const [, variableMapping] of Object.entries(node.data.props)) {
             if (variableMapping.type !== 'BoundValue')
                 continue;
-            if (!isDeepPath$1(variableMapping.path))
-                continue;
-            deepReferences.push(DeepReference.from({
-                path: variableMapping.path,
-                dataSource,
-            }));
+            if (isDeepPath$1(variableMapping.path)) {
+                deepReferences.push(DeepReference.from({
+                    path: variableMapping.path,
+                    dataSource,
+                }));
+            }
+            else if (isPreboundProp(variableMapping) && isDeepPrebinding(variableMapping)) {
+                const getEntityByDataSourceKey = (dataSourceKey) => {
+                    const entityLink = dataSource[dataSourceKey];
+                    if (!entityLink)
+                        return undefined;
+                    return getEntityFromLink(entityLink);
+                };
+                const deepPrebindingPath = getPrebindingPathBySourceEntry(variableMapping, getEntityByDataSourceKey);
+                if (!deepPrebindingPath)
+                    continue;
+                deepReferences.push(DeepReference.from({
+                    path: deepPrebindingPath,
+                    dataSource,
+                }));
+            }
         }
     });
     return deepReferences;
@@ -3813,10 +3862,6 @@ const isLink = (maybeLink) => {
     const link = maybeLink;
     return Boolean(link.sys?.id) && link.sys?.type === 'Link' && Boolean(link.sys?.linkType);
 };
-
-/**
- * This module encapsulates format of the path to a deep reference.
- */
 const parseDataSourcePathIntoFieldset = (path) => {
     const parsedPath = parseDeepPath(path);
     if (null === parsedPath) {
@@ -4305,7 +4350,6 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
             ...Object.values(newDataSource),
             ...assembliesRegistry.values(), // we count assemblies here as "L1 entities", for convenience. Even though they're not headEntities.
         ];
-        const deepReferences = gatherDeepReferencesFromTree(tree.root, newDataSource);
         /**
          * Checks only for _missing_ L1 entities
          * WARNING: Does NOT check for entity staleness/versions. If an entity is stale, it will NOT be considered missing.
@@ -4347,6 +4391,7 @@ function useEditorSubscriber(inMemoryEntitiesStore) {
                 startFetching();
                 await fillupL1({ entityLinksL1 });
             }
+            const deepReferences = gatherDeepReferencesFromTree(tree.root, newDataSource, entityStore.getEntityFromLink.bind(entityStore));
             if (isMissingL2Entities(deepReferences)) {
                 startFetching();
                 await fillupL2({ deepReferences });
@@ -4713,16 +4758,32 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
                 };
             }
             else if (variableMapping.type === 'BoundValue') {
-                const [, uuid, path] = variableMapping.path.split('/');
-                const binding = dataSource[uuid];
-                const variableDefinition = definition.variables[variableName];
-                let boundValue = transformBoundContentValue(node.data.props, entityStore, binding, resolveDesignValue, variableName, variableDefinition.type, variableMapping.path);
+                // maybePath, because prebound props would have the type 'BoundValue' but the path would be incomplete
+                // eg: "/uuid" vs "/uuid/fields/[fileName]/~locale" as the regular BoundValue would have
+                const [, uuid, maybePath] = variableMapping.path.split('/');
+                const link = dataSource[uuid];
+                let boundValue;
+                // starting from here, if the prop is of type 'BoundValue', and has prebinding
+                // we are going to resolve the incomplete path
+                if (link && isPreboundProp(variableMapping) && variableMapping.isPrebound) {
+                    const prebindingPath = getPrebindingPathBySourceEntry(variableMapping, (dataSourceKey) => {
+                        const link = dataSource[dataSourceKey];
+                        return entityStore.getEntityFromLink(link);
+                    }) ?? variableMapping.path;
+                    // this allows us to resolve it regularly
+                    boundValue = transformBoundContentValue(node.data.props, entityStore, link, resolveDesignValue, variableName, variableDefinition.type, prebindingPath);
+                }
+                else {
+                    // here we resolve the regular bound value
+                    const variableDefinition = definition.variables[variableName];
+                    boundValue = transformBoundContentValue(node.data.props, entityStore, link, resolveDesignValue, variableName, variableDefinition.type, variableMapping.path);
+                }
                 // In some cases, there may be an asset linked in the path, so we need to consider this scenario:
                 // If no 'boundValue' is found, we also attempt to extract the value associated with the second-to-last item in the path.
                 // If successful, it means we have identified the linked asset.
-                if (!boundValue) {
+                if (!boundValue && maybePath) {
                     const maybeBoundAsset = areEntitiesFetched
-                        ? entityStore.getValue(binding, path.split('/').slice(0, -2))
+                        ? entityStore.getValue(link, maybePath.split('/').slice(0, -2))
                         : undefined;
                     if (isLinkToAsset(maybeBoundAsset)) {
                         boundValue = maybeBoundAsset;
@@ -4894,7 +4955,7 @@ const sendCanvasGeometryUpdatedMessage = async (tree, sourceEvent) => {
     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);
+    const height = Math.max(document.documentElement.offsetHeight, rootRect.height, bodyRect.height, measureBodyContentHeight());
     sendMessage(OUTGOING_EVENTS.CanvasGeometryUpdated, {
         size: {
             width,
@@ -4942,6 +5003,31 @@ function waitForImageToBeLoaded(imageNode) {
         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)
+        return 0;
+    let height = 0;
+    for (const element of node.children) {
+        const rect = element.getBoundingClientRect();
+        const style = window.getComputedStyle(element);
+        const isHidden = (rect.width === 0 && rect.height === 0) ||
+            style.display === 'none' ||
+            style.visibility === 'hidden';
+        // ignore relative positioned elements that are anchored to the bottom,
+        // as this can cause infinite height
+        const isBottomAnchored = (style.position === 'fixed' ||
+            style.position === 'absolute' ||
+            style.position === 'relative' ||
+            style.position === 'sticky') &&
+            parseFloat(style.bottom) < 0;
+        if (isHidden || isBottomAnchored) {
+            continue;
+        }
+        height = Math.max(height, Math.ceil(rect.bottom), measureBodyContentHeight(depth - 1, element));
+    }
+    return height;
+}
 
 const useCanvasGeometryUpdates = ({ tree, canvasMode }) => {
     const debouncedUpdateGeometry = useMemo(() => debounce((tree, sourceEvent) => {