@contentful/experiences-visual-editor-react 1.7.1 → 1.7.2-dev-20240613T0816-4d3b2da.0

package/dist/index.js

@@ -1,8 +1,8 @@
 import styleInject from 'style-inject';
 import React, { useRef, useMemo, useEffect, useState, useLayoutEffect, forwardRef, useCallback } from 'react';
 import md5 from 'md5';
-import { BLOCKS } from '@contentful/rich-text-types';
 import { z } from 'zod';
+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';
@@ -361,237 +361,6 @@ const calculateNodeDefaultHeight = ({ blockId, children, value, }) => {
     return EMPTY_CONTAINER_HEIGHT$1;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function get(obj, path) {
-    if (!path.length) {
-        return obj;
-    }
-    try {
-        const [currentPath, ...nextPath] = path;
-        return get(obj[currentPath], nextPath);
-    }
-    catch (err) {
-        return undefined;
-    }
-}
-
-const getBoundValue = (entryOrAsset, path) => {
-    const value = get(entryOrAsset, path.split('/').slice(2, -1));
-    return value && typeof value == 'object' && value.url
-        ? value.url
-        : value;
-};
-
-const transformRichText = (entryOrAsset, path) => {
-    const value = getBoundValue(entryOrAsset, path);
-    if (typeof value === 'string') {
-        return {
-            data: {},
-            content: [
-                {
-                    nodeType: BLOCKS.PARAGRAPH,
-                    data: {},
-                    content: [
-                        {
-                            data: {},
-                            nodeType: 'text',
-                            value: value,
-                            marks: [],
-                        },
-                    ],
-                },
-            ],
-            nodeType: BLOCKS.DOCUMENT,
-        };
-    }
-    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
-        return value;
-    }
-    return undefined;
-};
-
-function getOptimizedImageUrl(url, width, quality, format) {
-    if (url.startsWith('//')) {
-        url = 'https:' + url;
-    }
-    const params = new URLSearchParams();
-    if (width) {
-        params.append('w', width.toString());
-    }
-    if (quality && quality > 0 && quality < 100) {
-        params.append('q', quality.toString());
-    }
-    if (format) {
-        params.append('fm', format);
-    }
-    const queryString = params.toString();
-    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) => {
-    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, qualityNumber, format);
-    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
-    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
-    const optimizedBackgroundImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        file,
-    };
-    return optimizedBackgroundImageAsset;
-    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, loading, 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, qualityNumber, format)} ${width}w`)
-        : [];
-    const intrinsicImageWidth = file.details.image.width;
-    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
-        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
-    }
-    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
-    const optimizedImageAsset = {
-        url: returnedUrl,
-        srcSet,
-        sizes,
-        file,
-        loading,
-    };
-    return optimizedImageAsset;
-};
-
-const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
-    let value;
-    // If it is not a deep path and not pointing to the file of the asset,
-    // it is just pointing to a normal field and therefore we just resolve the value as normal field
-    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
-        return getBoundValue(asset, path);
-    }
-    //TODO: this will be better served by injectable type transformers instead of if statement
-    if (variableName === 'cfImageAsset') {
-        const optionsVariableName = 'cfImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
-            return;
-        }
-        try {
-            value = getOptimizedImageAsset({
-                file: asset.fields.file,
-                loading: options.loading,
-                sizes: options.targetSize,
-                quality: options.quality,
-                format: options.format,
-            });
-            return value;
-        }
-        catch (error) {
-            console.error('Error transforming image asset', error);
-        }
-        return;
-    }
-    if (variableName === 'cfBackgroundImageUrl') {
-        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
-        const optionsVariableName = 'cfBackgroundImageOptions';
-        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
-            ? variables[optionsVariableName].valuesByBreakpoint
-            : {}, optionsVariableName);
-        if (!options) {
-            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
-            return;
-        }
-        try {
-            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
-            return value;
-        }
-        catch (error) {
-            console.error('Error transforming image asset', error);
-        }
-        return;
-    }
-    return asset.fields.file?.url;
-};
-
-const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
-    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
-    if (!entityOrAsset)
-        return;
-    switch (variableDefinition.type) {
-        case 'Media':
-            // If we bound a normal entry field to the media veriable we just return the bound value
-            if (entityOrAsset.sys.type === 'Entry') {
-                return getBoundValue(entityOrAsset, path);
-            }
-            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
-        case 'RichText':
-            return transformRichText(entityOrAsset, path);
-        default:
-            return getBoundValue(entityOrAsset, path);
-    }
-};
-
-const getDataFromTree = (tree) => {
-    let dataSource = {};
-    let unboundValues = {};
-    const queue = [...tree.root.children];
-    while (queue.length) {
-        const node = queue.shift();
-        if (!node) {
-            continue;
-        }
-        dataSource = { ...dataSource, ...node.data.dataSource };
-        unboundValues = { ...unboundValues, ...node.data.unboundValues };
-        if (node.children.length) {
-            queue.push(...node.children);
-        }
-    }
-    return {
-        dataSource,
-        unboundValues,
-    };
-};
-
 // These styles get added to every component, user custom or contentful provided
 const builtInStyles = {
     cfVerticalAlignment: {
@@ -1178,6 +947,237 @@ var CodeNames;
     CodeNames["Custom"] = "custom";
 })(CodeNames || (CodeNames = {}));
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function get(obj, path) {
+    if (!path.length) {
+        return obj;
+    }
+    try {
+        const [currentPath, ...nextPath] = path;
+        return get(obj[currentPath], nextPath);
+    }
+    catch (err) {
+        return undefined;
+    }
+}
+
+const getBoundValue = (entryOrAsset, path) => {
+    const value = get(entryOrAsset, path.split('/').slice(2, -1));
+    return value && typeof value == 'object' && value.url
+        ? value.url
+        : value;
+};
+
+const transformRichText = (entryOrAsset, path) => {
+    const value = getBoundValue(entryOrAsset, path);
+    if (typeof value === 'string') {
+        return {
+            data: {},
+            content: [
+                {
+                    nodeType: BLOCKS.PARAGRAPH,
+                    data: {},
+                    content: [
+                        {
+                            data: {},
+                            nodeType: 'text',
+                            value: value,
+                            marks: [],
+                        },
+                    ],
+                },
+            ],
+            nodeType: BLOCKS.DOCUMENT,
+        };
+    }
+    if (typeof value === 'object' && value.nodeType === BLOCKS.DOCUMENT) {
+        return value;
+    }
+    return undefined;
+};
+
+function getOptimizedImageUrl(url, width, quality, format) {
+    if (url.startsWith('//')) {
+        url = 'https:' + url;
+    }
+    const params = new URLSearchParams();
+    if (width) {
+        params.append('w', width.toString());
+    }
+    if (quality && quality > 0 && quality < 100) {
+        params.append('q', quality.toString());
+    }
+    if (format) {
+        params.append('fm', format);
+    }
+    const queryString = params.toString();
+    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) => {
+    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, qualityNumber, format);
+    const imageUrl2x = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const srcSet = [`url(${imageUrl1x}) 1x`, `url(${imageUrl2x}) 2x`];
+    const returnedUrl = getOptimizedImageUrl(url, width2x, qualityNumber, format);
+    const optimizedBackgroundImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        file,
+    };
+    return optimizedBackgroundImageAsset;
+    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, loading, 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, qualityNumber, format)} ${width}w`)
+        : [];
+    const intrinsicImageWidth = file.details.image.width;
+    if (intrinsicImageWidth > MAX_WIDTH_ALLOWED) {
+        srcSet.push(`${getOptimizedImageUrl(url, undefined, qualityNumber, format)} ${intrinsicImageWidth}w`);
+    }
+    const returnedUrl = getOptimizedImageUrl(url, file.details.image.width > 2000 ? 2000 : undefined, qualityNumber, format);
+    const optimizedImageAsset = {
+        url: returnedUrl,
+        srcSet,
+        sizes,
+        file,
+        loading,
+    };
+    return optimizedImageAsset;
+};
+
+const transformMedia = (asset, variables, resolveDesignValue, variableName, path) => {
+    let value;
+    // If it is not a deep path and not pointing to the file of the asset,
+    // it is just pointing to a normal field and therefore we just resolve the value as normal field
+    if (!isDeepPath(path) && !lastPathNamedSegmentEq(path, 'file')) {
+        return getBoundValue(asset, path);
+    }
+    //TODO: this will be better served by injectable type transformers instead of if statement
+    if (variableName === 'cfImageAsset') {
+        const optionsVariableName = 'cfImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            value = getOptimizedImageAsset({
+                file: asset.fields.file,
+                loading: options.loading,
+                sizes: options.targetSize,
+                quality: options.quality,
+                format: options.format,
+            });
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
+    }
+    if (variableName === 'cfBackgroundImageUrl') {
+        const width = resolveDesignValue(variables['cfWidth']?.type === 'DesignValue' ? variables['cfWidth'].valuesByBreakpoint : {}, 'cfWidth');
+        const optionsVariableName = 'cfBackgroundImageOptions';
+        const options = resolveDesignValue(variables[optionsVariableName]?.type === 'DesignValue'
+            ? variables[optionsVariableName].valuesByBreakpoint
+            : {}, optionsVariableName);
+        if (!options) {
+            console.error(`Error transforming image asset: Required variable [${optionsVariableName}] missing from component definition`);
+            return;
+        }
+        try {
+            value = getOptimizedBackgroundImageAsset(asset.fields.file, width, options.quality, options.format);
+            return value;
+        }
+        catch (error) {
+            console.error('Error transforming image asset', error);
+        }
+        return;
+    }
+    return asset.fields.file?.url;
+};
+
+const transformBoundContentValue = (variables, entityStore, binding, resolveDesignValue, variableName, variableDefinition, path) => {
+    const entityOrAsset = entityStore.getEntryOrAsset(binding, path);
+    if (!entityOrAsset)
+        return;
+    switch (variableDefinition.type) {
+        case 'Media':
+            // If we bound a normal entry field to the media veriable we just return the bound value
+            if (entityOrAsset.sys.type === 'Entry') {
+                return getBoundValue(entityOrAsset, path);
+            }
+            return transformMedia(entityOrAsset, variables, resolveDesignValue, variableName, path);
+        case 'RichText':
+            return transformRichText(entityOrAsset, path);
+        default:
+            return getBoundValue(entityOrAsset, path);
+    }
+};
+
+const getDataFromTree = (tree) => {
+    let dataSource = {};
+    let unboundValues = {};
+    const queue = [...tree.root.children];
+    while (queue.length) {
+        const node = queue.shift();
+        if (!node) {
+            continue;
+        }
+        dataSource = { ...dataSource, ...node.data.dataSource };
+        unboundValues = { ...unboundValues, ...node.data.unboundValues };
+        if (node.children.length) {
+            queue.push(...node.children);
+        }
+    }
+    return {
+        dataSource,
+        unboundValues,
+    };
+};
+
 const MEDIA_QUERY_REGEXP = /(<|>)(\d{1,})(px|cm|mm|in|pt|pc)$/;
 const toCSSMediaQuery = ({ query }) => {
     if (query === '*')