@contentful/experiences-visual-editor-react 3.3.1-dev-20250825T0713-34ae1b3.0 → 3.4.0-beta.0

package/dist/index.js

@@ -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,
@@ -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;
@@ -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 });
     },
 }));
@@ -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