WindRunnerMax-CSDN博客

原创从零实现富文本编辑器#14-编辑器历史变更管理与状态回溯

本文讨论了富文本编辑器中实现历史记录管理的两种方法：全量快照和基于变更的操作记录。重点分析了基于操作记录的实现方式，包括本地编辑场景下的撤销/重做功能，以及协同编辑场景中远程变更处理的复杂性。文章通过代码示例展示了如何记录和反转操作变更，并介绍了操作合并的策略。同时探讨了特殊场景（如图片上传）下的状态管理问题，提出了通过操作变换或合并操作来优化用户体验的方案。

2026-06-15 10:59:45 470

原创基于 Markdown-It 的无序列表折叠插件

文章摘要：本文探讨了在Markdown文档系统中实现折叠列表的技术方案。通过分析API文档的需求特点，提出利用HTML原生<details>和<summary>元素来实现无序列表的折叠展示效果。文章详细解析了无序列表到折叠结构的转换规则，包括将ul元素转换为block元素、将符合条件的li元素转换为details元素等。同时比较了在Markdown解析器MarkdownIt中实现该功能的两种技术路径：渲染时处理和解析时处理，并讨论了各自的优缺点。这种方案既能满足开发者阅读文档的需求

2026-05-06 11:02:10 295

原创从零实现富文本编辑器#13-React非编辑节点的内容渲染

本文讨论了富文本编辑器中非编辑节点的内容渲染实现，主要包括占位节点、只读模式和插件渲染三个方面。在占位节点部分，分析了Quill和Slate的不同实现方式，提出了基于伪元素和React组件的解决方案，特别处理了IME输入时的显示问题。只读模式通过控制contentEditable属性和上下文状态实现，确保视图与状态同步。插件渲染模式则针对复杂节点类型（如超链接、引用块）提出了状态无关的渲染策略，优化了用户体验。文章还提供了相关开源项目的链接和系列教程参考，为开发者实现富文本编辑器提供了实用指导。

2026-04-13 10:41:10 364

原创从零实现富文本编辑器#12-React可编辑节点的组件预设

本文讨论了富文本编辑器中编辑节点的组件预设实现，重点分析了零宽字符在选区模型和输入法处理中的关键作用。通过对比飞书文档等商业产品，阐述了零宽字符在Void节点和Embed节点中的不同应用场景，包括独占行节点处理、混合选区支持以及输入法兼容性问题。文章还介绍了编辑器框架如何通过预设组件结构（如HOC包装）来规范DOM行为，同时保持开发者自定义的灵活性。开源项目BlockKit提供了相关实现参考，展示了从零构建富文本编辑器的完整思路。

2026-03-23 10:52:24 534

原创从零实现富文本编辑器#11-Immutable状态维护与增量渲染

本文探讨了富文本编辑器中增量更新与不可变状态的实现策略。首先分析了全量更新状态在性能上的不足，提出了基于行级不可变状态的优化方案，通过复用未变更的LineState对象减少重建开销。文章详细阐述了如何通过Delta操作实现行级别的状态更新，包括保留、删除和新增行状态的策略。同时讨论了LeafState与LineState的映射关系，以及如何利用\n节点作为状态映射的关键。最后提及了React视图层中key值维护的重要性，为后续实现高效渲染奠定了基础。这些优化策略旨在提升大型文档编辑时的性能表现。

2026-02-09 10:52:54 1009

原创从零实现富文本编辑器#10-React视图层适配器的模式扩展

本文介绍了基于MVC模式的富文本编辑器视图层设计，重点讨论了React作为视图层的适配方案。文章指出复用现有视图框架可以避免重新设计渲染逻辑，但需要处理视图状态同步、增量更新、DOM检查等核心问题。作者详细分析了编辑器生命周期与React组件的同步机制，探讨了实例化时机、SSR渲染、组件卸载等场景下的解决方案。同时提出了样式处理、文本换行等具体实现细节，并强调需要严格控制编辑器实例与组件的对应关系。项目开源地址和系列教程文章已提供，展示了从零实现富文本编辑器的完整思路。

2026-01-12 11:13:56 1137

原创从零实现富文本编辑器#9-编辑器文本结构变更的受控处理

本文探讨了富文本编辑器中处理文本结构性变更（如回车、删除、拖拽等操作）的关键问题。重点分析了回车操作在不同浏览器的差异表现，以及如何通过受控处理实现行结构的拆分和格式继承。作者提出基于BeforeInput事件阻止默认行为，结合Delta数据结构实现通用变更模式，并讨论了行格式继承的潜在解决方案。文章还简要提及删除和拖拽操作的处理策略，强调需关注Unicode字符和选区同步问题。开源项目BlockKit提供了相关实现参考。

2025-12-22 10:57:12 1183

原创基于 NodeJs 的分布式任务队列与容器优雅停机

本文探讨了后端异步任务处理方案，重点介绍了任务队列和优雅停机的实现。针对文档处理、LLMs调用等耗时任务，提出了基于内存变量控制并发的单实例任务队列方案，通过分配/释放Quota实现流量削峰。同时阐述了分布式锁的设计思路，并解释了递归调用中process.nextTick避免栈溢出的原理。优雅停机部分则涉及请求处理、资源释放等关键环节，为Node.js应用提供可靠的任务管理和进程关闭方案。

2025-11-24 10:59:26 1120

原创从零实现富文本编辑器#8-浏览器输入模式的非受控DOM行为

本文探讨了在实现富文本编辑器时处理浏览器DOM结构默认行为和IME输入法兼容性的挑战。文章分析了浏览器在ContentEditable模式下不同表现（如回车键处理差异），并提出通过脏DOM检查修复非受控输入导致的结构问题。重点介绍了针对行内节点的处理方案：利用WeakMap映射叶子状态，在行状态变更后检查并修正文本节点内容差异，确保DOM结构与Model层同步。该方法在保证性能的同时，有效解决了IME输入时浏览器默认行为与编辑器控制逻辑不一致的问题。

2025-10-20 11:10:28 865

原创仿照豆包实现 Prompt 变量模板输入框

本文探讨了Prompt输入框的交互设计与实现方式，重点分析了豆包Web版中"帮我写作"模块的模板输入框设计。文章对比了三种常见实现形式：纯文本输入框、表单变量模板和变量模板输入框，详细解析了各自的特点与应用场景。特别关注了豆包采用slate框架实现变量模板输入框的技术细节，包括光标位置处理、inline节点设计等核心问题。最后提供了GitHub搜索框高亮匹配的实现示例，并介绍了如何通过CSS技巧实现透明输入与样式层叠的效果。文章附有相关代码示例和实现参考链接。

2025-09-22 10:57:36 1264

原创在富文本编辑器中实现 Markdown 流式增量解析算法

本文探讨了在SSE流式输出基础上实现Markdown增量解析与富文本编辑器渲染结合的算法。文章分析了流式场景下处理不完整Markdown文本的挑战，提出了增量解析的三个关键点：流式处理、增量更新和富文本解析。作者介绍了基于marked的词法解析方案，详细说明了归档索引机制和Token转换Delta片段的过程，并提供了heading和bold格式的解析示例。该算法能有效解决编辑器数据结构与DOM渲染的兼容问题，同时处理流式输出中的语法错误匹配问题。

2025-09-03 10:31:13 965

原创从零实现富文本编辑器#7-基于组合事件的半受控输入模式

摘要本文探讨了富文本编辑器中的输入模式实现，重点介绍了基于组合事件的半受控输入方案。文章分析了三种输入模式：非受控输入（完全依赖浏览器行为）、半受控输入（结合浏览器与自定义控制）和受控输入（完全自定义实现）。作者详细解析了Quill编辑器的非受控输入实现机制，包括通过MutationObserver监听DOM变化、文本diff算法获取变更操作等核心逻辑。文章还讨论了输入法兼容性等挑战，并提供了开源项目BlockKit的相关资源链接（GitHub仓库、在线编辑器和项目笔记）。

2025-09-02 10:33:50 591

原创浅谈 RAG 并基于 NodeJS 实现基础向量检索服务

本文介绍了RAG（Retrieval-Augmented Generation）技术在自然语言处理中的应用。RAG通过结合检索和生成技术，有效提升了问答、代码生成等任务的准确性和专业性。文章重点探讨了RAG中文本向量化处理的关键环节，特别是数据分片策略：包括固定长度分片、基于句段分片和基于结构分片三种方式，分析了各自的优缺点及适用场景。作者指出当前RAG服务已较为成熟，但仍需根据具体需求选择合适的分片策略，通过重叠分片等方式优化检索效果。文章最后实现了一个基础RAG示例，展示了文本向量化和检索的核心流程。

2025-08-06 10:24:16 983

原创从零实现富文本编辑器#6-浏览器选区与编辑器选区模型同步

本文介绍了浏览器选区与编辑器选区模型的同步实现。基于Range和Selection对象设计了两种选区模型(RawRange和Range)，并探讨了如何建立DOM选区与编辑器选区的关联关系。文章详细分析了选区同步的四种主要挑战：文本节点选区处理、非文本节点选区处理、选区状态标记以及浏览器事件兼容。作者提出通过双向转换机制实现选区同步，并分享了实现过程中的关键见解，包括参考quill和slate的设计思路、使用WeakMap优化节点映射等。该项目已开源，提供了在线演示和相关技术文档链接。

2025-08-05 10:42:36 1257

原创从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

本文探讨了富文本编辑器选区模型的设计实现，重点对比了Quill、Slate和Lexical三种主流编辑器的数据结构与选区表达方式。选区模型的设计直接影响编辑器变更操作的效率，并分析了不同数据结构在遍历查找和应用变更时的优劣。

2025-06-10 10:25:06 1186

原创从零实现富文本编辑器#4-浏览器选区模型的核心交互策略

本文探讨了富文本编辑器中选区模型的设计与实现，重点分析了基于浏览器原生Range和Selection对象的选区操作机制。文章指出选区模型直接决定了编辑器操作范围的表现，并通过示例展示了Quill和Slate两种编辑器在选区表达上的差异。详细解析了Range对象的属性和方法（如setStart、getBoundingClientRect等），以及如何通过Selection对象处理用户选区交互。最后介绍了利用::highlight伪元素实现文本高亮的方法，为富文本编辑器的选区功能开发提供了实践指导。

2025-05-28 10:27:00 991

原创富文本编辑器剪贴板模块基石-序列化与反序列化

在富文本编辑器中，序列化与反序列化是非常重要的环节，其涉及到了编辑器的内容复制、粘贴、导入导出等模块。当用户在编辑器中进行复制操作时，富文本内容会被转换为标准的HTML格式，并存储在剪贴板中。而在粘贴操作中，编辑器则需要将这些HTML内容解析并转换为编辑器的私有JSON结构，以便于实现跨编辑器内容的统一管理。

2025-05-07 10:20:54 987

原创偶然发现Git文件夹非常大，使用BGF来处理Git历史Blob文件

我们使用Git来管理项目的时候，可能会提交一些Blob的二进制文件，这些文件并不能像文本文件一样采用diff delta的形式进行版本控制。如果这些文件一直跟随master的主版本，那么就是属于有效的文件。然而很多时候这些二进制文件会被删除重建，那么由于Git的特性，这些文件会一直留在Git的历史记录中，这样会导致Git仓库变得庞大，不利于版本控制和迁移。最直观的就是clone的时候会很慢，而使用--depth=1则无法看到历史提交的代码。

2025-04-29 12:43:27 1295

原创基于 OT-JSON 与 Immer 设计低代码/富文本场景的状态管理方案

在这里我们基于Immer和OT-JSON设计了一套应用状态管理方案，通过Immer的草稿机制简化不可变数据操作，结合OT-JSON的原子化操作与协同算法，实现原子化、可协同、高扩展的应用级状态管理方案，以及按需渲染的视图性能优化方案。整体来说，这个方案比较适用于嵌套数据结构的动态组合与状态管理。在实际应用中，我们还是需要根据场景来选择合适的状态管理方案。在应用级别的场景中，例如富文本、画板、低代码中，顶层的架构设计还是非常重要的，所有的状态变更、节点类型都应该由这层架构设计扩展出来。

2025-04-23 10:13:35 1072

原创从零实现富文本编辑器#3-基于Delta的线性数据结构模型

数据结构的设计是非常重要的，对于编辑器来说，数据结构的设计直接影响着选区模型、DOM模型、状态管理等模块的设计。在这里我们聊到了很多的数据结构设计，DeltaChangeset的线性结构，Slate的嵌套结构，每种数据都有着各自的设计与考量。那么在选定好了数据结构后，就可以在此基础上实现编辑器的各个模块。我们接下来会从数据模型出发，设计选区模型的表示，然后在此基础上实现浏览器选区与编辑器选区模型的同步。通过选区模型作为操作的目标，来实现编辑器的基础操作，例如插入、删除、格式化等操作。

2025-04-22 10:41:32 1183

原创从零实现富文本编辑器#2-基于MVC模式的编辑器架构设计

在这里我们实现了简单的编辑器MVC架构示例，然后在此基础上自然而然地抽象出了编辑器的核心模块、数据模型、视图层、工具函数等，并且将其做了简单的叙述。在后续我们会描述编辑器的数据模型设计，介绍我们的Delta数据结构方法，以及在编辑器中的相关应用场景。数据结构是非常重要的设计，因为编辑器的核心操作都是基于数据模型的，若不能够理解数据结构的设计，则会导致难以理解编辑器的很多操作模型。

2025-04-15 10:24:07 1485 1

原创深感一无所长，准备试着从零开始写个富文本编辑器

在本文我们聊了很多关于富文本编辑器基础能力的实现，特别是在DOM结构表现和数据结构之间的设计。并且在浏览器交互的方案上，我们也聊了Canvas实现方案的特点，简单总结了当前成熟产品以及开源编辑器，并且描述了相关实现的优缺点。在后边我们会基于实现基本的富文本编辑器，首先对于整体的架构设计，以及数据结构的操作做概述。然后开始分别实现具体的模块，例如输入模块、剪贴板模块、选区模块等等。

2025-04-09 10:34:01 1418

原创基于React的虚拟滚动方案

在渲染列表时我们通常会一次性将所有列表项渲染到DOM中，在数据量大的时候这种操作会造成页面响应缓慢，因为浏览器需要处理大量的DOM元素。而此时我们通常就需要虚拟滚动来实现性能优化，当我们拥有大量数据需要在用户界面中以列表或表格的形式展示时，这种性能优化方式可以大幅改善用户体验和应用性能，那么在本文中就以固定高度和非固定高度两种场景展开虚拟滚动的实现。

2025-03-11 10:30:44 1083

原创 du-磁盘占用管理

在先前发现Git管理的项目特别大，在平时开发的时候可能提交了二进制文件，但是这部分文件无法进行diff处理变更进行版本控制。因此当这类文件不断删除新增，导致整个项目文件夹越来越大。然后先前通过BGF处理了Git历史Blob文件，这个过程中发现Mac系统无法直接选中某些文件夹的硬盘总数占用，所以只能通过du命令来查看相关文件夹的大小。du命令是Disk Usage的缩写，用于估算和显示文件系统中的文件和目录的磁盘使用情况。

2025-02-16 13:13:39 951

原创 Slate文档编辑器-Node节点与Path路径映射

在这里我们主要讨论了Node节点与Path路径映射，即如何确定渲染出的节点处于文档数据定义中的位置，这是slate中实现数据变更时的重要表达，特别是在仅使用选区无法实现的复杂操作中，并且还分析了slate源码来探究了相关问题的实现。那么在后面的文章中，我们延续当前提到的表格但单元格位置的查找，来聊聊表格模块的设计及交互。

2025-01-20 10:44:00 1569

原创 Canvas简历编辑器-选中绘制与拖拽多选交互方案

在这里我们就依然在轻量级DOM的基础上，讨论了Canvas中描边与填充的绘制问题，以及的实现方式，然后我们实现了基本的选中绘制以及拖拽多选的交互设计，并且实现了Hover的效果，以及拖拽节点的移动。那么在后边我们可以聊一下fillRule规则设计、按需绘制图形节点，也可以聊到更多的交互设计，例如Resize的交互设计、参考线能力的实现、富文本的绘制方案等等。

2025-01-13 14:20:14 1419

原创 Slate文档编辑器-Decorator装饰器渲染调度

在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源码来探究了相关问题的实现。那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的方案。

2024-12-30 10:52:20 1356

原创 Slate文档编辑器-TS类型扩展与节点类型检查

在这里我们更专注于文档编辑器的数据结构设计，聊聊基于slate实现的文档编辑器类型系统。在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等，那么在后边的文章中我们就主要聊一聊在slate中Path的表达，以及在React中是如何控制其内容表达与正确维护Path路径与Element内容渲染的，并且我们还可以聊一聊表格模块的设计与实现。

2024-12-23 10:23:24 1489

原创 Slate文档编辑器-WrapNode数据结构与操作变换

在这里我们聊到了WrapNode数据结构与操作变换，主要是对于嵌套类型的数据结构需要关注的内容，而实际上节点的类型还可以分为很多种，我们在大范围上可以有BlockNodeTextNode，在BlockNode中我们又可以划分出BaseNodeWrapNodePairNodeVoidNode等，因此文中叙述的内容还是属于比较基本的，在slate中还有很多额外的概念和操作需要关注，例如RangeOperationEditorElementPath等。那么在后边的文章中我们就主要聊一聊在slate中Path。

2024-11-18 10:31:12 1001 1

空空如也

空空如也