@dotcms/react 1.2.5 → 1.2.6-next.2

package/index.server.d.ts

@@ -0,0 +1 @@
+export * from "./src/index.server";

package/index.server.esm.js

@@ -0,0 +1,8 @@
+export { DotCMSLayoutBody } from './lib/next/components/DotCMSLayoutBody/DotCMSLayoutBody.esm.js';
+export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow.esm.js';
+export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen.esm.js';
+export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage.esm.js';
+export { DotCMSBlockEditorRenderer } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer.esm.js';
+export { useAISearch } from './lib/next/hooks/useAISearch.esm.js';
+export { useStyleEditorSchemas } from './lib/next/hooks/useStyleEditorSchemas.esm.js';
+export { buildSlots } from './lib/next/utils/buildSlots.esm.js';

package/lib/next/components/Column/Column.esm.js

@@ -0,0 +1,48 @@
+import { jsx } from 'react/jsx-runtime';
+import { getColumnPositionClasses, combineClasses } from '@dotcms/uve/internal';
+import styles from './Column.module.css.esm.js';
+import { Container } from '../Container/Container.esm.js';
+
+/**
+ * @internal
+ *
+ * Renders a Column component that represents a single column in a 12-column grid system.
+ * The column's position and width are determined by the leftOffset and width properties
+ * from the dotCMS Page API. Uses CSS Grid classes for positioning.
+ *
+ * @example
+ * ```tsx
+ * <Column column={{
+ *   leftOffset: 0,
+ *   width: 6,
+ *   styleClass: "custom-class",
+ *   containers: []
+ * }} />
+ * ```
+ *
+ * @see {@link https://www.dotcms.com/docs/latest/page-rest-api-layout-as-a-service-laas}
+ * @export
+ * @param {ColumnProps} { column } - Column configuration object
+ * @return {JSX.Element} Rendered column with its containers positioned in the grid
+ */
+function Column({
+  column
+}) {
+  const {
+    startClass,
+    endClass
+  } = getColumnPositionClasses(column);
+  const combinedClasses = combineClasses([styles[endClass], styles[startClass]]);
+  return jsx("div", {
+    "data-dot": "column",
+    className: combinedClasses,
+    children: jsx("div", {
+      className: column.styleClass,
+      children: column.containers.map(container => jsx(Container, {
+        container: container
+      }, `${container.identifier}-${container.uuid}`))
+    })
+  });
+}
+
+export { Column };

package/lib/next/components/Column/Column.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../../_virtual/_style-inject.esm.js';
+
+var css = "._col-start-1_1myqa_1 {\n    grid-column-start: 1;\n}\n\n._col-start-2_1myqa_5 {\n    grid-column-start: 2;\n}\n\n._col-start-3_1myqa_9 {\n    grid-column-start: 3;\n}\n\n._col-start-4_1myqa_13 {\n    grid-column-start: 4;\n}\n\n._col-start-5_1myqa_17 {\n    grid-column-start: 5;\n}\n\n._col-start-6_1myqa_21 {\n    grid-column-start: 6;\n}\n\n._col-start-7_1myqa_25 {\n    grid-column-start: 7;\n}\n\n._col-start-8_1myqa_29 {\n    grid-column-start: 8;\n}\n\n._col-start-9_1myqa_33 {\n    grid-column-start: 9;\n}\n\n._col-start-10_1myqa_37 {\n    grid-column-start: 10;\n}\n\n._col-start-11_1myqa_41 {\n    grid-column-start: 11;\n}\n\n._col-start-12_1myqa_45 {\n    grid-column-start: 12;\n}\n\n._col-end-1_1myqa_49 {\n    grid-column-end: 1;\n}\n\n._col-end-2_1myqa_53 {\n    grid-column-end: 2;\n}\n\n._col-end-3_1myqa_57 {\n    grid-column-end: 3;\n}\n\n._col-end-4_1myqa_61 {\n    grid-column-end: 4;\n}\n\n._col-end-5_1myqa_65 {\n    grid-column-end: 5;\n}\n\n._col-end-6_1myqa_69 {\n    grid-column-end: 6;\n}\n\n._col-end-7_1myqa_73 {\n    grid-column-end: 7;\n}\n\n._col-end-8_1myqa_77 {\n    grid-column-end: 8;\n}\n\n._col-end-9_1myqa_81 {\n    grid-column-end: 9;\n}\n\n._col-end-10_1myqa_85 {\n    grid-column-end: 10;\n}\n\n._col-end-11_1myqa_89 {\n    grid-column-end: 11;\n}\n\n._col-end-12_1myqa_93 {\n    grid-column-end: 12;\n}\n\n._col-end-13_1myqa_97 {\n    grid-column-end: 13;\n}\n";
+
+styleInject(css);
+var styles = {"col-start-1":"_col-start-1_1myqa_1","col-start-2":"_col-start-2_1myqa_5","col-start-3":"_col-start-3_1myqa_9","col-start-4":"_col-start-4_1myqa_13","col-start-5":"_col-start-5_1myqa_17","col-start-6":"_col-start-6_1myqa_21","col-start-7":"_col-start-7_1myqa_25","col-start-8":"_col-start-8_1myqa_29","col-start-9":"_col-start-9_1myqa_33","col-start-10":"_col-start-10_1myqa_37","col-start-11":"_col-start-11_1myqa_41","col-start-12":"_col-start-12_1myqa_45","col-end-1":"_col-end-1_1myqa_49","col-end-2":"_col-end-2_1myqa_53","col-end-3":"_col-end-3_1myqa_57","col-end-4":"_col-end-4_1myqa_61","col-end-5":"_col-end-5_1myqa_65","col-end-6":"_col-end-6_1myqa_69","col-end-7":"_col-end-7_1myqa_73","col-end-8":"_col-end-8_1myqa_77","col-end-9":"_col-end-9_1myqa_81","col-end-10":"_col-end-10_1myqa_85","col-end-11":"_col-end-11_1myqa_89","col-end-12":"_col-end-12_1myqa_93","col-end-13":"_col-end-13_1myqa_97"};
+
+export { styles as default };

package/lib/next/components/Container/Container.esm.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useMemo } from 'react';
+import { getContainersData, getContentletsInContainer, getDotContainerAttributes } from '@dotcms/uve/internal';
+import { ContainerNotFound, EmptyContainer } from './ContainerFallbacks.esm.js';
+import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
+import { Contentlet } from '../Contentlet/Contentlet.esm.js';
+
+/**
+ * @internal
+ *
+ * Container component that renders DotCMS containers and their contentlets.
+ * This component is responsible for:
+ * - Rendering container content based on DotCMS Page API data
+ * - Handling empty container states
+ * - Providing proper data attributes for DotCMS functionality
+ * - Managing container contentlets rendering
+ *
+ * @component
+ * @param {DotCMSContainerRendererProps} props - Component properties
+ * @returns {JSX.Element} Rendered container with its contentlets or empty state message
+ *
+ * @example
+ * ```tsx
+ * <Container container={containerData} />
+ * ```
+ */
+function Container({
+  container
+}) {
+  const {
+    pageAsset
+  } = useContext(DotCMSPageContext);
+  const containerData = useMemo(() => getContainersData(pageAsset, container), [pageAsset, container]);
+  const contentlets = useMemo(() => getContentletsInContainer(pageAsset, container), [pageAsset, container]);
+  if (!containerData) {
+    return jsx(ContainerNotFound, {
+      identifier: container.identifier
+    });
+  }
+  const isEmpty = contentlets.length === 0;
+  const dotAttributes = getDotContainerAttributes(containerData);
+  if (isEmpty) {
+    return jsx(EmptyContainer, Object.assign({}, dotAttributes));
+  }
+  return jsx("div", Object.assign({}, dotAttributes, {
+    children: contentlets.map(contentlet => jsx(Contentlet, {
+      contentlet: contentlet,
+      container: JSON.stringify(containerData)
+    }, contentlet.identifier))
+  }));
+}
+
+export { Container };

package/lib/next/components/Container/ContainerFallbacks.esm.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useEffect } from 'react';
+import { EMPTY_CONTAINER_STYLE_REACT } from '@dotcms/uve/internal';
+import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
+
+/**
+ * @internal
+ *
+ * Component to display when a container is not found in the system.
+ * Only renders in development mode for debugging purposes.
+ *
+ * @component
+ * @param {Object} props - Component properties
+ * @param {string} props.identifier - Container identifier
+ * @returns {JSX.Element | null} Message about missing container or null in production
+ */
+const ContainerNotFound = ({
+  identifier
+}) => {
+  const isDevMode = useIsDevMode();
+  useEffect(() => {
+    if (!isDevMode) {
+      return;
+    }
+    console.error(`Container with identifier ${identifier} not found`);
+  }, [identifier, isDevMode]);
+  if (!isDevMode) {
+    return null;
+  }
+  return jsxs("div", {
+    "data-testid": "container-not-found",
+    style: EMPTY_CONTAINER_STYLE_REACT,
+    children: ["This container with identifier ", identifier, " was not found."]
+  });
+};
+/**
+ * @internal
+ *
+ * Component to display when a container is empty.
+ *
+ * @param {DotContainerAttributes} dotAttributes
+ * @return {*}
+ */
+const EmptyContainer = dotAttributes => {
+  const isDevMode = useIsDevMode();
+  if (!isDevMode) {
+    return null;
+  }
+  return jsx("div", Object.assign({}, dotAttributes, {
+    style: EMPTY_CONTAINER_STYLE_REACT,
+    children: jsx("span", {
+      "data-testid": "empty-container-message",
+      "data-dot-object": "empty-content",
+      children: "This container is empty."
+    })
+  }));
+};
+
+export { ContainerNotFound, EmptyContainer };

package/lib/next/components/Contentlet/Contentlet.esm.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useRef, useMemo, useContext } from 'react';
+import { getDotContentletAttributes, CUSTOM_NO_COMPONENT } from '@dotcms/uve/internal';
+import { DotCMSPageContext } from '../../contexts/DotCMSPageContext.esm.js';
+import { useCheckVisibleContent } from '../../hooks/useCheckVisibleContent.esm.js';
+import { useIsDevMode } from '../../hooks/useIsDevMode.esm.js';
+import { FallbackComponent } from '../FallbackComponent/FallbackComponent.esm.js';
+
+/**
+ * CSS class name for contentlet elements
+ */
+const CONTENTLET_CLASS = 'dotcms-contentlet';
+/**
+ * Contentlet component that renders DotCMS content with development mode support
+ *
+ * @component
+ * @param {DotCMSContentletRendererProps} props - Component properties
+ * @param {DotCMSContentlet} props.contentlet - The contentlet to be rendered
+ * @param {string} props.container - The container identifier
+ * @returns {JSX.Element} Rendered contentlet with appropriate wrapper and attributes
+ *
+ * @example
+ * ```tsx
+ * <Contentlet
+ *   contentlet={myContentlet}
+ *   container="container-1"
+ * />
+ * ```
+ */
+function Contentlet({
+  contentlet,
+  container
+}) {
+  const ref = useRef(null);
+  const isDevMode = useIsDevMode();
+  const haveContent = useCheckVisibleContent(ref);
+  const style = useMemo(() => isDevMode ? {
+    minHeight: haveContent ? undefined : '4rem'
+  } : {}, [isDevMode, haveContent]);
+  // UVE attributes - always applied
+  const dotAttributes = useMemo(() => getDotContentletAttributes(contentlet, container), [contentlet, container]);
+  return jsx("div", Object.assign({}, dotAttributes, {
+    "data-dot-object": "contentlet",
+    className: CONTENTLET_CLASS,
+    ref: ref,
+    style: style,
+    children: jsx(CustomComponent, {
+      contentlet: contentlet
+    })
+  }));
+}
+/**
+ * Renders a custom component based on the contentlet type or falls back to a default component
+ *
+ * @component
+ * @param {CustomComponentProps} props - Component properties
+ * @param {DotCMSContentlet} props.contentlet - The contentlet data to render
+ * @returns {JSX.Element} The rendered custom component or fallback component
+ *
+ * @internal
+ */
+function CustomComponent({
+  contentlet
+}) {
+  const {
+    userComponents,
+    slots
+  } = useContext(DotCMSPageContext);
+  const slotNode = slots == null ? void 0 : slots[contentlet == null ? void 0 : contentlet.identifier];
+  if (slotNode !== undefined) {
+    return jsx(Fragment, {
+      children: slotNode
+    });
+  }
+  const UserComponent = userComponents[contentlet == null ? void 0 : contentlet.contentType];
+  if (UserComponent) {
+    return jsx(UserComponent, Object.assign({}, contentlet));
+  }
+  const UserNoComponent = userComponents[CUSTOM_NO_COMPONENT];
+  return jsx(FallbackComponent, {
+    UserNoComponent: UserNoComponent,
+    contentlet: contentlet
+  });
+}
+
+export { CONTENTLET_CLASS, Contentlet };

package/lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer.esm.js

@@ -0,0 +1,46 @@
+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 };

package/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.esm.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { BlockEditorDefaultBlocks } from '@dotcms/types/internal';
+import { getUVEState } from '@dotcms/uve';
+import { CodeBlock, BlockQuote } from './blocks/Code.esm.js';
+import { DotContent } from './blocks/DotContent.esm.js';
+import { GridBlock } from './blocks/GridBlock.esm.js';
+import { DotCMSImage } from './blocks/Image.esm.js';
+import { ListItem, OrderedList, BulletList } from './blocks/Lists.esm.js';
+import { TableRenderer } from './blocks/Table.esm.js';
+import { TextBlock, Heading, Paragraph } from './blocks/Texts.esm.js';
+import { DotCMSVideo } from './blocks/Video.esm.js';
+
+/**
+ * Renders a block editor item based on the provided content and custom renderers.
+ *
+ * @param content - The content nodes to render.
+ * @param customRenderers - Optional custom renderers for specific node types.
+ * @returns The rendered block editor item.
+ */
+const BlockEditorBlock = ({
+  content,
+  customRenderers,
+  isDevMode
+}) => {
+  if (!content) {
+    return null;
+  }
+  return content == null ? void 0 : content.map((node, index) => {
+    var _node$content;
+    const CustomRendererComponent = customRenderers == null ? void 0 : customRenderers[node.type];
+    const key = `${node.type}-${index}`;
+    if (CustomRendererComponent) {
+      return jsx(CustomRendererComponent, {
+        node: node,
+        children: jsx(BlockEditorBlock, {
+          content: node.content,
+          customRenderers: customRenderers,
+          isDevMode: isDevMode
+        })
+      }, key);
+    }
+    switch (node.type) {
+      case BlockEditorDefaultBlocks.PARAGRAPH:
+        return jsx(Paragraph, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.HEADING:
+        return jsx(Heading, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.TEXT:
+        return jsx(TextBlock, Object.assign({}, node), key);
+      case BlockEditorDefaultBlocks.BULLET_LIST:
+        return jsx(BulletList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.ORDERED_LIST:
+        return jsx(OrderedList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.LIST_ITEM:
+        return jsx(ListItem, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.BLOCK_QUOTE:
+        return jsx(BlockQuote, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.CODE_BLOCK:
+        return jsx(CodeBlock, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers,
+            isDevMode: isDevMode
+          })
+        }, key);
+      case BlockEditorDefaultBlocks.HARDBREAK:
+        return jsx("br", {}, key);
+      case BlockEditorDefaultBlocks.HORIZONTAL_RULE:
+        return jsx("hr", {}, key);
+      case BlockEditorDefaultBlocks.DOT_IMAGE:
+        return jsx(DotCMSImage, {
+          node: node
+        }, key);
+      case BlockEditorDefaultBlocks.DOT_VIDEO:
+        return jsx(DotCMSVideo, {
+          node: node
+        }, key);
+      case BlockEditorDefaultBlocks.TABLE:
+        return jsx(TableRenderer, {
+          content: (_node$content = node.content) != null ? _node$content : [],
+          blockEditorItem: BlockEditorBlock
+        }, key);
+      case BlockEditorDefaultBlocks.GRID_BLOCK:
+        return jsx(GridBlock, {
+          node: node,
+          blockEditorBlock: BlockEditorBlock,
+          customRenderers: customRenderers
+        }, key);
+      case BlockEditorDefaultBlocks.DOT_CONTENT:
+        return jsx(DotContent, {
+          customRenderers: customRenderers,
+          node: node,
+          isDevMode: isDevMode
+        }, key);
+      default:
+        return jsx(UnknownBlock, {
+          node: node
+        }, key);
+    }
+  });
+};
+/**
+ * Renders an unknown block type with a warning message in development mode.
+ *
+ * @param node - The block editor node to render.
+ * @returns The rendered block or null if in production mode.
+ */
+const UnknownBlock = ({
+  node
+}) => {
+  const style = {
+    backgroundColor: '#fff5f5',
+    color: '#333',
+    padding: '1rem',
+    borderRadius: '0.5rem',
+    marginBottom: '1rem',
+    marginTop: '1rem',
+    border: '1px solid #fc8181'
+  };
+  if (getUVEState()) {
+    return jsxs("div", {
+      style: style,
+      children: [jsx("strong", {
+        style: {
+          color: '#c53030'
+        },
+        children: "Warning:"
+      }), " The block type", ' ', jsx("strong", {
+        children: node.type
+      }), " is not recognized. Please check your", ' ', jsx("a", {
+        href: "https://dev.dotcms.com/docs/block-editor",
+        target: "_blank",
+        rel: "noopener noreferrer",
+        children: "configuration"
+      }), ' ', "or contact support for assistance."]
+    });
+  }
+  return null;
+};
+
+export { BlockEditorBlock };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Code.esm.js

@@ -0,0 +1,37 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders a code block component.
+ *
+ * @param attrs - The attributes of the code block.
+ * @param children - The content of the code block.
+ * @returns The rendered code block component.
+ */
+const CodeBlock = ({
+  node,
+  children
+}) => {
+  var _node$attrs;
+  const language = (node == null || (_node$attrs = node.attrs) == null ? void 0 : _node$attrs.language) || '';
+  return jsx("pre", {
+    "data-language": language,
+    children: jsx("code", {
+      children: children
+    })
+  });
+};
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+const BlockQuote = ({
+  children
+}) => {
+  return jsx("blockquote", {
+    children: children
+  });
+};
+
+export { BlockQuote, CodeBlock };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/DotContent.esm.js

@@ -0,0 +1,47 @@
+import { jsx } from 'react/jsx-runtime';
+import { NoComponentProvided } from './NoComponentProvided.esm.js';
+
+const DOT_CONTENT_NO_DATA_MESSAGE = '[DotCMSBlockEditorRenderer]: No data provided for Contentlet Block. Try to add a contentlet to the block editor. If the error persists, please contact the DotCMS support team.';
+const DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE = contentType => `[DotCMSBlockEditorRenderer]: No matching component found for content type: ${contentType}. Provide a custom renderer for this content type to fix this error.`;
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+const DotContent = ({
+  customRenderers,
+  node,
+  isDevMode: _isDevMode = false
+}) => {
+  const {
+    attrs = {}
+  } = node;
+  const {
+    data
+  } = attrs;
+  if (!data) {
+    console.error(DOT_CONTENT_NO_DATA_MESSAGE);
+    return null;
+  }
+  const {
+    contentType = 'Unknown Content Type'
+  } = data;
+  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, {
+      contentType: contentType
+    });
+  }
+  /* In production, use default component if no matching component found */
+  if (!Component) {
+    console.warn(DOT_CONTENT_NO_MATCHING_COMPONENT_MESSAGE(contentType));
+    return null;
+  }
+  return jsx(Component, {
+    node: node
+  });
+};
+
+export { DotContent };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/GridBlock.esm.js

@@ -0,0 +1,44 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders a grid block with two columns using a 12-column grid system.
+ *
+ * @param node - The grid block node containing column configuration.
+ * @param blockEditorBlock - The block editor component for rendering nested content.
+ * @param customRenderers - Optional custom renderers for nested blocks.
+ */
+const GridBlock = ({
+  node,
+  blockEditorBlock,
+  customRenderers
+}) => {
+  var _node$attrs, _node$content;
+  const BlockEditorBlockComponent = blockEditorBlock;
+  const rawCols = Array.isArray((_node$attrs = node.attrs) == null ? void 0 : _node$attrs.columns) ? node.attrs.columns : [6, 6];
+  const cols = rawCols.length === 2 && rawCols.every(v => typeof v === 'number' && Number.isFinite(v)) ? rawCols : [6, 6];
+  return jsx("div", {
+    "data-type": "gridBlock",
+    className: "grid-block",
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(12, 1fr)',
+      gap: '1rem'
+    },
+    children: (_node$content = node.content) == null ? void 0 : _node$content.map((column, index) => {
+      var _cols$index;
+      return jsx("div", {
+        "data-type": "gridColumn",
+        className: "grid-block__column",
+        style: {
+          gridColumn: `span ${(_cols$index = cols[index]) != null ? _cols$index : 6}`
+        },
+        children: jsx(BlockEditorBlockComponent, {
+          content: column.content,
+          customRenderers: customRenderers
+        })
+      }, `gridColumn-${index}`);
+    })
+  });
+};
+
+export { GridBlock };

package/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Image.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param node - The node for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+const DotCMSImage = ({
+  node
+}) => {
+  const {
+    src,
+    alt
+  } = node.attrs;
+  return jsx("img", {
+    alt: alt,
+    src: src
+  });
+};
+
+export { DotCMSImage };