@contentful/experiences-visual-editor-react 1.27.1 → 1.28.0-beta.0

package/dist/index.js

@@ -933,9 +933,12 @@ const BreakpointSchema$1 = z
 const UnboundValuesSchema$1 = z.record(uuidKeySchema$1, z.object({
     value: PrimitiveValueSchema$1,
 }));
+const ComponentTreeNodeIdSchema$1 = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
 // Use helper schema to define a recursive schema with its type correctly below
 const BaseComponentTreeNodeSchema$1 = z.object({
-    id: uuidKeySchema$1.optional(),
+    id: ComponentTreeNodeIdSchema$1.optional(),
     definitionId: DefinitionPropertyKeySchema$1,
     displayName: z.string().optional(),
     slotId: z.string().optional(),
@@ -1193,21 +1196,31 @@ const transformRichText = (entryOrAsset, entityStore, path) => {
         };
     }
     if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
-        //resolve any embedded links - we currently only support resolving embedded in the first entry
+        // resolve any links to assets/entries/hyperlinks
         const richTextDocument = value;
-        richTextDocument.content.forEach((node) => {
-            if ((node.nodeType === BLOCKS.EMBEDDED_ENTRY || node.nodeType === BLOCKS.EMBEDDED_ASSET) &&
-                node.data.target.sys.type === 'Link') {
-                const entity = entityStore.getEntityFromLink(node.data.target);
-                if (entity) {
-                    node.data.target = entity;
-                }
-            }
-        });
-        return value;
+        resolveLinks(richTextDocument, entityStore);
+        return richTextDocument;
     }
     return undefined;
 };
+const isLinkTarget = (node) => {
+    return node?.data?.target?.sys?.type === 'Link';
+};
+const resolveLinks = (node, entityStore) => {
+    if (!node)
+        return;
+    // Resolve link if current node has one
+    if (isLinkTarget(node)) {
+        const entity = entityStore.getEntityFromLink(node.data.target);
+        if (entity) {
+            node.data.target = entity;
+        }
+    }
+    // Process content array if it exists
+    if ('content' in node && Array.isArray(node.content)) {
+        node.content.forEach((childNode) => resolveLinks(childNode, entityStore));
+    }
+};
 
 function getOptimizedImageUrl(url, width, quality, format) {
     if (url.startsWith('//')) {
@@ -3278,9 +3291,12 @@ const BreakpointSchema = z
 const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
     value: PrimitiveValueSchema,
 }));
+const ComponentTreeNodeIdSchema = z
+    .string()
+    .regex(/^[a-zA-Z0-9]{1,8}$/, { message: 'Does not match /^[a-zA-Z0-9]{1,8}$/' });
 // Use helper schema to define a recursive schema with its type correctly below
 const BaseComponentTreeNodeSchema = z.object({
-    id: uuidKeySchema.optional(),
+    id: ComponentTreeNodeIdSchema.optional(),
     definitionId: DefinitionPropertyKeySchema,
     displayName: z.string().optional(),
     slotId: z.string().optional(),
@@ -4438,6 +4454,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
     const isAssemblyBlock = node.type === ASSEMBLY_BLOCK_NODE_TYPE;
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS$1.columns.id;
     const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
+    const isPatternNode = node.type === ASSEMBLY_NODE_TYPE;
     const { overrideStyles, wrapperStyles } = useMemo(() => {
         // Move size styles to the wrapping div and override the component styles
         const overrideStyles = {};
@@ -4514,18 +4531,31 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         styles: componentStyles,
         nodeId: node.data.id,
     });
-    const componentProps = {
+    const sharedProps = {
         'data-cf-node-id': node.data.id,
         'data-cf-node-block-id': node.data.blockId,
         'data-cf-node-block-type': node.type,
         className: props.cfSsrClassName ?? componentClass,
+        ...(definition?.children ? { children: renderDropzone(node) } : {}),
+    };
+    const customComponentProps = {
+        ...sharedProps,
+        isInExpEditorMode: true,
+        ...sanitizeNodeProps(props),
+    };
+    const structuralOrPatternComponentProps = {
+        ...sharedProps,
         editorMode: true,
         node,
         renderDropzone,
-        ...sanitizeNodeProps(props),
-        ...(definition?.children ? { children: renderDropzone(node) } : {}),
     };
-    return { componentProps, componentStyles, wrapperStyles };
+    return {
+        componentProps: isStructureComponent || isPatternNode
+            ? structuralOrPatternComponentProps
+            : customComponentProps,
+        componentStyles,
+        wrapperStyles,
+    };
 };
 const addExtraDropzonePadding = (padding) => padding
     .split(' ')
@@ -4566,7 +4596,7 @@ class ImportedComponentErrorBoundary extends React.Component {
     }
 }
 
-const MissingComponentPlacehoder = ({ blockId }) => {
+const MissingComponentPlaceholder = ({ blockId }) => {
     return (React.createElement("div", { style: {
             border: '1px solid red',
             width: '100%',
@@ -4614,24 +4644,22 @@ const useComponent = ({ node, resolveDesignValue, renderDropzone, userIsDragging
     });
     const elementToRender = (props) => {
         if (!componentRegistration) {
-            return React.createElement(MissingComponentPlacehoder, { blockId: node.data.blockId });
+            return React.createElement(MissingComponentPlaceholder, { blockId: node.data.blockId });
         }
         const { dragProps = {} } = props || {};
-        const { editorMode: isInExpEditorMode, renderDropzone: _renderDropzone, node: _node, ...customComponentProps } = componentProps;
-        const modifiedProps = isStructureComponent || isPatternNode ? componentProps : customComponentProps;
         const element = React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, {
-            ...modifiedProps,
+            ...componentProps,
             dragProps,
-            isInExpEditorMode,
         }));
         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 },
             ToolTipAndPlaceholder,
             element));
     };