diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
index 0bd8f2df3e..8381d0e922 100644
--- a/apps/www/src/app/(app)/dev/page.tsx
+++ b/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 (
diff --git a/packages/core/src/lib/static/__tests__/mark.spec.ts b/packages/core/src/lib/static/__tests__/marks.spec.ts
similarity index 100%
rename from packages/core/src/lib/static/__tests__/mark.spec.ts
rename to packages/core/src/lib/static/__tests__/marks.spec.ts
diff --git a/packages/core/src/lib/static/__tests__/nodes.spec.ts b/packages/core/src/lib/static/__tests__/nodes.spec.ts
deleted file mode 100644
index b0eb03c412..0000000000
--- a/packages/core/src/lib/static/__tests__/nodes.spec.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { serializePlateStatic } from '../serializedHtml';
-import { createStaticEditor, staticComponents } from './create-static-editor';
-
-describe('serializePlateStatic nodes', () => {
- // it('should serialize complex example list with paragraphs to html', async () => {
- // const editor = createStaticEditor([
- // {
- // children: [
- // {
- // text: 'Some paragraph that contains, ',
- // },
- // {
- // italic: true,
- // text: 'italicized text',
- // },
- // {
- // text: ' and ',
- // },
- // {
- // bold: true,
- // text: 'bolded text',
- // },
- // {
- // text: ' is first.',
- // },
- // ],
- // type: 'p',
- // },
- // {
- // children: [
- // {
- // children: [
- // {
- // children: [
- // {
- // text: 'Item one in list',
- // },
- // ],
- // type: 'p',
- // },
- // ],
- // type: 'li',
- // },
- // {
- // children: [
- // {
- // children: [
- // {
- // text: 'Item two in list',
- // },
- // ],
- // type: 'p',
- // },
- // ],
- // type: 'li',
- // },
- // ],
- // type: 'ul',
- // },
- // ]);
-
- // const html = await serializePlateStatic(editor, staticComponents, {
- // preserveClassNames: [],
- // stripClassNames: true,
- // stripDataAttributes: true,
- // });
-
- // expect(html).toContain(
- // '
Some paragraph that contains, italicized text and bolded text is first.
'
- // );
- // expect(html).toContain(
- // '
Item one in list
Item two in list
'
- // );
- // });
-
- // it('should serialize complex example with no type on top level node to html', async () => {
- // const editor = createStaticEditor([
- // {
- // children: [
- // {
- // text: 'Some paragraph that contains, ',
- // },
- // {
- // italic: true,
- // text: 'italicized text',
- // },
- // {
- // text: ' and ',
- // },
- // {
- // bold: true,
- // text: 'bolded text',
- // },
- // {
- // text: ' is first.',
- // },
- // ],
- // type: 'p',
- // },
- // ]);
-
- // const html = await serializePlateStatic(editor, staticComponents, {
- // preserveClassNames: [],
- // stripClassNames: true,
- // stripDataAttributes: true,
- // });
-
- // expect(html).toContain(
- // '
Some paragraph that contains, italicized text and bolded text is first.
'
- // );
- // });
-
- // it('should serialize complex example with multiple no types on top level node to html', async () => {
- // const editor = createStaticEditor([
- // {
- // children: [
- // {
- // text: 'Some paragraph that contains, ',
- // },
- // {
- // italic: true,
- // text: 'italicized text',
- // },
- // {
- // text: ' and ',
- // },
- // {
- // bold: true,
- // text: 'bolded text',
- // },
- // {
- // text: ' is first.',
- // },
- // ],
- // type: 'p',
- // },
- // {
- // children: [{ bold: true, text: 'FOO' }],
- // type: 'p',
- // },
- // ]);
-
- // const html = await serializePlateStatic(editor, staticComponents, {
- // preserveClassNames: [],
- // stripClassNames: true,
- // stripDataAttributes: true,
- // });
-
- // expect(html).toContain(
- // '
Some paragraph that contains, italicized text and bolded text is first.
'
- // );
- // expect(html).toContain('
FOO');
- // });
-
- 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(
- '
None encoded string 100%
'
- );
- // expect(html).toContain(
- // '
Encoded string 100%25
'
- // );
- });
-});
diff --git a/packages/core/src/lib/static/__tests__/render.spec.tsx b/packages/core/src/lib/static/__tests__/render.spec.tsx
new file mode 100644
index 0000000000..ceabb0045d
--- /dev/null
+++ b/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 (
+
+ );
+ };
+ },
+ },
+ });
+
+ 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(
+ '
'
+ );
+ });
+
+ 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(
+ '
None encoded string 100%'
+ );
+ expect(html).toContain(
+ '
Encoded string 100%25'
+ );
+ });
+});
diff --git a/packages/core/src/lib/static/__tests__/with-attributes.spec.ts b/packages/core/src/lib/static/__tests__/with-attributes.spec.ts
new file mode 100644
index 0000000000..bb7e639253
--- /dev/null
+++ b/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(
+ '
Right Aligned Heading
'
+ );
+ });
+});