@dotcms/react 0.0.1-beta.27 → 0.0.1-beta.29

package/next.esm.js

@@ -2,11 +2,10 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createContext, useContext, useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react';
 import { s as styleInject } from './web.url-search-params.size.esm.js';
 import { UVE_MODE, UVEEventType, DotCMSUVEAction } from '@dotcms/types';
-import { getUVEState, initUVE, createUVESubscription, sendMessageToUVE } from '@dotcms/uve';
-import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses, __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__ } from '@dotcms/uve/internal';
-import { updateNavigation } from '@dotcms/client';
+import { getUVEState, initUVE, updateNavigation, createUVESubscription, sendMessageToUVE } from '@dotcms/uve';
+import { DEVELOPMENT_MODE, EMPTY_CONTAINER_STYLE_REACT, getDotContentletAttributes, CUSTOM_NO_COMPONENT, getContainersData, getContentletsInContainer, getDotContainerAttributes, getColumnPositionClasses, combineClasses, __DEFAULT_TINYMCE_CONFIG__, __BASE_TINYMCE_CONFIG_WITH_NO_DEFAULT__, __TINYMCE_PATH_ON_DOTCMS__, isValidBlocks } from '@dotcms/uve/internal';
 import { Editor } from '@tinymce/tinymce-react';
-import { __DOTCMS_UVE_EVENT__ } from '@dotcms/types/internal';
+import { __DOTCMS_UVE_EVENT__, BlockEditorDefaultBlocks } from '@dotcms/types/internal';
 
 /**
  * The `PageContext` is a React context that provides access to the DotCMS page context.
@@ -607,39 +606,39 @@ const DotCMSShow = ({
  *   </div>
  * );
  * ```
- * @param {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
  *
- * @returns {DotCMSEditablePage} The updated editable page state that reflects any changes made in the UVE.
+ * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
  * The structure includes page data and any GraphQL content that was requested.
  */
-const useEditableDotCMSPage = editablePage => {
-  const [updatedEditablePage, setUpdatedEditablePage] = useState(editablePage);
+const useEditableDotCMSPage = pageResponse => {
+  const [updatedPageResponse, setUpdatedPageResponse] = useState(pageResponse);
   useEffect(() => {
-    var _editablePage$page$pa, _editablePage$page;
+    var _pageResponse$pageAss, _pageResponse$pageAss2;
     if (!getUVEState()) {
       return;
     }
-    const pageURI = (_editablePage$page$pa = editablePage == null || (_editablePage$page = editablePage.page) == null ? void 0 : _editablePage$page.pageURI) != null ? _editablePage$page$pa : '/';
+    const pageURI = (_pageResponse$pageAss = pageResponse == null || (_pageResponse$pageAss2 = pageResponse.pageAsset) == null || (_pageResponse$pageAss2 = _pageResponse$pageAss2.page) == null ? void 0 : _pageResponse$pageAss2.pageURI) != null ? _pageResponse$pageAss : '/';
     const {
       destroyUVESubscriptions
-    } = initUVE(editablePage);
+    } = initUVE(pageResponse);
     // Update the navigation to the pageURI
     updateNavigation(pageURI);
     return () => {
       destroyUVESubscriptions();
     };
-  }, [editablePage]);
+  }, [pageResponse]);
   useEffect(() => {
     const {
       unsubscribe
     } = createUVESubscription(UVEEventType.CONTENT_CHANGES, payload => {
-      setUpdatedEditablePage(payload);
+      setUpdatedPageResponse(payload);
     });
     return () => {
       unsubscribe();
     };
   }, []);
-  return updatedEditablePage;
+  return updatedPageResponse;
 };
 
 const DEFAULT_TINYMCE_CONFIG = Object.assign({}, __DEFAULT_TINYMCE_CONFIG__, {
@@ -814,4 +813,543 @@ function DotCMSEditableText({
   });
 }
 
-export { DotCMSEditableText, DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };
+/**
+ * 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
+  });
+};
+
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+const DotContent = ({
+  customRenderers,
+  node
+}) => {
+  const isDevMode = useIsDevMode();
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  const data = attrs.data;
+  if (!data) {
+    console.error('DotContent: No data provided');
+    return null;
+  }
+  const contentType = data.contentType || 'Unknown Content Type';
+  const Component = customRenderers[contentType];
+  // In dev mode, show a helpful message for unknown content types
+  if (isDevMode && !Component) {
+    return jsxs("div", {
+      children: ["Unknown ContentType: ", contentType]
+    });
+  }
+  // In production, use default component if no matching component found
+  if (!Component) {
+    console.error('DotContent: No matching component found for content type', contentType);
+    return null;
+  }
+  return jsx(Component, Object.assign({}, node));
+};
+
+/**
+ * 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
+  });
+};
+
+/**
+ * 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 => {
+    var _node$content;
+    return jsx(BlockEditorItemComponent, {
+      content: (_node$content = node.content) != null ? _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,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.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,
+  node
+}) => {
+  const attrs = (node == null ? void 0 : node.attrs) || {};
+  const level = 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 = {
+  bold: Bold,
+  link: Link,
+  italic: Italic,
+  strike: Strike,
+  subscript: Subscript,
+  underline: Underline,
+  superscript: Superscript
+};
+const defaultMark = {
+  type: '',
+  attrs: {}
+};
+/**
+ * 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] || defaultMark;
+  const textProps = Object.assign({}, props, {
+    marks: marks.slice(1)
+  });
+  const Component = nodeMarks[mark == null ? void 0 : mark.type];
+  // In React, class is not a valid attribute name, so we need to rename it to className
+  if (mark.attrs) {
+    mark.attrs.className = mark.attrs.class;
+    delete mark.attrs.class;
+  }
+  if (!Component) {
+    return text;
+  }
+  return jsx(Component, {
+    type: mark.type,
+    attrs: mark.attrs,
+    children: jsx(TextBlock, Object.assign({}, textProps))
+  });
+};
+
+/**
+ * Renders a video component for displaying videos.
+ *
+ * @param props - The properties for the video component.
+ * @returns The rendered video component.
+ */
+const DotCMSVideo = ({
+  node
+}) => {
+  const {
+    data,
+    src,
+    mimeType,
+    width,
+    height
+  } = node.attrs;
+  const poster = data == null ? void 0 : data.thumbnail;
+  const posterAttribute = poster ? {
+    poster
+  } : {};
+  return jsxs("video", Object.assign({
+    controls: true,
+    preload: "metadata",
+    width: width,
+    height: height
+  }, posterAttribute, {
+    children: [jsx("track", {
+      default: true,
+      kind: "captions",
+      srcLang: "en"
+    }), jsx("source", {
+      src: src,
+      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
+}) => {
+  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];
+    if (CustomRendererComponent) {
+      return jsx(CustomRendererComponent, {
+        content: node.content,
+        children: jsx(BlockEditorBlock, {
+          content: node.content,
+          customRenderers: customRenderers
+        })
+      }, `${node.type}-${index}`);
+    }
+    switch (node.type) {
+      case BlockEditorDefaultBlocks.PARAGRAPH:
+        return jsx(Paragraph, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.HEADING:
+        return jsx(Heading, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.TEXT:
+        return jsx(TextBlock, Object.assign({}, node), `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.BULLET_LIST:
+        return jsx(BulletList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.ORDERED_LIST:
+        return jsx(OrderedList, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.LIST_ITEM:
+        return jsx(ListItem, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.BLOCK_QUOTE:
+        return jsx(BlockQuote, {
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.CODE_BLOCK:
+        return jsx(CodeBlock, {
+          node: node,
+          children: jsx(BlockEditorBlock, {
+            content: node.content,
+            customRenderers: customRenderers
+          })
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.HARDBREAK:
+        return jsx("br", {}, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.HORIZONTAL_RULE:
+        return jsx("hr", {}, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.DOT_IMAGE:
+        return jsx(DotCMSImage, {
+          node: node
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.DOT_VIDEO:
+        return jsx(DotCMSVideo, {
+          node: node
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.TABLE:
+        return jsx(TableRenderer, {
+          content: (_node$content = node.content) != null ? _node$content : [],
+          blockEditorItem: BlockEditorBlock
+        }, `${node.type}-${index}`);
+      case BlockEditorDefaultBlocks.DOT_CONTENT:
+        return jsx(DotContent, {
+          customRenderers: customRenderers,
+          node: node
+        }, `${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 {BlockEditorContent} 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
+}) => {
+  const [blockEditorState, setBlockEditorState] = useState({
+    error: null
+  });
+  const isDevMode = useIsDevMode();
+  /**
+   * 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 (isDevMode) {
+      return jsx("div", {
+        "data-testid": "invalid-blocks-message",
+        children: blockEditorState.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
+    })
+  });
+};
+
+export { DotCMSBlockEditorRenderer, DotCMSEditableText, DotCMSLayoutBody, DotCMSShow, useDotCMSShowWhen, useEditableDotCMSPage };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@dotcms/react",
-  "version": "0.0.1-beta.27",
+  "version": "0.0.1-beta.29",
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "@dotcms/client": "0.0.1-beta.27",
-    "@dotcms/uve": "0.0.1-beta.27",
+    "@dotcms/client": "0.0.1-beta.29",
+    "@dotcms/uve": "0.0.1-beta.29",
     "@tinymce/tinymce-react": "^6.0.0"
   },
   "devDependencies": {

package/src/lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { BlockEditorContent } from '@dotcms/types';
+/**
+ * Represents a Custom Renderer used by the Block Editor Component
+ *
+ * @export
+ * @interface CustomRenderer
+ */
+export type CustomRenderer<T = any> = Record<string, React.FC<T>>;
+export interface BlockEditorRendererProps {
+    blocks: BlockEditorContent;
+    style?: React.CSSProperties;
+    className?: string;
+    customRenderers?: CustomRenderer;
+}
+/**
+ * BlockEditorRenderer component for rendering block editor field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {BlockEditorContent} 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 DotCMSBlockEditorRenderer: ({ blocks, style, className, customRenderers }: BlockEditorRendererProps) => import("react/jsx-runtime").JSX.Element | null;

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/BlockEditorBlock.d.ts

@@ -0,0 +1,15 @@
+import { BlockEditorNode } from '@dotcms/types';
+import { CustomRenderer } from '../DotCMSBlockEditorRenderer';
+interface BlockEditorBlockProps {
+    content: BlockEditorNode[] | undefined;
+    customRenderers?: CustomRenderer;
+}
+/**
+ * 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 }: BlockEditorBlockProps) => import("react/jsx-runtime").JSX.Element[] | null;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Code.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { BlockEditorNode } from '@dotcms/types';
+interface CodeBlockProps {
+    node: BlockEditorNode;
+    children: React.ReactNode;
+}
+/**
+ * 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: ({ node, 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 }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Contentlet.d.ts

@@ -0,0 +1,14 @@
+import { BlockEditorNode } from '@dotcms/types';
+import { CustomRenderer } from '../../DotCMSBlockEditorRenderer';
+interface DotContentProps {
+    customRenderers: CustomRenderer;
+    node: BlockEditorNode;
+}
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+export declare const DotContent: ({ customRenderers, node }: DotContentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Image.d.ts

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

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Lists.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+interface ListItemProps {
+    children: React.ReactNode;
+}
+/**
+ * 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 }: ListItemProps) => 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 }: ListItemProps) => 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 }: ListItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Table.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { BlockEditorNode } from '@dotcms/types';
+interface TableRendererProps {
+    content: BlockEditorNode[];
+    blockEditorItem: React.FC<{
+        content: BlockEditorNode[];
+    }>;
+}
+/**
+ * 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/next/components/DotCMSBlockEditorRenderer/components/blocks/Texts.d.ts

@@ -0,0 +1,81 @@
+/// <reference types="react" />
+import { BlockEditorMark, BlockEditorNode } from '@dotcms/types';
+interface MarkProps extends BlockEditorMark {
+    children: React.ReactNode;
+}
+interface TextComponentProp {
+    children: React.ReactNode;
+    node: BlockEditorNode;
+}
+interface TextNodeProps {
+    marks?: BlockEditorMark[];
+    text?: string;
+}
+/**
+ * Renders the text in bold.
+ *
+ * @param children - The content to be rendered in bold.
+ */
+export declare const Bold: ({ children }: MarkProps) => 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 }: MarkProps) => 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 }: MarkProps) => 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 }: MarkProps) => 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, node }: TextComponentProp) => 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 }: MarkProps) => 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, node }: TextComponentProp) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders the superscript text.
+ *
+ * @param children - The content to be rendered as superscript.
+ */
+export declare const Superscript: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Renders a subscript element.
+ *
+ * @param children - The content to be rendered as subscript.
+ */
+export declare const Subscript: ({ children }: MarkProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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?: TextNodeProps) => string | import("react/jsx-runtime").JSX.Element | undefined;
+export {};

package/src/lib/next/components/DotCMSBlockEditorRenderer/components/blocks/Video.d.ts

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

package/src/lib/next/hooks/useEditableDotCMSPage.d.ts

@@ -1,4 +1,4 @@
-import { DotCMSEditablePage } from '@dotcms/types';
+import { DotCMSPageResponse } from '@dotcms/types';
 /**
  * Custom hook to manage the editable state of a DotCMS page.
  *
@@ -82,9 +82,9 @@ import { DotCMSEditablePage } from '@dotcms/types';
  *   </div>
  * );
  * ```
- * @param {DotCMSEditablePage} editablePage - The initial editable page data from client.page.get().
+ * @param {DotCMSPageResponse} pageResponse - The initial editable page data from client.page.get().
  *
- * @returns {DotCMSEditablePage} The updated editable page state that reflects any changes made in the UVE.
+ * @returns {DotCMSPageResponse} The updated editable page state that reflects any changes made in the UVE.
  * The structure includes page data and any GraphQL content that was requested.
  */
-export declare const useEditableDotCMSPage: (editablePage: DotCMSEditablePage) => DotCMSEditablePage;
+export declare const useEditableDotCMSPage: (pageResponse: DotCMSPageResponse) => DotCMSPageResponse;

package/src/next.d.ts

@@ -3,3 +3,4 @@ export { DotCMSShow } from './lib/next/components/DotCMSShow/DotCMSShow';
 export { useDotCMSShowWhen } from './lib/next/hooks/useDotCMSShowWhen';
 export { useEditableDotCMSPage } from './lib/next/hooks/useEditableDotCMSPage';
 export { DotCMSEditableText } from './lib/next/components/DotCMSEditableText/DotCMSEditableText';
+export { DotCMSBlockEditorRenderer, BlockEditorRendererProps } from './lib/next/components/DotCMSBlockEditorRenderer/DotCMSBlockEditorRenderer';