@dotcms/react 0.0.1-alpha.60 → 0.0.1-alpha.61

package/index.esm.js

@@ -1850,6 +1850,49 @@ const getPositionStyleClasses = (start, end) => {
     endClass
   };
 };
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+const isValidBlocks = blocks => {
+  if (!blocks) {
+    return {
+      error: `Error: Blocks object is not defined`
+    };
+  }
+  if (typeof blocks !== 'object') {
+    return {
+      error: `Error: Blocks must be an object, but received: ${typeof blocks}`
+    };
+  }
+  if (blocks.type !== 'doc') {
+    return {
+      error: 'Error: Blocks must have a doc type'
+    };
+  }
+  if (!blocks.content || !Array.isArray(blocks.content)) {
+    return {
+      error: 'Error: Blocks must have a valid content array'
+    };
+  }
+  if (blocks.content.length === 0) {
+    return {
+      error: 'Error: Blocks content is empty'
+    };
+  }
+  return {
+    error: null
+  };
+};
 
 var NATIVE_BIND$1 = functionBindNative;
 
@@ -5202,6 +5245,24 @@ const BlockEditorRenderer = ({
   customRenderers
 }) => {
   const ref = useRef(null);
+  const [blockEditorState, setBlockEditorState] = useState({
+    error: null
+  });
+  /**
+   * Sets up inline editing functionality when the component is editable and inside the editor.
+   *
+   * This effect:
+   * 1. Checks if inline editing should be enabled based on props and editor context
+   * 2. Validates required props for inline editing (contentlet and fieldName)
+   * 3. Extracts necessary data from the contentlet
+   * 4. Adds a click handler to initialize inline editing with the block editor
+   * 5. Cleans up event listener on unmount
+   *
+   * @dependency {boolean} editable - Flag to enable/disable inline editing
+   * @dependency {DotCMSContentlet} contentlet - Contentlet data required for editing
+   * @dependency {Block} blocks - The content blocks to edit
+   * @dependency {string} fieldName - Name of the field being edited
+   */
   useEffect(() => {
     if (!editable || !ref.current || !isInsideEditor()) {
       return;
@@ -5233,13 +5294,40 @@ const BlockEditorRenderer = ({
     element.addEventListener('click', handleClickEvent);
     return () => element.removeEventListener('click', handleClickEvent);
   }, [editable, contentlet, blocks, fieldName]);
+  /**
+   * Validates the blocks structure and updates the block editor state.
+   *
+   * This effect:
+   * 1. Validates that blocks have the correct structure (doc type, content array, etc)
+   * 2. Updates the block editor state with validation result
+   * 3. Logs any validation errors to console
+   *
+   * @dependency {Block} blocks - The content blocks to validate
+   */
+  useEffect(() => {
+    const validationResult = isValidBlocks(blocks);
+    setBlockEditorState(validationResult);
+    if (validationResult.error) {
+      console.error(validationResult.error);
+    }
+  }, [blocks]);
+  if (blockEditorState.error) {
+    console.error(blockEditorState.error);
+    if (isInsideEditor()) {
+      return jsx("div", {
+        "data-testid": "invalid-blocks-message",
+        children: blockEditorState.error
+      });
+    }
+    return null;
+  }
   return jsx("div", {
     className: className,
     style: style,
     ref: ref,
     "data-testid": "dot-block-editor-container",
     children: jsx(BlockEditorBlock, {
-      content: blocks.content,
+      content: blocks == null ? void 0 : blocks.content,
       customRenderers: customRenderers
     })
   });

package/package.json

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

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

@@ -33,5 +33,5 @@ type BlockEditorRendererProps = EditableProps | NonEditableProps;
  * @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: ({ style, blocks, editable, fieldName, className, contentlet, customRenderers }: 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 | null;
 export {};

package/src/lib/models/blocks.interface.d.ts

@@ -8,6 +8,7 @@ import { ContentNode } from './content-node.interface';
  */
 export interface Block {
     content: ContentNode[];
+    type: string;
 }
 /**
  * Props for a contentlet inside the Block Editor
@@ -76,3 +77,13 @@ export declare enum Blocks {
     TABLE = "table",
     DOT_CONTENT = "dotContent"
 }
+/**
+ * Represents the validation state of a Block Editor instance
+ *
+ * @interface BlockEditorState
+ * @property {boolean} isValid - Whether the blocks structure is valid
+ * @property {string | null} error - Error message if blocks are invalid, null otherwise
+ */
+export interface BlockEditorState {
+    error: string | null;
+}

package/src/lib/utils/utils.d.ts

@@ -1,4 +1,5 @@
 import { ContainerData, DotCMSPageContext } from '../models';
+import { Block, BlockEditorState } from '../models/blocks.interface';
 /**
  * Get the container data from the containers object using the current container reference obtained from the layout.
  *
@@ -41,3 +42,17 @@ export declare const getPositionStyleClasses: (start: number, end: number) => {
     startClass: string;
     endClass: string;
 };
+/**
+ * Validates the structure of a Block Editor block.
+ *
+ * This function checks that:
+ * 1. The blocks parameter is a valid object
+ * 2. The block has a 'doc' type
+ * 3. The block has a valid content array that is not empty
+ *
+ * @param {Block} blocks - The blocks structure to validate
+ * @returns {BlockEditorState} Object containing validation state and any error message
+ * @property {boolean} BlockEditorState.isValid - Whether the blocks structure is valid
+ * @property {string | null} BlockEditorState.error - Error message if invalid, null if valid
+ */
+export declare const isValidBlocks: (blocks: Block) => BlockEditorState;