Merge pull request #4486 from udecode/fix/md1

Author: zbeyens

.changeset/clever-owls-fix.md

@@ -0,0 +1,5 @@
+---
+"@platejs/markdown": patch
+---
+
+Fix custom plugin key handling in markdown serialization/deserialization. Ensures plugin keys are properly resolved throughout the conversion process for custom plugin configurations.

.gitignore

@@ -2,7 +2,6 @@
 
 # Allow claude to read these files
 !.*
-apps/www/src/app/dev
 apps/www/src/app/api/ai
 apps/www/public/rd
 **/tsconfig.tsbuildinfo

apps/www/src/app/dev/c.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import React from "react";
+
+import { MarkdownPlugin } from "@platejs/markdown";
+import { ElementApi, normalizeNodeId, TextApi } from "platejs";
+import { usePlateViewEditor } from "platejs/react";
+import { useFilePicker } from "use-file-picker";
+
+import { Button } from "@/components/ui/button";
+import { BaseEditorKit } from "@/registry/components/editor/editor-base-kit";
+import { MarkdownKit } from "@/registry/components/editor/plugins/markdown-kit";
+import { basicBlocksValue } from "@/registry/examples/values/basic-blocks-value";
+import { basicMarksValue } from "@/registry/examples/values/basic-marks-value";
+import { codeBlockValue } from "@/registry/examples/values/code-block-value";
+import { tableValue } from "@/registry/examples/values/table-value";
+import { EditorView } from "@/registry/ui/editor";
+
+
+
+const withCustomType = (value: any) => {
+  const addCustomType = (item: any): any => {
+    if (ElementApi.isElement(item)) {
+      return {
+        children: item.children.map(addCustomType),
+        type: 'custom-' + item.type
+      }
+    }
+    if (TextApi.isText(item)) {
+      const { text, ...rest } = item
+      const props: any = {}
+      for (const key in rest) {
+        const value = rest[key]
+        const newKey = 'custom-' + key
+        props[newKey] = value
+      }
+
+      return {
+        ...props,
+        text: text.replace(/^custom-/, '')
+      }
+    }
+  };
+
+  return value.map(addCustomType)
+}
+
+const withCustomPlugins = (plugins: any[]): any[] => {
+  const newPlugins: any[] = []
+
+  plugins.forEach(plugin => {
+    newPlugins.push(plugin.extend({
+      node: {
+        type: 'custom-' + plugin.key
+      }
+    }))
+  })
+
+  return newPlugins
+}
+
+
+let index = 0
+
+const value = normalizeNodeId([
+  ...withCustomType(basicBlocksValue),
+  ...withCustomType(basicMarksValue),
+  ...withCustomType(tableValue),
+  ...withCustomType(codeBlockValue),
+], {
+  idCreator() {
+    return 'id-' + index++;
+  },
+});
+
+
+
+export const EditorViewClient = () => {
+
+  const editor = usePlateViewEditor({
+    plugins: [
+      ...withCustomPlugins(BaseEditorKit),
+      ...MarkdownKit
+    ],
+    value: value,
+  });
+
+  const getFileNodes = (text: string,) => {
+
+    return editor.getApi(MarkdownPlugin).markdown.deserialize(text);
+  };
+
+  const { openFilePicker: openMdFilePicker } = useFilePicker({
+    accept: ['.md', '.mdx'],
+    multiple: false,
+    onFilesSelected: async ({ plainFiles }) => {
+      const text = await plainFiles[0].text();
+
+      const nodes = getFileNodes(text);
+      console.log("🚀 ~ onFilesSelected: ~ nodes:", nodes)
+    },
+  });
+
+
+  return <>
+    <EditorView variant="none" className="px-10" editor={editor} />
+
+
+    <div className="mt-10 px-10">
+      <Button className="mr-10" onClick={
+        () => {
+          console.log(editor.getApi(MarkdownPlugin).markdown.serialize());
+        }
+      }>Serialize</Button>
+
+
+      <Button onClick={openMdFilePicker}>Deserialize</Button>
+    </div>
+  </>
+};

apps/www/src/app/dev/layout.tsx

@@ -0,0 +1,7 @@
+export default function DevLayout(props: { children: React.ReactNode }) {
+  return (
+    <>
+      <main>{props.children}</main>
+    </>
+  );
+}

apps/www/src/app/dev/page.tsx

@@ -0,0 +1,11 @@
+
+
+import { EditorViewClient } from './c';
+
+export default async function DevPage() {
+  return (
+    <main>
+      <EditorViewClient />
+    </main>
+  );
+}

packages/markdown/src/lib/deserializer/convertTextsDeserialize.ts

@@ -1,3 +1,5 @@
+import { getPluginType } from 'platejs';
+
 import type { MdDelete, MdEmphasis, MdStrong } from '../mdast';
 import type { MdDecoration } from '../types';
 import type { DeserializeMdOptions } from './deserializeMd';
@@ -11,10 +13,13 @@ export const convertTextsDeserialize = (
   options: DeserializeMdOptions
 ) => {
   return mdastNode.children.reduce((acc: any, n: any) => {
+    const key = mdastToPlate(options.editor!, mdastNode.type)
+    const type = getPluginType(options.editor!, key)
+
     acc.push(
       ...buildSlateNode(
         n,
-        { ...deco, [mdastToPlate(options.editor!, mdastNode.type)]: true },
+        { ...deco, [type]: true },
         options
       )
     );

packages/markdown/src/lib/deserializer/deserializeMd.ts

@@ -1,7 +1,13 @@
 import type { Root } from 'mdast';
 import type { Plugin } from 'unified';
 
-import { type Descendant, type SlateEditor, KEYS, TextApi } from 'platejs';
+import {
+  type Descendant,
+  type SlateEditor,
+  getPluginKey,
+  KEYS,
+  TextApi,
+} from 'platejs';
 import remarkParse from 'remark-parse';
 import { unified } from 'unified';
 
@@ -92,7 +98,7 @@ export const deserializeMd = (
     TextApi.isText(item)
       ? {
           children: [item],
-          type: editor.getType(KEYS.p),
+          type: getPluginKey(editor, KEYS.p) ?? KEYS.p,
         }
       : item
   );

packages/markdown/src/lib/deserializer/mdastToSlate.ts

@@ -1,6 +1,6 @@
 import type { Root } from 'mdast';
 
-import { type Descendant, KEYS } from 'platejs';
+import { type Descendant, getPluginKey, KEYS } from 'platejs';
 
 import type { MdRoot } from '../mdast';
 import type { DeserializeMdOptions } from './deserializeMd';
@@ -40,7 +40,9 @@ const buildSlateRoot = (
       results.push(
         ...Array.from({ length: count }).map(() => ({
           children: [{ text: '' }],
-          type: KEYS.p,
+          type: options.editor
+            ? (getPluginKey(options.editor, KEYS.p) ?? KEYS.p)
+            : KEYS.p,
         }))
       );
     }

packages/markdown/src/lib/rules/__snapshots__/defaultRule.spec.ts.snap

@@ -7,9 +7,7 @@ Paragraph
 "
 `;
 
-exports[`defaultRules should serialize default keys 1`] = `
-"# Heading 1
-
-Paragraph
+exports[`defaultRules should serialize custom mark 1`] = `
+"Paragraph**text**
 "
 `;

packages/markdown/src/lib/rules/defaultRule.spec.ts

@@ -1,31 +1,71 @@
 import { H1Plugin } from '@platejs/basic-nodes/react';
+import { BoldPlugin } from '@platejs/basic-nodes/react';
 import { createPlateEditor, ParagraphPlugin } from 'platejs/react';
 
+import { deserializeMd } from '../deserializer';
 import { MarkdownPlugin } from '../MarkdownPlugin';
 import { serializeMd } from '../serializer';
 
 describe('defaultRules', () => {
-  it('should serialize default keys', () => {
+  it('should serialize custom keys', () => {
     const nodes = [
       {
         children: [{ text: 'Heading 1' }],
-        type: 'h1',
+        type: 'custom-h1',
       },
       {
         children: [{ text: 'Paragraph' }],
-        type: 'p',
+        type: 'custom-p',
       },
     ];
 
     const editor = createPlateEditor({
-      plugins: [MarkdownPlugin, H1Plugin, ParagraphPlugin],
+      plugins: [
+        MarkdownPlugin,
+        H1Plugin.configure({
+          node: { type: 'custom-h1' },
+        }),
+        ParagraphPlugin.configure({
+          node: { type: 'custom-p' },
+        }),
+      ],
     });
 
     const result = serializeMd(editor, { value: nodes });
     expect(result).toMatchSnapshot();
   });
 
-  it('should serialize custom keys', () => {
+  it('should serialize custom mark', () => {
+    const nodes = [
+      {
+        children: [
+          { text: 'Paragraph' },
+          { 'custom-bold': true, text: 'text' },
+        ],
+        type: 'custom-p',
+      },
+    ];
+
+    const editor = createPlateEditor({
+      plugins: [
+        MarkdownPlugin,
+        H1Plugin.configure({
+          node: { type: 'custom-h1' },
+        }),
+        ParagraphPlugin.configure({
+          node: { type: 'custom-p' },
+        }),
+        BoldPlugin.configure({
+          node: { type: 'custom-bold' },
+        }),
+      ],
+    });
+
+    const result = serializeMd(editor, { value: nodes });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should deserialize custom keys', () => {
     const nodes = [
       {
         children: [{ text: 'Heading 1' }],
@@ -40,12 +80,50 @@ describe('defaultRules', () => {
     const editor = createPlateEditor({
       plugins: [
         MarkdownPlugin,
-        H1Plugin.configure({ key: 'custom-h1' as any }),
-        ParagraphPlugin.configure({ key: 'custom-p' as any }),
+        H1Plugin.configure({
+          node: { type: 'custom-h1' },
+        }),
+        ParagraphPlugin.configure({
+          node: { type: 'custom-p' },
+        }),
       ],
     });
 
-    const result = serializeMd(editor, { value: nodes });
-    expect(result).toMatchSnapshot();
+    const result = deserializeMd(editor, '# Heading 1\nParagraph');
+    expect(result).toEqual(nodes);
+  });
+
+  it('should deserialize custom mark', () => {
+    const nodes = [
+      {
+        children: [{ text: 'Heading 1' }],
+        type: 'custom-h1',
+      },
+      {
+        children: [
+          { text: 'Paragraph' },
+          { 'custom-bold': true, text: 'text' },
+        ],
+        type: 'custom-p',
+      },
+    ];
+
+    const editor = createPlateEditor({
+      plugins: [
+        MarkdownPlugin,
+        H1Plugin.configure({
+          node: { type: 'custom-h1' },
+        }),
+        ParagraphPlugin.configure({
+          node: { type: 'custom-p' },
+        }),
+        BoldPlugin.configure({
+          node: { type: 'custom-bold' },
+        }),
+      ],
+    });
+
+    const result = deserializeMd(editor, '# Heading 1\nParagraph**text**');
+    expect(result).toEqual(nodes);
   });
 });