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

package/dist/index.js

@@ -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),
@@ -3577,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),
@@ -4915,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,
@@ -4924,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 };
 };