wip: Make rules configurable through Plate plugin options

udecode · Jan 31, 2023 · 5525c1c · 5525c1c
1 parent 5c4cf6f
commit 5525c1c
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 29 deletions.
diff --git a/packages/serializers/md/src/deserializer/createDeserializeMdPlugin.ts b/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,
     },
-  }),
-});
+  }
+);
diff --git a/packages/serializers/md/src/deserializer/types.ts b/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>;
+}
diff --git a/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx b/packages/serializers/md/src/deserializer/utils/deserializeMd.spec.tsx
@@ -4,13 +4,14 @@
 import { jsx } from '@udecode/plate-test-utils';
 import { ELEMENT_HR } from '../../../../../nodes/horizontal-rule/src';
 import { createPlateUIEditor } from '../../../../../ui/plate/src/utils/createPlateUIEditor';
+import { createDeserializeMdPlugin } from '../createDeserializeMdPlugin';
 import { deserializeMd } from './deserializeMd';
 
 jsx;
 
 describe('deserializeMd', () => {
   const editor = createPlateUIEditor({
-    plugins: [],
+    plugins: [createDeserializeMdPlugin()],
   });
 
   it('should deserialize paragraphs', () => {

diff --git a/packages/serializers/md/src/deserializer/utils/deserializeMd.ts b/packages/serializers/md/src/deserializer/utils/deserializeMd.ts
@@ -1,7 +1,9 @@
-import { PlateEditor, Value } from '@udecode/plate-core';
+import { getPluginOptions, PlateEditor, Value } from '@udecode/plate-core';
 import markdown from 'remark-parse';
 import unified from 'unified';
-import { remarkPlugin } from '../../remark-slate';
+import { remarkPlugin, RemarkPluginOptions } from '../../remark-slate';
+import { KEY_DESERIALIZE_MD } from '../createDeserializeMdPlugin';
+import { DeserializeMdPlugin } from '../types';
 
 /**
  * Deserialize content from Markdown format to Slate format.
@@ -11,9 +13,18 @@ export const deserializeMd = <V extends Value>(
   editor: PlateEditor<V>,
   data: string
 ) => {
+  const { elementRules, textRules } = getPluginOptions<DeserializeMdPlugin, V>(
+    editor,
+    KEY_DESERIALIZE_MD
+  );
+
   const tree: any = unified()
     .use(markdown)
-    .use(remarkPlugin, { editor })
+    .use(remarkPlugin, ({
+      editor,
+      elementRules,
+      textRules,
+    } as unknown) as RemarkPluginOptions<V>)
     .processSync(data);
 
   return tree.result;

diff --git a/packages/serializers/md/src/remark-slate/remarkTransformElement.ts b/packages/serializers/md/src/remark-slate/remarkTransformElement.ts
@@ -1,12 +1,11 @@
 import { TElement, Value } from '@udecode/plate-core';
-import { remarkDefaultElementRules } from './remarkDefaultElementRules';
 import { MdastNode, RemarkPluginOptions } from './types';
 
 export const remarkTransformElement = <V extends Value>(
   node: MdastNode,
   options: RemarkPluginOptions<V>
 ): TElement | TElement[] => {
-  const { elementRules = remarkDefaultElementRules } = options;
+  const { elementRules } = options;
 
   const { type } = node;
   const elementRule = elementRules[type!];

diff --git a/packages/serializers/md/src/remark-slate/remarkTransformText.ts b/packages/serializers/md/src/remark-slate/remarkTransformText.ts
@@ -7,7 +7,7 @@ export const remarkTransformText = <V extends Value>(
   options: RemarkPluginOptions<V>,
   inheritedMarkProps: { [key: string]: boolean } = {}
 ): TText | TText[] => {
-  const { editor, textRules = remarkDefaultTextRules } = options;
+  const { editor, textRules } = options;
 
   const { type, value, children } = node;
   const textRule = textRules[type!] || remarkDefaultTextRules.text;

diff --git a/packages/serializers/md/src/remark-slate/types.ts b/packages/serializers/md/src/remark-slate/types.ts
@@ -60,6 +60,6 @@ export type RemarkTextRules<V extends Value> = {
 
 export type RemarkPluginOptions<V extends Value> = {
   editor: PlateEditor<V>;
-  elementRules?: RemarkElementRules<V>;
-  textRules?: RemarkTextRules<V>;
+  elementRules: RemarkElementRules<V>;
+  textRules: RemarkTextRules<V>;
 };