Skip to content

Commit b67dd9d

Browse files
WindRunnerMaxWindRunnerMax
committed
25/09/05
1 parent a2f6261 commit b67dd9d

16 files changed

+269
-235
lines changed

‎I18N/index.html‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@
172172
hook.doneEach(() => {
173173
const search = new URLSearchParams(location.search);
174174
const $p = search.get(window.$p) || "";
175+
// 处理侧边栏导航链接
175176
const links = document.querySelectorAll(".sidebar-nav li > a");
176177
Array.from(links).forEach((a) => {
177178
const path = a.getAttribute("href");
@@ -181,18 +182,34 @@
181182
a.parentElement.classList.add("active");
182183
}
183184
});
185+
// 处理文章内的 HASH 链接
184186
const hashLinks = document.querySelectorAll("article a[data-id]");
185187
Array.from(hashLinks).forEach((a) => {
186188
a.onclick = (e) => (vm.route.path = $p);
187189
search.set("id", a.getAttribute("data-id"));
188190
a.href = "/I18N/?" + decodeURIComponent(search.toString());
189191
});
192+
// 处理页面内的超链接地址
193+
const pageLinks = document.querySelectorAll("article a[href]");
194+
Array.from(pageLinks).forEach((a) => {
195+
const href = a.getAttribute("href");
196+
if ($p && href && href.startsWith("/./")) {
197+
const newPath = href.replace("/./", "");
198+
const fragment = $p.split("/");
199+
fragment.pop();
200+
fragment.push(newPath);
201+
const path = fragment.join("/");
202+
a.href = "/I18N/?" + window.$p + "=" + decodeURIComponent(path);
203+
a.onclick = (e) => (vm.route.path = path);
204+
}
205+
});
206+
// 设置页面的标题
190207
let title = $p.split("/").slice(-1).pop();
191208
title = title || window.$docsify.name;
209+
window.setCanonicalUrl();
192210
// 兼容命名评论 HASH
193211
title = title === "WindRunnerMax" ? "WindrunnerMax" : title;
194212
document.title = title;
195-
window.setCanonicalUrl();
196213
// 处理图片的地址
197214
const images = document.querySelectorAll("#main img");
198215
Array.from(images).map((img) => {

‎RichText/初探富文本之CRDT协同实例.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# 初探富文本之CRDT协同实例
22
在前边初探富文本之`CRDT`协同算法一文中我们探讨了为什么需要协同、分布式的最终一致性理论、偏序集与半格的概念、为什么需要有偏序关系、如何通过数据结构避免冲突、分布式系统如何进行同步调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如`automerge`、`yjs`等等，本文就是关注于以`yjs`为`CRDT`协同框架来实现协同的实例。
33

4-
* [初探富文本#1-富文本概述](./初探富文本之富文本概述.md)
5-
* [初探富文本#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6-
* [初探富文本#3-OT协同算法](./初探富文本之OT协同算法.md)
7-
* [初探富文本#4-OT协同实例](./初探富文本之OT协同实例.md)
8-
* [初探富文本#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9-
* [初探富文本#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10-
* [初探富文本#7-React实时预览](./初探富文本之React实时预览.md)
11-
* [初探富文本#8-文档diff算法](./初探富文本之文档diff算法.md)
12-
* [初探富文本#9-在线文档交付](./初探富文本之在线文档交付.md)
13-
* [初探富文本#10-划词评论能力](./初探富文本之划词评论能力.md)
14-
* [初探富文本#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15-
* [初探富文本#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16-
* [初探富文本#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
4+
* [初探富文本编辑器#1-富文本概述](./初探富文本之富文本概述.md)
5+
* [初探富文本编辑器#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6+
* [初探富文本编辑器#3-OT协同算法](./初探富文本之OT协同算法.md)
7+
* [初探富文本编辑器#4-OT协同实例](./初探富文本之OT协同实例.md)
8+
* [初探富文本编辑器#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9+
* [初探富文本编辑器#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10+
* [初探富文本编辑器#7-React实时预览](./初探富文本之React实时预览.md)
11+
* [初探富文本编辑器#8-文档diff算法](./初探富文本之文档diff算法.md)
12+
* [初探富文本编辑器#9-在线文档交付](./初探富文本之在线文档交付.md)
13+
* [初探富文本编辑器#10-划词评论能力](./初探富文本之划词评论能力.md)
14+
* [初探富文本编辑器#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15+
* [初探富文本编辑器#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16+
* [初探富文本编辑器#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
1717

1818
## 概述
1919
接入协同框架实际上并不是一件简单的事情，当然相对于接入`OT`协同而言接入`CRDT`协同已经是比较简单的了，因为我们只需要聚焦于数据结构的使用就好，而不需要对变换有过多的关注。当前我们更加关注的是`Op-based CRDT`，本文所说的`CRDT`也是特指的`Op-based CRDT`，毕竟`State-baed CRDT`需要将全量数据进行传输，每次都要完整传输状态来完成同步让它比较难变成通用的解决方案。

‎RichText/初探富文本之CRDT协同算法.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# 初探富文本之CRDT协同算法
22
`CRDT`的英文全称是`Conflict-free Replicated Data Type`，最初是由协同文本编辑和移动计算而发展的，现在还被用作在线聊天系统、音频分发平台等等。当前`CRDT`算法在富文本编辑器领域的协同依旧是典型的场景，常用于作为实现文档协同的底层算法，支持多个用户同时编辑文档，不会因为用户并发修改导致冲突，而导致结果不一致甚至数据丢失的问题。
33

4-
* [初探富文本#1-富文本概述](./初探富文本之富文本概述.md)
5-
* [初探富文本#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6-
* [初探富文本#3-OT协同算法](./初探富文本之OT协同算法.md)
7-
* [初探富文本#4-OT协同实例](./初探富文本之OT协同实例.md)
8-
* [初探富文本#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9-
* [初探富文本#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10-
* [初探富文本#7-React实时预览](./初探富文本之React实时预览.md)
11-
* [初探富文本#8-文档diff算法](./初探富文本之文档diff算法.md)
12-
* [初探富文本#9-在线文档交付](./初探富文本之在线文档交付.md)
13-
* [初探富文本#10-划词评论能力](./初探富文本之划词评论能力.md)
14-
* [初探富文本#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15-
* [初探富文本#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16-
* [初探富文本#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
4+
* [初探富文本编辑器#1-富文本概述](./初探富文本之富文本概述.md)
5+
* [初探富文本编辑器#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6+
* [初探富文本编辑器#3-OT协同算法](./初探富文本之OT协同算法.md)
7+
* [初探富文本编辑器#4-OT协同实例](./初探富文本之OT协同实例.md)
8+
* [初探富文本编辑器#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9+
* [初探富文本编辑器#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10+
* [初探富文本编辑器#7-React实时预览](./初探富文本之React实时预览.md)
11+
* [初探富文本编辑器#8-文档diff算法](./初探富文本之文档diff算法.md)
12+
* [初探富文本编辑器#9-在线文档交付](./初探富文本之在线文档交付.md)
13+
* [初探富文本编辑器#10-划词评论能力](./初探富文本之划词评论能力.md)
14+
* [初探富文本编辑器#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15+
* [初探富文本编辑器#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16+
* [初探富文本编辑器#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
1717

1818
## 概述
1919
`Conflict-free Replicated Data Type`直译过来就是无冲突的复制数据类型，从名字可以看出来，`CRDT`的重点在于无冲突复制和数据类型，去掉定语的话就可以得到`CRDT`是一种数据结构，也就是说`CRDT`是通过数据结构来保证最终一致性的。在分布式系统中，不同节点之间的数据复制存在一致性问题即强一致性问题，`CRDT`是作为一种理论来指导如何将原有数据结构设计成在数据复制过程中通向最终一致性的一种新的数据结构。假设此时我们拥有多个副本或者操作，如果托管副本的计算机之间没有协调，此时进行合并的话则可能导致副本之间的不一致，这通常是无法解决的，当更新存在冲突时，要恢复一致性和数据完整性，可能需要部分甚至全部更新的删除。

‎RichText/初探富文本之OT协同实例.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# 初探富文本之OT协同实例
22
在前边初探富文本之`OT`协同算法一文中我们探讨了为什么需要协同、为什么仅有原子化的操作并不能实现协同、为什么要有操作变换、如何进行操作变换、什么时候能够应用操作、服务端如何进行协同调度等等，这些属于完成协同所需要了解的基础知识，实际上当前有很多成熟的协同实现，例如`ot.js`、`ShareDB`、`ot-json`、`EasySync`等等，本文就是以`ShareDB`为`OT`协同框架来实现协同的实例。
33

4-
* [初探富文本#1-富文本概述](./初探富文本之富文本概述.md)
5-
* [初探富文本#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6-
* [初探富文本#3-OT协同算法](./初探富文本之OT协同算法.md)
7-
* [初探富文本#4-OT协同实例](./初探富文本之OT协同实例.md)
8-
* [初探富文本#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9-
* [初探富文本#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10-
* [初探富文本#7-React实时预览](./初探富文本之React实时预览.md)
11-
* [初探富文本#8-文档diff算法](./初探富文本之文档diff算法.md)
12-
* [初探富文本#9-在线文档交付](./初探富文本之在线文档交付.md)
13-
* [初探富文本#10-划词评论能力](./初探富文本之划词评论能力.md)
14-
* [初探富文本#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15-
* [初探富文本#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16-
* [初探富文本#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
4+
* [初探富文本编辑器#1-富文本概述](./初探富文本之富文本概述.md)
5+
* [初探富文本编辑器#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6+
* [初探富文本编辑器#3-OT协同算法](./初探富文本之OT协同算法.md)
7+
* [初探富文本编辑器#4-OT协同实例](./初探富文本之OT协同实例.md)
8+
* [初探富文本编辑器#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9+
* [初探富文本编辑器#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10+
* [初探富文本编辑器#7-React实时预览](./初探富文本之React实时预览.md)
11+
* [初探富文本编辑器#8-文档diff算法](./初探富文本之文档diff算法.md)
12+
* [初探富文本编辑器#9-在线文档交付](./初探富文本之在线文档交付.md)
13+
* [初探富文本编辑器#10-划词评论能力](./初探富文本之划词评论能力.md)
14+
* [初探富文本编辑器#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15+
* [初探富文本编辑器#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16+
* [初探富文本编辑器#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
1717

1818
## 概述
1919
接入协同框架实际上并不是一件简单的事情，尤其是对于`OT`实现的协同算法而言，`OT`的英文全称是`Operational Transformation`，也就是说实现`OT`的基础就是对内容的描述与操作是`Operational`原子化的。在富文本领域，最经典的`Operation`有`quill`的`delta`模型，通过`retain`、`insert`、`delete`三个操作完成整篇文档的描述与操作，还有`slate`的`JSON`模型，通过`insert_text`、`split_node`、`remove_text`等等操作来完成整篇文档的描述与操作。

‎RichText/初探富文本之OT协同算法.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# 初探富文本之OT协同算法
22
`OT`的英文全称是`Operational Transformation`，是一种处理协同编辑的算法。当前`OT`算法用的比较多的地方就是富文本编辑器领域了，常用于作为实现文档协同的底层算法，支持多个用户同时编辑文档，不会因为用户并发修改导致冲突，而导致结果不一致甚至数据丢失的问题。
33

4-
* [初探富文本#1-富文本概述](./初探富文本之富文本概述.md)
5-
* [初探富文本#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6-
* [初探富文本#3-OT协同算法](./初探富文本之OT协同算法.md)
7-
* [初探富文本#4-OT协同实例](./初探富文本之OT协同实例.md)
8-
* [初探富文本#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9-
* [初探富文本#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10-
* [初探富文本#7-React实时预览](./初探富文本之React实时预览.md)
11-
* [初探富文本#8-文档diff算法](./初探富文本之文档diff算法.md)
12-
* [初探富文本#9-在线文档交付](./初探富文本之在线文档交付.md)
13-
* [初探富文本#10-划词评论能力](./初探富文本之划词评论能力.md)
14-
* [初探富文本#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15-
* [初探富文本#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16-
* [初探富文本#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
4+
* [初探富文本编辑器#1-富文本概述](./初探富文本之富文本概述.md)
5+
* [初探富文本编辑器#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6+
* [初探富文本编辑器#3-OT协同算法](./初探富文本之OT协同算法.md)
7+
* [初探富文本编辑器#4-OT协同实例](./初探富文本之OT协同实例.md)
8+
* [初探富文本编辑器#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9+
* [初探富文本编辑器#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10+
* [初探富文本编辑器#7-React实时预览](./初探富文本之React实时预览.md)
11+
* [初探富文本编辑器#8-文档diff算法](./初探富文本之文档diff算法.md)
12+
* [初探富文本编辑器#9-在线文档交付](./初探富文本之在线文档交付.md)
13+
* [初探富文本编辑器#10-划词评论能力](./初探富文本之划词评论能力.md)
14+
* [初探富文本编辑器#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15+
* [初探富文本编辑器#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16+
* [初探富文本编辑器#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
1717

1818
## 概述
1919
从名字就可以看出来，`OT`协同算法的重点在于操作`Operation`与转换`Transformation`，简单来说，操作`Operation`指明了所有的操作必须原子化，例如在第`N`个位置插入了某个字符，在第`M`个位置删除了某个字符。类似于这样的所有的操作必须能够原子化地表示，转换`Transformation`指明了所有的操作必须要有转换的方案。

‎RichText/初探富文本之React实时预览.md‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
# 初探富文本之React实时预览
22
在前文中我们探讨了很多关于富文本引擎和协同的能力，在本文中我们更偏向具体的应用组件实现。在一些场景中比如组件库的文档编写时，我们希望能够有实时预览的能力，也就是用户可以在文档中直接编写代码，然后在页面中实时预览，这样可以让用户更加直观的了解组件的使用方式，这也是很多组件库文档中都会有的一个功能。那么我们在本文就侧重于`React`组件的实时预览，来探讨相关能力的实现。文中涉及的相关代码都在`https://github.com/WindrunnerMax/ReactLive`，在富文本文档中的实现效果可以参考`https://windrunnermax.github.io/DocEditor/`。
33

4-
* [初探富文本#1-富文本概述](./初探富文本之富文本概述.md)
5-
* [初探富文本#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6-
* [初探富文本#3-OT协同算法](./初探富文本之OT协同算法.md)
7-
* [初探富文本#4-OT协同实例](./初探富文本之OT协同实例.md)
8-
* [初探富文本#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9-
* [初探富文本#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10-
* [初探富文本#7-React实时预览](./初探富文本之React实时预览.md)
11-
* [初探富文本#8-文档diff算法](./初探富文本之文档diff算法.md)
12-
* [初探富文本#9-在线文档交付](./初探富文本之在线文档交付.md)
13-
* [初探富文本#10-划词评论能力](./初探富文本之划词评论能力.md)
14-
* [初探富文本#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15-
* [初探富文本#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16-
* [初探富文本#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
4+
* [初探富文本编辑器#1-富文本概述](./初探富文本之富文本概述.md)
5+
* [初探富文本编辑器#2-编辑器引擎](./初探富文本之编辑器引擎.md)
6+
* [初探富文本编辑器#3-OT协同算法](./初探富文本之OT协同算法.md)
7+
* [初探富文本编辑器#4-OT协同实例](./初探富文本之OT协同实例.md)
8+
* [初探富文本编辑器#5-CRDT协同算法](./初探富文本之CRDT协同算法.md)
9+
* [初探富文本编辑器#6-CRDT协同实例](./初探富文本之CRDT协同实例.md)
10+
* [初探富文本编辑器#7-React实时预览](./初探富文本之React实时预览.md)
11+
* [初探富文本编辑器#8-文档diff算法](./初探富文本之文档diff算法.md)
12+
* [初探富文本编辑器#9-在线文档交付](./初探富文本之在线文档交付.md)
13+
* [初探富文本编辑器#10-划词评论能力](./初探富文本之划词评论能力.md)
14+
* [初探富文本编辑器#11-文档虚拟滚动](./初探富文本之文档虚拟滚动.md)
15+
* [初探富文本编辑器#12-搜索替换算法](./初探富文本之搜索替换算法.md)
16+
* [初探富文本编辑器#13-序列化与反序列化](./初探富文本之序列化与反序列化.md)
1717

1818
## 概述
1919
首先我们先简单探讨下相关的场景，实际上当前很多组件库的`API`文档都是由`Markdown`来直接生成的。例如`Arco-Design`，实际上是通过一个个`md`文件来生成的组件应用示例以及`API`表格，那么其实我们用的时候也可以发现我们是无法直接在官网编辑代码来实时预览的，这是因为这种方式是直接利用`loader`来将`md`文件根据一定的规则编译成了`jsx`语法，这样实际上就相当于直接用`md`生成了代码，之后就是完整地走了代码打包流程。那么既然有静态部署的`API`文档，肯定也有动态渲染组件的`API`文档，例如`MUI`，其同样也是通过`loader`处理`md`文件的占位，将相应的`jsx`组件通过指定的位置加载进去。只不过其的渲染方式除了静态编译完成后还多了动态渲染的能力，官网的代码示例就是可以实时编辑的，并且能够即使预览效果。

0 commit comments

Comments
 (0)