@contentful/experiences-visual-editor-react 3.3.0-dev-20250820T1056-fd92026.0 → 3.3.1-beta.0

package/dist/index.js

@@ -1,7 +1,7 @@
 import styleInject from 'style-inject';
 import React, { useState, useEffect, useCallback, forwardRef, useMemo, useLayoutEffect, useRef } from 'react';
 import { z } from 'zod';
-import { omit, isArray, isEqual, get as get$2, debounce } from 'lodash-es';
+import { cloneDeep, omit, isArray, isEqual, get as get$2, debounce } from 'lodash-es';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
 import { create, useStore } from 'zustand';
@@ -1011,6 +1011,18 @@ var CodeNames$1;
     CodeNames["Custom"] = "custom";
 })(CodeNames$1 || (CodeNames$1 = {}));
 
+const sdkOptionsRegistry = {};
+/**
+ * Used inside defineComponents to forward registry arguments to this registry
+ * of SDK options.
+ */
+const defineSdkOptions = (options) => {
+    Object.assign(sdkOptionsRegistry, options);
+};
+const getSdkOptions = () => {
+    return { ...sdkOptionsRegistry };
+};
+
 const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
 const toCSSMediaQuery = ({ query }) => {
     if (query === '*')
@@ -1595,6 +1607,20 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
         backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
+const transformTextAlign = (value) => {
+    if (!value)
+        return undefined;
+    const sdkOptions = getSdkOptions();
+    // New behavior: translate left/right to start/end
+    // Customer can opt-out by activating this global option toggle
+    if (!sdkOptions.__disableTextAlignmentTransform) {
+        if (value === 'left')
+            return 'start';
+        if (value === 'right')
+            return 'end';
+    }
+    return value;
+};
 
 const toCSSAttribute = (key) => {
     let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -1672,7 +1698,7 @@ const buildCfStyles = (values) => {
         lineHeight: values.cfLineHeight,
         letterSpacing: values.cfLetterSpacing,
         color: values.cfTextColor,
-        textAlign: values.cfTextAlign,
+        textAlign: transformTextAlign(values.cfTextAlign),
         textTransform: values.cfTextTransform,
         objectFit: values.cfImageOptions?.objectFit,
         objectPosition: values.cfImageOptions?.objectPosition,
@@ -1805,7 +1831,7 @@ const transformRichText = (entryOrAsset, entityStore, path) => {
         // resolve any links to assets/entries/hyperlinks
         // we need to clone, as we want to keep the original Entity in the EntityStore intact,
         // and resolveLinks() is mutating the node object.
-        const richTextDocument = structuredClone(value);
+        const richTextDocument = cloneDeep(value);
         resolveLinks(richTextDocument, entityStore);
         return richTextDocument;
     }
@@ -2151,6 +2177,27 @@ const tryParseMessage = (event) => {
     return eventData;
 };
 
+const splitDirectAndSlotChildren = (allChildNodes, componentDefinition) => {
+    // Bridge difference between editor and delivery mode
+    const getSlotId = (child) => {
+        if ('data' in child)
+            return child.data.slotId;
+        return child.slotId;
+    };
+    const slotNodesMap = {};
+    for (const slotId in componentDefinition.slots) {
+        // We only allow one component per slot (container). This is just safer to not render components twice or not at all
+        const nodes = allChildNodes.filter((child) => getSlotId(child) === slotId);
+        slotNodesMap[slotId] = nodes.length ? nodes : null;
+    }
+    const directChildNodes = allChildNodes.filter((child) => getSlotId(child) === undefined);
+    if (!componentDefinition.children || !directChildNodes.length) {
+        // If there are no children allowed in the component or no children added, render as undefined
+        return { slotNodesMap, directChildNodes: undefined };
+    }
+    return { slotNodesMap, directChildNodes };
+};
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -2282,11 +2329,11 @@ let EntityStoreBase$1 = class EntityStoreBase {
     addEntity(entity) {
         if (isAsset$1(entity)) {
             // cloned and frozen
-            this.assetMap.set(entity.sys.id, deepFreeze$1(structuredClone(entity)));
+            this.assetMap.set(entity.sys.id, deepFreeze$1(cloneDeep(entity)));
         }
         else if (isEntry$1(entity)) {
             // cloned and frozen
-            this.entryMap.set(entity.sys.id, deepFreeze$1(structuredClone(entity)));
+            this.entryMap.set(entity.sys.id, deepFreeze$1(cloneDeep(entity)));
         }
         else {
             throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(entity)}'`);
@@ -3219,12 +3266,14 @@ const useEditorStore = create((set, get) => ({
         }
         set({ locale });
     },
-    initializeEditor({ componentRegistry: initialRegistry, designTokens, initialLocale }) {
+    initializeEditor({ componentRegistry: initialRegistry, designTokens, sdkOptions, initialLocale, }) {
         initialRegistry.forEach((registration) => {
             componentRegistry.set(registration.definition.id, registration);
         });
         // Re-register the design tokens with the Visual Editor's instance of the experiences-core package
         defineDesignTokens(designTokens);
+        // Same copy over from one instance to the other is necessary for the sdk options
+        defineSdkOptions(sdkOptions);
         set({ locale: initialLocale });
     },
 }));
@@ -4093,11 +4142,11 @@ class EntityStoreBase {
     addEntity(entity) {
         if (isAsset(entity)) {
             // cloned and frozen
-            this.assetMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+            this.assetMap.set(entity.sys.id, deepFreeze(cloneDeep(entity)));
         }
         else if (isEntry(entity)) {
             // cloned and frozen
-            this.entryMap.set(entity.sys.id, deepFreeze(structuredClone(entity)));
+            this.entryMap.set(entity.sys.id, deepFreeze(cloneDeep(entity)));
         }
         else {
             throw new Error(`Attempted to add an entity to the store that is neither Asset nor Entry: '${JSON.stringify(entity)}'`);
@@ -4905,18 +4954,19 @@ function EditorBlock({ node, resolveDesignValue, wrappingPatternIds: parentWrapp
     if (isRootAssemblyNode && node.data.blockId && parentWrappingPatternIds.has(node.data.blockId)) {
         return React.createElement(CircularDependencyErrorPlaceholder, { wrappingPatternIds: wrappingPatternIds });
     }
-    const slotNodes = {};
-    for (const slotId in componentRegistration.definition.slots) {
-        const nodes = node.children.filter((child) => child.data.slotId === slotId);
-        slotNodes[slotId] =
-            nodes.length === 0 ? (React.createElement("div", { className: styles$1.emptySlot })) : (React.createElement(React.Fragment, null, nodes.map((slotChildNode) => (React.createElement(EditorBlock, { key: slotChildNode.data.id, node: slotChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))));
-    }
-    const children = componentRegistration.definition.children
-        ? node.children
-            .filter((node) => node.data.slotId === undefined)
-            .map((childNode) => (React.createElement(EditorBlock, { key: childNode.data.id, node: childNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))
-        : null;
-    return (React.createElement(RegistrationComponent, { node: node, resolveDesignValue: resolveDesignValue, componentRegistration: componentRegistration, slotNodes: slotNodes, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }, children));
+    const { slotNodesMap, directChildNodes } = splitDirectAndSlotChildren(node.children, componentRegistration.definition);
+    const renderChildNode = (childNode) => (React.createElement(EditorBlock, { key: childNode.data.id, node: childNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }));
+    const renderedSlotNodesMap = Object.entries(slotNodesMap).reduce((acc, [slotId, nodes]) => {
+        if (nodes?.length) {
+            acc[slotId] = React.createElement(React.Fragment, null, nodes.map((slotChildNode) => renderChildNode(slotChildNode)));
+        }
+        else {
+            acc[slotId] = React.createElement("div", { className: styles$1.emptySlot });
+        }
+        return acc;
+    }, {});
+    const renderedChildren = directChildNodes?.map((childNode) => renderChildNode(childNode));
+    return (React.createElement(RegistrationComponent, { node: node, resolveDesignValue: resolveDesignValue, componentRegistration: componentRegistration, slotNodes: renderedSlotNodesMap, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }, renderedChildren));
 }
 const RegistrationComponent = ({ node, resolveDesignValue, componentRegistration, slotNodes, children, entityStore, areEntitiesFetched, }) => {
     const { componentProps } = useComponentProps({
@@ -5149,11 +5199,12 @@ const useInitializeEditor = (inMemoryEntitiesStore) => {
         const onVisualEditorInitialize = (event) => {
             if (!event.detail)
                 return;
-            const { componentRegistry, designTokens, locale: initialLocale, entities } = event.detail;
+            const { componentRegistry, designTokens, sdkOptions, locale: initialLocale, entities, } = event.detail;
             initializeEditor({
                 initialLocale,
                 componentRegistry,
                 designTokens,
+                sdkOptions,
             });
             // if entities is set to [], then everything will still work as EntityStore will
             // request entities on demand via ▲REQUEST_ENTITY