Phodit：自己动手打造智能的 Markdown 编辑器

最近，我在写一个新的 markdown 内容，过程中发现没有合适的 markdown 客户端。于是，我希望为自己定制一款全新的编辑器，原因有许多吧，大抵是没有一个编辑器能满足我的需求。

竞品分析

我的需求简单的来说，就是可以打开一个 markdown 工程，在这个编辑器里可以做 markdown 相关的事，比如转换成 docx、将 markdown 作为 slide 等等。

• MacDown 的问题是不能作为工程能管理，也就是说无法同时处理多个文件。
• Sublime + Markdown 插件，这是我过去来写电子书的工具。尽管加上插，但是它在提供不了 markdown 实时预览功能。
• 在线工具相比就更加麻烦了。

首先，我想要的不再只是一个简单的编辑器，它应该完成 Markdown 相关的功能。

Markdown First

于是，第一部分的 Task 就是作为一个编辑器而存在。而为了降低系统的复杂度，我尝试在项目中使用微前端架构——并且是为了使用而使用。

对应的技术栈如下：

• Stencil.js + Web Components 完成了 Terminal 的关闭功能
• SimpleMDE + CodeMirror 改造了编辑器
• React.js 完成了左侧导航
• 基于 xterm.js + node-pty 的 Terminal
• marked 用于 Markdown Parser
• lunr 作为 search engine
• echoesworks 作为 Slides 引擎

目前，总的来说功能还比较简单。基本上整个应用的架构模式是，发布/订阅模式。

如，触发了左侧的 treeview 点击事件之后，treeview 组件通过 customEvent 告诉 renderer 有点击事件，再由 renderer 告诉 electron 应用执行什么操作。因此 renderer 作为整个应用的中介存在。

然而，这也导致了整个系统需要重构。事件机制过于复杂，需要进一步优化。但是总的来说，这也是我想遇到的情况——找到一个有意思的问题，然后解决它。