Frontend · AI Programming · Markdown

MSFE: A Source-First Markdown Editor Framework That Stops Format Drift

By king王一帅 · Oct 29, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Editor teams keep fighting the same conversion and collaboration bugs. MSFE shows that treating Markdown as the source of truth eliminates formatting drift, keeps Git diffs clean, and makes AI edits precise, while remaining open source and extensible.

Summary

Most modern note apps and editors convert Markdown into JSON tree structures, turning Markdown into a print format and rewriting your source on every save. The author ran a three-year deep dive into these conversion losses. MSFE (Markdown Source-First Editor) flips the model: the Markdown source is the document itself. Complex elements like tables and diagrams live inside code fences, which render as interactive widgets in the editor but remain valid code blocks everywhere else. The editor uses CodeMirror 6 with decorations to hide markers and render rich layouts, and three views (document, live, source) are just different presentations of the same text, so switching does no conversion. Collaboration syncs the raw Markdown text over Yjs, avoiding the structural deletions and lost edits seen in y-prosemirror. Performance is handled with incremental parsing that skips unchanged regions, cutting syntax tree work by 98% on large files. The framework is packaged with a Tiptap-style extension API, includes a prebuilt MD Editor, and offers both MIT-licensed exports and commercial template-based Word/PDF output with explicit loss reports.

Takeaways

— The comparison covers 14 editors; most popular ones (Notion, Feishu, SiYuan, AFFiNE, AppFlowy) edit block or document tree data, converting Markdown only on import/export, while Obsidian, MiaoYan, and Logseq edit the Markdown source directly, and others run dual editors.

— prosemirror-markdown 1.13.4 forces * for italics and ** for bold, renumbers ordered lists, adds backslash escapes to symbols, and throws on unknown syntax like tables or footnotes.

— Tiptap's markdown extension (3.30) outputs empty strings for nodes without a renderer, silently dropping content; its docs admit limited annotation support and single-child table cells.

— Markdown table cells accept only inline content; block elements like lists or code inside a cell break the table parser, splitting rows and pushing content outside.

— Chinese punctuation directly after a bold marker (e.g., **“quoted”**) disables the emphasis because CommonMark requires non-punctuation boundaries, a daily problem for Chinese writers.

— The Yjs collaboration tests (Yjs 13.6.33, y-prosemirror 1.3.7) show concrete data loss: splitting a paragraph while a peer inserts into the second half moves the insertion to the end of the first half; splitting while a peer bolds the second half loses the bold; splitting while a peer deletes from the second half resurrects the text; merging with a concurrent insert into the second paragraph loses that insert.

— y-prosemirror replaces the entire document on every remote update, as stated in its CAVEATS, and can delete parent nodes when the resulting structure is invalid.

— MSFE's incremental Lezer parser with reuse proof reduced syntax tree accesses by 98.7% and tree comparisons by 99.6% on a 1 MiB document after 20 consecutive inputs, with fallback to full comparison when the proof fails.

— The framework is MIT-licensed, with commercial components for collaboration, AI review, and annotations; the core is framework-agnostic with Vue and React bindings.

Conclusions

Source-first design decouples presentation from content: the same Markdown text can appear as WYSIWYG, live preview, or raw source without any transformation, which directly addresses the dual-editor complexity and its lossy conversions.

Storing complex blocks as code fences with structured data is a pragmatic compromise; it preserves the content for external Markdown tools while enabling rich editing inside the fence, but it relies on convention rather than a standard syntax.

The collaboration results suggest that plain-text CRDTs (syncing the Markdown string) avoid the structural conflicts of tree-based CRDTs simply because any text is a valid document; the trade-off is that concurrent edits to the same region may require manual merge, as noted.

The performance numbers on incremental parsing show that editing large Markdown files can be made near-instant, but only with careful parser-level reuse; the approach generalizes to streaming AI output, which the author ties into the same parser.

Concepts & terms

Source-first editing

An editor design where the underlying plain-text source (Markdown) is the authoritative document model. The editor renders rich views by decorating the text with overlays, never converting to a separate tree, so the source remains intact and any change is directly reflected.

Reuse proof

A parser technique that records which syntax tree nodes were reused from a previous parse without changes. The editor uses this to skip re-processing unchanged sections, cutting the work needed for large documents.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗