@dotcms/react 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotcms/react",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "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;
 }
 /**

package/src/lib/next/hooks/useIsAnalyticsActive.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @internal
+ * React hook that checks whether DotCMS Analytics is active.
+ *
+ * Uses useSyncExternalStore to subscribe to analytics state changes via custom events:
+ * - `dotcms:analytics:ready`: Fired when Analytics initializes
+ * - `dotcms:analytics:cleanup`: Fired on page unload
+ *
+ * Components automatically re-render when analytics state changes. Works regardless
+ * of initialization order and returns false during SSR.
+ *
+ * @returns {boolean} True if analytics is active, false otherwise
+ *
+ * @example
+ * ```tsx
+ * function Contentlet({ item }) {
+ *   const isAnalyticsActive = useIsAnalyticsActive()
+ *
+ *   const attrs = isAnalyticsActive
+ *     ? { 'data-dot-analytics-id': item.id }
+ *     : {}
+ *
+ *   return <div {...attrs}>{item.title}</div>
+ * }
+ * ```
+ */
+export declare const useIsAnalyticsActive: () => boolean;