MDC-Prosemirror

This package provides support for using the Unified ecosystem to parse markdown with Markdown Components syntax to Prosemirror JSON Schema.

Let's say you have a markdown string and want to use this markdown in Prosemirror. The traditional approach will be parsing markdown to HTML and passing this HTML to Prosemirror. Under the hood, this process does the following stuff:

In Unified:
markdown > mast (with remark-mdc) > hast > HTML
In prosemirror:
HTML > window.DOMParser > prosemirror.DOMParser > JSON Prosemirror Schema > Prosemirror Doc

This package intends to short-circuit the HTML part. It does this process:

In Unified:
markdown > mast (with remark-mdc) > (mdc-prosemirror) JSON Prosemirror Schema
In prosemirror:
JSON Prosemirror Schema > Prosemirror Doc

Setup

Add mdc-prosemirror dependency to your project:

# yarn
yarn add --dev @unpress/mdc-prosemirror
# npm
npm install --save-dev @unpress/mdc-prosemirror
# pnpm
pnpm add --save-dev @unpress/mdc-prosemirror

Usage

Convert markdown <> JSON Prosemirror Doc

// Get JSON doc from markdown
const jsonDoc = await markdownToDoc(markdown)

// Get markdown from JSON doc
const markdown = await docToMarkdown(jsonDoc)

That's it! ✨

Benchmarks

Run pnpm test:bench.

Parse and compile
~ 1.42x faster than using HTML

With prosekit
~ 2.23x faster than using HTML

It must be faster than that. The benchmark part using HTML lost the MDC syntax.

Notes

Considered alternatives

• https://github.com/ProseMirror/prosemirror-markdown
• https://github.com/marekdedic/prosemirror-unified and https://github.com/marekdedic/prosemirror-remark
• https://www.npmjs.com/package/@marduke182/prosemirror-markdown-serializer
• https://github.com/Sats365/ProsemirrorMarkdownParser
• https://github.com/zazuko/vue2-prosemirror-markdown/tree/master
• https://github.com/benrbray/noteworthy/tree/master/noteworthy-electron/src/common/markdown

References

• https://remark-mdc.nuxt.space/
• https://content.nuxt.com/
• https://github.com/nuxt-modules/mdc
• https://github.com/micromark/micromark-extension-frontmatter

Contributing

You can contribute to this module locally:

1. Clone this repository
2. Install dependencies using pnpm install
3. Start the development server using pnpm dev

License

MIT License

Copyright (c) NuxtLabs