程序员|任由文字肆意流淌，更自由的开源 Markdown 编辑器( 二 )

Prosemirror：一个用于在 web 端构建富文本编辑器的工具包
Remark：正确的 Markdown 解析器
TypeScript：以 TypeScript 编写
Emotion：用于构建样式的强大的 css in js 工具
Prism：代码块支持
Katex：高性能的渲染数学公式

富文本编辑器本身是一个天坑。虽然 ContentEditable 看起来很美好，但实际用起来就会发现问题层出不穷。因此我们基于 Prosemirror 来实现富文本编辑器。因为它足够成熟、久经工业的锤炼，并且拥有良好的架构和 API 设计。
三、架构Prosemirror 的核心逻辑其实类似于 React ，它通过一种函数式的数据映射来体现编辑器的 UI 和内部状态的关系，如图：
编辑器通过 EditorState 来保存当前状态，并由 EditorState 产生出 EditorView ，即 UI 视图。用户在 UI 视图上进行的操作最终会产生 DOM event ，例如：input 事件、click 事件。 DOM event 事件会产生 Transaction ，代表了对 State 的修改，类似于 Redux 或 Vuex 中的 Action 。这些 Transaction 会与原来的 EditorState 进行计算，产生新的 EditorState ，如此循环。
Prosemirror 通过这样的方式将编辑器中的每个状态以 EditorState 的方式保存了下来，它是一颗树状结构。而有一点编译原理基础的朋友都知道，任何编程语言都有对应的 AST（抽象语法树）。因此我们需要的就是建立 Prosemirror 中的 EditorState 与 Markdown 的抽象语法树之间的联系。 Remark 完美契合我们的需求，因为它有设计良好的 AST ，并且易于扩展自己的语法。
这样一来 Milkdown 的架构也逐渐清晰：

Markdown <-> Remark AST <-> Prosemirror State <-> UI

四、结语在开始这个项目前，我尝试过各种各样的 Markdown 编辑器，但没有找到一款特别满意的。因为它们都是闭源，而且功能由开发商提供，有的功能太过于臃肿、有的又太过简单。既然这样，我索性自己做一款能够轻松定制功能，非程序员也能轻松使用的 Markdown 编辑器，也就有了大家看到的 Milkdown 。
希望开源的 Milkdown 让用户有更自由的选择，打破 Markdown 编辑器的“垄断” 。开源不易如果 Milkdown 对您有帮助，也请给个 Star? 。
最后，感谢 HelloGithub 的支持和帮助。 Milkdown 先是有幸入选了第 65 期月刊，然后受邀合作了这篇文章，让更多人知道我的开源项目。