25/02/23

Backup/基于MVC模式的编辑器架构设计.md

@@ -386,6 +386,7 @@ Delta
 `utils`模块则封装了对于`op`以及`delta`的辅助方法，`clone`的相关方法实现了诸如`op`、`delta`等深拷贝以及对等方法，当然由于我们新的设计则无需引入`lodash`的相关方法。此外还实现了一些数据的判断以及格式化方法，例如数据的起始/结束字符串判断、分割`\n`的方法等等。
 
 ### React
+`React`模块实现了视图层的适配器，提供了基本的`Text`、`Void`、`Embed`等类型的节点，以及相关的渲染模式，相当于封装了符合`Core`模式的调度范式。并且还提供了相关包装的`HOC`节点，以及`Hooks`等方法，以此来实现插件的视图层扩展。
 
 ```
 React
@@ -396,7 +397,16 @@ React
  └── ...
 ```
 
+`hooks`模块实现了获取编辑器实例的方法，方便在`React`组件中获取编辑器实例，当然这依赖于我们的`Provider`组件。此外还实现了`readonly`的状态方法，这里的只读状态维护本身是维护在插件中的，但是后来将其提取到了`React`组件中，这样能更容易切换编辑/只读状态。
+
+`model`模块实现了编辑器内建的数据模型，实际上是对应了`Core`层的`State`，即`Block/Line/Leaf`的数据模型，这其中除了`DOM`节点需要遵循的模式外，还实现了诸如脏`DOM`检测的方式等。此外这里还存在了特殊的`EOL`节点，是个特殊的`LeafModel`，会根据策略调度行尾节点的渲染。
+
+`plugin`模块实现了编辑器的插件化机制，这里的插件化主要是扩展了基础的插件定义和类型，例如在`Core`中定义的插件方法类型返回值是`any`，在这里我们需要将其定义为具体的`ReactNode`类型。此外，这里还实现了渲染时的插件，即没有在核心层维护状态的类型，主要是`Wrap`类型的节点插件化。
+
+`preset`模块预设了编辑器对外暴露的`API`组件，诸如编辑器的`Context`、`Void`、`Embed`、`Editable`组件等等，主要是提供构建编辑器视图的基础组件，以及插件层的组件扩展等。当然还封装了很多交互实现，例如自动聚焦、选区同步、视图刷新适配器等等。
+
 ### Utils
+`Utils`模块实现了诸多通用的工具函数，主要是处理编辑器内的通用逻辑，例如防抖、节流等等，也有处理`DOM`结构的辅助方法，还有事件分发的处理方法、事件绑定的装饰器等，以及诸如列表的操作、国际化、剪贴板操作等等。
 
 ```
 Utils
@@ -406,11 +416,15 @@ Utils
  └── ...
 ```
 
+## 总结
+在这里我们实现了简单的编辑器`MVC`架构示例，然后在此基础上自然而然地抽象出了编辑器的核心模块、数据模型、视图层、工具函数等，并且将其做了简单的叙述。在后续我们会描述编辑器的数据模型设计，介绍我们的`Delta`数据结构方法，以及在编辑器中的相关应用场景。数据结构是非常重要的设计，因为编辑器的核心操作都是基于数据模型的，若不能够理解数据结构的设计，则会导致难以理解编辑器的很多操作模型。
+
 ## 每日一题
 
 - <https://github.com/WindRunnerMax/EveryDay>
 
 ## 参考
 
+- <https://developer.mozilla.org/en-US/docs/Web/API/EditContext>
 - <https://www.oschina.net/translate/why-contenteditable-is-terrible>
 - <https://stackoverflow.com/questions/78268797/how-to-prevent-ime-input-method-editor-to-mutate-the-contenteditable-element>