Markdown

import { createPlateEditor } from 'platejs/react';
import { MarkdownKit } from '@/components/editor/plugins/markdown-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其它插件,
    ...MarkdownKit,
  ],
});

npm install platejs @platejs/markdown

import { MarkdownPlugin } from '@platejs/markdown';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...其它插件,
    MarkdownPlugin,
  ],
});

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin, remarkMention, remarkMdx } from '@platejs/markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';

const editor = createPlateEditor({
  plugins: [
    // ...其它 Plate 插件
    MarkdownPlugin.configure({
      options: {
        // 通过 remarkPlugins 添加语法扩展（如 GFM、数学、MDX）
        remarkPlugins: [remarkMath, remarkGfm, remarkMdx, remarkMention],
        // 如需自定义转换规则可配置 rules
        rules: {
          // date: { /* ... 规则对象 ... */ },
        },
      },
    }),
  ],
});

// 如需禁用 Markdown 粘贴处理：
const editorWithoutPaste = createPlateEditor({
  plugins: [
    // ...其它 Plate 插件
    MarkdownPlugin.configure(() => ({ parser: null })),
  ],
});

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin } from '@platejs/markdown';
// ...还需引入其它用于渲染的 Plate 插件

const markdownString = '# Hello, *Plate*!';

const editor = createPlateEditor({
  plugins: [
    // 必须包含 MarkdownPlugin
    MarkdownPlugin,
    // ...渲染反序列化元素所需的其它插件（如 HeadingPlugin、ItalicPlugin）
  ],
  // 初始内容通过反序列化生成
  value: (editor) =>
    editor.getApi(MarkdownPlugin).markdown.deserialize(markdownString),
});

// 假设 editor 已有内容
const markdownOutput = editor.api.markdown.serialize();
console.info(markdownOutput);

const specificNodes = [
  { type: 'p', children: [{ text: '仅序列化这一段。' }] },
  { type: 'h1', children: [{ text: '以及这个标题。' }] },
];

// 假设 editor 是你的 Plate 实例
const partialMarkdownOutput = editor.api.markdown.serialize({
  value: specificNodes,
});
console.info(partialMarkdownOutput);

{
  type: 'p',
  children: [
    { text: 'Today is ' },
    { type: 'date', date: '2025-03-31', children: [{ text: '' }] } // 叶节点需有 text
  ],
}

import type { MdMdxJsxTextElement } from '@platejs/markdown';
import { MarkdownPlugin, remarkMdx } from '@platejs/markdown';
// ... 其它导入

MarkdownPlugin.configure({
  options: {
    rules: {
      // 键名匹配规则：
      // 1. Plate 插件的 key 或 type
      // 2. mdast 节点类型
      // 3. MDX tag 名
      date: {
        // Markdown -> Plate
        deserialize(mdastNode: MdMdxJsxTextElement, deco, options) {
          const dateValue = (mdastNode.children?.[0] as any)?.value || '';
          return {
            type: 'date', // 你的 Plate 节点类型
            date: dateValue,
            children: [{ text: '' }], // 合法 Plate 结构
          };
        },
        // Plate -> Markdown（MDX）
        serialize: (slateNode): MdMdxJsxTextElement => {
          return {
            type: 'mdxJsxTextElement',
            name: 'date', // MDX 标签名
            attributes: [], // 可选，如 [{ type: 'mdxJsxAttribute', name: 'date', value: slateNode.date }]
            children: [{ type: 'text', value: slateNode.date || '1999-01-01' }],
          };
        },
      },
      // ...其它自定义元素规则
    },
    remarkPlugins: [remarkMdx /*, 其它如 remarkGfm 的插件 */],
  },
});

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin } from '@platejs/markdown';
import remarkGfm from 'remark-gfm';
// 导入 GFM 相关 Plate 插件
import { TablePlugin } from '@platejs/table/react';
import { TodoListPlugin } from '@platejs/list-classic/react'; // 对应任务列表的 List 插件
import { StrikethroughPlugin } from '@platejs/basic-nodes/react';
import { LinkPlugin } from '@platejs/link/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    TablePlugin,
    TodoListPlugin, // 或你当前使用的任务列表插件
    StrikethroughPlugin,
    LinkPlugin,
    MarkdownPlugin.configure({
      options: {
        remarkPlugins: [remarkGfm],
      },
    }),
  ],
});

const markdown = `
A table:

| a | b |
| - | - |

~~Strikethrough~~

- [x] Task list item

Visit https://platejs.org
`;

// 假设 `editor` 是已配置好的 Plate 编辑器实例
const slateValue = editor.api.markdown.deserialize(markdown);
// editor.tf.setValue(slateValue); // 可以设置编辑器内容

const markdownOutput = editor.api.markdown.serialize();
// markdownOutput 将包含 GFM 语法

import { createPlateEditor } from 'platejs/react';
import {
  CodeBlockPlugin,
  CodeLinePlugin,
  CodeSyntaxPlugin,
} from '@platejs/code-block/react';
import { MarkdownPlugin } from '@platejs/markdown';
import { MyCustomCodeBlockElement } from './my-custom-code-block'; // 你的自定义组件

const editor = createPlateEditor({
  plugins: [
    CodeBlockPlugin.withComponent(MyCustomCodeBlockElement), // 基础插件 + 自定义渲染
    CodeLinePlugin.withComponent(MyCustomCodeLineElement),
    CodeSyntaxPlugin.withComponent(MyCustomCodeSyntaxElement),
    MarkdownPlugin, // 用于 Markdown 转换
    // ... 其他插件
  ],
});

// MyCustomCodeBlockElement.tsx 内实现自定义渲染（如用 react-syntax-highlighter），并消费 PlateElement 的 props。

import { MarkdownPlugin } from '@platejs/markdown';
import { CodeBlockPlugin } from '@platejs/code-block/react';

MarkdownPlugin.configure({
  options: {
    rules: {
      // 自定义 mdast 的 'code' 类型反序列化方式
      code: {
        deserialize: (mdastNode, deco, options) => {
          return {
            type: KEYS.codeBlock, // Plate 的 type
            lang: mdastNode.lang ?? undefined,
            rawCode: mdastNode.value || '', // 直接存原始 code 文本
            children: [{ text: '' }], // Plate 元素必须要有子文本节点
          };
        },
      },
      // 还需要为 `code_block` 自定义 serialize 规则，将 `rawCode` 转回 mdast 'code' 节点
      [KEYS.codeBlock]: {
        serialize: (slateNode, options) => {
          return {
            // mdast 'code' 节点
            type: 'code',
            lang: slateNode.lang,
            value: slateNode.rawCode,
          };
        },
      },
    },
    // remarkPlugins: [...]
  },
});

// 你的自定义渲染组件（MyCustomCodeBlockElement）应读取 `rawCode` 属性

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin } from '@platejs/markdown';
import remarkMath from 'remark-math';
// Plate 数学渲染相关插件
import { MathPlugin } from '@platejs/math/react'; // 主 Math 插件

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    MathPlugin, // 渲染块级与行内公式
    MarkdownPlugin.configure({
      options: {
        remarkPlugins: [remarkMath],
        // 内置规则已支持 remark-math 产生的 'math' / 'inlineMath' mdast 节点到 Plate 的 'equation' 和 'inline_equation'
      },
    }),
  ],
});

const markdown = `
Inline math: $E=mc^2$

Block math:
$$
\\int_a^b f(x) dx = F(b) - F(a)
$$
`;

// 假设 `editor` 为已配置 Plate 编辑器实例
const slateValue = editor.api.markdown.deserialize(markdown);
// slateValue 包含 'inline_equation' 及 'equation' 节点

const markdownOutput = editor.api.markdown.serialize({ value: slateValue });
// 输出 Markdown 字符串包含 $...$ 和 $$...$$ 语法

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin, remarkMention } from '@platejs/markdown';
import { MentionPlugin } from '@platejs/mention/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    MentionPlugin,
    MarkdownPlugin.configure({
      options: {
        remarkPlugins: [remarkMention],
      },
    }),
  ],
});

const markdown = `
Mention: [Alice](mention:alice)
Mention with spaces: [John Doe](mention:john_doe)
Full name with ID: [Jane Smith](mention:user_123)
`;

// 假设 `editor` 是已配置好的 Plate 编辑器
const slateValue = editor.api.markdown.deserialize(markdown);
// 自动生成合适值与显示文本的 mention 节点

const markdownOutput = editor.api.markdown.serialize({ value: slateValue });
// mention 序列化后始终用链接格式: [Alice](mention:alice), [John Doe](mention:john_doe) 等

import { createPlateEditor } from 'platejs/react';
import { MarkdownPlugin, remarkMdx } from '@platejs/markdown';
import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ColumnPlugin,
    ColumnItemPlugin,
    MarkdownPlugin.configure({
      options: {
        remarkPlugins: [remarkMdx], // 多列 MDX 语法需要
      },
    }),
  ],
});

const markdown = `
<column_group>
  <column width="50%">
    左侧内容，宽度 50%
  </column>
  <column width="50%">
    右侧内容，宽度 50%
  </column>
</column_group>

<column_group>
  <column width="33%">第一列</column>
  <column width="33%">第二列</column>
  <column width="34%">第三列</column>
</column_group>
`;

// 假设 `editor` 为已配置好的 Plate 编辑器
const slateValue = editor.api.markdown.deserialize(markdown);
// 生成包含嵌套 column 元素的 column_group 节点

const markdownOutput = editor.api.markdown.serialize({ value: slateValue });
// 输出的 Markdown 保持列结构和宽度属性

                                             @platejs/markdown
          +--------------------------------------------------------------------------------------------+
          |                                                                                            |
          |  +-----------+        +----------------+        +---------------+      +-----------+       |
          |  |           |        |                |        |               |      |           |       |
 markdown-+->+ remark    +-mdast->+ remark plugins +-mdast->+ mdast-to-slate+----->+   nodes   +-plate-+->react elements
          |  |           |        |                |        |               |      |           |       |
          |  +-----------+        +----------------+        +---------------+      +-----------+       |
          |       ^                                                                      |             |
          |       |                                                                      v             |
          |  +-----------+        +----------------+        +---------------+      +-----------+       |
          |  |           |        |                |        |               |      |           |       |
          |  | stringify |<-mdast-+ remark plugins |<-mdast-+ slate-to-mdast+<-----+ serialize |       |
          |  |           |        |                |        |               |      |           |       |
          |  +-----------+        +----------------+        +---------------+      +-----------+       |
          |                                                                                            |
          +--------------------------------------------------------------------------------------------+

import { MarkdownPlugin, remarkMdx } from '@platejs/markdown';
import rehypeRaw from 'rehype-raw'; // 可能需要 VFile，确保兼容性
// import { VFile } from 'vfile'; // 如果 rehype-raw 需要 VFile

MarkdownPlugin.configure({
  options: {
    remarkPlugins: [
      remarkMdx,
      // 在 remark 流水线中使用 rehype 插件会比较复杂
      [
        rehypeRaw,
        {
          /* 配置项，如传递 vfile */
        },
      ],
    ],
    rules: {
      // 示例：对 rehype-raw 解析出来的 HTML 标签设置规则
      // mdastNode 结构取决于 rehype-raw 的输出
      element: {
        // 针对 rehype-raw 产出的“element”节点的通用处理
        deserialize: (mdastNode, deco, options) => {
          // 简化示例：请根据 mdastNode.tagName 及其属性做完整处理
          // 实际上常需要针对每一种 HTML 标签做独立规则
          if (mdastNode.tagName === 'div') {
            return {
              type: 'html_div', // 例如：映射到 Plate 的自定义元素 'html_div'
              children: convertChildrenDeserialize(
                mdastNode.children,
                deco,
                options
              ),
            };
          }
          // 其他标签回退处理
          return convertChildrenDeserialize(mdastNode.children, deco, options);
        },
      },
      // 如需要将Plate结构重新序列化为原始HTML，请补充相应规则
    },
  },
});

MarkdownPlugin.configure({
  options: {
    rules: {
      // 针对 mdast 的 'link' 类型的规则
      link: {
        deserialize: (mdastNode, deco, options) => {
          // 默认会生成 { type: 'a', url: ..., children: [...] }
          // 这里添加一个自定义属性
          return {
            type: 'a', // Plate 链接节点类型
            url: mdastNode.url,
            title: mdastNode.title,
            customProp: 'added-during-deserialize',
            children: convertChildrenDeserialize(
              mdastNode.children,
              deco,
              options
            ),
          };
        },
      },
      // 如序列化时需处理 customProp，可对 Plate 的 'a' 类型覆写规则
      a: {
        // 假定 'a' 就是 Plate 链接类型
        serialize: (slateNode, options) => {
          // 默认输出 mdast 的 'link'
          // 如需将 customProp 输出为 MDX 属性等，可自定义处理
          return {
            type: 'link', // mdast 类型
            url: slateNode.url,
            title: slateNode.title,
            // customProp: slateNode.customProp, // MDX 属性占位？
            children: convertNodesSerialize(slateNode.children, options),
          };
        },
      },
    },
    // ... 其他 remarkPlugins 配置 ...
  },
});

import { createPlateEditor, ParagraphPlugin, PlateLeaf } from 'platejs/react';
import { BoldPlugin } from '@platejs/basic-nodes/react';
import { CodeBlockPlugin } from '@platejs/code-block/react';
import { ParagraphElement } from '@/components/ui/paragraph-node'; // UI组件示例
import { CodeBlockElement } from '@/components/ui/code-block-node'; // UI组件示例

const editor = createPlateEditor({
  plugins: [
    ParagraphPlugin.withComponent(ParagraphElement),
    CodeBlockPlugin.withComponent(CodeBlockElement),
    BoldPlugin,
    /* ... 其他插件 ... */
  ],
});

import React, { useEffect } from 'react';
import { Plate, PlateContent, usePlateEditor } from 'platejs/react';
import { MarkdownPlugin } from '@platejs/markdown';
// 导入各类常用的 Plate 插件
import { HeadingPlugin } from '@platejs/basic-nodes/react';
// ... 还可以按需引入 BlockquotePlugin、CodeBlockPlugin、ListPlugin等
// ... 以及粗体、斜体等标记插件

export interface PlateMarkdownProps {
  children: string; // Markdown 内容
  remarkPlugins?: any[];
  components?: Record<string, React.ComponentType<any>>; // Plate 渲染组件（可选）
  className?: string;
}

export function PlateMarkdown({
  children,
  remarkPlugins = [],
  components = {},
  className,
}: PlateMarkdownProps) {
  const editor = usePlateEditor({
    plugins: [
      // 加入渲染 Markdown 所需的所有插件
      HeadingPlugin /* ... 其他插件 ... */,
      MarkdownPlugin.configure({ options: { remarkPlugins } }),
    ],
    components, // 传递自定义渲染组件
  });

  useEffect(() => {
    editor.tf.reset(); // 清空先前内容
    editor.tf.setValue(
      editor.getApi(MarkdownPlugin).markdown.deserialize(children)
    );
  }, [children, editor, remarkPlugins]); // 当 Markdown 内容或插件更改时重新反序列化

  return (
    <Plate editor={editor}>
      <PlateContent readOnly className={className} />
    </Plate>
  );
}

// 使用示例：
// const markdownString = "# Hello\nThis is *Markdown*.";
// <PlateMarkdown className="prose dark:prose-invert">
//   {markdownString}
// </PlateMarkdown>