feat(sdk): React Block Editor Render Component (#29653)

### Proposed Changes * Added BlockEditorRenderer component in React SDK * Render all supported Blocks and Marks * Allow to render Blocks with customRenderer components * Allow apply custom classes and styles Heading: https://github.com/user-attachments/assets/e8c9591e-6a11-4c00-a6ed-459491950807 Marks: https://github.com/user-attachments/assets/d7be80c2-37fb-4e63-a7a4-a213372cf7b9 Lists: https://github.com/user-attachments/assets/b2c0bc56-a637-49cd-b3c9-7ad8a67ea6af Code: https://github.com/user-attachments/assets/749eee63-d883-44e6-bb8b-95a513cc1b6b Images: https://github.com/user-attachments/assets/4bac2f6f-7c08-4e97-a97c-5d57823c209b Video: https://github.com/user-attachments/assets/a9ae666e-811b-4114-beb9-bc4e37c40f02 Table: https://github.com/user-attachments/assets/419c5b32-6f3e-489c-ad89-7e1fd90c9384 Contentlet: https://github.com/user-attachments/assets/73fbede7-f4ff-4fb3-af4e-75a3aab3528f --------- Co-authored-by: Kevin Davila <[email protected]>
dotCMS · Sep 3, 2024 · f13b1a1 · f13b1a1
1 parent c97c4d7
commit f13b1a1
Show file tree

Hide file tree

Showing 26 changed files with 1,536 additions and 180 deletions.
diff --git a/core-web/libs/sdk/angular/package.json b/core-web/libs/sdk/angular/package.json
@@ -1,32 +1,32 @@
 {
-    "name": "@dotcms/angular",
-    "version": "0.0.1-alpha.33",
-    "peerDependencies": {
-        "@angular/common": "^17.1.0",
-        "@angular/core": "^17.1.0",
-        "@angular/router": "^17.1.0",
-        "@dotcms/client": "0.0.1-alpha.33",
-        "@tinymce/tinymce-angular": "^8.0.0",
-        "rxjs": "^7.8.0"
-    },
-    "description": "Official Angular Components library to render a dotCMS page.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API",
-        "Angular",
-        "Components"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/angular/README.md"
+  "name": "@dotcms/angular",
+  "version": "0.0.1-alpha.35",
+  "peerDependencies": {
+    "@angular/common": "^17.1.0",
+    "@angular/core": "^17.1.0",
+    "@angular/router": "^17.1.0",
+    "@dotcms/client": "0.0.1-alpha.35",
+    "@tinymce/tinymce-angular": "^8.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "description": "Official Angular Components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "Angular",
+    "Components"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/angular/README.md"
 }
diff --git a/core-web/libs/sdk/client/package.json b/core-web/libs/sdk/client/package.json
@@ -1,25 +1,25 @@
 {
-    "name": "@dotcms/client",
-    "version": "0.0.1-alpha.33",
-    "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "scripts": {
-        "build": "nx run sdk-client:build:js; cd ../../../../dotCMS/src/main/webapp/html/js/editor-js; rm -rf src package.json *.esm.d.ts"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md"
+  "name": "@dotcms/client",
+  "version": "0.0.1-alpha.35",
+  "description": "Official JavaScript library for interacting with DotCMS REST APIs.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "scripts": {
+    "build": "nx run sdk-client:build:js; cd ../../../../dotCMS/src/main/webapp/html/js/editor-js; rm -rf src package.json *.esm.d.ts"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/client/README.md"
 }
diff --git a/core-web/libs/sdk/experiments/package.json b/core-web/libs/sdk/experiments/package.json
@@ -1,30 +1,30 @@
 {
-    "name": "@dotcms/experiments",
-    "version": "0.0.1-alpha.33",
-    "description": "Official JavaScript library to use Experiments with DotCMS.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "A/B testing",
-        "Experiments"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/experiments/README.md",
-    "dependencies": {
-        "@jitsu/sdk-js": "^3.1.5"
-    },
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "@dotcms/client": "0.0.1-alpha.33"
-    }
+  "name": "@dotcms/experiments",
+  "version": "0.0.1-alpha.35",
+  "description": "Official JavaScript library to use Experiments with DotCMS.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "A/B testing",
+    "Experiments"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/experiments/README.md",
+  "dependencies": {
+    "@jitsu/sdk-js": "^3.1.5"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.35"
+  }
 }
diff --git a/core-web/libs/sdk/react/package.json b/core-web/libs/sdk/react/package.json
@@ -1,30 +1,30 @@
 {
-    "name": "@dotcms/react",
-    "version": "0.0.1-alpha.33",
-    "peerDependencies": {
-        "react": ">=18",
-        "react-dom": ">=18",
-        "@dotcms/client": "0.0.1-alpha.33",
-        "@tinymce/tinymce-react": "^5.1.1"
-    },
-    "description": "Official React Components library to render a dotCMS page.",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/dotCMS/core.git#master"
-    },
-    "keywords": [
-        "dotCMS",
-        "CMS",
-        "Content Management",
-        "API Client",
-        "REST API",
-        "React",
-        "Components"
-    ],
-    "author": "dotcms <[email protected]>",
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/dotCMS/core/issues"
-    },
-    "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
+  "name": "@dotcms/react",
+  "version": "0.0.1-alpha.35",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "@dotcms/client": "0.0.1-alpha.35",
+    "@tinymce/tinymce-react": "^5.1.1"
+  },
+  "description": "Official React Components library to render a dotCMS page.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dotCMS/core.git#master"
+  },
+  "keywords": [
+    "dotCMS",
+    "CMS",
+    "Content Management",
+    "API Client",
+    "REST API",
+    "React",
+    "Components"
+  ],
+  "author": "dotcms <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dotCMS/core/issues"
+  },
+  "homepage": "https://github.com/dotCMS/core/tree/master/core-web/libs/sdk/react/README.md"
 }
diff --git a/core-web/libs/sdk/react/src/index.ts b/core-web/libs/sdk/react/src/index.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';
diff --git a/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.spec.tsx b/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.spec.tsx
@@ -0,0 +1,51 @@
+import '@testing-library/jest-dom';
+import { render } from '@testing-library/react';
+
+import { BlockEditorRenderer } from './BlockEditorRenderer';
+
+import { Block } from '../../models/blocks.interface';
+
+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');
+    });
+});
diff --git a/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.tsx b/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/BlockEditorRenderer.tsx
@@ -0,0 +1,35 @@
+import { BlockEditorBlock } from './item/BlockEditorBlock';
+
+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 const BlockEditorRenderer = ({
+    blocks,
+    customRenderers,
+    className,
+    style
+}: BlockEditorRendererProps) => {
+    return (
+        <div className={className} style={style}>
+            <BlockEditorBlock content={blocks.content} customRenderers={customRenderers} />
+        </div>
+    );
+};
diff --git a/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Code.tsx b/core-web/libs/sdk/react/src/lib/components/BlockEditorRenderer/blocks/Code.tsx
@@ -0,0 +1,29 @@
+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 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>;
+};