Add remark-slate source code to Plate (#2175)

Add tests for deserializeMd

Add relevent parts of remark-slate

Linter fixes

Fix function exports

Move element types out of options

Replace custom types with Plate types

Refactor deserialization rules into options

Fix blockquotes

Drop strikethrough support

Fix images

Fix code blocks

Fix lists

Fix <br>

Fix generics

Make rules configurable through Plate plugin options

Fix images (again)

Add changesets

.changeset/selfish-humans-clap.md

@@ -0,0 +1,6 @@
+---
+'@udecode/plate-serializer-md': minor
+---
+
+- Plugin can now be customised using `elementRules` and `textRules` options
+- Various fixes

LICENSE

@@ -4,6 +4,7 @@ Ziad Beyens
 Dylan Schiemann
 Luke Murray
 Ian Storm Taylor
+Jack Hanford
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

packages/serializers/md/package.json

@@ -27,7 +27,6 @@
     "@udecode/plate-list": "19.2.0",
     "@udecode/plate-paragraph": "19.2.0",
     "remark-parse": "^9.0.0",
-    "remark-slate": "^1.8.6",
     "unified": "^9.2.1"
   },
   "peerDependencies": {

packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts

@@ -1,29 +1,40 @@
-import { createPluginFactory, isUrl } from '@udecode/plate-core';
+import { createPluginFactory, isUrl, Value } from '@udecode/plate-core';
+import {
+  remarkDefaultElementRules,
+  remarkDefaultTextRules,
+} from '../remark-slate';
+import { DeserializeMdPlugin } from './types';
 import { deserializeMd } from './utils';
 
 export const KEY_DESERIALIZE_MD = 'deserializeMd';
 
-export const createDeserializeMdPlugin = createPluginFactory({
-  key: KEY_DESERIALIZE_MD,
-  then: (editor) => ({
-    editor: {
-      insertData: {
-        format: 'text/plain',
-        query: ({ data, dataTransfer }) => {
-          const htmlData = dataTransfer.getData('text/html');
-          if (htmlData) return false;
+export const createDeserializeMdPlugin = createPluginFactory<DeserializeMdPlugin>(
+  {
+    key: KEY_DESERIALIZE_MD,
+    then: (editor) => ({
+      editor: {
+        insertData: {
+          format: 'text/plain',
+          query: ({ data, dataTransfer }) => {
+            const htmlData = dataTransfer.getData('text/html');
+            if (htmlData) return false;
 
-          const { files } = dataTransfer;
-          if (!files?.length) {
-            // if content is simply a URL pass through to not break LinkPlugin
-            if (isUrl(data)) {
-              return false;
+            const { files } = dataTransfer;
+            if (!files?.length) {
+              // if content is simply a URL pass through to not break LinkPlugin
+              if (isUrl(data)) {
+                return false;
+              }
             }
-          }
-          return true;
+            return true;
+          },
+          getFragment: ({ data }) => deserializeMd<Value>(editor, data),
         },
-        getFragment: ({ data }) => deserializeMd(editor, data),
       },
+    }),
+    options: {
+      elementRules: remarkDefaultElementRules,
+      textRules: remarkDefaultTextRules,
     },
-  }),
-});
+  }
+);

packages/serializers/md/src/deserializer/index.ts

@@ -3,4 +3,5 @@
  */
 
 export * from './createDeserializeMdPlugin';
+export * from './types';
 export * from './utils/index';

packages/serializers/md/src/deserializer/types.ts

@@ -0,0 +1,7 @@
+import { Value } from '@udecode/plate-core';
+import { RemarkElementRules, RemarkTextRules } from '../remark-slate';
+
+export interface DeserializeMdPlugin<V extends Value = Value> {
+  elementRules: RemarkElementRules<V>;
+  textRules: RemarkTextRules<V>;
+}