Kagami: Typora-style live Markdown editing on ProseMirror

Hello everyone,

I’ve been building a Markdown editor component on top of ProseMirror for a while. The first version is now public (MPL-2.0), though it’s still very early, so I thought I’d share it here.

Repo: https://github.com/kkshinkai/kagami-md

Playground: https://kkshinkai.github.io/kagami-md/

The basic idea is Typora-style editing. You see the formatted document, and the Markdown syntax shows up when your cursor moves into it, then folds away again when you leave.

You can also drag blocks around, Notion-style. I spent a lot of time getting this to behave with nested structure, so when you drag into or out of lists and quotes, the block should land where the drop indicator says it will.

The other thing I cared a lot about is the Markdown itself:

  • Parsing follows CommonMark closely. Under the hood it uses a modified micromark.
  • Markdown recognition is always on, not just a one-off input rule. If you have x- text and delete the x, you get a list item, the same thing the Markdown means, not a paragraph that happens to contain - text. This holds even for really complex Markdown.
  • When you open an existing file, blocks you don’t touch are written back as they were. Blocks you do edit are re-serialized using the syntax they were originally written with (bullet character -/*/+, fence style, leading space, and so on), so the file stays close to what you actually wrote.

It’s very early alpha, and the APIs will change. There are probably still plenty of bugs, and parts of the code haven’t been fully refactored yet. Would love to hear what you think!