写在前面 本系列会实现一个简单的react，包含最基础的首次渲染，更新，hook，lane模型等等，本文是本系列的第一篇。这对于我也是一个很大的挑战，不过这也是一个学习和进步的过程，希望能坚持下去，一

写在前面 本系列会实现一个简单的react，包含最基础的首次渲染，更新，hook，lane模型等等，本文是本系列的第一篇。这对于我也是一个很大的挑战，不过这也是一个学习和进步的过程，希望能坚持下去，一

进入富文本编辑器的神奇世界，探索Selection与Range的妙用！无论你是一名开发者还是一个对技术充满好奇心的爱好者，这篇技术博客将为你揭开富文本编辑器背后的秘密。

什么是用户交互层 在文档编辑器的架构上，直接和用户交互相关的逻辑模块，我们会称为用户交互层，一般涵盖 内容呈现 选区 光标 用户输入 悬浮操作菜单 等 竞品对比 效果对比 选中的效果，我个人认为排名为

选区 选区系统，是文档操作里面最重要的一个模块 我们先看prosemirror selection的数据结构 光标位置 我们看几个例子再说明具体的字段意义 只有光标 from=to=head=anch

NextJs从0-1实现一个博客系统，包含开发，部署，SEO，安全，服务器，Nginx, PM2全部内容

尽管 Web Components 可能还没有全面的进入研发者的视野，现在还备受争议，但是它已经被很多大厂已经直接或者间接将它用于实践，并且在市场上也出现了很多 Web Components 库。。。

Tiptap 可以很轻松的接入各种框架，几分钟就可以创建好富文本编辑器。与各种比较成熟的富文本框架对比，Tiptap 的可定制化程度极高，我们可以自己去制富文本的每个方面，并且拥有丰富的扩展

本教程中，将使用之前打包发布的下拉组件为例，将它在 React 应用中运用起来。废话不多说，Come on body，let's go body。