Merge pull request #3076 from dimaanj/introduce-slate-to-md

[MdSerializer] Introduce md serializer

.changeset/thick-steaks-roll.md

@@ -0,0 +1,5 @@
+---
+"@udecode/plate-serializer-md": minor
+---
+
+Add `serializeMd`

apps/www/content/docs/serializing-md.mdx

@@ -38,7 +38,17 @@ const plugins = [
 
 ### Slate -> Markdown
 
-Use [remark-slate](https://github.com/hanford/remark-slate#slate-object-to-markdown).
+Currently supported plugins: paragraph, link, list, heading, italic, bold and code.
+
+```tsx
+import { serializeMd } from '@udecode/plate-serializer-md';
+
+const plugins = [
+  // ...supportedPlugins,
+];
+
+serializeMd(editor, { nodes });
+```
 
 ## API
 

packages/serializer-md/src/index.ts

@@ -4,3 +4,4 @@
 
 export * from './deserializer/index';
 export * from './remark-slate/index';
+export * from './serializer/index';

packages/serializer-md/src/serializer/__snapshots__/serializeMd.spec.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`deserializeMd should serialize editor value 1`] = `
+"# Rich Text Editor
+### Introduction
+
+Package contains a full-featured Rich Text Editor, based on open-source [slate.js](https://www.slatejs.org/) library. Slate.JS is a framework to build editors, and it's highly configurable with plugins. Here we picked and tuned dozen of plugins, build several plugins ourselves, added common styles and UX on top of it. One can pick from our default set of plugins, or even introduce new, app-specific plugins, on top.
+
+Unlikely to most Rich-Text editors, Slate uses JSON data model instead of HTML, which allows it to embed any entities, like arbitrary React components. For example, this checkbox, is a custom react component:
+An item
+We include HTML to Slate JSON converter, which is also used to convert pasted HTML.
+## Out of the box components
+### Basic layout
+
+We support inline text styles: **bold**, _italic_, underlined, text colors: red, yellow, and green.
+
+Numbered lists:
+
+1. In edit mode, we detect  '1.' and start list automatically
+1. You can use 'tab' / 'shift/tab' to indent the list
+
+Bullet lists:
+
+- Type '- ' to start the list
+- You can create multi-level lists with 'tab' / 'shift+tab'. Example:
+  - Level 2
+    - Level 3
+
+There's also support 3 levels of headers, hyperlinks, superscript, and more.
+"
+`;

packages/serializer-md/src/serializer/data.ts

@@ -0,0 +1,206 @@
+export const editorValueMock = [
+  {
+    type: 'uui-richTextEditor-header-1',
+    children: [
+      {
+        text: 'Rich Text Editor',
+      },
+    ],
+  },
+  {
+    type: 'uui-richTextEditor-header-3',
+    children: [
+      {
+        text: 'Introduction',
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: 'Package contains a full-featured Rich Text Editor, based on open-source ',
+      },
+      {
+        type: 'link',
+        url: 'https://www.slatejs.org/',
+        children: [
+          {
+            text: 'slate.js',
+          },
+        ],
+      },
+      {
+        text: " library. Slate.JS is a framework to build editors, and it's highly configurable with plugins. Here we picked and tuned dozen of plugins, build several plugins ourselves, added common styles and UX on top of it. One can pick from our default set of plugins, or even introduce new, app-specific plugins, on top.",
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: 'Unlikely to most Rich-Text editors, Slate uses JSON data model instead of HTML, which allows it to embed any entities, like arbitrary React components. For example, this checkbox, is a custom react component:\nAn item\nWe include HTML to Slate JSON converter, which is also used to convert pasted HTML.',
+      },
+    ],
+  },
+  {
+    type: 'uui-richTextEditor-header-2',
+    children: [
+      {
+        text: 'Out of the box components',
+      },
+    ],
+  },
+  {
+    type: 'uui-richTextEditor-header-3',
+    children: [
+      {
+        text: 'Basic layout',
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: 'We support inline text styles: ',
+      },
+      {
+        text: 'bold',
+        'uui-richTextEditor-bold': true,
+      },
+      {
+        text: ', ',
+      },
+      {
+        text: 'italic',
+        'uui-richTextEditor-italic': true,
+      },
+      {
+        text: ', underlined, text colors: red, yellow, and green.',
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: 'Numbered lists:',
+      },
+    ],
+  },
+  {
+    type: 'ordered-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [
+          {
+            type: 'list-item-child',
+            children: [
+              {
+                text: "In edit mode, we detect  '1.' and start list automatically",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          {
+            type: 'list-item-child',
+            children: [
+              {
+                text: "You can use 'tab' / 'shift/tab' to indent the list",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: 'Bullet lists:',
+      },
+    ],
+  },
+  {
+    type: 'unordered-list',
+    children: [
+      {
+        type: 'list-item',
+        children: [
+          {
+            type: 'list-item-child',
+            children: [
+              {
+                text: "Type '- ' to start the list",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        type: 'list-item',
+        children: [
+          {
+            type: 'list-item-child',
+            children: [
+              {
+                text: "You can create multi-level lists with 'tab' / 'shift+tab'. Example:",
+              },
+            ],
+          },
+          {
+            type: 'unordered-list',
+            children: [
+              {
+                type: 'list-item',
+                children: [
+                  {
+                    type: 'list-item-child',
+                    children: [
+                      {
+                        text: 'Level 2',
+                      },
+                    ],
+                  },
+                  {
+                    type: 'unordered-list',
+                    children: [
+                      {
+                        type: 'list-item',
+                        children: [
+                          {
+                            type: 'list-item-child',
+                            children: [
+                              {
+                                text: 'Level 3',
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: 'paragraph',
+    children: [
+      {
+        text: "There's also support 3 levels of headers, hyperlinks, superscript, and more.",
+      },
+    ],
+  },
+];

packages/serializer-md/src/serializer/index.ts

@@ -0,0 +1 @@
+export * from './serializeMd';