搜索 - 腾讯云开发者社区-腾讯云

文章/答案/技术大牛

发布

来自专栏Czy‘s Blog
初探富文本之文档diff算法
对于我们今天要聊的Quill来说，其数据结构描述是quill-delta，这个数据结构的设计非常棒，并且quill-delta同样也可以是富文本OT协同算法的实现，不过我们在这里不涉及协同的内容，而我们实际上要关注的 diff能力更多的是数据结构层面的内容，也就是说我们diff的实际上是数据，那么在quill-delta中这样一段文本的数据结构如下所示。当然quill-delta的表达可以非常丰富，通过retain、insert、delete操作可以完成对于整个文档的内容描述增删改的能力，我们在后边实现对比视图功能的时候会涉及这部分Op。 { ops: [ { insert: "那么在" }, { insert: "quill-delta", attributes: { inlineCode: true } }, ，那么我们直接进行JSON的diff是不是就可以了，毕竟现在有很多现成的JSON算法可以用，这个方法对于纯insert的文本内容理论上可行的只是粒度不太够，没有办法精确到具体某个字的修改，也就是说依照quill-delta
54110编辑于 2024-02-22
来自专栏Czy‘s Blog
初探富文本之OT协同实例
同样是以quill与slate两款开源编辑器为例，在quill中已经实现了对于其数据结构delta的所有Transformation，可以直接调用官方的quill-delta包即可；对于slate而言，再假如我们的思维导图维护的是一个线性的类文本结构，那么就可以参考rich-text与quill-delta的实现，只不过这样的话实现原子化的操作可能就麻烦一些了，当然同样我们也可以维护一个中间层的数据结构来完成 insert、delete三个操作完成整篇文档的描述与操作，那么这样我们就不能使用json0来对数据结构进行描述了，我们需要使用新的OT类型rich-text，rich-text的具体的实现是在官方的quill-delta 中实现的，具体可以参考https://www.npmjs.com/package/rich-text与https://www.npmjs.com/package/quill-delta。 zhuanlan.zhihu.com/p/425265438 https://www.npmjs.com/package/rich-text https://www.npmjs.com/package/quill-delta
1.1K20编辑于 2023-05-26
来自专栏Czy‘s Blog
Canvas图形编辑器-数据结构与History(undo/redo)
数据结构我特别推荐大家去看一下 quill-delta 的数据结构设计，这个数据结构的设计非常棒，其可以用来描述一篇富文本，同时也可以用来构建change对富文本做完整的增删改操作，对于数据的compose 、invert、diff等操作也一应俱全，而且quill-delta也可以是富文本OT协同算法的实现，这其中的设计还是非常牛逼的。其实我之前也没有设计过数据结构，更不用谈设计Op去实现历史记录功能了，所以我在设计数据结构的时候是抓耳挠腮、寝食难安，想设计出 quill-delta 这种级别的数据描述几乎是不可能了，所以只能依照我的想法来简单地设计
46310编辑于 2024-04-16
来自专栏Czy‘s Blog
基于OT与CRDT协同算法的文档划词评论能力实现
然后为了方便我们直接采用indexeddb作为存储而不是使用websocket来与后端yjs通信，由此我们可以直接在本地进行测试，在yjs中内置了getText的富文本数据结构表达，实际上在使用上是等同于quill-delta ://quilljs.com/docs/delta https://docs.yjs.dev/api/relative-positions https://www.npmjs.com/package/quill-delta
53510编辑于 2024-04-11
来自专栏Czy‘s Blog
深入在线文档系统的 MarkDown/Word/PDF 导出能力设计
通过这种思路实现的数据转换是成本比较低的，但是效率上就没有那么高了，所以我们在这里聊的还是从我们的基准数据结构DSL - Domain Specific Language来进行数据转换，quill-delta 的数据结构是设计的非常棒的扁平化富文本描述DSL，所以本文就以quill-delta的数据结构设计来聊聊数据转换导出。前边我们已经提到了我们的块是比较复杂的，并且实际上是会存在很多嵌套结构，对应到HTML就类似于表格中嵌套了代码块的格式，而quill-delta的数据结构是扁平化的，所以我们也需要将其转换为方便处理的嵌套结构
87310编辑于 2024-03-28
来自专栏Czy‘s Blog
初探富文本之CRDT协同实例
/client"; import Delta from "quill-delta"; import QuillCursors from "quill-cursors"; import { compareRelativePositions zhuanlan.zhihu.com/p/452980520 https://josephg.com/blog/crdts-go-brrr/ https://www.npmjs.com/package/quill-delta
1.8K20编辑于 2023-03-09

初探富文本之文档diff算法

初探富文本之OT协同实例

Canvas图形编辑器-数据结构与History(undo/redo)

基于OT与CRDT协同算法的文档划词评论能力实现

深入在线文档系统的 MarkDown/Word/PDF 导出能力设计

初探富文本之CRDT协同实例

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐