Markdown Kit

Features

• Markdown to Plate JSON: Convert Markdown strings to Plate's editable format (deserialize).
• Plate JSON to Markdown: Convert Plate content back to Markdown strings (serialize).
• Safe by Default: Handles Markdown conversion without dangerouslySetInnerHTML.
• Customizable Rules: Define how specific Markdown syntax or custom Plate elements are converted using rules. Supports MDX.
• Extensible: Utilize remark plugins via the remarkPlugins option.
• Compliant: Supports CommonMark, with GFM (GitHub Flavored Markdown) available via remark-gfm.
• Round-Trip Serialization: Preserves custom elements through MDX syntax during conversion cycles.

Usage

Installation

The fastest way to add Markdown functionality is with the MarkdownKit, which includes pre-configured MarkdownPlugin with essential remark plugins for Plate UI compatibility.

Add Kit

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

const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...MarkdownKit,
  ],
});