Blog

Blog

PHODAL

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 作为整个应用的中介存在。

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

新功能

Slide

将 Markdown 作为分享的 Slide 功能,已经实现了一部分。尽管仍然还有些问题,但是正在进行改进。不过,我猜测应该是我设计有些问题。

总之,在写的过程中,我似乎想到一个方案了。

右键搜索

搜索作为写文章的一个常用功能,便把它集成到了编辑器里了。只需要右键文本:

选中你需要的搜索引擎,即可进行下一步搜索。

走向智能化

对于整个应用来说,我最希望解决的是自动化一些文本操作,比如生成一些语句,但是就目前而言难度比较大。

目前,我实现的第一个功能是找到我相关的文章,然后自动完成。只需要输入个 “《 ” 名号就可以了。

这部分是作为熟悉 CodeMirror 和架构设计的初步。

下一步,则是使用 Web Worker 进行更负责的计算功能。不过,目前遇到一些 TypeScript 的编译问题,需要进一步解决。

End

不说了,这是项目的 GitHub 地址:https://github.com/phodal/phodit

网站:https://www.phodit.com/

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签