@contentful/experiences-visual-editor-react 1.6.0 → 1.7.0-beta.0

package/dist/index.js

@@ -216,7 +216,6 @@ const transformBorderStyle = (value) => {
     // Just accept the passed value
     if (parts.length < 3)
         return { border: value };
-    // Replace the second part always with `solid` and set the box sizing accordingly
     const [borderSize, borderStyle, ...borderColorParts] = parts;
     const borderColor = borderColorParts.join(' ');
     return {
@@ -301,27 +300,6 @@ const transformBackgroundImage = (cfBackgroundImageUrl, cfBackgroundImageOptions
         backgroundSize: matchBackgroundSize(cfBackgroundImageOptions?.scaling),
     };
 };
-const transformWidthSizing = ({ value, cfMargin, componentId, }) => {
-    if (!value || !componentId)
-        return;
-    const transformedValue = transformFill(value);
-    if (isContentfulStructureComponent(componentId)) {
-        const marginValues = cfMargin ? cfMargin.split(' ') : [];
-        const rightMargin = marginValues[1] || '0px';
-        const leftMargin = marginValues[3] || '0px';
-        const calcValue = `calc(${transformedValue} - ${leftMargin} - ${rightMargin})`;
-        /**
-         * We want to check if the calculated value is valid CSS. If this fails,
-         * this means the `transformedValue` is not a calculable value (not a px, rem, or %).
-         * The value may instead be a string such as `min-content` or `max-content`. In
-         * that case we don't want to use calc and instead return the raw value.
-         */
-        if (typeof window !== 'undefined' && CSS.supports('width', calcValue)) {
-            return calcValue;
-        }
-    }
-    return transformedValue;
-};
 
 const toCSSAttribute = (key) => {
     let val = key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
@@ -338,12 +316,12 @@ 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, }, componentId) => {
+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, }) => {
     return {
         margin: cfMargin,
         padding: cfPadding,
         backgroundColor: cfBackgroundColor,
-        width: transformWidthSizing({ value: cfWidth || cfImageOptions?.width, cfMargin, componentId }),
+        width: transformFill(cfWidth || cfImageOptions?.width),
         height: transformFill(cfHeight || cfImageOptions?.height),
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
@@ -911,13 +889,31 @@ const optionalBuiltInStyles = {
 };
 
 let designTokensRegistry = {};
+// This function is used to ensure that the composite values are valid since composite values are optional.
+// Therefore only border and in the future text related design tokens are/will be checked in this funciton.
+// Ensuring values for simple key-value design tokens are not neccessary since they are required via typescript.
+const ensureValidCompositeValues = (designTokenDefinition) => {
+    // TODO: add validation logic when text related design tokens are added
+    // Border validation
+    if (designTokenDefinition.border) {
+        for (const borderKey in designTokenDefinition.border) {
+            const borderValue = designTokenDefinition.border[borderKey];
+            designTokenDefinition.border[borderKey] = {
+                width: borderValue.width || '1px',
+                style: borderValue.style || 'solid',
+                color: borderValue.color || '#000000',
+            };
+        }
+    }
+    return designTokenDefinition;
+};
 /**
  * Register design tokens styling
  * @param designTokenDefinition - {[key:string]: Record<string, string>}
  * @returns void
  */
 const defineDesignTokens = (designTokenDefinition) => {
-    Object.assign(designTokensRegistry, designTokenDefinition);
+    Object.assign(designTokensRegistry, ensureValidCompositeValues(designTokenDefinition));
 };
 const templateStringRegex = /\${(.+?)}/g;
 const getDesignTokenRegistration = (breakpointValue, variableName) => {
@@ -1057,7 +1053,7 @@ const BreakpointSchema = z
     query: z.string().regex(/^\*$|^<[0-9*]+px$/),
     previewSize: z.string(),
     displayName: z.string(),
-    displayIconUrl: z.string().optional(),
+    displayIcon: z.enum(['desktop', 'tablet', 'mobile']).optional(),
 })
     .strict();
 const UnboundValuesSchema = z.record(uuidKeySchema, z.object({
@@ -1906,11 +1902,10 @@ class DeepReference {
     /**
      * Extracts referent from the path, using EntityStore as source of
      * entities during the resolution path.
-     * TODO: should it be called `extractLeafReferent` ? or `followToLeafReferent`
      */
     extractReferent(entityStore) {
         const headEntity = entityStore.getEntityFromLink(this.entityLink);
-        const maybeReferentLink = headEntity.fields[this.field];
+        const maybeReferentLink = headEntity?.fields[this.field];
         if (undefined === maybeReferentLink) {
             // field references nothing (or even field doesn't exist)
             return undefined;
@@ -2778,7 +2773,7 @@ const useComponentProps = ({ node, areEntitiesFetched, resolveDesignValue, rende
         entityStore,
         renderDropzone,
     ]);
-    const cfStyles = buildCfStyles(props, node.data.blockId);
+    const cfStyles = buildCfStyles(props);
     // Separate the component styles from the editor wrapper styles
     const { margin, height, width, maxWidth, ...componentStyles } = cfStyles;
     // Styles that will be applied to the editor wrapper (draggable) element