Merge pull request #2856 from FranciscoMoretti/main

indentList option for MD deserializer
udecode · Jan 5, 2024 · 0ddd5bf · 0ddd5bf
2 parents 941829a + 3a247c6
commit 0ddd5bf
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 14 deletions.
diff --git a/.changeset/nervous-nails-bathe.md b/.changeset/nervous-nails-bathe.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-serializer-md": minor
+---
+
+New option in markdown deserializer plugin: `indentList?: boolean`. Set it to true if you're using Indent List plugin instead of the List plugin.
diff --git a/packages/serializer-md/src/deserializer/createDeserializeMdPlugin.ts b/packages/serializer-md/src/deserializer/createDeserializeMdPlugin.ts
@@ -36,5 +36,6 @@ export const createDeserializeMdPlugin =
     options: {
       elementRules: remarkDefaultElementRules,
       textRules: remarkDefaultTextRules,
+      indentList: false,
     },
   });
diff --git a/packages/serializer-md/src/deserializer/types.ts b/packages/serializer-md/src/deserializer/types.ts
@@ -5,4 +5,5 @@ import { RemarkElementRules, RemarkTextRules } from '../remark-slate/index';
 export interface DeserializeMdPlugin<V extends Value = Value> {
   elementRules?: RemarkElementRules<V>;
   textRules?: RemarkTextRules<V>;
+  indentList?: boolean;
 }
diff --git a/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx b/packages/serializer-md/src/deserializer/utils/deserializeMd.spec.tsx
@@ -303,3 +303,98 @@ describe('deserializeMd', () => {
     expect(deserializeMd(editor, input)).toEqual(output);
   });
 });
+
+describe('deserializeMdIndentList', () => {
+  const editor = createPlateEditor({
+    plugins: [
+      createDeserializeMdPlugin({ options: { indentList: true } }) as any,
+    ],
+  });
+
+  it('should deserialize unordered lists', () => {
+    const input = '- List item 1\n- List item 2';
+
+    const output = [
+      {
+        type: 'p',
+        listStyleType: 'disc',
+        indent: 1,
+        children: [
+          {
+            text: 'List item 1',
+          },
+        ],
+      },
+      {
+        type: 'p',
+        listStyleType: 'disc',
+        indent: 1,
+        children: [
+          {
+            text: 'List item 2',
+          },
+        ],
+      },
+    ];
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should deserialize ordered lists', () => {
+    const input = '1. List item 1\n2. List item 2';
+
+    const output = [
+      {
+        type: 'p',
+        listStyleType: 'decimal',
+        indent: 1,
+        children: [
+          {
+            text: 'List item 1',
+          },
+        ],
+      },
+      {
+        type: 'p',
+        listStyleType: 'decimal',
+        indent: 1,
+        children: [
+          {
+            text: 'List item 2',
+          },
+        ],
+      },
+    ];
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+
+  it('should deserialize mixed nested lists', () => {
+    const input = '- List item 1\n  1. List item 1.1';
+
+    const output = [
+      {
+        type: 'p',
+        listStyleType: 'disc',
+        indent: 1,
+        children: [
+          {
+            text: 'List item 1',
+          },
+        ],
+      },
+      {
+        type: 'p',
+        listStyleType: 'disc',
+        indent: 2,
+        children: [
+          {
+            text: 'List item 1.1',
+          },
+        ],
+      },
+    ];
+
+    expect(deserializeMd(editor, input)).toEqual(output);
+  });
+});
diff --git a/packages/serializer-md/src/deserializer/utils/deserializeMd.ts b/packages/serializer-md/src/deserializer/utils/deserializeMd.ts
@@ -14,17 +14,18 @@ export const deserializeMd = <V extends Value>(
   editor: PlateEditor<V>,
   data: string
 ) => {
-  const { elementRules, textRules } = getPluginOptions<DeserializeMdPlugin, V>(
-    editor,
-    KEY_DESERIALIZE_MD
-  );
+  const { elementRules, textRules, indentList } = getPluginOptions<
+    DeserializeMdPlugin,
+    V
+  >(editor, KEY_DESERIALIZE_MD);
 
   const tree: any = unified()
     .use(markdown)
     .use(remarkPlugin, {
       editor,
       elementRules,
       textRules,
+      indentList,
     } as unknown as RemarkPluginOptions<V>)
     .processSync(data);
 

diff --git a/packages/serializer-md/src/remark-slate/remarkDefaultElementRules.ts b/packages/serializer-md/src/remark-slate/remarkDefaultElementRules.ts
@@ -30,7 +30,7 @@ import { ELEMENT_IMAGE } from '@udecode/plate-media';
 import { ELEMENT_PARAGRAPH } from '@udecode/plate-paragraph';
 
 import { remarkTransformElementChildren } from './remarkTransformElementChildren';
-import { RemarkElementRules } from './types';
+import { MdastNode, RemarkElementRules } from './types';
 
 // FIXME: underline, subscript superscript not yet supported by remark-slate
 export const remarkDefaultElementRules: RemarkElementRules<Value> = {
@@ -52,13 +52,44 @@ export const remarkDefaultElementRules: RemarkElementRules<Value> = {
     },
   },
   list: {
-    transform: (node, options) => ({
-      type: getPluginType(
-        options.editor,
-        node.ordered ? ELEMENT_OL : ELEMENT_UL
-      ),
-      children: remarkTransformElementChildren(node, options),
-    }),
+    transform: (node, options) => {
+      if (options.indentList) {
+        const listStyleType = node.ordered ? 'decimal' : 'disc';
+
+        const parseListItems = (
+          _node: MdastNode,
+          listItems: TElement[] = [],
+          indent = 1
+        ) => {
+          _node.children!.forEach((listItem) => {
+            const [paragraph, ...subLists] = listItem.children!;
+
+            listItems.push({
+              type: getPluginType(options.editor, ELEMENT_PARAGRAPH),
+              listStyleType,
+              indent,
+              children: remarkTransformElementChildren(paragraph, options),
+            });
+
+            subLists.forEach((subList) => {
+              parseListItems(subList, listItems, indent + 1);
+            });
+          });
+
+          return listItems;
+        };
+
+        return parseListItems(node);
+      } else {
+        return {
+          type: getPluginType(
+            options.editor,
+            node.ordered ? ELEMENT_OL : ELEMENT_UL
+          ),
+          children: remarkTransformElementChildren(node, options),
+        };
+      }
+    },
   },
   listItem: {
     transform: (node, options) => ({

diff --git a/packages/serializer-md/src/remark-slate/types.ts b/packages/serializer-md/src/remark-slate/types.ts
@@ -62,4 +62,5 @@ export type RemarkPluginOptions<V extends Value> = {
   editor: PlateEditor<V>;
   elementRules: RemarkElementRules<V>;
   textRules: RemarkTextRules<V>;
+  indentList?: boolean;
 };
diff --git a/packages/utils/src/types/types.ts b/packages/utils/src/types/types.ts
@@ -38,8 +38,8 @@ export type ModifyDeep<A extends AnyObject, B extends DeepPartialAny<A>> = {
   [K in keyof A]: B[K] extends never
     ? A[K]
     : B[K] extends AnyObject
-    ? ModifyDeep<A[K], B[K]>
-    : B[K];
+      ? ModifyDeep<A[K], B[K]>
+      : B[K];
 } & (A extends AnyObject ? Omit<B, keyof A> : A);
 
 export type PartialPick<T, K extends keyof T> = {