@dotcms/react 0.0.1-alpha.50 → 0.0.1-alpha.51

package/index.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, createContext, useRef, useContext, createElement as createElement$1, forwardRef } from 'react';
-import { isInsideEditor, initEditor, updateNavigation, destroyEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, NOTIFY_CLIENT } from '@dotcms/client';
+import { isInsideEditor, initEditor, updateNavigation, destroyEditor, DotCmsClient, postMessageToEditor, CLIENT_ACTIONS, NOTIFY_CLIENT, initInlineEditing } from '@dotcms/client';
 import { Editor } from '@tinymce/tinymce-react';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -5187,17 +5187,57 @@ const BlockEditorBlock = ({
  * @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.
+ * @param {boolean} props.editable - Flag to enable inline editing. When true, `contentlet` and `fieldName` are required. Note: Enterprise only feature.
+ * @param {DotCMSContentlet} [props.contentlet] - Contentlet object for inline editing. Required when `editable` is true.
+ * @param {string} [props.fieldName] - Field name for inline editing. Required when `editable` is true.
  * @returns {JSX.Element} A div containing the rendered blocks of content.
  */
 const BlockEditorRenderer = ({
+  style,
   blocks,
-  customRenderers,
+  editable,
+  fieldName,
   className,
-  style
+  contentlet,
+  customRenderers
 }) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!editable || !ref.current || !isInsideEditor()) {
+      return;
+    }
+    // TypeScript will throw an error if contentlet or fieldName are not provided when editable is true,
+    // but we need to check them again to avoid runtime errors in Pure JavaScript
+    if (!contentlet || !fieldName) {
+      console.error('contentlet and fieldName are required to enable inline editing');
+      return;
+    }
+    const {
+      inode,
+      languageId: language,
+      contentType
+    } = contentlet;
+    // `ContentNode` lives on `@dotcms/react` that's why we can use it in `@dotcms/client`
+    // We need to move interfaces to external lib
+    const content = blocks;
+    const element = ref.current;
+    const handleClickEvent = () => {
+      initInlineEditing('BLOCK_EDITOR', {
+        inode,
+        content,
+        language,
+        fieldName,
+        contentType
+      });
+    };
+    element.addEventListener('click', handleClickEvent);
+    return () => element.removeEventListener('click', handleClickEvent);
+  }, [editable, contentlet, blocks, fieldName]);
   return jsx("div", {
     className: className,
     style: style,
+    ref: ref,
+    "data-testid": "dot-block-editor-container",
     children: jsx(BlockEditorBlock, {
       content: blocks.content,
       customRenderers: customRenderers

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-alpha.50",
+  "version": "0.0.1-alpha.51",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-alpha.50",
+    "@dotcms/client": "0.0.1-alpha.51",
     "@tinymce/tinymce-react": "^5.1.1"
   },
   "description": "Official React Components library to render a dotCMS page.",

package/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.d.ts

@@ -1,12 +1,24 @@
 /// <reference types="react" />
+import { DotCMSContentlet } from '../../models';
 import { Block } from '../../models/blocks.interface';
 import { CustomRenderer } from '../../models/content-node.interface';
-export interface BlockEditorRendererProps {
+interface BaseProps {
     blocks: Block;
     customRenderers?: CustomRenderer;
     className?: string;
     style?: React.CSSProperties;
 }
+interface EditableProps extends BaseProps {
+    editable: true;
+    contentlet: DotCMSContentlet;
+    fieldName: string;
+}
+interface NonEditableProps extends BaseProps {
+    editable?: false;
+    contentlet?: never;
+    fieldName?: never;
+}
+type BlockEditorRendererProps = EditableProps | NonEditableProps;
 /**
  * BlockEditorRenderer component for rendering block editor field.
  *
@@ -16,6 +28,10 @@ export interface BlockEditorRendererProps {
  * @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.
+ * @param {boolean} props.editable - Flag to enable inline editing. When true, `contentlet` and `fieldName` are required. Note: Enterprise only feature.
+ * @param {DotCMSContentlet} [props.contentlet] - Contentlet object for inline editing. Required when `editable` is true.
+ * @param {string} [props.fieldName] - Field name for inline editing. Required when `editable` is true.
  * @returns {JSX.Element} A div containing the rendered blocks of content.
  */
-export declare const BlockEditorRenderer: ({ blocks, customRenderers, className, style }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BlockEditorRenderer: ({ style, blocks, editable, fieldName, className, contentlet, customRenderers }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element;
+export {};