@contentful/experiences-visual-editor-react 1.14.0 → 1.15.0-beta.0

package/dist/index.js

@@ -83,13 +83,15 @@ var PostMessageMethods$2;
 })(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
 const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
 
-const structureComponents = new Set([
+const structureComponentIds = new Set([
     CONTENTFUL_COMPONENTS$1.section.id,
     CONTENTFUL_COMPONENTS$1.columns.id,
     CONTENTFUL_COMPONENTS$1.container.id,
     CONTENTFUL_COMPONENTS$1.singleColumn.id,
 ]);
-const isContentfulStructureComponent = (componentId) => structureComponents.has(componentId ?? '');
+const allContentfulComponentIds = new Set(Object.values(CONTENTFUL_COMPONENTS$1).map((component) => component.id));
+const isContentfulStructureComponent = (componentId) => structureComponentIds.has(componentId ?? '');
+const isContentfulComponent = (componentId) => allContentfulComponentIds.has(componentId ?? '');
 const isComponentAllowedOnRoot = (componentId) => isContentfulStructureComponent(componentId) || componentId === CONTENTFUL_COMPONENTS$1.divider.id;
 const isStructureWithRelativeHeight = (componentId, height) => {
     return isContentfulStructureComponent(componentId) && !height?.toString().endsWith('px');
@@ -197,7 +199,16 @@ const tryParseMessage = (event) => {
     return eventData;
 };
 
-// Keep this for backwards compatilibity - deleting this would be a breaking change
+const transformVisibility = (value) => {
+    if (value === false) {
+        return {
+            display: 'none',
+        };
+    }
+    // Don't explicitly set anything when visible to not overwrite values like `grid` or `flex`.
+    return {};
+};
+// Keep this for backwards compatibility - deleting this would be a breaking change
 // because existing components on a users experience will have the width value as fill
 // rather than 100%
 const transformFill = (value) => (value === 'fill' ? '100%' : value);
@@ -316,8 +327,9 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, }) => {
+const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, cfBorderRadius, cfGap, cfBackgroundImageUrl, cfBackgroundImageOptions, cfFontSize, cfFontWeight, cfImageOptions, cfLineHeight, cfLetterSpacing, cfTextColor, cfTextAlign, cfTextTransform, cfTextBold, cfTextItalic, cfTextUnderline, cfColumnSpan, cfVisibility, }) => {
     return {
+        ...transformVisibility(cfVisibility),
         margin: cfMargin,
         padding: cfPadding,
         backgroundColor: cfBackgroundColor,
@@ -1423,9 +1435,12 @@ const builtInStylesWithDesignTokens = [
     'cfTextColor',
     'cfMaxWidth',
 ];
-const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName) => {
+const isValidBreakpointValue = (value) => {
+    return value !== undefined && value !== null && value !== '';
+};
+const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpointIndex, variableName, resolveDesignTokens = true) => {
     const eventuallyResolveDesignTokens = (value) => {
-        // For some built-in design propertier, we support design tokens
+        // For some built-in design properties, we support design tokens
         if (builtInStylesWithDesignTokens.includes(variableName)) {
             return getDesignTokenRegistration(value, variableName);
         }
@@ -1436,22 +1451,29 @@ const getValueForBreakpoint = (valuesByBreakpoint, breakpoints, activeBreakpoint
         // Assume that the values are sorted by media query to apply the cascading CSS logic
         for (let index = activeBreakpointIndex; index >= 0; index--) {
             const breakpointId = breakpoints[index]?.id;
-            if (valuesByBreakpoint[breakpointId]) {
+            if (isValidBreakpointValue(valuesByBreakpoint[breakpointId])) {
                 // If the value is defined, we use it and stop the breakpoints cascade
-                return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
+                if (resolveDesignTokens) {
+                    return eventuallyResolveDesignTokens(valuesByBreakpoint[breakpointId]);
+                }
+                return valuesByBreakpoint[breakpointId];
             }
         }
         // If no breakpoint matched, we search and apply the fallback breakpoint
         const fallbackBreakpointIndex = getFallbackBreakpointIndex(breakpoints);
         const fallbackBreakpointId = breakpoints[fallbackBreakpointIndex]?.id;
-        if (valuesByBreakpoint[fallbackBreakpointId]) {
-            return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+        if (isValidBreakpointValue(valuesByBreakpoint[fallbackBreakpointId])) {
+            if (resolveDesignTokens) {
+                return eventuallyResolveDesignTokens(valuesByBreakpoint[fallbackBreakpointId]);
+            }
+            return valuesByBreakpoint[fallbackBreakpointId];
         }
     }
     else {
         // Old design properties did not support breakpoints, keep for backward compatibility
         return valuesByBreakpoint;
     }
+    return undefined;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2250,6 +2272,7 @@ const ASSEMBLY_DEFAULT_CATEGORY = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE = 'assemblyBlock';
 const ASSEMBLY_NODE_TYPES = [ASSEMBLY_NODE_TYPE, ASSEMBLY_BLOCK_NODE_TYPE];
 const CF_STYLE_ATTRIBUTES = [
+    'cfVisibility',
     'cfHorizontalAlignment',
     'cfVerticalAlignment',
     'cfMargin',
@@ -3330,9 +3353,9 @@ function useEditorSubscriber() {
                     break;
                 }
                 case INCOMING_EVENTS.ComponentDragStarted: {
-                    const { id } = eventData.payload;
+                    const { id, isAssembly } = eventData.payload;
                     SimulateDnD$1.setupDrag();
-                    setComponentId(id || '');
+                    setComponentId(`${id}:${isAssembly}` || '');
                     setDraggingOnCanvas(true);
                     sendMessage(OUTGOING_EVENTS.ComponentSelected, {
                         nodeId: '',
@@ -3516,26 +3539,37 @@ function useCanvasInteractions() {
         if (!destination) {
             return;
         }
+        /**
+         * We only have the draggableId as information about the new component being dropped.
+         * So we need to split it to get the blockId and the isAssembly flag.
+         */
+        const [blockId, isAssembly] = draggableId.split(':');
         const { nodeId: parentId, slotId } = parseZoneId(destination.droppableId);
         const droppingOnRoot = parentId === ROOT_ID;
-        const isValidRootComponent = draggableId === CONTENTFUL_COMPONENTS.container.id;
-        let node = createTreeNode({ blockId: draggableId, parentId, slotId });
+        const isValidRootComponent = blockId === CONTENTFUL_COMPONENTS.container.id;
+        let node = createTreeNode({ blockId: blockId, parentId, slotId });
         if (droppingOnRoot && !isValidRootComponent) {
             const wrappingContainer = createTreeNode({
                 blockId: CONTENTFUL_COMPONENTS.container.id,
                 parentId,
             });
             const childNode = createTreeNode({
-                blockId: draggableId,
+                blockId: blockId,
                 parentId: wrappingContainer.data.id,
             });
             node = wrappingContainer;
             node.children = [childNode];
         }
-        addChild(destination.index, parentId, node);
+        /**
+         * isAssembly comes from a string ID so we need to check if it's 'true' or 'false'
+         * in string format.
+         */
+        if (isAssembly === 'false') {
+            addChild(destination.index, parentId, node);
+        }
         onDrop({
             data: tree,
-            componentType: draggableId,
+            componentType: blockId,
             destinationIndex: destination.index,
             destinationZoneId: parentId,
             slotId,
@@ -3852,7 +3886,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         entityStore,
         renderDropzone,
     ]);
-    const cfStyles = buildCfStyles(props);
+    const cfStyles = useMemo(() => buildCfStyles(props), [props]);
     const sizeStyles = {
         width: cfStyles.width,
         maxWidth: cfStyles.maxWidth,
@@ -4039,9 +4073,25 @@ class ImportedComponentError extends Error {
         this.name = 'ImportedComponentError';
     }
 }
+class ExperienceSDKError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ExperienceSDKError';
+    }
+}
 class ImportedComponentErrorBoundary extends React.Component {
     componentDidCatch(error, _errorInfo) {
-        const err = new ImportedComponentError(error.message);
+        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
+            // This error was already handled by a nested error boundary and should be passed upwards
+            // We have to do this as we wrap every component on every layer with this error boundary and
+            // thus an error deep in the tree bubbles through many layers of error boundaries.
+            throw error;
+        }
+        // Differentiate between custom and SDK-provided components for error tracking
+        const ErrorClass = isContentfulComponent(this.props.componentId)
+            ? ExperienceSDKError
+            : ImportedComponentError;
+        const err = new ErrorClass(error.message);
         err.stack = error.stack;
         throw err;
     }
@@ -4106,7 +4156,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         const isAssembly = node.type === 'assembly';
         const modifiedProps = isStructureComponent || isAssembly ? componentProps : customComponentProps;
         const requiresDragWrapper = !isStructureComponent && componentRegistration.options?.wrapComponent === false;
-        const element = React.createElement(ImportedComponentErrorBoundary, null, React.createElement(componentRegistration.component, {
+        const element = React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, {
             ...modifiedProps,
             dragProps,
         }));