@contentful/experiences-visual-editor-react 1.28.3 → 1.29.0-beta.0

package/dist/index.js

@@ -947,6 +947,9 @@ const BaseComponentTreeNodeSchema$1 = z.object({
 const ComponentTreeNodeSchema$1 = BaseComponentTreeNodeSchema$1.extend({
     children: z.lazy(() => ComponentTreeNodeSchema$1.array()),
 });
+const BindingSourceTypeEnumSchema$1 = z
+    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
+    .nonempty();
 const ComponentVariableSchema$1 = z.object({
     displayName: z.string().optional(),
     type: DefinitionPropertyTypeSchema$1,
@@ -955,6 +958,7 @@ const ComponentVariableSchema$1 = z.object({
     defaultValue: PrimitiveValueSchema$1.or(ComponentPropertyValueSchema$1).optional(),
     validations: z
         .object({
+        bindingSourceType: BindingSourceTypeEnumSchema$1.optional(),
         required: z.boolean().optional(),
         format: z.literal('URL').optional(),
         in: z
@@ -2716,12 +2720,11 @@ function compareNodes({ currentNode, updatedNode, originalTree, differences = []
     const nodeRemoved = currentNodeCount > updatedNodeCount;
     const nodeAdded = currentNodeCount < updatedNodeCount;
     const parentNodeId = updatedNode.data.id;
-    const isRoot = currentNode.data.id === ROOT_ID;
     /**
      * The data of the current node has changed, we need to update
      * this node to reflect the data change. (design, content, unbound values)
      */
-    if (!isRoot && !isEqual(currentNode.data, updatedNode.data)) {
+    if (!isEqual(currentNode.data, updatedNode.data)) {
         differences.push({
             type: TreeAction.UPDATE_NODE,
             nodeId: currentNode.data.id,
@@ -3321,6 +3324,9 @@ const BaseComponentTreeNodeSchema = z.object({
 const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
     children: z.lazy(() => ComponentTreeNodeSchema.array()),
 });
+const BindingSourceTypeEnumSchema = z
+    .array(z.enum(['entry', 'asset', 'manual', 'experience']))
+    .nonempty();
 const ComponentVariableSchema = z.object({
     displayName: z.string().optional(),
     type: DefinitionPropertyTypeSchema,
@@ -3329,6 +3335,7 @@ const ComponentVariableSchema = z.object({
     defaultValue: PrimitiveValueSchema.or(ComponentPropertyValueSchema).optional(),
     validations: z
         .object({
+        bindingSourceType: BindingSourceTypeEnumSchema.optional(),
         required: z.boolean().optional(),
         format: z.literal('URL').optional(),
         in: z
@@ -4623,7 +4630,29 @@ const MissingComponentPlaceholder = ({ blockId }) => {
         "'"));
 };
 
-const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging, }) => {
+const CircularDependencyErrorPlaceholder = forwardRef(({ wrappingPatternIds, ...props }, ref) => {
+    const entityStore = useEntityStore((state) => state.entityStore);
+    return (React.createElement("div", { ...props, 
+        // Pass through ref to avoid DND errors being logged
+        ref: ref, "data-cf-node-error": "circular-pattern-dependency", style: {
+            border: '1px solid red',
+            background: 'rgba(255, 0, 0, 0.1)',
+            padding: '1rem 1rem 0 1rem',
+            width: '100%',
+            height: '100%',
+        } },
+        "Circular usage of patterns detected:",
+        React.createElement("ul", null, Array.from(wrappingPatternIds).map((patternId) => {
+            const entryLink = { sys: { type: 'Link', linkType: 'Entry', id: patternId } };
+            const entry = entityStore.getEntityFromLink(entryLink);
+            const entryTitle = entry?.fields?.title;
+            const text = entryTitle ? `${entryTitle} (${patternId})` : patternId;
+            return React.createElement("li", { key: patternId }, text);
+        }))));
+});
+CircularDependencyErrorPlaceholder.displayName = 'CircularDependencyErrorPlaceholder';
+
+const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging, wrappingPatternIds, }) => {
     const areEntitiesFetched = useEntityStore((state) => state.areEntitiesFetched);
     const tree = useTreeStore((state) => state.tree);
     const componentRegistration = useMemo(() => {
@@ -4659,10 +4688,19 @@ const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging
         requiresDragWrapper,
     });
     const elementToRender = (props) => {
+        const { dragProps = {} } = props || {};
+        const { children, innerRef, Tag = 'div', ToolTipAndPlaceholder, style, ...rest } = dragProps;
+        const { 'data-cf-node-block-id': dataCfNodeBlockId, 'data-cf-node-block-type': dataCfNodeBlockType, 'data-cf-node-id': dataCfNodeId, } = componentProps;
+        const refCallback = (refNode) => {
+            if (innerRef && refNode)
+                innerRef(refNode);
+        };
         if (!componentRegistration) {
             return React.createElement(MissingComponentPlaceholder, { blockId: node.data.blockId });
         }
-        const { dragProps = {} } = props || {};
+        if (node.data.blockId && wrappingPatternIds.has(node.data.blockId)) {
+            return (React.createElement(CircularDependencyErrorPlaceholder, { ref: refCallback, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType, wrappingPatternIds: wrappingPatternIds }));
+        }
         const element = React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, {
             ...componentProps,
             dragProps,
@@ -4670,12 +4708,7 @@ const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging
         if (!requiresDragWrapper) {
             return element;
         }
-        const { children, innerRef, Tag = 'div', ToolTipAndPlaceholder, style, ...rest } = dragProps;
-        const { 'data-cf-node-block-id': dataCfNodeBlockId, 'data-cf-node-block-type': dataCfNodeBlockType, 'data-cf-node-id': dataCfNodeId, } = componentProps;
-        return (React.createElement(Tag, { ...rest, style: { ...style, ...wrapperStyles }, ref: (refNode) => {
-                if (innerRef && refNode)
-                    innerRef(refNode);
-            }, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType },
+        return (React.createElement(Tag, { ...rest, style: { ...style, ...wrapperStyles }, ref: refCallback, "data-cf-node-id": dataCfNodeId, "data-cf-node-block-id": dataCfNodeBlockId, "data-cf-node-block-type": dataCfNodeBlockType },
             ToolTipAndPlaceholder,
             element));
     };
@@ -5126,7 +5159,7 @@ function getStyle$1(style, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, }) => {
+const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index, zoneId, userIsDragging, placeholder, wrappingPatternIds, }) => {
     const { slotId } = parseZoneId(zoneId);
     const ref = useRef(null);
     const setSelectedNodeId = useEditorStore((state) => state.setSelectedNodeId);
@@ -5136,6 +5169,7 @@ const EditorBlock = ({ node: rawNode, resolveDesignValue, renderDropzone, index,
         resolveDesignValue,
         renderDropzone,
         userIsDragging,
+        wrappingPatternIds,
     });
     const { isSingleColumn, isWrapped } = useSingleColumn(node, resolveDesignValue);
     const setDomRect = useDraggedItemStore((state) => state.setDomRect);
@@ -5272,13 +5306,14 @@ function getStyle(style = {}, snapshot) {
         transitionDuration: `0.001s`,
     };
 }
-const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provided, renderDropzone, }) => {
+const EditorBlockClone = ({ node: rawNode, resolveDesignValue, snapshot, provided, renderDropzone, wrappingPatternIds, }) => {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const { node, elementToRender } = useComponent({
         node: rawNode,
         resolveDesignValue,
         renderDropzone,
         userIsDragging,
+        wrappingPatternIds,
     });
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     return elementToRender({
@@ -5311,7 +5346,7 @@ const getHtmlComponentProps = (props) => {
     return {};
 };
 
-function DropzoneClone({ node, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, ...rest }) {
+function DropzoneClone({ node, zoneId, resolveDesignValue, WrapperComponent = 'div', renderDropzone, dragProps, wrappingPatternIds, ...rest }) {
     const tree = useTreeStore((state) => state.tree);
     const content = node?.children || tree.root?.children || [];
     const { slotId } = parseZoneId(zoneId);
@@ -5332,11 +5367,11 @@ function DropzoneClone({ node, zoneId, resolveDesignValue, WrapperComponent = 'd
         .filter((node) => node.data.slotId === slotId)
         .map((item) => {
         const componentId = item.data.id;
-        return (React.createElement(EditorBlockClone, { key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone }));
+        return (React.createElement(EditorBlockClone, { key: componentId, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds }));
     })));
 }
 
-function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, ...rest }) {
+function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponent = 'div', dragProps, wrappingPatternIds: parentWrappingPatternIds = new Set(), ...rest }) {
     const userIsDragging = useDraggedItemStore((state) => state.isDraggingOnCanvas);
     const draggedItem = useDraggedItemStore((state) => state.draggedItem);
     const isDraggingNewComponent = useDraggedItemStore((state) => Boolean(state.componentId));
@@ -5358,13 +5393,24 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     const isRootAssembly = node?.type === ASSEMBLY_NODE_TYPE;
     const htmlDraggableProps = getHtmlDragProps(dragProps);
     const htmlProps = getHtmlComponentProps(rest);
+    const wrappingPatternIds = useMemo(() => {
+        // On the top level, the node is not defined. If the root blockId is not the default string,
+        // we assume that it is the entry ID of the experience/ pattern to properly detect circular dependencies
+        if (!node && tree.root.data.blockId && tree.root.data.blockId !== ROOT_ID) {
+            return new Set([tree.root.data.blockId, ...parentWrappingPatternIds]);
+        }
+        if (isRootAssembly && node?.data.blockId) {
+            return new Set([node.data.blockId, ...parentWrappingPatternIds]);
+        }
+        return parentWrappingPatternIds;
+    }, [isRootAssembly, node, parentWrappingPatternIds, tree.root.data.blockId]);
     // To avoid a circular dependency, we create the recursive rendering function here and trickle it down
     const renderDropzone = useCallback((node, props) => {
-        return (React.createElement(Dropzone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, ...props }));
-    }, [resolveDesignValue]);
+        return (React.createElement(Dropzone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [wrappingPatternIds, resolveDesignValue]);
     const renderClonedDropzone = useCallback((node, props) => {
-        return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, ...props }));
-    }, [resolveDesignValue]);
+        return (React.createElement(DropzoneClone, { zoneId: node.data.id, node: node, resolveDesignValue: resolveDesignValue, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds, ...props }));
+    }, [resolveDesignValue, wrappingPatternIds]);
     const isDropzoneEnabled = useMemo(() => {
         const isColumns = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
         const isDraggingSingleColumn = draggedNode?.data.blockId === CONTENTFUL_COMPONENTS$1.singleColumn.id;
@@ -5398,7 +5444,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
     if (!resolveDesignValue) {
         return null;
     }
-    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone })) }, (provided, snapshot) => {
+    return (React.createElement(Droppable, { droppableId: zoneId, direction: direction, isDropDisabled: !isDropzoneEnabled, renderClone: (provided, snapshot, rubic) => (React.createElement(EditorBlockClone, { node: content[rubic.source.index], resolveDesignValue: resolveDesignValue, provided: provided, snapshot: snapshot, renderDropzone: renderClonedDropzone, wrappingPatternIds: wrappingPatternIds })) }, (provided, snapshot) => {
         return (React.createElement(WrapperComponent, { ...(provided || { droppableProps: {} }).droppableProps, ...htmlDraggableProps, ...htmlProps, ref: (refNode) => {
                 if (dragProps?.innerRef) {
                     dragProps.innerRef(refNode);
@@ -5421,7 +5467,7 @@ function Dropzone({ node, zoneId, resolveDesignValue, className, WrapperComponen
                     elementIndex: i,
                     dropzoneElementId: zoneId,
                     direction,
-                }, index: i, zoneId: zoneId, key: item.data.id, userIsDragging: userIsDragging, draggingNewComponent: isDraggingNewComponent, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone })))),
+                }, index: i, zoneId: zoneId, key: item.data.id, userIsDragging: userIsDragging, draggingNewComponent: isDraggingNewComponent, node: item, resolveDesignValue: resolveDesignValue, renderDropzone: renderDropzone, wrappingPatternIds: wrappingPatternIds })))),
             provided?.placeholder,
             dragProps?.ToolTipAndPlaceholder));
     }));