@dotcms/react/lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer.esm.js

Official React Components library to render a dotCMS page.

import { jsx } from 'react/jsx-runtime';
import { isValidBlocks } from '@dotcms/uve/internal';
import { BlockEditorBlock } from './components/BlockEditorBlock.esm.js';

/**
 * BlockEditorRenderer component for rendering block editor field.
 *
 * @component
 * @param {Object} props - The component props.
 * @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.
 * @returns {JSX.Element} A div containing the rendered blocks of content.
 */
const DotCMSBlockEditorRenderer = ({
  blocks,
  style,
  className,
  customRenderers,
  isDevMode: _isDevMode = false
}) => {
  const validationResult = isValidBlocks(blocks);
  if (validationResult.error) {
    console.error(validationResult.error);
    if (_isDevMode) {
      return jsx("div", {
        "data-testid": "invalid-blocks-message",
        children: validationResult.error
      });
    }
    return null;
  }
  return jsx("div", {
    className: className,
    style: style,
    "data-testid": "dot-block-editor-container",
    children: jsx(BlockEditorBlock, {
      content: blocks == null ? void 0 : blocks.content,
      customRenderers: customRenderers,
      isDevMode: _isDevMode
    })
  });
};

export { DotCMSBlockEditorRenderer };