test

apps/www/src/app/(app)/dev/page.tsx

@@ -20,6 +20,7 @@ import {
   PlateStatic,
   PlateStaticLeaf,
   createSlateEditor,
+  serializePlateStatic,
 } from '@udecode/plate-common';
 import {
   BaseFontBackgroundColorPlugin,
@@ -33,7 +34,6 @@ import {
 } from '@udecode/plate-heading';
 import { BaseHighlightPlugin } from '@udecode/plate-highlight';
 import { BaseHorizontalRulePlugin } from '@udecode/plate-horizontal-rule';
-import { serializeHtml } from '@udecode/plate-html';
 import { BaseIndentPlugin } from '@udecode/plate-indent';
 import { BaseIndentListPlugin } from '@udecode/plate-indent-list';
 import { BaseKbdPlugin } from '@udecode/plate-kbd';
@@ -193,11 +193,7 @@ export default async function DevPage() {
     ],
   });
 
-  // eslint-disable-next-line @typescript-eslint/await-thenable
-  const html = await serializeHtml(editorStatic, {
-    components: staticComponents,
-    nodes: editorStatic.children,
-  });
+  const html = await serializePlateStatic(editorStatic, staticComponents);
 
   return (
     <div className="mx-auto w-1/2">

packages/core/package.json

@@ -63,6 +63,7 @@
     "@udecode/slate-utils": "40.3.1",
     "@udecode/utils": "37.0.0",
     "clsx": "^2.1.1",
+    "html-entities": "^2.5.2",
     "is-hotkey": "^0.2.0",
     "jotai": "~2.8.4",
     "jotai-optics": "0.4.0",

packages/core/src/lib/static/index.ts

@@ -7,3 +7,4 @@ export * from './pipeRenderStaticLeaf';
 export * from './type';
 export * from './components/index';
 export * from './utils/index';
+export * from './serializedHtml';

packages/core/src/lib/static/serializedHtml.spec.ts

@@ -0,0 +1,129 @@
+import { BaseBlockquotePlugin } from '@udecode/plate-block-quote';
+import { BaseHeadingPlugin } from '@udecode/plate-heading';
+import { BaseLinkPlugin } from '@udecode/plate-link';
+import {
+  BaseTableCellPlugin,
+  BaseTablePlugin,
+  BaseTableRowPlugin,
+} from '@udecode/plate-table';
+import { decode } from 'html-entities';
+
+import { createSlateEditor } from '../editor';
+import { BaseParagraphPlugin } from '../plugins';
+import { serializePlateStatic } from './serializedHtml';
+
+describe('serializePlateStatic', () => {
+  it('should serialize paragraph to html', async () => {
+    const editor = createSlateEditor({
+      plugins: [BaseParagraphPlugin],
+      value: [
+        {
+          children: [{ text: 'Some random paragraph here...' }],
+          type: 'p',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, {});
+    expect(html).toContain('Some random paragraph here...');
+  });
+
+  it('should serialize headings to html', async () => {
+    const editor = createSlateEditor({
+      plugins: [BaseHeadingPlugin],
+      value: [
+        {
+          children: [{ text: 'Heading 1' }],
+          type: 'h1',
+        },
+        {
+          children: [{ text: 'Heading 2' }],
+          type: 'h2',
+        },
+        {
+          children: [{ text: 'Heading 3' }],
+          type: 'h3',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, {});
+    expect(html).toContain('Heading 1');
+    expect(html).toContain('Heading 2');
+    expect(html).toContain('Heading 3');
+  });
+
+  it('should serialize blockquote to html', async () => {
+    const editor = createSlateEditor({
+      plugins: [BaseBlockquotePlugin],
+      value: [
+        {
+          children: [{ text: 'Blockquoted text here...' }],
+          type: 'blockquote',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, {});
+    expect(html).toContain('Blockquoted text here...');
+  });
+
+  it('should serialize link to html', async () => {
+    const editor = createSlateEditor({
+      plugins: [BaseLinkPlugin],
+      value: [
+        { children: [{ text: 'Some paragraph of text with ' }], type: 'p' },
+        {
+          children: [{ text: 'link' }],
+          type: 'a',
+          url: 'https://example.com/',
+        },
+        { children: [{ text: ' part.' }], type: 'p' },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, {});
+    expect(html).toContain(decode('href="https://example.com/"'));
+    expect(html).toContain('slate-a');
+  });
+
+  // it('should serialize image to html', async () => {
+  //   const editor = createSlateEditor({
+  //     plugins: [BaseImagePlugin],
+  //     value: [
+  //       {
+  //         children: [{ text: '' }],
+  //         type: 'img',
+  //         url: 'https://example.com/image.jpg',
+  //       },
+  //     ],
+  //   });
+
+  //   const html = await serializePlateStatic(editor, {});
+  //   expect(html).toContain('src="https://example.com/image.jpg"');
+  // });
+
+  it('should serialize table to html', async () => {
+    const editor = createSlateEditor({
+      plugins: [BaseTablePlugin, BaseTableRowPlugin, BaseTableCellPlugin],
+      value: [
+        {
+          children: [
+            {
+              children: [
+                { children: [{ text: 'Cell 1' }], type: 'td' },
+                { children: [{ text: 'Cell 2' }], type: 'td' },
+              ],
+              type: 'tr',
+            },
+          ],
+          type: 'table',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, {});
+    expect(html).toContain('Cell 1');
+    expect(html).toContain('Cell 2');
+  });
+});

packages/core/src/lib/static/serializedHtml.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { decode } from 'html-entities';
+
+import type { SlateEditor } from '../editor';
+
+import { type StaticComponents, PlateStatic } from './components';
+
+const getReactDOMServer = async () => {
+  const ReactDOMServer = (await import('react-dom/server')).default;
+
+  return ReactDOMServer;
+};
+
+export const serializePlateStatic = async (
+  editor: SlateEditor,
+  staticComponents: StaticComponents
+) => {
+  const ReactDOMServer = await getReactDOMServer();
+
+  return renderComponentToHtml(ReactDOMServer, PlateStatic, {
+    editor,
+    staticComponents,
+  });
+};
+
+export const renderComponentToHtml = <P extends {}>(
+  ReactDOMServer: any,
+  type: React.ComponentType<P>,
+  props: P
+): string => {
+  return decode(
+    ReactDOMServer.renderToStaticMarkup(React.createElement(type, props))
+  );
+};

packages/core/src/lib/static/type.ts

@@ -3,20 +3,6 @@ import type { AnyObject } from '@udecode/utils';
 
 import type { SlateEditor } from '../editor';
 
-// export interface TRenderStaticElementProps<T extends TElement = TElement> {
-//   attributes: {
-//     'data-slate-node': 'element';
-//     ref: any;
-//     'data-slate-inline'?: true;
-//     'data-slate-void'?: true;
-//     dir?: 'rtl';
-//   };
-//   children: any;
-//   element: T;
-//   className?: string;
-//   style?: CSSStyleDeclaration;
-// }
-
 export interface StaticElementProps<T extends TElement = TElement> {
   attributes: {
     'data-slate-node': 'element';

yarn.lock

@@ -6664,6 +6664,7 @@ __metadata:
     "@udecode/slate-utils": "npm:40.3.1"
     "@udecode/utils": "npm:37.0.0"
     clsx: "npm:^2.1.1"
+    html-entities: "npm:^2.5.2"
     is-hotkey: "npm:^0.2.0"
     jotai: "npm:~2.8.4"
     jotai-optics: "npm:0.4.0"