@contentful/experiences-visual-editor-react 1.34.0-dev-20250228T1701-87c41f6.0 → 1.34.1-dev-20250305T1630-a40e5df.0

package/dist/index.js

@@ -12,8 +12,8 @@ import { v4 } from 'uuid';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-var css_248z$a = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
-styleInject(css_248z$a);
+var css_248z$b = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+styleInject(css_248z$b);
 
 const INCOMING_EVENTS$1 = {
     RequestEditorMode: 'requestEditorMode',
@@ -384,45 +384,85 @@ const toCSSAttribute = (key) => {
     val = val.replace(/\d+$/, '');
     return val;
 };
-const buildStyleTag = ({ styles, nodeId }) => {
-    const stylesStr = Object.entries(styles)
+/**
+ * Turns a list of CSSProperties into a joined CSS string that can be
+ * used for <style> tags. Per default it creates a minimized version.
+ * For editor mode, use the `useWhitespaces` flag to create a more readable version.
+ *
+ * @param cssProperties list of CSS properties
+ * @param useWhitespaces adds whitespaces and newlines between each rule
+ * @returns a string of CSS rules
+ */
+const stringifyCssProperties = (cssProperties, useWhitespaces = false) => {
+    const rules = Object.entries(cssProperties)
         .filter(([, value]) => value !== undefined)
-        .reduce((acc, [key, value]) => `${acc}
-        ${toCSSAttribute(key)}: ${value};`, '');
-    const className = `cfstyles-${nodeId ? nodeId : md5(stylesStr)}`;
-    const styleRule = `.${className}{ ${stylesStr} }`;
+        .map(([key, value]) => useWhitespaces ? `${toCSSAttribute(key)}: ${value};` : `${toCSSAttribute(key)}:${value};`);
+    return rules.join(useWhitespaces ? '\n' : '');
+};
+const buildStyleTag = ({ styles, nodeId }) => {
+    const generatedStyles = stringifyCssProperties(styles, true);
+    const className = `cfstyles-${nodeId ? nodeId : md5(generatedStyles)}`;
+    const styleRule = `.${className}{ ${generatedStyles} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexReverse, 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 {
+/**
+ * Takes plain design values and transforms them into CSS properties. Undefined values will
+ * be filtered out.
+ *
+ * **Example Input**
+ * ```
+ * values = {
+ *   cfVisibility: 'visible',
+ *   cfMargin: '10px',
+ *   cfFlexReverse: true,
+ *   cfImageOptions: { objectFit: 'cover' },
+ *   // ...
+ * }
+ * ```
+ * **Example Output**
+ * ```
+ * cssProperties = {
+ *   margin: '10px',
+ *   flexDirection: 'row-reverse',
+ *   objectFit: 'cover',
+ *   // ...
+ * }
+ * ```
+ */
+const buildCfStyles = (values) => {
+    const cssProperties = {
         boxSizing: 'border-box',
-        ...transformVisibility(cfVisibility),
-        margin: cfMargin,
-        padding: cfPadding,
-        backgroundColor: cfBackgroundColor,
-        width: transformFill(cfWidth || cfImageOptions?.width),
-        height: transformFill(cfHeight || cfImageOptions?.height),
-        maxWidth: cfMaxWidth,
-        ...transformGridColumn(cfColumnSpan),
-        ...transformBorderStyle(cfBorder),
-        borderRadius: cfBorderRadius,
-        gap: cfGap,
-        ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
-        flexDirection: cfFlexReverse && cfFlexDirection ? `${cfFlexDirection}-reverse` : cfFlexDirection,
-        flexWrap: cfFlexWrap,
-        ...transformBackgroundImage(cfBackgroundImageUrl, cfBackgroundImageOptions),
-        fontSize: cfFontSize,
-        fontWeight: cfTextBold ? 'bold' : cfFontWeight,
-        fontStyle: cfTextItalic ? 'italic' : undefined,
-        textDecoration: cfTextUnderline ? 'underline' : undefined,
-        lineHeight: cfLineHeight,
-        letterSpacing: cfLetterSpacing,
-        color: cfTextColor,
-        textAlign: cfTextAlign,
-        textTransform: cfTextTransform,
-        objectFit: cfImageOptions?.objectFit,
-        objectPosition: cfImageOptions?.objectPosition,
+        ...transformVisibility(values.cfVisibility),
+        margin: values.cfMargin,
+        padding: values.cfPadding,
+        backgroundColor: values.cfBackgroundColor,
+        width: transformFill(values.cfWidth || values.cfImageOptions?.width),
+        height: transformFill(values.cfHeight || values.cfImageOptions?.height),
+        maxWidth: values.cfMaxWidth,
+        ...transformGridColumn(values.cfColumnSpan),
+        ...transformBorderStyle(values.cfBorder),
+        borderRadius: values.cfBorderRadius,
+        gap: values.cfGap,
+        ...transformAlignment(values.cfHorizontalAlignment, values.cfVerticalAlignment, values.cfFlexDirection),
+        flexDirection: values.cfFlexReverse && values.cfFlexDirection
+            ? `${values.cfFlexDirection}-reverse`
+            : values.cfFlexDirection,
+        flexWrap: values.cfFlexWrap,
+        ...transformBackgroundImage(values.cfBackgroundImageUrl, values.cfBackgroundImageOptions),
+        fontSize: values.cfFontSize,
+        fontWeight: values.cfTextBold ? 'bold' : values.cfFontWeight,
+        fontStyle: values.cfTextItalic ? 'italic' : undefined,
+        textDecoration: values.cfTextUnderline ? 'underline' : undefined,
+        lineHeight: values.cfLineHeight,
+        letterSpacing: values.cfLetterSpacing,
+        color: values.cfTextColor,
+        textAlign: values.cfTextAlign,
+        textTransform: values.cfTextTransform,
+        objectFit: values.cfImageOptions?.objectFit,
+        objectPosition: values.cfImageOptions?.objectPosition,
     };
+    const cssPropertiesWithoutUndefined = Object.fromEntries(Object.entries(cssProperties).filter(([, value]) => value !== undefined));
+    return cssPropertiesWithoutUndefined;
 };
 /**
  * Container/section default behavior:
@@ -3009,9 +3049,9 @@ const cloneDeepAsPOJO = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 };
 
-var css_248z$9 = ".render-module_hitbox__l4ysJ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\n}\n\n.render-module_hitboxLower__tgsA1 {\n  position: absolute;\n  bottom: -20px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  z-index: 1000000;\n}\n\n.render-module_canvasBottomSpacer__JuxVh {\n  position: absolute;\n  width: 100%;\n  height: 50px;\n}\n\n.render-module_container__-C3d7 {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
+var css_248z$a = ".render-module_hitbox__l4ysJ {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 10px;\n  z-index: 1000000;\n}\n\n.render-module_hitboxLower__tgsA1 {\n  position: absolute;\n  bottom: -20px;\n  left: 0;\n  width: 100%;\n  height: 20px;\n  z-index: 1000000;\n}\n\n.render-module_canvasBottomSpacer__JuxVh {\n  position: absolute;\n  width: 100%;\n  height: 50px;\n}\n\n.render-module_container__-C3d7 {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
 var styles$3 = {"hitbox":"render-module_hitbox__l4ysJ","hitboxLower":"render-module_hitboxLower__tgsA1","canvasBottomSpacer":"render-module_canvasBottomSpacer__JuxVh","container":"render-module_container__-C3d7"};
-styleInject(css_248z$9);
+styleInject(css_248z$a);
 
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
 // functions that we can reuse in other frameworks.
@@ -3180,6 +3220,9 @@ const useEditorStore = create((set, get) => ({
     },
 }));
 
+var css_248z$8 = "/* Initially added with PR #253 for each component, this is now a global setting\n * It is recommended on MDN to use this as a default for layouting.\n*/\n* {\n  box-sizing: border-box;\n}\n";
+styleInject(css_248z$8);
+
 /**
  * These modes are ONLY intended to be internally used within the context of
  * editing an experience inside of Contentful Studio. i.e. these modes
@@ -3698,8 +3741,8 @@ Flex.displayName = 'Flex';
 var css_248z$1$1 = ".cf-divider {\n  display: contents;\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.cf-divider hr {\n  border: none;\n}\n\n/* For the editor mode add this 10px tolerance to make it easier picking up the divider component.\n * Using the DND zone as precondition makes sure that we don't render this pseudo element in delivery. */\n\n[data-ctfl-zone-id='root'] .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);
 
-var css_248z$8 = ".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$8);
+var css_248z$9 = ".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$9);
 
 const ColumnWrapper = forwardRef((props, ref) => {
     return (React.createElement("div", { ref: ref, ...props, style: {