行前导读

第一次参加铁人赛的你，先礼貌性来个自我介绍吧？！

嗨大家好！ This is Ian ， 24 岁身心理男。

Position ： RD —— web frontend engineer 。同时也是一名街舞舞者

高中开始了自己的街舞生涯，大学就算读资工系也是不负众望地把大一二读成热舞系资工社，大三因缘际会接触了网页工程後才挖掘出了我对於写程序的兴趣。

当时与身边街舞圈以及系上的朋友筹组了前端读书会，也在系上学长的介绍下加入了他们的新创公司，正式挂上了网页工程师的 RD 头衔。

目前在职场上闯荡刚满一年多，即便菜味浓郁，仍很庆幸自己依旧能保有对生活的热情，上午盯着萤幕上 dark mode 的 vscode 烧脑，晚上仍有余裕将我始终如一的兴趣（Dance～）当作副业培养＆训练自己。

现阶段的技能树点在前端居多，框架以 React 为主，对 Typescript 又爱又恨，打从心底尊敬能写出鬼一般的 utility-types 的人，但对一切工程相关的事物都保有兴趣，你可以把好奇心视作我的代名词，活到老学到死是我的信仰。

自介以上，简洁有力。

引发你写这一系列文章的契机是什麽？因为疫情在家闲的发慌吗？

嗯，对。

这一小段与文章的主轴不相关，读者不感兴趣可以直接略过，就当作我在家闲的发慌就好 ＸＤ

这就要让我们把时光回朔到我还在学长的新创公司就职的时候了，公司当时主要是接案公司，专案都以React开发为主，只要是与网页前端相关的事几乎是围绕着 React 运行。

老板当时希望在接案之余也能同时经营自家产品，而他构思出的第一个产品（我也不确定是不是第一个ＸＤ），就是一个协助网页前端开发者建立 富文本编辑器 （ Rich Text Editor ），同时提供模组化的样式与元件的 SaaS 服务，开发初期阶段因为要提供给公司使用所以是 based on React 的。

当时是我第一次接触 WYSIWYG ，好奇心使然去偷看了一下里面的 source-code 彷佛看见新大陆，与自己平常用 React 拼贴排版样式的 code 完全不同，满满的 dom 操作、监听器处理、演算法计算，我整个人都惊呆了！然後就用非常徒法炼钢的方式一行一行搞懂里面的 code 自己去实作出了一个小份的，虽然功能很阳春但还是成就感满满。

後来公司新进了一位大神同事，老板在面试时跟他描述了产品的构思後他就向大家介绍了 Slate.js 这个 open source library ，并建议产品的底层可以先直接依赖於 Slate 提供的服务，未来有必要时再抽换即可。

slate live demo

之後老板就把产品的建立全权交给他负责了，我也因为在忙其他的专案没有参与其中，对於 Slate 提供的服务也是一知半解，一直到我进了新公司，公司的产品又出现制作 Rich Text Editor 的需求後我才又回过头来研究并使用 Slate 。

从官网的 document 开始，上网找了相关的介绍与解析文章却总觉得不够详尽或者东缺西缺，最後到一点一点地翻找 source-code 里各个功能的实现逻辑。越陷越深的我，最後终於决定为它产出一份完整的源码解析文章，一方面完整自己的学习过程，另一方面也希望能为同样漫游其中的同道中人指出一盏明灯。

那我会从文章中学到些什麽呢？

首先我们会先将目光聚焦在整个网页 富文本编辑器 （ Rich Text Editor ） 的演进过程，历代的编辑器分别有哪些特色，它们又各自面临了哪些问题，而目前市场上的趋势我们也会一并纳入考量。

接着到了 slate.js 的介绍篇章後当然是由浅入深，从完整理解 slate.js 的使用概念，到深入进 source code 里，挖掘各功能是如何实现程序逻辑的。

同时在这样的过程中学习作者的开发思维：

• 整个专案是如何区分架构的，如此设计的原因又为何？
• 因应什麽样的情境去使用了哪些工具，选择这项工具的原因又是什麽？
• 有什麽先备知识是需要事先了解的，它们又能延伸出什麽样的概念与议题？

除了理解程序码本身以外，我们也希望能够理解程序码背後的设计原因（毕竟厉害的工程师总是能够换位思考嘛～

约法三章

在对我本人以及对整个系列文章内容有了大致上的了解後，我们接着来聊聊形式层面：

首先，就像上面一样，整篇系列文会穿插着问与答。

只要看到 Quote 就代表是提出问题的一方

如果提出的问题正好就是读者想问的，欢迎留言告诉我！我会 ... 很开心 ＸＤ 。

斜体文字 代表是笔者留的小注释。

粗体文字 代表会在之後的文章详细做解释。

如果有哪里解释不清楚或有误的都欢迎留言指正与讨论！

最後来附上 30 日的文章分类列表，咱们就明天见拉！

《 Pre-Start 篇》

包含本篇，统整了一切进入 WYSIWYG 世界所应有的先备知识

• Day1. Pre-Start × 微前言
• Day2. Pre-Start × WYSIWYG
• Day3. Pre-Start × WYSIWYG × contenteditable

《 Compare 篇 》

你知道 Web WYSIWYG 有分世代吗？
市场上形形色色的编辑器套件搞得开发者眼花撩乱，我们该如何快速理解它们并依照自己的需求做选择呢？
答案就收录在这个篇章里

• Day4. Compare × Generations
• Day5. Compare × G1
• Day6. Compare × G2 × Quill.js
• Day7. Compare × G2 × Draft.js
• Day8. Compare × G2 × Slate.js
• Day9. Compare × Final

《 slate 篇 》

至此正式开始我们深入 slate 原始码世界的旅程

本次的铁人赛仅会专注在 Slate mono-repo 里的 slate package ，未来有机会我们再开启其他 packages 的旅程

• Day10. slate × 架构蓝图

〈 slate-Interfaces 〉

最最最基本的入门门槛
当然要先从 slate 定义好的 Interfaces 开始介绍起！

• Day11. slate × Interfaces × Document-Model
• Day12. slate × Interfaces × Data-Model
• Day13. slate × Interfaces × Positioning
• Day14. slate × Interfaces × Ref
• Day15. slate × Interfaces × Iterator
• Day16. slate × Interfaces × CustomType

〈 slate-Immutable 〉

你应该听说过 Immutable 吧？没听过也没关系
本章节会从头探讨一次 JS Immutable 的议题，再带入到 slate 与它所选用的工具（ Immer.js ）之间的关系

• Day17. slate × Immutable
• Day18. slate × Immutable × Immer ＆ slate

〈 slate-Operation 〉

slate Operation 大解密！
我们会尽可能地深入进 source code 里探索 slate 究竟是如何实作出 Operation 的

• Day19. slate × Operation × WeakMap
• Day20. slate × Operation × Interface
• Day21. slate × Operation × Entrance
• Day22. slate × Operation × transform
• Day23. slate × Operation × L-transform

〈 slate-Normalizing 〉

你知道 Normalize （正规化）吗？你知道 slate 也自备 Normalize 的功能吗？
本章节一样尽可能地深入进 source code 里挖掘 slate Normalizing 的实作内容
笔者也准备了相关的流程图，让函式彼此间的关系与整个 slate 编辑器的运作流程更为清楚

• Day24. slate × Normalizing
• Day25. slate × Normalizing × Dirty-Path
• Day26. slate × Normalizing × normalizeNode
• Day27. slate × Normalizing × normalize

〈 slate-Transforms 〉

最後章节以 reference 的形式呈现
为开发 slate 的迷途羔羊们指点迷津

• Day28. slate × Transforms × Node
• Day29. slate × Transforms × Selection ＆ Text

《 Goal 结语 》

• Day30. Goal × 微结语