@contentful/experiences-visual-editor-react 3.4.1-dev-20250901T1444-72c17a2.0 → 3.5.0-beta.0

package/dist/index.js

@@ -8,8 +8,8 @@ import { create, useStore } from 'zustand';
 import { produce } from 'immer';
 import '@contentful/rich-text-react-renderer';
 
-var css_248z$b = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
-styleInject(css_248z$b);
+var css_248z$a = "html,\nbody {\n  margin: 0;\n  padding: 0;\n}\n\n/*\n * All of these variables are tokens from Forma-36 and should not be adjusted as these\n * are global variables that may affect multiple places.\n * As our customers may use other design libraries, we try to avoid overlapping global\n * variables by always using the prefix `--exp-builder-` inside this SDK.\n */\n\n:root {\n  /* Color tokens from Forma 36: https://f36.contentful.com/tokens/color-system */\n  --exp-builder-blue100: #e8f5ff;\n  --exp-builder-blue200: #ceecff;\n  --exp-builder-blue300: #98cbff;\n  --exp-builder-blue400: #40a0ff;\n  --exp-builder-blue500: #036fe3;\n  --exp-builder-blue600: #0059c8;\n  --exp-builder-blue700: #0041ab;\n  --exp-builder-blue800: #003298;\n  --exp-builder-blue900: #002a8e;\n  --exp-builder-gray100: #f7f9fa;\n  --exp-builder-gray200: #e7ebee;\n  --exp-builder-gray300: #cfd9e0;\n  --exp-builder-gray400: #aec1cc;\n  --exp-builder-gray500: #67728a;\n  --exp-builder-gray600: #5a657c;\n  --exp-builder-gray700: #414d63;\n  --exp-builder-gray800: #1b273a;\n  --exp-builder-gray900: #111b2b;\n  --exp-builder-purple600: #6c3ecf;\n  --exp-builder-red200: #ffe0e0;\n  --exp-builder-red800: #7f0010;\n  --exp-builder-color-white: #ffffff;\n  --exp-builder-glow-primary: 0px 0px 0px 3px #e8f5ff;\n\n  /* RGB colors for applying opacity */\n  --exp-builder-blue100-rgb: 232, 245, 255;\n  --exp-builder-blue300-rgb: 152, 203, 255;\n\n  /* Spacing tokens from Forma 36: https://f36.contentful.com/tokens/spacing */\n  --exp-builder-spacing-s: 0.75rem;\n  --exp-builder-spacing-2xs: 0.25rem;\n\n  /* Typography tokens from Forma 36: https://f36.contentful.com/tokens/typography */\n  --exp-builder-font-size-l: 1rem;\n  --exp-builder-font-size-m: 0.875rem;\n  --exp-builder-font-stack-primary: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,\n    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;\n  --exp-builder-line-height-condensed: 1.25;\n}\n";
+styleInject(css_248z$a);
 
 /** @deprecated will be removed when dropping backward compatibility for old DND */
 const INCOMING_EVENTS$1 = {
@@ -763,6 +763,7 @@ const BreakpointSchema$1 = z
 const BaseComponentTreeNodeSchema$1 = z.object({
     id: ComponentTreeNodeIdSchema$1.optional(),
     definitionId: DefinitionPropertyKeySchema$1,
+    prebindingId: z.string().optional(),
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema$1, ComponentPropertyValueSchema$1),
@@ -3172,10 +3173,6 @@ const cloneDeepAsPOJO = (obj) => {
     return JSON.parse(JSON.stringify(obj));
 };
 
-var css_248z$a = ".RootRenderer-module_rootContainer__9UawM {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\nbody {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
-var styles$2 = {"rootContainer":"RootRenderer-module_rootContainer__9UawM"};
-styleInject(css_248z$a);
-
 // TODO: In order to support integrations without React, we should extract this heavy logic into simple
 // functions that we can reuse in other frameworks.
 /*
@@ -3581,6 +3578,7 @@ const BreakpointSchema = z
 const BaseComponentTreeNodeSchema = z.object({
     id: ComponentTreeNodeIdSchema.optional(),
     definitionId: DefinitionPropertyKeySchema,
+    prebindingId: z.string().optional(),
     displayName: z.string().optional(),
     slotId: z.string().optional(),
     variables: z.record(propertyKeySchema, ComponentPropertyValueSchema),
@@ -4326,8 +4324,8 @@ var VisualEditorMode;
     VisualEditorMode["InjectScript"] = "injectScript";
 })(VisualEditorMode || (VisualEditorMode = {}));
 
-var css_248z$2 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
-styleInject(css_248z$2);
+var css_248z$2$1 = ".contentful-container{display:flex;pointer-events:all;position:relative}.contentful-container::-webkit-scrollbar{display:none}.cf-container-wrapper{position:relative;width:100%}.contentful-container:after{align-items:center;bottom:0;color:var(--exp-builder-gray400);content:\"\";display:block;display:flex;font-family:var(--exp-builder-font-stack-primary);font-size:12px;justify-content:center;left:0;overflow-x:clip;pointer-events:none;position:absolute;right:0;top:0;z-index:1}.contentful-section-label:after{content:\"Section\"}.contentful-container-label:after{content:\"Container\"}.contentful-container-link,.contentful-container-link:active,.contentful-container-link:focus-visible,.contentful-container-link:hover,.contentful-container-link:read-write,.contentful-container-link:visited{color:inherit;outline:unset;text-decoration:unset}";
+styleInject(css_248z$2$1);
 
 const Flex = forwardRef(({ id, children, onMouseEnter, onMouseUp, onMouseLeave, onMouseDown, onClick, flex, flexBasis, flexShrink, flexDirection, gap, justifyContent, justifyItems, justifySelf, alignItems, alignSelf, alignContent, order, flexWrap, flexGrow, className, cssStyles, ...props }, ref) => {
     return (React.createElement("div", { id: id, ref: ref, style: {
@@ -4660,9 +4658,9 @@ const MissingComponentPlaceholder = ({ blockId }) => {
         "'"));
 };
 
-var css_248z$1 = ".EditorBlock-module_emptySlot__za-Bi {\n  min-height: 80px;\n  min-width: 80px;\n}\n";
+var css_248z$2 = ".EditorBlock-module_emptySlot__za-Bi {\n  min-height: 80px;\n  min-width: 80px;\n}\n";
 var styles$1 = {"emptySlot":"EditorBlock-module_emptySlot__za-Bi"};
-styleInject(css_248z$1);
+styleInject(css_248z$2);
 
 const useComponentRegistration = (node) => {
     return useMemo(() => {
@@ -4919,6 +4917,31 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         styles: componentStyles,
         nodeId: node.data.id,
     });
+    // Allows custom components to render differently in the editor. This needs to be activated
+    // through registry options as the component has to be aware of this prop to not cause any React warnings.
+    const editorProps = useMemo(() => {
+        const editorProps = {};
+        if (options?.enableEditorProperties?.isEditorMode) {
+            editorProps.isEditorMode = true;
+        }
+        if (options?.enableEditorProperties?.isEmpty) {
+            editorProps.isEmpty = node.children.length === 0;
+        }
+        if (options?.enableEditorProperties?.nodeBlockId) {
+            editorProps.nodeBlockId = node.data.blockId;
+        }
+        if (options?.enableCustomEditorView) {
+            editorProps.isInExpEditorMode = true;
+        }
+        return editorProps;
+    }, [
+        node.children.length,
+        node.data.blockId,
+        options?.enableEditorProperties?.isEditorMode,
+        options?.enableEditorProperties?.isEmpty,
+        options?.enableEditorProperties?.nodeBlockId,
+        options?.enableCustomEditorView,
+    ]);
     const componentProps = useMemo(() => {
         const sharedProps = {
             'data-cf-node-id': node.data.id,
@@ -4928,21 +4951,10 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
         };
         return {
             ...sharedProps,
-            // Allows custom components to render differently in the editor. This needs to be activated
-            // through options as the component has to be aware of this prop to not cause any React warnings.
-            ...(options?.enableCustomEditorView ? { isInExpEditorMode: true } : {}),
-            ...(options?.editorProperties?.isEditorMode ? { isEditorMode: true } : {}),
-            ...(options?.editorProperties?.node ? { node } : {}),
+            ...editorProps,
             ...sanitizeNodeProps(props),
         };
-    }, [
-        cfCsrClassName,
-        node,
-        options?.editorProperties?.isEditorMode,
-        options?.editorProperties?.node,
-        options?.enableCustomEditorView,
-        props,
-    ]);
+    }, [cfCsrClassName, editorProps, node, props]);
     return { componentProps };
 };
 
@@ -4987,9 +4999,9 @@ const RegistrationComponent = ({ node, resolveDesignValue, componentRegistration
     return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, children));
 };
 
-var css_248z = ".EmptyCanvasMessage-module_empty-canvas-container__7K-0l {\n  height: 200px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  transition: all 0.2s;\n  color: var(--exp-builder-gray400);\n  font-size: var(--exp-builder-font-size-l);\n  font-family: var(--exp-builder-font-stack-primary);\n  outline: 2px dashed var(--exp-builder-gray400);\n  outline-offset: -2px;\n}\n\n.EmptyCanvasMessage-module_empty-canvas-icon__EztFr rect {\n  fill: var(--exp-builder-gray400);\n}\n\n.EmptyCanvasMessage-module_empty-canvas-label__cbIrR {\n  margin-left: var(--exp-builder-spacing-s);\n}\n";
+var css_248z$1 = ".EmptyCanvasMessage-module_empty-canvas-container__7K-0l {\n  height: 200px;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n  transition: all 0.2s;\n  color: var(--exp-builder-gray400);\n  font-size: var(--exp-builder-font-size-l);\n  font-family: var(--exp-builder-font-stack-primary);\n  outline: 2px dashed var(--exp-builder-gray400);\n  outline-offset: -2px;\n}\n\n.EmptyCanvasMessage-module_empty-canvas-icon__EztFr rect {\n  fill: var(--exp-builder-gray400);\n}\n\n.EmptyCanvasMessage-module_empty-canvas-label__cbIrR {\n  margin-left: var(--exp-builder-spacing-s);\n}\n";
 var styles = {"empty-canvas-container":"EmptyCanvasMessage-module_empty-canvas-container__7K-0l","empty-canvas-icon":"EmptyCanvasMessage-module_empty-canvas-icon__EztFr","empty-canvas-label":"EmptyCanvasMessage-module_empty-canvas-label__cbIrR"};
-styleInject(css_248z);
+styleInject(css_248z$1);
 
 const EmptyCanvasMessage = () => {
     return (React.createElement("div", { className: styles['empty-canvas-container'], "data-type": "empty-container" },
@@ -5182,6 +5194,9 @@ function findAllImages() {
     return Array.from(document.querySelectorAll('img'));
 }
 
+var css_248z = "body {\n  margin: 0;\n}\n\nhtml {\n  -ms-overflow-style: none; /* Internet Explorer 10+ */\n  scrollbar-width: none; /* Firefox */\n}\n\nhtml::-webkit-scrollbar {\n  display: none;\n}\n";
+styleInject(css_248z);
+
 const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     useEditorSubscriber(inMemoryEntitiesStore);
     const tree = useTreeStore((state) => state.tree);
@@ -5194,8 +5209,7 @@ const RootRenderer = ({ inMemoryEntitiesStore, canvasMode }) => {
     const wrappingPatternIds = rootBlockId !== ROOT_ID ? new Set([rootBlockId]) : new Set();
     const entityStore = inMemoryEntitiesStore((state) => state.entityStore);
     const areEntitiesFetched = inMemoryEntitiesStore((state) => state.areEntitiesFetched);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { "data-ctfl-root": true, className: styles$2.rootContainer }, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched })))))));
+    return (React.createElement(React.Fragment, null, !tree.root.children.length ? (React.createElement(EmptyCanvasMessage, null)) : (tree.root.children.map((topLevelChildNode) => (React.createElement(EditorBlock, { key: topLevelChildNode.data.id, node: topLevelChildNode, resolveDesignValue: resolveDesignValue, wrappingPatternIds: wrappingPatternIds, entityStore: entityStore, areEntitiesFetched: areEntitiesFetched }))))));
 };
 
 const useInitializeEditor = (inMemoryEntitiesStore) => {