@dotcms/react 1.1.1-next.3 → 1.1.1-next.5

package/index.esm.js

@@ -5141,7 +5141,7 @@ const DotContent = ({
   const {
     contentType = 'Unknown Content Type'
   } = data;
-  const Component = customRenderers[contentType];
+  const Component = customRenderers == null ? void 0 : customRenderers[contentType];
   /* In dev mode, show a helpful message for unknown content types */
   if (isDevMode && !Component) {
     return jsx(NoComponentProvided, {
@@ -5153,7 +5153,9 @@ const DotContent = ({
     console.warn(DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
     return null;
   }
-  return jsx(Component, Object.assign({}, node));
+  return jsx(Component, {
+    node: node
+  });
 };
 
 /**
@@ -5478,7 +5480,7 @@ const BlockEditorBlock = ({
     const key = `${node.type}-${index}`;
     if (CustomRendererComponent) {
       return jsx(CustomRendererComponent, {
-        content: node.content,
+        node: node,
         children: jsx(BlockEditorBlock, {
           content: node.content,
           customRenderers: customRenderers
@@ -5613,7 +5615,7 @@ const UnknownBlock = ({
  *
  * @component
  * @param {Object} props - The component props.
- * @param {BlockEditorContent} props.blocks - The blocks of content to render.
+ * @param {BlockEditorNode} props.blocks - The blocks of content to render.
  * @param {CustomRenderer} [props.customRenderers] - Optional custom renderers for specific block types.
  * @param {string} [props.className] - Optional CSS class name for the container div.
  * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.1.1-next.3",
+  "version": "1.1.1-next.5",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"

package/src/index.d.ts

@@ -3,5 +3,5 @@ export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
 export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';
 export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage';
 export { DotCMSEditableText } from './lib/next/components/DotCMSEditableText/DotCMSEditableText';
-export { DotCMSBlockEditorRenderer, BlockEditorRendererProps } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';
+export { DotCMSBlockEditorRenderer, BlockEditorRendererProps, CustomRenderer, CustomRendererProps } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';
 export { DotCMSLayoutBodyProps } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody';

package/src/lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer.d.ts

@@ -1,13 +1,40 @@
-import { BlockEditorContent } from '@dotcms/types';
+import { BlockEditorNode } from '@dotcms/types';
 /**
- * Represents a Custom Renderer used by the Block Editor Component
+ * Props that all custom renderers must accept.
+ *
+ * @export
+ * @interface CustomRendererProps
+ * @template TData - The type of data stored in node.attrs.data (for contentlet blocks)
+ */
+export interface CustomRendererProps<TData = any> {
+    /** The full BlockEditorNode with attrs, marks, content, etc. */
+    node: BlockEditorNode & {
+        attrs?: {
+            data?: TData;
+            [key: string]: any;
+        };
+    };
+    /** Rendered children from nested content (if any) */
+    children?: React.ReactNode;
+}
+/**
+ * Custom renderer component type - must accept node and optional children.
+ * Can be specialized with a specific data type for node.attrs.data.
+ *
+ * @export
+ * @template TData - The type of contentlet data in node.attrs.data
+ */
+export type CustomRendererComponent<TData = any> = React.FC<CustomRendererProps<TData>>;
+/**
+ * Map of block type names to custom renderer components.
+ * Use the generic parameter to type specific contentlet data.
  *
  * @export
  * @interface CustomRenderer
  */
-export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+export type CustomRenderer = Record<string, CustomRendererComponent<any>>;
 export interface BlockEditorRendererProps {
-    blocks: BlockEditorContent;
+    blocks: BlockEditorNode;
     style?: React.CSSProperties;
     className?: string;
     customRenderers?: CustomRenderer;
@@ -17,7 +44,7 @@ export interface BlockEditorRendererProps {
  *
  * @component
  * @param {Object} props - The component props.
- * @param {BlockEditorContent} props.blocks - The blocks of content to render.
+ * @param {BlockEditorNode} props.blocks - The blocks of content to render.
  * @param {CustomRenderer} [props.customRenderers] - Optional custom renderers for specific block types.
  * @param {string} [props.className] - Optional CSS class name for the container div.
  * @param {React.CSSProperties} [props.style] - Optional inline styles for the container div.

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/DotContent.d.ts

@@ -1,7 +1,7 @@
 import { BlockEditorNode } from '@dotcms/types';
 import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
 interface DotContentProps {
-    customRenderers: CustomRenderer;
+    customRenderers?: CustomRenderer;
     node: BlockEditorNode;
 }
 /**