feat(sdk): React Block Editor Render Component

core-web/libs/sdk/react/src/index.ts

@@ -2,3 +2,4 @@ export * from './lib/components/DotcmsLayout/DotcmsLayout';
 export * from './lib/components/PageProvider/PageProvider';
 export * from './lib/components/Row/Row';
 export * from './lib/hooks/useDotcmsPageContext';
+export * from './lib/components/BlockEditorRenderer/BlockEditorRenderer';

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.spec.tsx

@@ -0,0 +1,59 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import crypto from 'crypto';
+
+import { BlockEditorRenderer } from './BlockEditorRenderer';
+
+import { Block } from '../../models/blocks.interface';
+
+Object.defineProperty(global.self, 'crypto', {
+    value: {
+        randomUUID: crypto.randomUUID
+    }
+});
+
+describe('BlockEditorRenderer', () => {
+    const blocks = {
+        content: [
+            {
+                type: 'paragraph',
+                attrs: {},
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Hello, World!'
+                    }
+                ]
+            }
+        ]
+    } as Block;
+
+    it('should render the BlockEditorItem component', () => {
+        const { getByText } = render(<BlockEditorRenderer blocks={blocks} />);
+        expect(getByText('Hello, World!')).toBeInTheDocument();
+    });
+
+    it('should render the custom renderer component', () => {
+        const customRenderers = {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            paragraph: ({ content }: { content: any }) => {
+                const [{ text }] = content;
+
+                return <p data-testid="custom-paragraph">{text}</p>;
+            }
+        };
+        const { getByTestId } = render(
+            <BlockEditorRenderer blocks={blocks} customRenderers={customRenderers} />
+        );
+        expect(getByTestId('custom-paragraph')).toBeInTheDocument();
+    });
+
+    it('should render the property className and style props', () => {
+        const { container } = render(
+            <BlockEditorRenderer blocks={blocks} className="test-class" style={{ color: 'red' }} />
+        );
+        expect(container.firstChild).toHaveClass('test-class');
+        expect(container.firstChild).toHaveStyle('color: red');
+    });
+});

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.tsx

@@ -0,0 +1,32 @@
+import { BlockEditorItem } from './item/BlockEditorItem';
+
+import { Block, CustomRenderer } from '../../models/blocks.interface';
+
+interface BlockEditorRendererProps {
+    blocks: Block;
+    customRenderers?: CustomRenderer;
+    className?: string;
+    style?: React.CSSProperties;
+}
+
+/**
+ * Renders a block editor with the specified blocks, custom renderers, className, and style.
+ *
+ * @param blocks - The blocks to be rendered in the editor.
+ * @param customRenderers - Custom renderers for specific block types.
+ * @param className - The CSS class name for the container element.
+ * @param style - The inline styles for the container element.
+ * @returns The rendered block editor.
+ */
+export const BlockEditorRenderer = ({
+    blocks,
+    customRenderers,
+    className,
+    style
+}: BlockEditorRendererProps) => {
+    return (
+        <div className={className} style={style}>
+            <BlockEditorItem content={blocks.content} customRenderers={customRenderers} />
+        </div>
+    );
+};

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Code.tsx

@@ -0,0 +1,30 @@
+import { BlockProps, ContentNode } from '../../../models/blocks.interface';
+
+type CodeBlockProps = BlockProps & ContentNode;
+
+/**
+ * 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 const CodeBlock = ({ attrs, children }: CodeBlockProps) => {
+    const language = attrs?.language || '';
+
+    return (
+        <pre data-language={language}>
+            <code>{children}</code>
+        </pre>
+    );
+};
+
+/**
+ * Renders a blockquote component.
+ *
+ * @param children - The content to be rendered inside the blockquote.
+ * @returns The rendered blockquote component.
+ */
+export const BlockQuote = ({ children }: BlockProps) => {
+    return <blockquote>{children}</blockquote>;
+};

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Contentlet.tsx

@@ -0,0 +1,65 @@
+import { ContentNode, CustomRenderer } from '../../../models/blocks.interface';
+
+// Replace this when we have a types lib
+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;
+}
+
+type DotContentProps = ContentNode & {
+    customRenderers?: CustomRenderer;
+};
+
+/**
+ * Renders the default content for an unknown content type.
+ */
+const DefaultContent = () => <div>Unknown Content Type</div>;
+
+/**
+ * Renders a DotContent component.
+ *
+ * @param {DotContentProps} props - The props for the DotContent component.
+ * @returns {JSX.Element} The rendered DotContent component.
+ */
+export const DotContent = (props: DotContentProps) => {
+    const { attrs, customRenderers } = props;
+
+    const data = attrs?.data as unknown as Contentlet;
+
+    const Component = customRenderers?.[data?.contentType] ?? DefaultContent;
+
+    if (!data) {
+        console.error('DotContent: No data provided');
+    }
+
+    return <Component {...data} />;
+};

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Image.tsx

@@ -0,0 +1,22 @@
+import { DotCmsClient } from '@dotcms/client';
+
+import { ContentNode } from '../../../models/blocks.interface';
+
+type DotCMSImageProps = ContentNode['attrs'] & {
+    data?: Record<string, unknown>;
+};
+
+/**
+ * Renders an image component for dotCMS.
+ *
+ * @param props - The props for the DotCMSImage component.
+ * @returns The rendered image component.
+ */
+export const DotCMSImage = (props: ContentNode) => {
+    const { data, src, alt } = props.attrs as DotCMSImageProps;
+    const client = DotCmsClient.instance;
+
+    const srcUrl = data?.identifier ? `${client.dotcmsUrl}${src}` : src;
+
+    return <img alt={alt} src={srcUrl} />;
+};

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Lists.tsx

@@ -0,0 +1,33 @@
+interface BlockProps {
+    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 const ListItem = ({ children }: BlockProps) => {
+    return <li>{children}</li>;
+};
+
+/**
+ * Renders an ordered list component.
+ *
+ * @param children - The content to be rendered inside the ordered list.
+ * @returns The ordered list component.
+ */
+export const OrderedList = ({ children }: BlockProps) => {
+    return <ol>{children}</ol>;
+};
+
+/**
+ * Renders a bullet list component.
+ *
+ * @param children - The content of the bullet list.
+ * @returns The rendered bullet list component.
+ */
+export const BulletList = ({ children }: BlockProps) => {
+    return <ul>{children}</ul>;
+};

core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Table.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { ContentNode } from '../../../models/blocks.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 const TableRenderer: React.FC<TableRendererProps> = ({
+    content,
+    blockEditorItem
+}: TableRendererProps) => {
+    const BlockEditorItemComponent = blockEditorItem;
+
+    const renderTableContent = (node: ContentNode) => {
+        return <BlockEditorItemComponent content={node.content} />;
+    };
+
+    return (
+        <table>
+            <thead>
+                {content.slice(0, 1).map((rowNode) => (
+                    <tr key={crypto.randomUUID()}>
+                        {rowNode.content?.map((cellNode) => (
+                            <th
+                                key={crypto.randomUUID()}
+                                colSpan={Number(cellNode.attrs?.colspan || 1)}
+                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
+                                {renderTableContent(cellNode)}
+                            </th>
+                        ))}
+                    </tr>
+                ))}
+            </thead>
+            <tbody>
+                {content.slice(1).map((rowNode) => (
+                    <tr key={crypto.randomUUID()}>
+                        {rowNode.content?.map((cellNode) => (
+                            <td
+                                key={crypto.randomUUID()}
+                                colSpan={Number(cellNode.attrs?.colspan || 1)}
+                                rowSpan={Number(cellNode.attrs?.rowspan || 1)}>
+                                {renderTableContent(cellNode)}
+                            </td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+};