@contentful/experiences-visual-editor-react 0.0.1-alpha.9 → 0.0.1-beta.1

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',
     },
 };
@@ -424,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());
@@ -438,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');
+    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 (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(', ')}`);
+        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,
@@ -502,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) => {
@@ -529,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) {
@@ -548,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) {
@@ -595,6 +590,7 @@ const getDataFromTree = (tree) => {
     };
 };
 
+// These styles get added to every component, user custom or contentful provided
 const builtInStyles = {
     cfVerticalAlignment: {
         validations: {
@@ -705,13 +701,6 @@ const builtInStyles = {
         description: 'The border of the section',
         defaultValue: '0px solid rgba(0, 0, 0, 0)',
     },
-    cfBorderRadius: {
-        displayName: 'Border Radius',
-        type: 'Text',
-        group: 'style',
-        description: 'The border radius of the section',
-        defaultValue: '0px',
-    },
     cfGap: {
         displayName: 'Gap',
         type: 'Text',
@@ -778,9 +767,6 @@ const optionalBuiltInStyles = {
         defaultValue: {
             width: DEFAULT_IMAGE_WIDTH,
             height: '100%',
-            objectFit: 'none',
-            objectPosition: 'center center',
-            quality: '100',
             targetSize: DEFAULT_IMAGE_WIDTH,
         },
     },
@@ -796,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',
@@ -1710,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',
     },
 };
@@ -2491,7 +2483,7 @@ styleInject(css_248z$4);
 var css_248z$3 = ".cf-text {\n  white-space: pre-line;\n}\n";
 styleInject(css_248z$3);
 
-var css_248z$2$1 = ".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[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\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$2$1 = "@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[data-ctfl-draggable-id] .cf-no-image {\n  width: 100%;\n  height: 100%;\n}\n\n[data-ctfl-draggable-id] .cf-no-image img {\n  width: 100%;\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";
 styleInject(css_248z$2$1);
 
 var css_248z$1$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.cf-container-label {\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: 10;\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";
@@ -2672,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]);