Glean 拾遗
Daily /2026-09-07 / Plugin-driven WYSIWYG Markdown editor powered by ProseMirror & remark

Plugin-driven WYSIWYG Markdown editor powered by ProseMirror & remark

Source github.com Glean’d 2026-09-07 06:00 Read 4 min
AI summary

Milkdown is a plugin-driven WYSIWYG Markdown editor framework rather than a monolithic editor component. It builds on ProseMirror for document state and editing, and uses remark to parse and serialize Markdown, aiming for the seamless Typora-style writing experience. Editor features, from commands and shortcuts to themes and UI, are distributed as plugins, so teams compose only what their product needs while staying on a single underlying data model. Written in TypeScript, it fits web teams looking to embed a Markdown editor or to assemble a custom rich-text editing surface.

Original · 4 min
github.com ↗
§ 1

Milkdown is a plugin-driven WYSIWYG Markdown editor for the web. It is inspired by desktop tools like Typora and builds on two well-known ecosystems: ProseMirror for editing and remark for Markdown processing. The editor can be embedded into a web application and lets users write in a live preview mode while still working with Markdown underneath.

Milkdown 是一个面向 Web 的插件驱动、所见即所得(WYSIWYG)Markdown 编辑器。它借鉴了 Typora 这类桌面写作工具的体验,并建立在两个成熟的生态之上:ProseMirror 负责编辑交互,remark 负责 Markdown 处理。开发者可以把它嵌入到 Web 应用中,让用户在实时预览的界面里写作,而底层的文档仍然是 Markdown。

§ 2

People who write Markdown every day often have to switch between raw syntax and a separate preview pane. Typora's well-known answer is to merge the two: the rendered result is the editing surface, so authors can stay in their flow. Milkdown applies the same idea to the browser and does so without sacrificing the portability of Markdown as the source format.

日常撰写 Markdown 的人,往往需要在原始语法和独立预览窗之间来回切换。Typora 给出的著名解法是让“所见”直接成为“所编辑”的界面,让作者聚焦内容本身。Milkdown 把这种体验带到了浏览器里,同时没有牺牲 Markdown 作为源格式的可移植性。

§ 3

The project title makes the central architectural choice obvious: plugin-driven. Features are not baked into one monolithic editor; instead, individual capabilities are provided as plugins, and each project composes the set it needs. The editing layer is delegated to ProseMirror, which handles document model, state, and UI interactions. Remark, in turn, brings a mature Markdown AST pipeline for parsing and serializing. Extending syntax can therefore happen on either side, by defining ProseMirror nodes and marks or by adding remark/unified plugins.

项目的定位决定了其核心架构方向:插件驱动。编辑器不会把所有功能都塞进一个整体,而是将能力拆成插件,让不同项目按需组合。编辑层交给 ProseMirror,由它负责文档模型、状态和 UI 交互;remark 则提供成熟的 Markdown AST 管线,负责解析与序列化。因此,扩展语法既可以在 ProseMirror 侧定义 node/mark,也可以从 remark/unified 插件入手。

§ 4

In a typical session, a Markdown string is parsed by remark into a syntax tree, then converted into a ProseMirror document and rendered as an interactive DOM view. When a user types, ProseMirror updates its internal state; when the document needs to be exported, the changes are serialized back to Markdown. The repository badge references @milkdown/core as one published package, suggesting a modular setup where the core editor and features are distributed separately.

一次典型的编辑会话大致如此:Markdown 文本先由 remark 解析成语法树,再转换为 ProseMirror 文档,最终渲染成可交互的 DOM 视图。用户输入时,ProseMirror 持续更新内部状态;需要导出时,文档再被序列化回 Markdown。仓库 badge 中出现了 @milkdown/core 这样的 npm 包,从中可以看出项目按模块化方式发布,核心编辑器与功能插件彼此分开交付。

§ 5

Milkdown is consumed as a library from an npm-based front-end project. The README links to the official documentation for detailed setup instructions, and the badge confirms that distribution goes through npm packages such as @milkdown/core. As a starting point, a developer would typically create an editor instance with a core package, select the appropriate plugins, and attach the editor to a DOM container.

Milkdown 以库的形式被 npm 前端项目使用。仓库 README 提供了官方文档链接,其中包含详细的配置方法;npm badge 也表明它是通过 npm 包(例如 @milkdown/core)分发的。最常见的起步方式是:用核心包创建编辑器实例,按需装配插件,最后把编辑器挂载到一个 DOM 容器上。

§ 6

Milkdown is strongest when Markdown itself is the desired document model and the experience needs a Typora-like flow on the web. It is not a replacement for full-featured rich text editors such as Google Docs. If users need complex collaboration, change tracking, or advanced table layouts that go far beyond Markdown, you will either have to write extra custom plugins or reach for a heavier editor. Plugin-driven design gives room to grow, but every customization is ongoing maintenance. Also, taking full advantage of the architecture requires familiarity with both ProseMirror and the remark/unified ecosystem.

当 Markdown 本身就是产品想要的文档模型、且用户在 Web 端需要近似 Typora 的写作体验时,Milkdown 最合适。它并不是 Google Docs 这类重型富文本编辑器的替代品。一旦遇到复杂的协同编辑、修订追踪或远超 Markdown 表达范围的高级表格布局,团队要么为此编写自定义插件,要么选用更重的编辑器。插件驱动固然带来扩展空间,但每一处自定义都是长期维护负担。另外,想充分发挥这套架构的能力,前提是熟悉 ProseMirror 与 remark/unified 生态。

Open source ↗