随笔分类 - Plugin
摘要：在编辑器最开始的架构设计上，我们就以MVC模式为基础，分别实现模型层、核心层、视图层的分层结构。在先前我们讨论的主要是模型层以及核心层的设计，即数据模型以及编辑器的核心交互逻辑，在这里我们以React为例，讨论其作为视图层的模式扩展设计。 开源地址: https://github.com/WindR
阅读全文
摘要：先前我们主要处理了浏览器复杂DOM结构的默认行为，以及兼容IME输入法的各种输入场景，以此需要针对性地处理输入法和浏览器兼容的行为。在这里我们关注于处理文本结构性变更行为的处理，主要是针对行级别的操作、文本拖拽操作等，分别处于文本结构结构以及变更操作扩展。 开源地址: https://github.
阅读全文
摘要：当在后端执行复杂的任务时，通常不能够在短时间内即时响应，例如文档导入、导出任务等。再加上当前的LLMs发展，我们可以实现文档的写作、质检、翻译等复杂任务，这些任务通常都比较耗时，这样就需要任务队列来管理这些异步任务的执行顺序和资源分配，而优雅停机则用以保证任务的完整处理。 AI Infra 系列相关
阅读全文
摘要：先前我们在选区模块的基础上，通过浏览器的组合事件来实现半受控的输入模式，这是状态同步的重要实现之一。在这里我们要关注于处理浏览器复杂DOM结构默认行为，以及兼容IME输入法的各种输入场景，相当于我们来Case By Case地处理输入法和浏览器兼容的行为。 开源地址: https://github.
阅读全文
摘要：先前在使用豆包的Web版时，发现在“帮我写作”模块中用以输入Prompt的模板输入框非常实用，既可以保留模板输入的优势，来调优指定的写作方向，又能够不失灵活地自由编辑。其新对话的输入交互也非常细节，例如选择“音乐生成”后技能提示本身也是编辑器的嵌入模块，不可以直接删除。 虽然看起来这仅仅是一个文本内
阅读全文
摘要：在先前我们我们实现了SSE流式输出的实现，以及基于向量检索的RAG服务，这些实现都可以算作是AI Infra的范畴。这里我们再来聊一下在SSE流式输出的基础上，将Markdown解析和富文本编辑器的渲染结合起来，实现编辑器的增量解析算法，同样属于文档场景下的Infra建设。 概述 在SSE流式输出的
阅读全文
摘要：在先前我们实现了编辑器选区和模型选区的双向同步，来实现受控的选区操作，这是编辑器中非常重要的基础能力。接下来我们需要在编辑器选区模块的基础上，通过浏览器的组合事件来实现半受控的输入模式，在这里我们需要处理浏览器复杂DOM结构默认行为，还需要兼容IME输入法的各种输入场景。 开源地址: https:/
阅读全文
摘要：RAG Retrieval-Augmented Generation是一种用于自然语言处理的模型架构，结合了检索Retrieval和生成Generation两种技术。而RAG服务在知识问答、代码生成、事实验证、专业领域检索等任务中表现出色，能够通过检索相关知识来增强生成模型的回答质量和准确性。 实际
阅读全文
摘要：在先前我们基于Range对象与Selection对象实现了基本的浏览器选区操作，并且基于编辑器数据模型设计了RawRange和Range对象两种选区模型。在这里我们需要将浏览器选区与编辑器选区关联起来，以此来确认应用变更时的操作区间，相当于我们需要基于DOM实现受控的选区同步。 开源地址: http
阅读全文
摘要：先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区，编辑器中应用变更时的操作范围，就是以模型选区为基准来实现的。在这里我们就以编辑器状态为基础，来设计模型选区的结构表达。 开源地址: https:/
阅读全文
摘要：先前我们提到了，数据模型的设计是编辑器的基础模块，其直接影响了选区模块的表示。选区模块的设计同样是编辑器的基础部分，编辑器应用变更时操作范围的表达，就需要基于选区模型来实现，也就是说选区代表的意义是编辑器需要感知在什么范围内执行变更命令。 开源地址: https://github.com/WindR
阅读全文
摘要：在富文本编辑器中，序列化与反序列化是非常重要的环节，其涉及到了编辑器的内容复制、粘贴、导入导出等模块。当用户在编辑器中进行复制操作时，富文本内容会被转换为标准的HTML格式，并存储在剪贴板中。而在粘贴操作中，编辑器则需要将这些HTML内容解析并转换为编辑器的私有JSON结构，以便于实现跨编辑器内容的
阅读全文
摘要：我们使用Git来管理项目的时候，可能会提交一些Blob的二进制文件，这些文件并不能像文本文件一样采用diff delta的形式进行版本控制。如果这些文件一直跟随master的主版本，那么就是属于有效的文件。 然而很多时候这些二进制文件会被删除重建，那么由于Git的特性，这些文件会一直留在Git的历史
阅读全文
摘要：在复杂应用中，例如低代码、富文本编辑器的场景下，数据结构的设计就显得非常重要，这种情况下的状态管理并非是redux、mobx等通用解决方案，而是需要针对具体场景进行定制化设计，那么在这里我们来尝试基于Immer以及OT-JSON实现原子化、可协同、高扩展的应用级状态管理方案。 描述 将Immer与O
阅读全文
摘要：数据模型的设计是编辑器的核心基础，其直接影响了选区模型、DOM模型、状态管理等模块的设计。例如在quill中的选区模型是index + len的表达，而slate中则是anchor + focus的表达，这些都是基于数据模型的设计而来的。因此我们从零实现的富文本编辑器就需要从数据模型的设计开始，之后
阅读全文
摘要：在先前的规划中我们是需要实现MVC架构的编辑器，将应用程序分为控制器、模型、视图三个核心组件，通过控制器执行命令时会修改当前的数据模型，进而表现到视图的渲染上。简单来说就是构建一个描述文档结构与内容的数据模型，并且使用自定义的execCommand对数据描述模型进行修改。以此实现的L1级富文本编辑器
阅读全文
摘要：富文本编辑器是允许用户在输入和编辑文本内容时，可以应用不同的格式、样式等功能，例如图文混排等，具有所见即所得的能力。与简单的纯文本编辑组件<input>等不同，富文本编辑器提供了更多的功能和灵活性，让用户可以创建更丰富和结构化的内容。现代的富文本编辑器也已经不仅限于文字和图片，还包括视频、表格、代码
阅读全文
摘要：Slate文档编辑器-Node节点与Path路径映射 在之前我们聊到了slate中的Decorator装饰器实现，装饰器可以为我们方便地在编辑器渲染调度时处理range的渲染，这在实现搜索替换、代码高亮等场景非常有用。那么在这篇文章中，我们聊一下Node节点与Path路径映射，这里的Node指的是渲
阅读全文
摘要：Canvas简历编辑器-选中绘制与拖拽多选交互方案 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM，并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上，关注于实现选中绘制与拖拽多选交互设计。 在线编辑: https://win
阅读全文
摘要：Slate文档编辑器-Decorator装饰器渲染调度 在之前我们聊到了基于文档编辑器的数据结构设计，聊了聊基于slate实现的文档编辑器类型系统，那么当前我们来研究一下slate编辑器中的装饰器实现。装饰器在slate中是非常重要的实现，可以为我们方便地在编辑器渲染调度时处理range的渲染。 在
阅读全文
浙公网安备 33010602011771号