@contentful/experiences-visual-editor-react 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/index.js

@@ -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',
     },
 };
@@ -441,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,
@@ -505,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) => {
@@ -532,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) {
@@ -551,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) {
@@ -781,8 +773,6 @@ const optionalBuiltInStyles = {
         defaultValue: {
             width: DEFAULT_IMAGE_WIDTH,
             height: '100%',
-            objectPosition: 'center center',
-            quality: '100',
             targetSize: DEFAULT_IMAGE_WIDTH,
         },
     },
@@ -798,7 +788,6 @@ const optionalBuiltInStyles = {
         defaultValue: {
             scaling: 'fill',
             alignment: 'left top',
-            quality: '100',
             targetSize: '2000px',
         },
     },
@@ -1712,23 +1701,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',
     },
 };
@@ -2682,7 +2671,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
             });
         }
         else if (!registration) {
-            console.warn(`[experiences-sdk-react] Component registration not found for ${node.data.blockId}`);
+            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]);