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

package/dist/index.js

@@ -2151,6 +2151,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;
@@ -4905,18 +4926,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({