@contentful/experiences-visual-editor-react 1.17.0 → 1.17.1-beta.0

package/README.md

@@ -1,5 +1,9 @@
 # @contentful/experiences-visual-editor-react
 
+## Private Package Notice
+
+*Note*: This package is not meant to be used directly by the end user. It is a dependency for the Studio Experiences packages. Changes to this package are not guaranteed to follow semantic versioning and may break without notice if used directly.
+
 ### Purpose
 - Handles the canvas interaction logic with dragging, hitboxes, dropzones, reparenting, and communicating with the parent frame to ensure a smooth drag and drop experience.
 - Note that this package is framework specific to React.

package/dist/index.js

@@ -3,11 +3,12 @@ import React, { useEffect, useRef, useState, useCallback, forwardRef, useLayoutE
 import md5 from 'md5';
 import { z } from 'zod';
 import { BLOCKS } from '@contentful/rich-text-types';
-import { isArray, isEqual, get as get$1, omit } from 'lodash-es';
+import { omit, isArray, isEqual, get as get$1 } from 'lodash-es';
 import { create } from 'zustand';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
 import { produce } from 'immer';
 import '@contentful/rich-text-react-renderer';
+import { css } from 'emotion';
 import { v4 } from 'uuid';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
@@ -89,6 +90,44 @@ const CONTENTFUL_COMPONENTS$1 = {
 const ASSEMBLY_NODE_TYPE$1 = 'assembly';
 const ASSEMBLY_DEFAULT_CATEGORY$1 = 'Assemblies';
 const ASSEMBLY_BLOCK_NODE_TYPE$1 = 'assemblyBlock';
+const CF_STYLE_ATTRIBUTES = [
+    'cfVisibility',
+    'cfHorizontalAlignment',
+    'cfVerticalAlignment',
+    'cfMargin',
+    'cfPadding',
+    'cfBackgroundColor',
+    'cfWidth',
+    'cfMaxWidth',
+    'cfHeight',
+    'cfImageAsset',
+    'cfImageOptions',
+    'cfBackgroundImageUrl',
+    'cfBackgroundImageOptions',
+    'cfFlexDirection',
+    'cfFlexWrap',
+    'cfBorder',
+    'cfBorderRadius',
+    'cfGap',
+    'cfFontSize',
+    'cfFontWeight',
+    'cfLineHeight',
+    'cfLetterSpacing',
+    'cfTextColor',
+    'cfTextAlign',
+    'cfTextTransform',
+    'cfTextBold',
+    'cfTextItalic',
+    'cfTextUnderline',
+    // For backwards compatibility
+    // we need to keep those in this constant array
+    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
+    // can filter them out and not pass as props
+    'cfBackgroundImageScaling',
+    'cfBackgroundImageAlignment',
+    'cfBackgroundImageAlignmentVertical',
+    'cfBackgroundImageAlignmentHorizontal',
+];
 const EMPTY_CONTAINER_HEIGHT$1 = '80px';
 const DEFAULT_IMAGE_WIDTH = '500px';
 var PostMessageMethods$2;
@@ -1282,7 +1321,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
         return;
     }
     if (variableName === 'cfBackgroundImageUrl') {
-        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
+        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth') || '100%';
         const optionsVariableName = 'cfBackgroundImageOptions';
         const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
             ? variables[optionsVariableName].valuesByBreakpoint
@@ -1731,6 +1770,13 @@ const deserializePatternVariables = ({ nodeVariables, componentInstanceProps, co
     return { childNodeVariable, dataSource, unboundValues };
 };
 
+const stylesToKeep = ['cfImageAsset'];
+const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
+const propsToRemove = ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName'];
+const sanitizeNodeProps = (nodeProps) => {
+    return omit(nodeProps, stylesToRemove, propsToRemove);
+};
+
 const sendMessage = (eventType, data) => {
     if (typeof window === 'undefined') {
         return;
@@ -2346,44 +2392,6 @@ const ASSEMBLY_NODE_TYPE = 'assembly';
 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',
-    'cfPadding',
-    'cfBackgroundColor',
-    'cfWidth',
-    'cfMaxWidth',
-    'cfHeight',
-    'cfImageAsset',
-    'cfImageOptions',
-    'cfBackgroundImageUrl',
-    'cfBackgroundImageOptions',
-    'cfFlexDirection',
-    'cfFlexWrap',
-    'cfBorder',
-    'cfBorderRadius',
-    'cfGap',
-    'cfFontSize',
-    'cfFontWeight',
-    'cfLineHeight',
-    'cfLetterSpacing',
-    'cfTextColor',
-    'cfTextAlign',
-    'cfTextTransform',
-    'cfTextBold',
-    'cfTextItalic',
-    'cfTextUnderline',
-    // For backwards compatibility
-    // we need to keep those in this constant array
-    // so that omit() in <VisualEditorBlock> and <CompositionBlock>
-    // can filter them out and not pass as props
-    'cfBackgroundImageScaling',
-    'cfBackgroundImageAlignment',
-    'cfBackgroundImageAlignmentVertical',
-    'cfBackgroundImageAlignmentHorizontal',
-];
 const EMPTY_CONTAINER_HEIGHT = '80px';
 const HYPERLINK_DEFAULT_PATTERN = `/{locale}/{entry.fields.slug}/`;
 var PostMessageMethods$1;
@@ -3046,7 +3054,7 @@ styleInject(css_248z$5);
 var css_248z$4 = ".cf-text {\n  white-space: pre-line;\n}\n";
 styleInject(css_248z$4);
 
-var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\n.cf-no-image {\n  position: relative;\n}\n\n.cf-no-image img {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\n.cf-no-image svg {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\n.cf-no-image svg path {\n  fill: var(--cf-color-gray400);\n}\n";
+var css_248z$3 = "@import url(https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap);\n\n:root {\n  /* All sizing comments based of 16px base body font size */\n\n  /* color */\n  --cf-color-white: #fff;\n  --cf-color-black: #000;\n  --cf-color-gray100: #f7f9fa;\n  --cf-color-gray400: #aec1cc;\n  --cf-color-gray400-rgb: 174, 193, 204;\n\n  /* spacing */\n  --cf-spacing-0: 0rem; /* 0px */\n  --cf-spacing-1: 0.125rem; /* 2px */\n  --cf-spacing-2: 0.25rem; /* 4px */\n  --cf-spacing-3: 0.375rem; /* 6px */\n  --cf-spacing-4: 0.5rem; /* 8px */\n  --cf-spacing-5: 0.625rem; /* 10px */\n  --cf-spacing-6: 0.75rem; /* 12px */\n  --cf-spacing-7: 0.875rem; /* 14px */\n  --cf-spacing-8: 1rem; /* 16px */\n  --cf-spacing-9: 1.25rem; /* 20px */\n  --cf-spacing-10: 1.5rem; /* 24px */\n  --cf-spacing-11: 1.75rem; /* 28px */\n  --cf-spacing-12: 2rem; /* 32px */\n  --cf-spacing-13: 2.25rem; /* 36px */\n\n  /* font-size */\n  --cf-text-xs: 0.75rem; /* 12px */\n  --cf-text-sm: 0.875rem; /* 14px */\n  --cf-text-base: 1rem; /* 16px */\n  --cf-text-lg: 1.125rem; /* 18px */\n  --cf-text-xl: 1.25rem; /* 20px */\n  --cf-text-2xl: 1.5rem; /* 24px */\n  --cf-text-3xl: 2rem; /* 32px */\n  --cf-text-4xl: 2.75rem; /* 44px */\n\n  /* font-weight */\n  --cf-font-light: 300;\n  --cf-font-normal: 400;\n  --cf-font-medium: 500;\n  --cf-font-semibold: 600;\n  --cf-font-bold: 700;\n  --cf-font-extra-bold: 800;\n  --cf-font-black: 900;\n\n  /* border-radius */\n  --cf-border-radius-none: 0px; /* none */\n  --cf-border-radius-sm: 0.125rem; /* 2px */\n  --cf-border-radius: 0.25rem; /* 4px */\n  --cf-border-radius-md: 0.375rem; /* 6px */\n  --cf-border-radius-lg: 0.5rem; /* 8px */\n  --cf-border-radius-xl: 0.75rem; /* 12px */\n  --cf-border-radius-2xl: 1rem; /* 16px */\n  --cf-border-radius-3xl: 1.5rem; /* 24px */\n  --cf-border-radius-full: 9999px; /* full */\n\n  /* font-family */\n  --cf-font-family-sans: Archivo, Helvetica, Arial, sans-serif;\n  --cf-font-family-serif: Georgia, Cambria, Times New Roman, Times, serif;\n\n  /* max widths */\n  --cf-max-width-full: 100%;\n\n  /* component specific colors */\n  --cf-button-bg: var(--cf-color-black);\n  --cf-button-color: var(--cf-color-white);\n  --cf-text-color: var(--cf-color-black);\n}\n\nimg.cf-placeholder-image {\n  background-color: var(--cf-color-gray100);\n  outline-offset: -2px;\n  outline: 2px solid rgba(var(--cf-color-gray400-rgb), 0.5);\n}\n\nsvg.cf-placeholder-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  height: var(--cf-text-3xl);\n  width: var(--cf-text-3xl);\n  max-height: 100%;\n  max-width: 100%;\n}\n\nsvg.cf-placeholder-icon path {\n  fill: var(--cf-color-gray400);\n}\n";
 styleInject(css_248z$3);
 
 var css_248z$2$1 = ".contentful-container {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  pointer-events: all;\n}\n\n.contentful-container::-webkit-scrollbar {\n  display: none; /* Safari and Chrome */\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n}\n\n.cf-container-wrapper {\n  position: relative;\n  width: 100%;\n}\n\n.contentful-container:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.contentful-section-label:after {\n  content: 'Section';\n}\n\n.contentful-container-label:after {\n  content: 'Container';\n}\n\n/* used by ContentfulSectionAsHyperlink.tsx */\n\n.contentful-container-link,\n.contentful-container-link:active,\n.contentful-container-link:visited,\n.contentful-container-link:hover,\n.contentful-container-link:read-write,\n.contentful-container-link:focus-visible {\n  color: inherit;\n  text-decoration: unset;\n  outline: unset;\n}\n";
@@ -3077,6 +3085,12 @@ Flex.displayName = 'Flex';
 var css_248z$1$1 = ".cf-divider {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  border: none;\n}\n\n.cf-divider::before {\n  content: \"\";\n  position: absolute;\n  top: -5px;\n  left: -5px;\n  bottom: -5px;\n  right: -5px;\n  pointer-events: all;\n}\n";
 styleInject(css_248z$1$1);
 
+({
+    hr: css({
+        border: 'none',
+    }),
+});
+
 var css_248z$7 = ".cf-columns {\n  display: flex;\n  gap: 24px;\n  grid-template-columns: repeat(12, 1fr);\n  flex-direction: column;\n  min-height: 0; /* NEW */\n  min-width: 0; /* NEW; needed for Firefox */\n}\n\n@media (min-width: 768px) {\n  .cf-columns {\n    display: grid;\n  }\n}\n\n.cf-single-column-wrapper {\n  position: relative;\n  display: flex;\n}\n\n.cf-single-column {\n  pointer-events: all;\n}\n\n.cf-single-column-wrapper:after {\n  content: '';\n  display: block;\n  position: absolute;\n  pointer-events: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  overflow-x: clip;\n  font-family: var(--exp-builder-font-stack-primary);\n  font-size: 12px;\n  color: var(--exp-builder-gray400);\n  z-index: 1;\n}\n\n.cf-single-column-label:after {\n  content: 'Column';\n}\n";
 styleInject(css_248z$7);
 
@@ -3973,18 +3987,29 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         renderDropzone,
     ]);
     const cfStyles = useMemo(() => buildCfStyles(props), [props]);
-    const sizeStyles = {
-        width: cfStyles.width,
-        maxWidth: cfStyles.maxWidth,
-        maxHeight: cfStyles.maxHeight,
-    };
     const isAssemblyBlock = node.type === 'assemblyBlock';
     const isSingleColumn = node?.data.blockId === CONTENTFUL_COMPONENTS.columns.id;
     const isStructureComponent = isContentfulStructureComponent(node?.data.blockId);
+    // Move size styles to the wrapping div and override the component styles
+    const overrideStyles = {};
+    const wrapperStyles = {
+        width: cfStyles.width,
+        maxWidth: cfStyles.maxWidth,
+    };
+    if (!isStructureComponent) {
+        if (cfStyles.height) {
+            wrapperStyles.height = cfStyles.height;
+            overrideStyles.height = '100%';
+        }
+        if (cfStyles.width) {
+            overrideStyles.width = '100%';
+        }
+    }
     // Styles that will be applied to the component element
     const componentClass = useEditorModeClassName({
         styles: {
             ...cfStyles,
+            ...overrideStyles,
             ...(isEmptyZone &&
                 isStructureWithRelativeHeight(node?.data.blockId, cfStyles.height) && {
                 minHeight: EMPTY_CONTAINER_HEIGHT,
@@ -3998,9 +4023,6 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         },
         nodeId: node.data.id,
     });
-    //List explicit style props that will end up being passed to the component
-    const stylesToKeep = ['cfImageAsset'];
-    const stylesToRemove = CF_STYLE_ATTRIBUTES.filter((style) => !stylesToKeep.includes(style));
     const componentProps = {
         'data-cf-node-id': node.data.id,
         'data-cf-node-block-id': node.data.blockId,
@@ -4009,10 +4031,10 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         editorMode: true,
         node,
         renderDropzone,
-        ...omit(props, stylesToRemove, ['cfHyperlink', 'cfOpenInNewTab', 'cfSsrClassName']),
+        ...sanitizeNodeProps(props),
         ...(definition?.children ? { children: renderDropzone(node) } : {}),
     };
-    return { componentProps, sizeStyles };
+    return { componentProps, wrapperStyles };
 };
 const addExtraDropzonePadding = (padding) => padding
     .split(' ')
@@ -4192,7 +4214,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         return registration;
     }, [node]);
     const componentId = node.data.id;
-    const { componentProps, sizeStyles } = useComponentProps({
+    const { componentProps, wrapperStyles } = useComponentProps({
         node,
         areEntitiesFetched,
         resolveDesignValue,
@@ -4218,7 +4240,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
             return element;
         }
         const { children, innerRef, Tag = 'div', ToolTipAndPlaceholder, style, ...rest } = dragProps;
-        return (React.createElement(Tag, { ...rest, style: { ...style, ...sizeStyles }, ref: (refNode) => {
+        return (React.createElement(Tag, { ...rest, style: { ...style, ...wrapperStyles }, ref: (refNode) => {
                 if (innerRef && refNode)
                     innerRef(refNode);
             } },