@contentful/experiences-visual-editor-react 0.0.1-alpha.8 → 0.0.1-beta.0

package/dist/index.js

@@ -2,10 +2,10 @@ import styleInject from 'style-inject';
 import React, { useRef, useMemo, useEffect, useState, forwardRef, useCallback } from 'react';
 import md5 from 'md5';
 import { BLOCKS } from '@contentful/rich-text-types';
+import { isEqual, get as get$1, omit } from 'lodash-es';
 import { Draggable, Droppable, DragDropContext } from '@hello-pangea/dnd';
 import classNames from 'classnames';
 import { create } from 'zustand';
-import { isEqual, get as get$1, omit } from 'lodash-es';
 import '@contentful/rich-text-react-renderer';
 import { produce } from 'immer';
 import { createPortal } from 'react-dom';
@@ -49,23 +49,23 @@ const CONTENTFUL_COMPONENTS$1 = {
         name: 'Column',
     },
     button: {
-        id: 'button',
+        id: 'contentful-button',
         name: 'Button',
     },
     heading: {
-        id: 'heading',
+        id: 'contentful-heading',
         name: 'Heading',
     },
     image: {
-        id: 'image',
+        id: 'contentful-image',
         name: 'Image',
     },
     richText: {
-        id: 'richText',
+        id: 'contentful-richText',
         name: 'Rich Text',
     },
     text: {
-        id: 'text',
+        id: 'contentful-text',
         name: 'Text',
     },
 };
@@ -329,7 +329,7 @@ const buildStyleTag = ({ styles, nodeId }) => {
     const styleRule = `.${className}{ ${stylesStr} }`;
     return [className, styleRule];
 };
-const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection, cfFlexWrap, cfMargin, cfPadding, cfBackgroundColor, cfWidth, cfHeight, cfMaxWidth, cfBorder, 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, }) => {
     return {
         margin: cfMargin,
         padding: cfPadding,
@@ -339,6 +339,7 @@ const buildCfStyles = ({ cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirec
         maxWidth: cfMaxWidth,
         ...transformGridColumn(cfColumnSpan),
         ...transformBorderStyle(cfBorder),
+        borderRadius: cfBorderRadius,
         gap: cfGap,
         ...transformAlignment(cfHorizontalAlignment, cfVerticalAlignment, cfFlexDirection),
         flexDirection: cfFlexDirection,
@@ -423,6 +424,9 @@ const transformRichText = (entryOrAsset, path) => {
 };
 
 function getOptimizedImageUrl(url, width, quality, format) {
+    if (url.startsWith('//')) {
+        url = 'https:' + url;
+    }
     const params = new URLSearchParams();
     if (width) {
         params.append('w', width.toString());
@@ -437,63 +441,67 @@ function getOptimizedImageUrl(url, width, quality, format) {
     return `${url}${queryString ? '?' + queryString : ''}`;
 }
 
+function validateParams(file, quality, format) {
+    if (!file.details.image) {
+        throw Error('No image in file asset to transform');
+    }
+    if (quality < 0 || quality > 100) {
+        throw Error('Quality must be between 0 and 100');
+    }
+    if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
+        throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+    }
+    return true;
+}
+
 const MAX_WIDTH_ALLOWED$1 = 2000;
-const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = 100, format) => {
-    if (!validateParams(file, quality, format)) ;
+const getOptimizedBackgroundImageAsset = (file, widthStyle, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
+    if (!validateParams(file, qualityNumber, format)) ;
     const url = file.url;
     const { width1x, width2x } = getWidths(widthStyle, file);
-    const imageUrl1x = getOptimizedImageUrl(url, width1x, quality, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, quality, format);
+    const imageUrl1x = getOptimizedImageUrl(url, width1x, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
     const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrlImageUrl = getOptimizedImageUrl(url, width2x, quality, format);
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
     const optimizedBackgroundImageAsset = {
-        url: returnedUrlImageUrl,
+        url: returnedUrl,
         srcSet,
         file,
     };
     return optimizedBackgroundImageAsset;
-    function validateParams(file, quality, format) {
-        if (!file.details.image) {
-            throw Error('No image in file asset to transform');
-        }
-        if (quality < 0 || quality > 100) {
-            throw Error('Quality must be between 0 and 100');
+    function getWidths(widthStyle, file) {
+        let width1x = 0;
+        let width2x = 0;
+        const intrinsicImageWidth = file.details.image.width;
+        if (widthStyle.endsWith('px')) {
+            width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
         }
-        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
+        else {
+            width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
         }
-        return true;
+        width2x = Math.min(width1x * 2, intrinsicImageWidth);
+        return { width1x, width2x };
     }
 };
-function getWidths(widthStyle, file) {
-    let width1x = 0;
-    let width2x = 0;
-    const intrinsicImageWidth = file.details.image.width;
-    if (widthStyle.endsWith('px')) {
-        width1x = Math.min(Number(widthStyle.replace('px', '')), intrinsicImageWidth);
-    }
-    else {
-        width1x = Math.min(MAX_WIDTH_ALLOWED$1, intrinsicImageWidth);
-    }
-    width2x = Math.min(width1x * 2, intrinsicImageWidth);
-    return { width1x, width2x };
-}
 
 const MAX_WIDTH_ALLOWED = 4000;
-const getOptimizedImageAsset = (file, sizes, quality = 100, format) => {
-    if (!validateParams(file, quality, format)) ;
+const getOptimizedImageAsset = (file, sizes, quality = '100%', format) => {
+    const qualityNumber = Number(quality.replace('%', ''));
+    if (!validateParams(file, qualityNumber, format)) ;
     const url = file.url;
     const maxWidth = Math.min(file.details.image.width, MAX_WIDTH_ALLOWED);
     const numOfParts = Math.max(2, Math.ceil(maxWidth / 500));
     const widthParts = Array.from({ length: numOfParts }, (_, index) => Math.ceil((index + 1) * (maxWidth / numOfParts)));
     const srcSet = sizes
-        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, quality, format)} ${width}w`)
+        ? widthParts.map((width) => `${getOptimizedImageUrl(url, width, qualityNumber, format)} ${width}w`)
         : [];
     const intrinsicImageWidth = file.details.image.width;
     if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
-        srcSet.push(`${getOptimizedImageUrl(url, undefined, quality, format)} ${intrinsicImageWidth}w`);
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
     }
-    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, quality, format);
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
     const optimizedImageAsset = {
         url: returnedUrl,
         srcSet,
@@ -501,18 +509,6 @@ const getOptimizedImageAsset = (file, sizes, quality = 100, format) => {
         file,
     };
     return optimizedImageAsset;
-    function validateParams(file, quality, format) {
-        if (!file.details.image) {
-            throw Error('No image in file asset to transform');
-        }
-        if (quality < 0 || quality > 100) {
-            throw Error('Quality must be between 0 and 100');
-        }
-        if (format && !SUPPORTED_IMAGE_FORMATS.includes(format)) {
-            throw Error(`Format must be one of ${SUPPORTED_IMAGE_FORMATS.join(', ')}`);
-        }
-        return true;
-    }
 };
 
 const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
@@ -528,7 +524,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
-            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, Number(options.quality), options.format);
+            value = getOptimizedImageAsset(asset.fields.file, options.targetSize, options.quality, options.format);
             return value;
         }
         catch (error) {
@@ -547,7 +543,7 @@ const transformMedia = (asset, variables, resolveDesignValue, variableName, path
             return;
         }
         try {
-            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, Number(options.quality), options.format);
+            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
             return value;
         }
         catch (error) {
@@ -594,6 +590,7 @@ const getDataFromTree = (tree) => {
     };
 };
 
+// These styles get added to every component, user custom or contentful provided
 const builtInStyles = {
     cfVerticalAlignment: {
         validations: {
@@ -770,9 +767,6 @@ const optionalBuiltInStyles = {
         defaultValue: {
             width: DEFAULT_IMAGE_WIDTH,
             height: '100%',
-            objectFit: 'none',
-            objectPosition: 'center center',
-            quality: '100',
             targetSize: DEFAULT_IMAGE_WIDTH,
         },
     },
@@ -788,10 +782,16 @@ const optionalBuiltInStyles = {
         defaultValue: {
             scaling: 'fill',
             alignment: 'left top',
-            quality: '100',
             targetSize: '2000px',
         },
     },
+    cfBorderRadius: {
+        displayName: 'Border Radius',
+        type: 'Text',
+        group: 'style',
+        description: 'The border radius of the section',
+        defaultValue: '0px',
+    },
     cfLineHeight: {
         displayName: 'Line Height',
         type: 'Text',
@@ -993,6 +993,7 @@ const builtInStylesWithDesignTokens = [
     'cfHeight',
     'cfBackgroundColor',
     'cfBorder',
+    'cfBorderRadius',
     'cfFontSize',
     'cfLineHeight',
     'cfLetterSpacing',
@@ -1701,23 +1702,23 @@ const CONTENTFUL_COMPONENTS = {
         name: 'Column',
     },
     button: {
-        id: 'button',
+        id: 'contentful-button',
         name: 'Button',
     },
     heading: {
-        id: 'heading',
+        id: 'contentful-heading',
         name: 'Heading',
     },
     image: {
-        id: 'image',
+        id: 'contentful-image',
         name: 'Image',
     },
     richText: {
-        id: 'richText',
+        id: 'contentful-richText',
         name: 'Rich Text',
     },
     text: {
-        id: 'text',
+        id: 'contentful-text',
         name: 'Text',
     },
 };
@@ -1741,6 +1742,7 @@ const CF_STYLE_ATTRIBUTES = [
     'cfFlexDirection',
     'cfFlexWrap',
     'cfBorder',
+    'cfBorderRadius',
     'cfGap',
     'cfFontSize',
     'cfFontWeight',
@@ -2662,15 +2664,15 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         return rawNode;
     }, [areEntitiesFetched, rawNode, entityStore]);
     const componentRegistration = useMemo(() => {
-        const registration = componentRegistry.get(node.data.blockId);
+        let registration = componentRegistry.get(node.data.blockId);
         if (node.type === ASSEMBLY_NODE_TYPE && !registration) {
-            return createAssemblyRegistration({
+            registration = createAssemblyRegistration({
                 definitionId: node.data.blockId,
                 component: Assembly,
             });
         }
-        else if (!registration) {
-            console.warn(`[experiences-sdk-react] Component registration not found for ${node.data.blockId}`);
+        if (!registration) {
+            throw Error(`Component registration not found for component with id: "${node.data.blockId}". The component might of been removed. To proceed, remove the component manually from the layers tab.`);
         }
         return registration;
     }, [node]);