随笔分类 - Plugin
摘要：Slate文档编辑器-WrapNode数据结构与操作变换 在之前我们聊到了一些关于slate富文本引擎的基本概念，并且对基于slate实现文档编辑器的一些插件化能力设计、类型拓展、具体方案等作了探讨，那么接下来我们更专注于文档编辑器的细节，由浅入深聊聊文档编辑器的相关能力设计。 在线编辑: http
阅读全文
摘要：初探富文本之搜索替换算法 在我们的在线文档系统中，除了基础的富文本编辑能力外，搜索替换的算法同样也是重要的功能实现。纯文本搜索替换算法相对来说是比较容易实现的，而在富文本的场景中，由于存在图文混排、嵌入模块如Mention等，实现这一功能则相对要复杂得不少。那么本文则以Quill实现的富文本编辑器为
阅读全文
摘要：Canvas简历编辑器-选中绘制与拖拽多选交互设计 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM，并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上，关注于实现选中绘制与拖拽多选交互设计。 在线编辑: https://win
阅读全文
摘要：Canvas简历编辑器-Monorepo+Rspack工程实践 在之前我们围绕Canvas聊了很多代码设计层面的东西，在这里我们聊一下工程实践。在之前的文中我也提到过，因为是本着学习的态度以及对技术的好奇心来做的，所以除了一些工具类的库例如 ArcoDesign、ResizeObserve、Jest
阅读全文
摘要：基于Service Worker实现WebRTC局域网大文件传输能力 Service Worker是一种驻留在用户浏览器后台的脚本，能够拦截和处理网络请求，从而实现丰富的离线体验、缓存管理和网络效率优化。请求拦截是其关键功能之一，通过监听fetch事件，Service Worker可以捕获所有向网络
阅读全文
摘要：Canvas简历编辑器-图形绘制与状态管理(轻量级DOM) 在前边我们聊了数据结构的设计和剪贴板的数据操作，那么这些操作都还是比较倾向于数据相关的操作，那么我们现在就来聊聊基本的图形绘制以及图形状态管理。 在线编辑: https://windrunnermax.github.io/CanvasEdi
阅读全文
摘要：神秘 Arco 样式出现，祭出 Webpack 解决预期外的引用问题 Webpack是现代化的静态资源模块化管理和打包工具，其能够通过插件配置处理和打包多种文件格式，生成优化后的静态资源，核心原理是将各种资源文件视为模块，通过配置文件定义模块间的依赖关系和处理规则，从而实现模块化开发。Webpack
阅读全文
摘要：浏览器扩展开发的相关问题与解决方案 我开发的浏览器扩展安装量终于过千了！在 Firefox AddOns 已经有2.1k+安装，在 Chrome WebStore 已经有2k+安装。实际上在Firefox的扩展市场里是周平均安装量，当天的实际安装量要高出平均值不少，而Chrome的扩展市场在超过1k
阅读全文
摘要：基于Chrome扩展的浏览器可信事件与网页离线PDF导出 Chrome扩展是一种可以在浏览器中添加新功能和修改浏览器行为的软件程序，我们可以基于Manifest规范的API实现对于浏览器和Web页面在一定程度上的修改，例如广告拦截、代理控制等。Chrome DevTools Protocol则是Ch
阅读全文
摘要：基于React的SSG静态站点渲染方案 静态站点生成SSG - Static Site Generation是一种在构建时生成静态HTML等文件资源的方法，其可以完全不需要服务端的运行，通过预先生成静态文件，实现快速的内容加载和高度的安全性。由于其生成的是纯静态资源，便可以利用CDN等方案以更低的成
阅读全文
摘要：初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。具体来说，虚拟滚动只渲染用户浏览器视口部分的文档数据，而不是整个文档结构，其核心实现根据可见区域高度和容器的滚动位置计算出需要渲染的列表项，同时不渲染额外的视图内容。虚拟滚动
阅读全文
摘要：从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本 TKScript (点个star吧 😁)，相对会比较熟悉脚本管理器的能力，预估是不太能完成需求的，所以趁着
阅读全文
摘要：Canvas图形编辑器-我的剪贴板里究竟有什么数据 在这里我们先来聊聊我们究竟应该如何操作剪贴板，也就是我们在浏览器的复制粘贴事件，并且在此基础上聊聊我们在Canvas图形编辑器中应该如何控制焦点以及如何实现复制粘贴行为。 在线编辑: https://windrunnermax.github.io/
阅读全文
摘要：Canvas图形编辑器-数据结构与History(undo/redo) 这是作为 社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器 的后续内容，主要是介绍了对数据结构的设计以及History能力的实现。 在线编辑: https://windrunnermax.github.io/C
阅读全文
摘要：社区老给我推Canvas，于是我也学习Canvas做了个简历编辑器 大概一个月前，我发现社区老是给我推荐Canvas相关的内容，比如很多 小游戏、流程图编辑器、图片编辑器 等等各种各样的项目，不知道是不是因为我某一天点击了相关内容触发了推荐机制，还是因为现在Canvas比较火大家都在卷，本着我可以用
阅读全文
摘要：基于OT与CRDT协同算法的文档划词评论能力实现 当我们实现在线文档平台时，划词评论的功能是非常必要的，特别是在重文档管理流程的在线文档产品中，文档反馈是非常重要的一环，这样可以帮助文档维护者提高文档质量。而即使是单纯的将划词评论作为讨论区，也是非常有用的，尤其是在文档并不那么完善的情况下，对接产品
阅读全文
摘要：深入在线文档系统的 MarkDown/Word/PDF 导出能力设计 当我们实现在线文档的系统时，通常需要考虑到文档的导出能力，特别是对于私有化部署的复杂ToB产品来说，文档的私有化版本交付能力就显得非常重要，此外成熟的在线文档系统还有很多复杂的场景，都需要我们提供文档导出的能力。那么本文就以Qui
阅读全文
摘要：初探富文本之文档diff算法 当我们实现在线文档的系统时，通常需要考虑到文档的版本控制与审核能力，并且这是这是整个文档管理流程中的重要环节，那么在这个环节中通常就需要文档的diff能力，这样我们就可以知道文档的变更情况，例如文档草稿与线上文档的差异、私有化版本A与版本B之间的差异等等，本文就以Qui
阅读全文
摘要：基于WebRTC的局域网文件传输 在前一段时间，我想在手机上向电脑发送文件，因为要发送的文件比较多，所以我想直接通过USB连到电脑上传输，等我将手机连到电脑上之后，我发现手机竟然无法被电脑识别，能够充电但是并不能传文件，因为我的电脑是Mac而手机是Android，所以无法识别设备这件事就变得合理了起
阅读全文
摘要：初探webpack之单应用多端构建 在现代化前端开发中，我们可以借助构建工具来简化很多工作，单应用多端构建就是其中应用比较广泛的方案，webpack中提供了loader与plugin来给予开发者非常大的操作空间来操作构建过程，通过操作中间产物我们可以非常方便地实现多端构建，当然这是一种思想而不是深度
阅读全文