@dotcms/react 0.0.1-alpha.33 → 0.0.1-alpha.34

package/index.esm.js

@@ -4555,4 +4555,502 @@ function useDotcmsPageContext() {
   return useContext(PageContext);
 }
 
-export { DotEditableText, DotcmsLayout, PageProvider, Row, useDotcmsPageContext };
+var Blocks;
+(function (Blocks) {
+  Blocks["PARAGRAPH"] = "paragraph";
+  Blocks["HEADING"] = "heading";
+  Blocks["TEXT"] = "text";
+  Blocks["BULLET_LIST"] = "bulletList";
+  Blocks["ORDERED_LIST"] = "orderedList";
+  Blocks["LIST_ITEM"] = "listItem";
+  Blocks["BLOCK_QUOTE"] = "blockquote";
+  Blocks["CODE_BLOCK"] = "codeBlock";
+  Blocks["HARDBREAK"] = "hardBreak";
+  Blocks["HORIZONTAL_RULE"] = "horizontalRule";
+  Blocks["DOT_IMAGE"] = "dotImage";
+  Blocks["DOT_VIDEO"] = "dotVideo";
+  Blocks["TABLE"] = "table";
+  Blocks["DOT_CONTENT"] = "dotContent";
+})(Blocks || (Blocks = {}));
+
+/**
+ * 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 = ({
+  attrs,
+  children
+}) => {
+  const language = (attrs == null ? void 0 : 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
+  });
+};
+
+/**
+ * Renders the default content for an unknown content type.
+ */
+const DefaultContent = () => jsx("div", {
+  children: "Unknown Content Type"
+});
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+const DotContent = props => {
+  var _customRenderers$data;
+  const {
+    attrs,
+    customRenderers
+  } = props;
+  const data = attrs == null ? void 0 : attrs.data;
+  const Component = (_customRenderers$data = customRenderers == null ? void 0 : customRenderers[data == null ? void 0 : data.contentType]) != null ? _customRenderers$data : DefaultContent;
+  if (!data) {
+    console.error('DotContent: No data provided');
+  }
+  return jsx(Component, Object.assign({}, data));
+};
+
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param props - The props for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+const DotCMSImage = props => {
+  const {
+    data,
+    src,
+    alt
+  } = props.attrs;
+  const client = DotCmsClient.instance;
+  const srcUrl = data != null && data.identifier ? `${client.dotcmsUrl}${src}` : src;
+  return jsx("img", {
+    alt: alt,
+    src: srcUrl
+  });
+};
+
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+const ListItem = ({
+  children
+}) => {
+  return jsx("li", {
+    children: children
+  });
+};
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+const OrderedList = ({
+  children
+}) => {
+  return jsx("ol", {
+    children: children
+  });
+};
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+const BulletList = ({
+  children
+}) => {
+  return jsx("ul", {
+    children: children
+  });
+};
+
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+const TableRenderer = ({
+  content,
+  blockEditorItem
+}) => {
+  const BlockEditorItemComponent = blockEditorItem;
+  const renderTableContent = node => {
+    return jsx(BlockEditorItemComponent, {
+      content: node.content
+    });
+  };
+  return jsxs("table", {
+    children: [jsx("thead", {
+      children: content.slice(0, 1).map((rowNode, rowIndex) => {
+        var _rowNode$content;
+        return jsx("tr", {
+          children: (_rowNode$content = rowNode.content) == null ? void 0 : _rowNode$content.map((cellNode, cellIndex) => {
+            var _cellNode$attrs, _cellNode$attrs2;
+            return jsx("th", {
+              colSpan: Number(((_cellNode$attrs = cellNode.attrs) == null ? void 0 : _cellNode$attrs.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs2 = cellNode.attrs) == null ? void 0 : _cellNode$attrs2.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    }), jsx("tbody", {
+      children: content.slice(1).map((rowNode, rowIndex) => {
+        var _rowNode$content2;
+        return jsx("tr", {
+          children: (_rowNode$content2 = rowNode.content) == null ? void 0 : _rowNode$content2.map((cellNode, cellIndex) => {
+            var _cellNode$attrs3, _cellNode$attrs4;
+            return jsx("td", {
+              colSpan: Number(((_cellNode$attrs3 = cellNode.attrs) == null ? void 0 : _cellNode$attrs3.colspan) || 1),
+              rowSpan: Number(((_cellNode$attrs4 = cellNode.attrs) == null ? void 0 : _cellNode$attrs4.rowspan) || 1),
+              children: renderTableContent(cellNode)
+            }, `${cellNode.type}-${cellIndex}`);
+          })
+        }, `${rowNode.type}-${rowIndex}`);
+      })
+    })]
+  });
+};
+
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+const Bold = ({
+  children
+}) => jsx("strong", {
+  children: children
+});
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+const Italic = ({
+  children
+}) => jsx("em", {
+  children: children
+});
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+const Strike = ({
+  children
+}) => jsx("s", {
+  children: children
+});
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+const Underline = ({
+  children
+}) => jsx("u", {
+  children: children
+});
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+const Paragraph = ({
+  children,
+  attrs
+}) => {
+  return jsx("p", {
+    style: attrs,
+    children: children
+  });
+};
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+const Link = ({
+  children,
+  attrs
+}) => {
+  return jsx("a", Object.assign({}, attrs, {
+    children: children
+  }));
+};
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+const Heading = ({
+  children,
+  attrs
+}) => {
+  const level = (attrs == null ? void 0 : attrs.level) || 1;
+  const Tag = `h${level}`;
+  return jsx(Tag, {
+    children: children
+  });
+};
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+const Superscript = ({
+  children
+}) => jsx("sup", {
+  children: children
+});
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+const Subscript = ({
+  children
+}) => jsx("sub", {
+  children: children
+});
+const nodeMarks = {
+  link: Link,
+  bold: Bold,
+  underline: Underline,
+  italic: Italic,
+  strike: Strike,
+  superscript: Superscript,
+  subscript: Subscript
+};
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+const TextBlock = props => {
+  const {
+    marks = [],
+    text
+  } = props;
+  const mark = marks[0] || {
+    type: '',
+    attrs: {}
+  };
+  const newProps = Object.assign({}, props, {
+    marks: marks.slice(1)
+  });
+  const Component = nodeMarks[mark == null ? void 0 : mark.type];
+  // To avoid the warning: "Warning: Invalid DOM property `class`. Did you mean `className`?"
+  if (mark.attrs) {
+    mark.attrs.className = mark.attrs.class;
+    delete mark.attrs.class;
+  }
+  if (!Component) {
+    return text;
+  }
+  return jsx(Component, {
+    attrs: mark.attrs,
+    children: jsx(TextBlock, Object.assign({}, newProps))
+  });
+};
+
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+const DotCMSVideo = props => {
+  const {
+    data,
+    src,
+    mimeType,
+    width,
+    height
+  } = props.attrs;
+  const client = DotCmsClient.instance;
+  const srcUrl = data != null && data.identifier ? `${client.dotcmsUrl}${src}` : src;
+  const poster = data != null && data.thumbnail ? `${client.dotcmsUrl}${data == null ? void 0 : data.thumbnail}` : 'poster-image.jpg';
+  return jsxs("video", {
+    controls: true,
+    preload: "metadata",
+    poster: poster,
+    width: width,
+    height: height,
+    children: [jsx("track", {
+      default: true,
+      kind: "captions",
+      srcLang: "en"
+    }), jsx("source", {
+      src: srcUrl,
+      type: mimeType
+    }), "Your browser does not support the ", jsx("code", {
+      children: "video"
+    }), " element."]
+  });
+};
+
+/**
+ * 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
+}) => {
+  return content == null ? void 0 : content.map((node, index) => {
+    const CustomRendererComponent = customRenderers == null ? void 0 : customRenderers[node.type];
+    if (CustomRendererComponent) {
+      return jsx(CustomRendererComponent, Object.assign({}, node.attrs, {
+        content: node.content,
+        children: jsx(BlockEditorBlock, {
+          content: node.content,
+          customRenderers: customRenderers
+        })
+      }), `${node.type}-${index}`);
+    }
+    switch (node.type) {
+      case Blocks.PARAGRAPH:
+        return jsx(Paragraph, Object.assign({}, node, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }), `${node.type}-${index}`);
+      case Blocks.HEADING:
+        return jsx(Heading, Object.assign({}, node, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }), `${node.type}-${index}`);
+      case Blocks.TEXT:
+        return jsx(TextBlock, Object.assign({}, node), `${node.type}-${index}`);
+      case Blocks.BULLET_LIST:
+        return jsx(BulletList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case Blocks.ORDERED_LIST:
+        return jsx(OrderedList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case Blocks.LIST_ITEM:
+        return jsx(ListItem, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case Blocks.BLOCK_QUOTE:
+        return jsx(BlockQuote, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case Blocks.CODE_BLOCK:
+        return jsx(CodeBlock, Object.assign({}, node, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }), `${node.type}-${index}`);
+      case Blocks.HARDBREAK:
+        return jsx("br", {}, `${node.type}-${index}`);
+      case Blocks.HORIZONTAL_RULE:
+        return jsx("hr", {}, `${node.type}-${index}`);
+      case Blocks.DOT_IMAGE:
+        return jsx(DotCMSImage, Object.assign({}, node), `${node.type}-${index}`);
+      case Blocks.DOT_VIDEO:
+        return jsx(DotCMSVideo, Object.assign({}, node), `${node.type}-${index}`);
+      case Blocks.TABLE:
+        return jsx(TableRenderer, {
+          content: node.content,
+          blockEditorItem: BlockEditorBlock
+        }, `${node.type}-${index}`);
+      case Blocks.DOT_CONTENT:
+        return jsx(DotContent, Object.assign({}, node, {
+          customRenderers: customRenderers
+        }), `${node.type}-${index}`);
+      default:
+        return jsxs("div", {
+          children: ["Unknown Block Type ", node.type]
+        }, `${node.type}-${index}`);
+    }
+  });
+};
+
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Block} 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 BlockEditorRenderer = ({
+  blocks,
+  customRenderers,
+  className,
+  style
+}) => {
+  return jsx("div", {
+    className: className,
+    style: style,
+    children: jsx(BlockEditorBlock, {
+      content: blocks.content,
+      customRenderers: customRenderers
+    })
+  });
+};
+
+export { BlockEditorRenderer, DotEditableText, DotcmsLayout, PageProvider, Row, useDotcmsPageContext };

package/package.json

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

package/src/index.d.ts

@@ -3,3 +3,5 @@ export * from './lib/components/DotEditableText/DotEditableText';
 export * from './lib/components/PageProvider/PageProvider';
 export * from './lib/components/Row/Row';
 export * from './lib/hooks/useDotcmsPageContext';
+export * from './lib/components/BlockEditorRenderer/BlockEditorRenderer';
+export * from './lib/models/content-node.interface';

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Block } from '../../models/blocks.interface';
+import { CustomRenderer } from '../../models/content-node.interface';
+export interface BlockEditorRendererProps {
+    blocks: Block;
+    customRenderers?: CustomRenderer;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Block} 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.
+ */
+export declare const BlockEditorRenderer: ({ blocks, customRenderers, className, style }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,17 @@
+import { BlockProps } from '../../../models/blocks.interface';
+import { CodeBlockProps } from '../../../models/content-node.interface';
+/**
+ * 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.
+ */
+export declare const CodeBlock: ({ attrs, children }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+export declare const BlockQuote: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { DotContentProps } from '../../../models/content-node.interface';
+export interface Contentlet {
+    hostName: string;
+    modDate: string;
+    publishDate: string;
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    ownerName: string;
+    host: string;
+    working: boolean;
+    locked: boolean;
+    stInode: string;
+    contentType: string;
+    live: boolean;
+    owner: string;
+    identifier: string;
+    publishUserName: string;
+    publishUser: string;
+    languageId: number;
+    creationDate: string;
+    url: string;
+    titleImage: string;
+    modUserName: string;
+    hasLiveVersion: boolean;
+    folder: string;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    variant: string;
+}
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+export declare const DotContent: (props: DotContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ContentNode } from '../../../models/content-node.interface';
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param props - The props for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+export declare const DotCMSImage: (props: ContentNode) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,22 @@
+import { BlockProps } from '../../../models/blocks.interface';
+/**
+ * ListItem component represents a list item in a block editor.
+ *
+ * @param children - The content of the list item.
+ * @returns The rendered list item element.
+ */
+export declare const ListItem: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+export declare const OrderedList: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+export declare const BulletList: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ContentNode } from '../../../models/content-node.interface';
+interface TableRendererProps {
+    content: ContentNode[];
+    blockEditorItem: React.FC<{
+        content: ContentNode[];
+    }>;
+}
+/**
+ * Renders a table component for the Block Editor.
+ *
+ * @param content - The content of the table.
+ * @param blockEditorItem - The Block Editor item component.
+ */
+export declare const TableRenderer: React.FC<TableRendererProps>;
+export {};

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

@@ -0,0 +1,71 @@
+import { BlockProps } from '../../../models/blocks.interface';
+import { ContentNode, HeadingProps, LinkProps, ParagraphProps } from '../../../models/content-node.interface';
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+export declare const Bold: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the text in italic format.
+ *
+ * @param children - The content to be rendered in italic.
+ */
+export declare const Italic: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a strike-through text.
+ *
+ * @param children - The content to be rendered within the strike-through element.
+ */
+export declare const Strike: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders an underline element for the given children.
+ *
+ * @param children - The content to be underlined.
+ */
+export declare const Underline: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a paragraph element.
+ *
+ * @param children - The content of the paragraph.
+ * @param attrs - The style attributes for the paragraph.
+ * @returns The rendered paragraph element.
+ */
+export declare const Paragraph: ({ children, attrs }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a link component.
+ *
+ * @param children - The content of the link.
+ * @param attrs - The attributes to be applied to the link.
+ * @returns The rendered link component.
+ */
+export declare const Link: ({ children, attrs }: LinkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a heading element with the specified level.
+ *
+ * @param children - The content of the heading.
+ * @param attrs - The attributes for the heading.
+ * @returns The rendered heading element.
+ */
+export declare const Heading: ({ children, attrs }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+export declare const Superscript: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+export declare const Subscript: ({ children }: BlockProps) => import("react/jsx-runtime").JSX.Element;
+type TextBlockProps = Omit<ContentNode, 'content' | 'attrs'>;
+/**
+ * Renders a text block with optional marks.
+ *
+ * @param props - The props for the TextBlock component.
+ * @returns The rendered text block.
+ */
+export declare const TextBlock: (props: TextBlockProps) => string | import("react/jsx-runtime").JSX.Element | undefined;
+export {};

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

@@ -0,0 +1,8 @@
+import { ContentNode } from '../../../models/content-node.interface';
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+export declare const DotCMSVideo: (props: ContentNode) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { ContentNode, CustomRenderer } from '../../../models/content-node.interface';
+/**
+ * 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.
+ */
+export declare const BlockEditorBlock: ({ content, customRenderers }: {
+    content: ContentNode[];
+    customRenderers?: CustomRenderer;
+}) => import("react/jsx-runtime").JSX.Element[];

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

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+import { ContentNode } from './content-node.interface';
+export interface Block {
+    content: ContentNode[];
+}
+export interface DotContentletProps {
+    title: string;
+    baseType: string;
+    inode: string;
+    archived: boolean;
+    working: boolean;
+    locked: boolean;
+    contentType: string;
+    live: boolean;
+    identifier: string;
+    image: string;
+    imageContentAsset: string;
+    urlTitle: string;
+    url: string;
+    titleImage: string;
+    urlMap: string;
+    hasLiveVersion: boolean;
+    hasTitleImage: boolean;
+    sortOrder: number;
+    modUser: string;
+    __icon__: string;
+    contentTypeIcon: string;
+    language: string;
+    description: string;
+    shortDescription: string;
+    salePrice: string;
+    retailPrice: string;
+    mimeType: string;
+    thumbnail?: string;
+}
+export interface BlockProps {
+    children: React.ReactNode;
+}
+export declare enum Blocks {
+    PARAGRAPH = "paragraph",
+    HEADING = "heading",
+    TEXT = "text",
+    BULLET_LIST = "bulletList",
+    ORDERED_LIST = "orderedList",
+    LIST_ITEM = "listItem",
+    BLOCK_QUOTE = "blockquote",
+    CODE_BLOCK = "codeBlock",
+    HARDBREAK = "hardBreak",
+    HORIZONTAL_RULE = "horizontalRule",
+    DOT_IMAGE = "dotImage",
+    DOT_VIDEO = "dotVideo",
+    TABLE = "table",
+    DOT_CONTENT = "dotContent"
+}

package/src/lib/models/content-node.interface.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { BlockProps } from './blocks.interface';
+export interface Mark {
+    type: string;
+    attrs: Record<string, string>;
+}
+export interface ContentNode {
+    type: string;
+    content: ContentNode[];
+    attrs?: Record<string, string>;
+    marks?: Mark[];
+    text?: string;
+}
+export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+export type CodeBlockProps = BlockProps & ContentNode;
+export type HeadingProps = BlockProps & ContentNode;
+export type LinkProps = BlockProps & {
+    attrs?: Mark['attrs'];
+};
+export type ParagraphProps = BlockProps & ContentNode;
+export type DotCMSVideoProps = ContentNode['attrs'] & {
+    data?: Record<string, string>;
+};
+export type DotCMSImageProps = ContentNode['attrs'] & {
+    data?: Record<string, unknown>;
+};
+export type DotContentProps = ContentNode & {
+    customRenderers?: CustomRenderer;
+};