@contentful/experiences-visual-editor-react 3.3.0 → 3.3.1-beta.0

package/dist/renderApp.js

@@ -40832,9 +40832,9 @@ var nodeIsSet = nodeUtil && nodeUtil.isSet;
 var isSet$1 = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
 
 /** Used to compose bitmasks for cloning. */
-var CLONE_DEEP_FLAG$1 = 1,
+var CLONE_DEEP_FLAG$2 = 1,
     CLONE_FLAT_FLAG$1 = 2,
-    CLONE_SYMBOLS_FLAG$1 = 4;
+    CLONE_SYMBOLS_FLAG$2 = 4;
 
 /** `Object#toString` result references. */
 var argsTag$1 = '[object Arguments]',
@@ -40899,9 +40899,9 @@ cloneableTags[weakMapTag] = false;
  */
 function baseClone(value, bitmask, customizer, key, object, stack) {
   var result,
-      isDeep = bitmask & CLONE_DEEP_FLAG$1,
+      isDeep = bitmask & CLONE_DEEP_FLAG$2,
       isFlat = bitmask & CLONE_FLAT_FLAG$1,
-      isFull = bitmask & CLONE_SYMBOLS_FLAG$1;
+      isFull = bitmask & CLONE_SYMBOLS_FLAG$2;
 
   if (customizer) {
     result = object ? customizer(value, key, object, stack) : customizer(value);
@@ -40973,6 +40973,32 @@ function baseClone(value, bitmask, customizer, key, object, stack) {
   return result;
 }
 
+/** Used to compose bitmasks for cloning. */
+var CLONE_DEEP_FLAG$1 = 1,
+    CLONE_SYMBOLS_FLAG$1 = 4;
+
+/**
+ * This method is like `_.clone` except that it recursively clones `value`.
+ *
+ * @static
+ * @memberOf _
+ * @since 1.0.0
+ * @category Lang
+ * @param {*} value The value to recursively clone.
+ * @returns {*} Returns the deep cloned value.
+ * @see _.clone
+ * @example
+ *
+ * var objects = [{ 'a': 1 }, { 'b': 2 }];
+ *
+ * var deep = _.cloneDeep(objects);
+ * console.log(deep[0] === objects[0]);
+ * // => false
+ */
+function cloneDeep(value) {
+  return baseClone(value, CLONE_DEEP_FLAG$1 | CLONE_SYMBOLS_FLAG$1);
+}
+
 /** Used to stand-in for `undefined` hash values. */
 var HASH_UNDEFINED = '__lodash_hash_undefined__';
 
@@ -44449,6 +44475,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 === '*')
@@ -45033,6 +45071,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());
@@ -45110,7 +45162,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,
@@ -45243,7 +45295,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;
     }
@@ -45589,6 +45641,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;
@@ -45720,11 +45793,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)}'`);
@@ -47363,12 +47436,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 });
     },
 }));
@@ -49463,11 +49538,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)}'`);
@@ -50275,18 +50350,19 @@ function EditorBlock({ node, resolveDesignValue, wrappingPatternIds: parentWrapp
     if (isRootAssemblyNode && node.data.blockId && parentWrappingPatternIds.has(node.data.blockId)) {
         return React$1.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$1.createElement("div", { className: styles$1.emptySlot })) : (React$1.createElement(React$1.Fragment, null, nodes.map((slotChildNode) => (React$1.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$1.createElement(EditorBlock, { key: childNode.data.id, node: childNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))
-        : null;
-    return (React$1.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$1.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$1.createElement(React$1.Fragment, null, nodes.map((slotChildNode) => renderChildNode(slotChildNode)));
+        }
+        else {
+            acc[slotId] = React$1.createElement("div", { className: styles$1.emptySlot });
+        }
+        return acc;
+    }, {});
+    const renderedChildren = directChildNodes?.map((childNode) => renderChildNode(childNode));
+    return (React$1.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({
@@ -50519,11 +50595,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