@contentful/experiences-visual-editor-react 3.5.0-dev-20250902T0640-ab0b512.0 → 3.6.0

package/dist/index.js

@@ -4917,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,
@@ -4925,22 +4950,12 @@ const useComponentProps = ({ node, entityStore, areEntitiesFetched, resolveDesig
             className: props.cfSsrClassName ?? cfCsrClassName,
         };
         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 } : {}),
             ...sanitizeNodeProps(props),
+            // Add those at last to not let them get overwritten by custom properties
+            ...editorProps,
+            ...sharedProps,
         };
-    }, [
-        cfCsrClassName,
-        node,
-        options?.editorProperties?.isEditorMode,
-        options?.editorProperties?.node,
-        options?.enableCustomEditorView,
-        props,
-    ]);
+    }, [cfCsrClassName, editorProps, node, props]);
     return { componentProps };
 };
 
@@ -4982,7 +4997,9 @@ const RegistrationComponent = ({ node, resolveDesignValue, componentRegistration
         entityStore,
         areEntitiesFetched,
     });
-    return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, children));
+    return React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, { ...componentProps, ...slotNodes }, 
+    // If there are no children, a custom property called `children` can be passed through to the custom component
+    ...(children ?? [])));
 };
 
 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";