@unpress/mdc-prosemirror v0.1.10-beta.4
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:
- Clone this repository
- Install dependencies using
pnpm install
- Start the development server using
pnpm dev
License
Copyright (c) NuxtLabs
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago