test

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

@@ -215,8 +215,27 @@ export default async function DevPage() {
     ],
   });
 
+  // console.log(
+  //   [
+  //     ...basicNodesValue,
+  //     ...linkValue,
+  //     ...tableValue,
+  //     ...horizontalRuleValue,
+  //     ...fontValue,
+  //     ...highlightValue,
+  //     ...kbdValue,
+  //     ...alignValue,
+  //     ...lineHeightValue,
+  //     ...indentValue,
+  //     ...indentListValue,
+  //     ...mediaValue,
+  //     ...alignValue,
+  //   ],
+  //   'fj'
+  // );
+
   const html = await serializePlateStatic(editorStatic, staticComponents);
-  // console.log('🚀 ~ DevPage ~ html:', html);
+  console.log('🚀 ~ DevPage ~ html:', html);
 
   return (
     <div className="mx-auto w-1/2">

packages/core/src/lib/static/__tests__/render.spec.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import { createSlateEditor } from '../../editor';
+import { createTSlatePlugin } from '../../plugin';
+import { serializePlateStatic } from '../serializedHtml';
+import { createStaticEditor, staticComponents } from './create-static-editor';
+
+describe('serializePlateStatic nodes', () => {
+  it('should serialize render below nodes', async () => {
+    const renderBelowPlugin = createTSlatePlugin({
+      key: 'test-list',
+      render: {
+        belowNodes: (injectProps: any) => {
+          const { element } = injectProps;
+
+          return function Component({
+            children,
+          }: {
+            children: React.ReactNode;
+          }) {
+            return (
+              <ul>
+                <li>{children}</li>
+              </ul>
+            );
+          };
+        },
+      },
+    });
+
+    const editor = createSlateEditor({
+      plugins: [renderBelowPlugin],
+      value: [
+        {
+          children: [{ text: 'test render below' }],
+          type: 'p',
+        },
+      ],
+    });
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+      stripDataAttributes: true,
+    });
+
+    expect(html).toEqual(
+      '<div><ul><li><span><span><span>test render below</span></span></span></li></ul></div>'
+    );
+  });
+
+  it('should serialize string with %', async () => {
+    const editor = createStaticEditor([
+      {
+        children: [
+          {
+            text: 'None encoded string 100%',
+          },
+        ],
+        type: 'p',
+      },
+      {
+        children: [{ text: 'Encoded string 100%25' }],
+        type: 'p',
+      },
+    ]);
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+      // stripDataAttributes: true,
+    });
+
+    expect(html).toContain(
+      '<span data-slate-string="true">None encoded string 100%</span>'
+    );
+    expect(html).toContain(
+      '<span data-slate-string="true">Encoded string 100%25</span>'
+    );
+  });
+});

packages/core/src/lib/static/__tests__/with-attributes.spec.ts

@@ -0,0 +1,22 @@
+import { serializePlateStatic } from '../serializedHtml';
+import { createStaticEditor, staticComponents } from './create-static-editor';
+
+describe('serializePlateStatic with attributes', () => {
+  it('should serialize elements with right slate attributes', async () => {
+    const editor = createStaticEditor([
+      {
+        children: [{ bold: true, text: 'Right Aligned Heading' }],
+        type: 'p',
+      },
+    ]);
+
+    const html = await serializePlateStatic(editor, staticComponents, {
+      preserveClassNames: [],
+      stripClassNames: true,
+    });
+
+    expect(html).toEqual(
+      '<div data-slate-node="element"><span data-slate-node="text"><span data-slate-leaf="true"><strong data-slate-leaf="true"><span data-slate-string="true">Right Aligned Heading</span></strong></span></span></div>'
+    );
+  });
+});