简体中文

初探富文本之序列化与反序列化

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

描述

我们平时在使用一些在线文档编辑器的时候，可能会好奇一个问题，为什么我们能够直接把格式复制出来，而不仅仅是纯文本，甚至于说从浏览器中复制内容到Office Word都可以保留格式。这看起来是不是一件很神奇的事情，不过当我们了解到剪贴板的基本操作之后，就可以了解这其中的底层实现了。

说到剪贴板的操作，在执行复制行为的时候，我们可能会认为复制的就是纯文本，然而显然光靠复制纯文本我们是做不到上述的功能。所以实际上剪贴板是可以存储复杂内容的，那么在这里我们以Word为例，当我们从Word中复制文本时，其实际上是会在剪贴板中写入这么几个key值:

text/plain
text/html
text/rtf
image/png

看着text/plain是不是很眼熟，这显然就是我们常见的Content-Type或者称作MIME-Type，所以说我们是不是可以认为剪贴板是一个Record<string, string>的结构类型。但是别忽略了我们还有一个image/png类型，因为我们的剪贴板是可以直接复制文件的，所以我们常用的剪贴板类型就是Record<string, string | File>，例如此时复制这段文字在剪贴板中就是如下内容。

text/plain
例如此时复制这段文字在剪贴板中就是如下内容

text/html
<meta charset="utf-8"><strong style="...">例如此时复制这段文字</strong><em style="...">在剪贴板中就是如下内容</em>

那么我们执行粘贴操作的时候就很明显了，只需要从剪贴板里读取内容就可以。例如我们从语雀复制内容到飞书中时，在语雀复制的时候会将text/plain以及text/html写入剪贴板，在粘贴到飞书的时候就可以首先检查是否有text/html的key，如果有的话就可以读取出来，并且将其解析成为飞书自己的私有格式，就可以通过剪贴板来保持内容格式粘贴到飞书了。而如果没有text/html的话，就直接将text/plain的内容写到私有的JSON数据即可。

此外，我们还可以考虑到一个问题，在上边的例子中实际上我们是复制时需要将JSON转到HTML字符串，在粘贴时需要将HTML字符串转换为JSON，这都是需要进行序列化与反序列化的，是需要有性能消耗以及内容损失的，所以是不是能够减少这部分消耗。通常来说如果是在应用内直接直接粘贴的话，可以直接通过剪贴板的数据直接compose到当前的JSON即可，这样就可以更完整地保持内容以及减少对于HTML解析的消耗。例如在飞书中，会有docx/text的独立clipboard key以及data-lark-record-data作为独立JSON数据源。

那么至此我们已经了解到剪贴板的工作原理，紧接着我们就来聊一聊如何进行序列化的操作。说到复制我们可能通常会想到clipboard.js，如果需要兼容性比较高的话(IE)可以考虑，但是如果需要在现在浏览器中使用的话，则可以直接考虑使用HTML5规范的API完成，在浏览器中关于复制的API常用的有两种，分别是document.execCommand("copy")以及navigator.clipboard.write/writeText。

document.execCommand("selectAll");
const res = document.execCommand("copy");
console.log(res); // true
const dataItems: Record<string, Blob> = {};
for (const [key, value] of Object.entries(data)) {
  const blob = new Blob([value], { type: key });
  dataItems[key] = blob;
}
navigator.clipboard.write([new ClipboardItem(dataItems)])

而对于序列化即粘贴行为，则存在document.execCommand("paste")以及navigator.clipboard.read/readText可用。但是需要注意的是execCommand这个API的调用总是会失败，clipboard.read则需要用户主动授权。关于这个问题，我们在先前通过浏览器扩展对可信事件的研究也已经有过结论，在扩展中即使保持清单中的clipboardRead权限声明，也无法直接读取剪贴板，必须要在Content Script甚至chrome.debugger中才可以执行。

document.addEventListener("paste", (e) => {
  const data = e.clipboardData;
  console.log(data);
});
const res = document.execCommand("paste");
console.log(res); // false
navigator.clipboard.read().then(res => {
  for (const item of res) {
    item.getType("text/html").then(console.log).catch(() => null)
  }
});

当然这里并不是此时研究的重点，我们关注的是内容的序列化与反序列化，即在富文本编辑器的复制粘贴模块的设计。当然这个模块还会有更广泛的用途，例如序列化的场景有交付Word文档、输出Markdown格式等，反序列的场景有导入Markdown文档等。而我们对于这个模块的设计，则需要考虑到以下几个问题:

  1. 插件化，编辑器中的模块本身都是插件化的，那么关于剪贴板模块的设计自然也需要能够自由扩展序列化/反序列化的格式。特别是在需要精确适配编辑器例如飞书、语雀等的私有格式时，需要能够自由控制相关行为。
  2. 普适性，由于富文本需要实现DOM与选区MODEL的映射，因此生成的DOM结构通常会比较复杂。而当我们从文档中复制内容到剪贴板时，我们会希望这个结构是更规范化的，以便粘贴到其他平台例如飞书、Word等时会有更好的解析。
  3. 完整性，当执行序列化与反序列时，希望能够保持内容的完整性，即不会因为这个的过程而丢失内容，这里相当于对性能做出让步而保持内容完整。而对于编辑器本身的格式则关注性能，由于实际注册的模块一致，希望能够直接应用数据而不需要走整个解析过程。

那么本文将会以slate为例，处理嵌套结构的剪贴板模块设计，并且以quill为例，处理扁平结构的剪贴板模块设计。并且以飞书文档的内容为例，分别以行内结构、段落结构、组合结构、嵌入结构、块级结构为基础，分类型进行序列化与反序列化的设计。

嵌套结构

slate的基本数据结构是树形结构的JSON类型，相关的DEMO实现都在https://github.com/WindRunnerMax/DocEditor中。我们先以标题与加粗的格式为例，描述其基础内容结构:

[
  { children: [{ text: "Editor" }], heading: { type: "h1", id: "W5xjbuxy" } },
  { children: [{ text: "加粗", bold: true }, { text: "格式" }] },
];

实际上slate的数据结构形式非常类似于DOM结构的嵌套格式，甚至于DOM结构与数据结构是完全一一对应的，例如在渲染Embed结构中的零宽字符渲染时也会在数据结构中存在。因此在实现序列化与反序列化的过程中，理论上我们是可以直接实现其JSON结构完全对应为DOM结构的转换。

然而完全对应的情况只是理想情况下，富文本编辑器对于内容的实际组织形式可能会多种多样，例如实现引用块结构时，外层包裹的blockquote标签可能是数据结构本身存在，也可能是渲染时根据行属性动态渲染的，这种情况下就不能直接从数据结构的层面上将其序列化为完整的HTML。

// 结构渲染
[
  {
    blockquote: true,
    children:[
      { children: [{ text: "引用块 Line 1" }] },
      { children: [{ text: "引用块 Line 2" }] },
    ]
  }
];

// 动态渲染
[
  { children: [{ text: "引用块 Line 1" }], blockquote: true },
  { children: [{ text: "引用块 Line 2" }], blockquote: true },
];

此外，我们实现的编辑器必然是需要插件化的，在剪贴板模块中我们无法准确得知插件究竟是如何组织数据结构的。而在富文本编辑器中有着不成文的规矩，我们写入剪贴板的内容需要是尽可能规范化的结构，否则就无法跨编辑器粘贴内容。因此我们如果希望能够保证规范化的数据，就需要在剪贴板模块提供基本的序列化与反序列化的接口，而具体的实现则归于插件本身处理。

那么基于这个基本理念，我们首先来看序列化的实现，即JSON结构到HTML的转换过程。先前我们也提到了，对于编辑器本身的格式则关注性能，由于实际注册的模块一致，希望能够直接应用数据而不需要走整个解析过程，因此我们还需要在剪贴板中额外写入application/x-doc-editor的key，用来直接存储Fragment数据。

{
  "text/plain": "Editor\n加粗格式",
  "text/html": "<h1 id=\"W5xjbuxy\">Editor</h1><div data-line><strong>加粗</strong>格式</div>",
  "application/x-doc-editor": '[{"children":[{"text":"Editor"}],"heading":{"type":"h1","id":"W5xjbuxy"}},{"children":[{"text":"加粗","bold":true},{"text":"格式"}]}]',
}

我们接下来需要设想下如何将内容写入到剪贴板，以及实际触发的场景。除了常见的Ctrl+C来触发复制行为外，用户还有可能希望通过按钮来触发复制行为，例如飞书就可以通过工具栏复制整个行/块结构，因此我们不能直接通过OnCopy事件的clipboardData来写数据，而是需要主动触发额外的Copy事件。

前边也提到了navigator.clipboard.write同样可以写入剪贴板，调用这个API是不需要真正触发Copy事件的，但是当我们使用这个方法写入数据的时候，可能会抛出异常。此外这个API必须要在HTTPS环境下才能使用，否则会完全没有这个函数的定义。

在下面的例子中需要焦点在document上，需要在延迟时间内点击页面，否则会抛出DOMException。而即使当我们焦点在页面上，执行后同样会抛出DOMException，从抛出的异常来看是因为application/x-doc-editor类型不被支持。

(async () => {
  await new Promise((resolve) => setTimeout(resolve, 3000));
  const params = {
    "text/plain": "Editor",
    "text/html": "<span>Editor</span>",
    "application/x-doc-editor": '[{"children":[{"text":"Editor"}]}]',
  }
  const dataItems = {};
  for (const [key, value] of Object.entries(params)) {
    const blob = new Blob([value], { type: key });
    dataItems[key] = blob;
  }
  // DOMException: Type application/x-doc-editor not supported on write.
  navigator.clipboard.write([new ClipboardItem(dataItems)]);
})();

因为这个API不支持我们写入自定义的类型，因此我们就需要主动触发Copy事件来写入剪贴板，虽然我们同样可以将这个字段的数据作为HTML的某个属性值写入text/html中，但是我们这里还是将其独立出来处理。那么以同样的数据，我们使用document.execCommand写入剪贴板的方式就需要新建textarea元素来实现。

const data = {
  "text/plain": "Editor",
  "text/html": "<span>Editor</span>",
  "application/x-doc-editor": '[{"children":[{"text":"Editor"}]}]',
}
const textarea = document.createElement("textarea");
textarea.addEventListener("copy", event => {
  for (const [key, value] of Object.entries(data)) {
    event.clipboardData && event.clipboardData.setData(key, value);
  }
  event.stopPropagation();
  event.preventDefault();
});
textarea.style.position = "fixed";
textarea.style.left = "-999px";
textarea.style.top = "-999px";
textarea.value = data["text/plain"];
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);

当然这里我们能够很明显地看到由于textarea.select，我们原本的编辑器焦点会丢失。因此这里我们还需要注意，在执行复制的时候需要记录当前的选区值，在写入剪贴板之后先将焦点置于编辑器，之后再恢复选区。

接下来我们来处理插件化的定义，这里的Context非常简单，只需要记录当前正在处理的Node以及当前已经处理过后的html节点即可。而在插件中我们需要实现serialize方法，用来将Node序列化为HTML，willSetToClipboard则是Hook定义，当即将写入剪贴板时会被调用。

// packages/core/src/clipboard/utils/types.ts
/** Fragment => HTML */
export type CopyContext = {
  /** Node 基准 */
  node: BaseNode;
  /** HTML 目标 */
  html: Node;
};

// packages/core/src/plugin/modules/declare.ts
abstract class BasePlugin {
  /** 将 Fragment 序列化为 HTML  */
  public serialize?(context: CopyContext): void;
  /** 内容即将写入剪贴板 */
  public willSetToClipboard?(context: CopyContext): void;
}

既然我们的具体转换是在插件中实现的，那么我们主要的工作就是调度插件的执行了。为了方便处理数据，我们这里就不使用Immutable的形式来处理了，我们的Context对象是整个调度过程中保持一致的，即插件中我们所有的方法都是原地处理的。那么调度的方式就直接通过plugin组件调度，调用后从context中获取html节点即可。

// packages/core/src/plugin/modules/declare.ts
public call<T extends CallerType>(key: T, payload: CallerMap[T], type?: PluginType) {
  const plugins = this.current;
  for (const plugin of plugins) {
    try {
      // @ts-expect-error payload match
      plugin[key] && isFunction(plugin[key]) && plugin[key](payload);
    } catch (error) {
      this.editor.logger.warning(`Plugin Exec Error`, plugin, error);
    }
  }
  return payload;
}

const context: CopyContext = { node: child, html: textNode };
this.plugin.call(CALLER_TYPE.SERIALIZE, context);
value.appendChild(context.html);

那么重点的地方就是我们设计的serialize调度方法，我们这里的核心思想是: 当处理到文本行时，我们创建一个空的Fragment节点作为行节点，然后迭代每个文本值，取出当前行的每个Text值创建文本节点，以此创建context对象，然后调度PLUGIN_TYPE.INLINE级别的插件，将序列化后的HTML节点插入到行节点中。

// packages/core/src/clipboard/modules/copy.ts
if (this.reflex.isTextBlock(current)) {
  const lineFragment = document.createDocumentFragment();
  current.children.forEach(child => {
    const text = child.text || "";
    const textNode = document.createTextNode(text);
    const context: CopyContext = { node: child, html: textNode };
    this.plugin.call(CALLER_TYPE.SERIALIZE, context, PLUGIN_TYPE.INLINE);
    lineFragment.appendChild(context.html);
  });
}

然后针对每个行节点，我们同样需要调度PLUGIN_TYPE.BLOCK级别的插件，将处理过后的内容放置于root节点中，并将内容返回。这样我们就完成了最基本的文本行的序列化操作，这里我们在DOM节点上加入了额外的标识，这样可以帮助我们在反序列化的时候能够幂等地处理。

// packages/core/src/clipboard/modules/copy.ts
const root = rootNode || document.createDocumentFragment();
// ...
const context: CopyContext = { node: current, html: lineFragment };
this.plugin.call(CALLER_TYPE.SERIALIZE, context, PLUGIN_TYPE.BLOCK);
const lineNode = document.createElement("div");
lineNode.setAttribute(LINE_TAG, "true");
lineNode.appendChild(context.html);
root.appendChild(lineNode);

在基本的行结构处理完成后，还需要关注外层的Node节点，这里的数据处理方式与行节点类似。但是这里需要注意的是，这里是递归的结构处理，那么这里的JSON结构执行顺序就是深度优先遍历，即先处理文本节点以及行节点，然后再处理外部的块结构，由内而外地处理，由此来保证整个DOM树形结构的处理。

// packages/core/src/clipboard/modules/copy.ts
if (this.reflex.isBlock(current)) {
  const blockFragment = document.createDocumentFragment();
  current.children.forEach(child => this.serialize(child, blockFragment));
  const context: CopyContext = { node: current, html: blockFragment };
  this.plugin.call(CALLER_TYPE.SERIALIZE, context, PLUGIN_TYPE.BLOCK);
  root.appendChild(context.html);
  return root as T;
}

而对反序列化的处理则相对简单，Paste事件是不可以随意触发的，必须要由用户的可信事件来触发。那么我们就只能通过这个事件来读取clipboardData中的值，这里需要关注的数据除了先前复制的key，还有files文件字段需要处理。对于反序列化，我们同样需要在插件中具体实现，同样是需要原地修改的Context定义。

// packages/core/src/clipboard/utils/types.ts
/** HTML => Fragment */
export type PasteContext = {
  /** Node 目标 */
  nodes: BaseNode[];
  /** HTML 基准 */
  html: Node;
  /** FILE 基准 */
  files?: File[];
};

/** Clipboard => Context */
export type PasteNodesContext = {
  /** Node 基准 */
  nodes: BaseNode[];
};

// packages/core/src/plugin/modules/declare.ts
abstract class BasePlugin {
  /** 将 HTML 反序列化为 Fragment  */
  public deserialize?(context: PasteContext): void;
  /** 粘贴的内容即将应用到编辑器 */
  public willApplyPasteNodes?(context: PasteNodesContext): void;
}

这里的调度形式与序列化类似，如果剪贴板中存在application/x-doc-editor的key，则直接读取这个值。如果存在文件需要处理，则调度所有插件处理，否则则需要读取text/html的值，如果不存在的话就直接读取text/plain内容，同样构造JSON应用到编辑器中。

// packages/core/src/clipboard/modules/paste.ts
const files = Array.from(transfer.files);
const textDoc = transfer.getData(TEXT_DOC);
const textHTML = transfer.getData(TEXT_HTML);
const textPlain = transfer.getData(TEXT_PLAIN);
if (textDoc) {
  // ...
}
if (files.length) {
  // ...
}
if (textHTML) {
  // ...
}
if (textPlain) {
  // ...
}

这里的重点是对于text/html的处理，也就是反序列化将HTML节点转换为Fragment节点，这里的处理方式与序列化类似，同样是需要递归地处理数据。首先需要对HTML使用DOMParser对象进行解析，然后深度优先遍历由内而外处理每个节点，具体的实现依然需要调度插件来处理。

// packages/core/src/clipboard/modules/paste.ts
const parser = new DOMParser();
const html = parser.parseFromString(textHTML, TEXT_HTML);

// ...
const root: BaseNode[] = [];
// NOTE: 结束条件 `Text`、`Image`等节点都会在此时处理
if (current.childNodes.length === 0) {
  if (isDOMText(current)) {
    const text = current.textContent || "";
    root.push({ text });
  } else {
    const context: PasteContext = { nodes: root, html: current };
    this.plugin.call(CALLER_TYPE.DESERIALIZE, context);
    return context.nodes;
  }
  return root;
}
const children = Array.from(current.childNodes);
for (const child of children) {
  const nodes = this.deserialize(child);
  nodes.length && root.push(...nodes);
}
const context: PasteContext = { nodes: root, html: current };
this.plugin.call(CALLER_TYPE.DESERIALIZE, context);
return context.nodes;

接下来我们将会以slate为例，处理嵌套结构的剪贴板模块设计。并且以飞书文档的内容为源和目标，分别以行内结构、段落结构、组合结构、嵌入结构、块级结构为基础，在上述基本模式的调度下，分类型进行序列化与反序列化的插件实现。

行内结构

行内结构指的是加粗、斜体、下划线、删除线、行内代码块等行内的结构样式，这里以加粗为例来处理序列化与反序列化。在序列化行内结构部分，我们只需要判断如果是文本节点，就为其包裹一层strong节点，注意的是我们需要原地处理。

// packages/plugin/src/bold/index.tsx
export class BoldPlugin extends LeafPlugin {
  public serialize(context: CopyContext) {
    const { node, html } = context;
    if (node[BOLD_KEY]) {
      const strong = document.createElement("strong");
      // NOTE: 采用`Wrap Base Node`加原地替换的方式
      strong.appendChild(html);
      context.html = strong;
    }
  }
}

反序列化这部分我们也需要前提处理，我们还需要先处理纯文本的内容，这是公共的处理方式，即所有节点都是文本节点时，我们需要加入一级行节点。并且还需要对数据进行格式化，理论上我们应该对所有的节点都过滤一次Normalize，但是这里就简单地处理空节点数据。

// packages/plugin/src/clipboard/index.ts
export class ClipboardPlugin extends BlockPlugin {
  public deserialize(context: PasteContext): void {
    const { nodes, html } = context;
    if (nodes.every(isText) && isMatchBlockTag(html)) {
      context.nodes = [{ children: nodes }];
    }
  }

  public willApplyPasteNodes(context: PasteNodesContext): void {
    const nodes = context.nodes;
    const queue: BaseNode[] = [...nodes];
    while (queue.length) {
      const node = queue.shift();
      if (!node) continue;
      node.children && queue.push(...node.children);
      // FIX: 兜底处理无文本节点的情况 例如 <div><div></div></div>
      if (node.children && !node.children.length) {
        node.children.push({ text: "" });
      }
    }
  }
}

对于内容的处理则是判断出HTML节点存在加粗的格式后，对当前已经处理的Node节点树中所有的文本节点实现加粗操作，这里同样需要原地处理数据。这里我们还封装了applyMark的方法，用来处理所有的文本节点格式。其实这里有趣的是，因为我们的目标是构造整个JSON，我们就不需要关注使用slate的Transform模块操作Model。

// packages/plugin/src/clipboard/utils/apply.ts
export class BoldPlugin extends LeafPlugin {
  public deserialize(context: PasteContext): void {
    const { nodes, html } = context;
    if (!isHTMLElement(html)) return void 0;
    if (isMatchTag(html, "strong") || isMatchTag(html, "b") || html.style.fontWeight === "bold") {
      // applyMarker packages/plugin/src/clipboard/utils/apply.ts
      context.nodes = applyMarker(nodes, { [BOLD_KEY]: true });
    }
  }
}

段落结构

段落结构指的是标题、行高、文本对齐等结构样式，这里则以标题为例来处理序列化与反序列化。序列化段落结构，我们只需要Node是标题节点时，构造相关的HTML节点，将本来的节点原地包装并赋值到context即可，同样采用嵌套节点的方式。

// packages/plugin/src/heading/index.tsx
export class HeadingPlugin extends BlockPlugin {
  public serialize(context: CopyContext): void {
    const element = context.node as BlockElement;
    const heading = element[HEADING_KEY];
    if (!heading) return void 0;
    const id = heading.id;
    const type = heading.type;
    const node = document.createElement(type);
    node.id = id;
    node.setAttribute("data-type", HEADING_KEY);
    node.appendChild(context.html);
    context.html = node;
  }
}

反序列化则是相反的操作，判断当前正在处理的HTML节点是否为标题节点，如果是的话就将其转换为Node节点。这里同样需要原地处理数据，与行内节点不同的是，需要使用applyLineMarker将所有的行节点加入标题格式。

// packages/plugin/src/heading/index.tsx
export class HeadingPlugin extends BlockPlugin {
  public deserialize(context: PasteContext): void {
    const { nodes, html } = context;
    if (!isHTMLElement(html)) return void 0;
    const tagName = html.tagName.toLocaleLowerCase();
    if (tagName.startsWith("h") && tagName.length === 2) {
      let level = Number(tagName.replace("h", ""));
      if (level <= 0 || level > 3) level = 3;
      // applyLineMarker packages/plugin/src/clipboard/utils/apply.ts
      context.nodes = applyLineMarker(this.editor, nodes, {
        [HEADING_KEY]: { type: `h` + level, id: getId() },
      });
    }
  }
}

组合结构

组合结构在这里指的是引用块、有序列表、无序列表等结构样式，这里则以引用块为例来处理序列化与反序列化。序列化组合结构，同样需要Node是引用块节点时，构造相关的HTML节点进行包装。

// packages/plugin/src/quote-block/index.tsx
export class QuoteBlockPlugin extends BlockPlugin {
  public serialize(context: CopyContext): void {
    const element = context.node as BlockElement;
    const quote = element[QUOTE_BLOCK_KEY];
    if (!quote) return void 0;
    const node = document.createElement("blockquote");
    node.setAttribute("data-type", QUOTE_BLOCK_KEY);
    node.appendChild(context.html);
    context.html = node;
  }
}

反序列化同样是判断是否为引用块节点，并且构造对应的Node节点。这里与标题模块不同的是，标题是将格式应用到相关的行节点上，而引用块则是在原本的节点上嵌套一层结构。

// packages/plugin/src/quote-block/index.tsx
export class QuoteBlockPlugin extends BlockPlugin {
  public deserialize(context: PasteContext): void {
    const { nodes, html } = context;
    if (!isHTMLElement(html)) return void 0;
    if (isMatchTag(html, "blockquote")) {
      const current = applyLineMarker(this.editor, nodes, {
        [QUOTE_BLOCK_ITEM_KEY]: true,
      });
      context.nodes = [{ children: current, [QUOTE_BLOCK_KEY]: true }];
    }
  }
}

嵌入结构

嵌入结构在这里指的是图片、视频、流程图等结构样式，这里则以图片为例来处理序列化与反序列化。序列化嵌入结构，我们只需要Node是图片节点时，构造相关的HTML节点进行包装。与之前的节点不同的是，此时我们不需要嵌套DOM节点了，将独立节点原地替换即可。

// packages/plugin/src/image/index.tsx
export class ImagePlugin extends BlockPlugin {
  public serialize(context: CopyContext): void {
    const element = context.node as BlockElement;
    const img = element[IMAGE_KEY];
    if (!img) return void 0;
    const node = document.createElement("img");
    node.src = img.src;
    node.setAttribute("data-type", IMAGE_KEY);
    node.appendChild(context.html);
    context.html = node;
  }
}

对于反序列化的结构，判断当前正在处理的HTML节点是否为图片节点，如果是的话就将其转换为Node节点。与先前的转换不同的是，我们此时不需要嵌套结构，只需要固定children为零宽字符占位即可。实际上这里还有个常用的操作是，粘贴图片内容通常需要将原本的src转储到我们的服务上，例如飞书的图片就是临时链接，在生产环境中需要转储资源。

// packages/plugin/src/image/index.tsx
export class ImagePlugin extends BlockPlugin {
  public deserialize(context: PasteContext): void {
    const { html } = context;
    if (!isHTMLElement(html)) return void 0;
    if (isMatchTag(html, "img")) {
      const src = html.getAttribute("src") || "";
      const width = html.getAttribute("data-width") || 100;
      const height = html.getAttribute("data-height") || 100;
      context.nodes = [
        {
          [IMAGE_KEY]: {
            src: src,
            status: IMAGE_STATUS.SUCCESS,
            width: Number(width),
            height: Number(height),
          },
          uuid: getId(),
          children: [{ text: "" }],
        },
      ];
    }
  }
}

块级结构

块级结构指的是高亮块、代码块、表格等结构样式，这里则以高亮块为例来处理序列化与反序列化。高亮块则是飞书中比较定制的结构，本质上是Editable结构的嵌套，这里的两层callout嵌套结构则是为了兼容飞书的结构。序列化块级结构在slate中跟引用结构类似，在外层直接嵌套组合结构即可。

// packages/plugin/src/highlight-block/index.tsx
export class HighlightBlockPlugin extends BlockPlugin {
  public serialize(context: CopyContext): void {
    const { node: node, html } = context;
    if (this.reflex.isBlock(node) && node[HIGHLIGHT_BLOCK_KEY]) {
      const colors = node[HIGHLIGHT_BLOCK_KEY]!;
      // 提取具体色值
      const border = colors.border || "";
      const background = colors.background || "";
      const regexp = /rgb\((.+)\)/;
      const borderVar = RegExec.exec(regexp, border);
      const backgroundVar = RegExec.exec(regexp, background);
      const style = window.getComputedStyle(document.body);
      const borderValue = style.getPropertyValue(borderVar);
      const backgroundValue = style.getPropertyValue(backgroundVar);
      // 构建 HTML 容器节点
      const container = document.createElement("div");
      container.setAttribute(HL_DOM_TAG, "true");
      container.classList.add("callout-container");
      container.style.border = `1px solid rgb(` + borderValue + `)`;
      container.style.background = `rgb(` + backgroundValue + `)`;
      container.setAttribute("data-emoji-id", "balloon");
      const block = document.createElement("div");
      block.classList.add("callout-block");
      container.appendChild(block);
      block.appendChild(html);
      context.html = container;
    }
  }
}

反序列化则是判断当前正在处理的HTML节点是否为高亮块节点，如果是的话就将其转换为Node节点。这里的处理方式同样与引用块类似，只是需要在外层嵌套一层结构。

// packages/plugin/src/highlight-block/index.tsx
export class HighlightBlockPlugin extends BlockPlugin {
  public deserialize(context: PasteContext): void {
    const { nodes, html: node } = context;
    if (isHTMLElement(node) && node.classList.contains("callout-block")) {
      const border = node.style.borderColor;
      const background = node.style.backgroundColor;
      const regexp = /rgb\((.+)\)/;
      const borderColor = border && RegExec.exec(regexp, border);
      const backgroundColor = background && RegExec.exec(regexp, background);
      if (!borderColor || !backgroundColor) return void 0;
      context.nodes = [
        {
          [HIGHLIGHT_BLOCK_KEY]: {
            border: borderColor,
            background: backgroundColor,
          },
          children: nodes,
        },
      ];
    }
  }
}

扁平结构

quill的基本数据结构是扁平结构的JSON类型，相关的DEMO实现都在https://github.com/WindRunnerMax/BlockKit中。我们同样以标题与加粗的格式为例，描述其基础内容结构:

[
  { insert: "Editor" },
  { attributes: { heading: "h1" }, insert: "\n" },
  { attributes: { bold: "true" }, insert: "加粗" },
  { insert: "格式" },
  { insert: "\n" },
];

序列化的调度方案与slate类似，我们同样需要在剪贴板模块提供基本的序列化与反序列化的接口，而具体的实现则归于插件本身处理。针对序列化的方法，也是按照基本行遍历的方式，优先处理Delta结构的的文本，再处理行结构的格式。但是由于delta的数据结构是扁平的，因此我们不能直接递归处理，而是应该循环到EOL时将当前行的节点更新为新的行节点。

// packages/core/src/clipboard/modules/copy.ts
const root = rootNode || document.createDocumentFragment();
let lineFragment = document.createDocumentFragment();
const ops = normalizeEOL(delta.ops);
for (const op of ops) {
  if (isEOLOp(op)) {
    const context: SerializeContext = { op, html: lineFragment };
    this.editor.plugin.call(CALLER_TYPE.SERIALIZE, context);
    let lineNode = context.html as HTMLElement;
    if (!isMatchBlockTag(lineNode)) {
      lineNode = document.createElement("div");
      lineNode.setAttribute(LINE_TAG, "true");
      lineNode.appendChild(context.html);
    }
    root.appendChild(lineNode);
    lineFragment = document.createDocumentFragment();
    continue;
  }
  const text = op.insert || "";
  const textNode = document.createTextNode(text);
  const context: SerializeContext = { op, html: textNode };
  this.editor.plugin.call(CALLER_TYPE.SERIALIZE, context);
  lineFragment.appendChild(context.html);
}

反序列化的整体流程则与slate更加类似，因为我们同样都是以HTML为基准处理数据，深度递归遍历优先处理叶子节点，然后以处理过的delta为基准处理额外节点。只不过这里我们最终输出的数据结构会是扁平的，这样的话就不需要特别关注Normalize的操作。

// packages/core/src/clipboard/modules/paste.ts
public deserialize(current: Node): Delta {
  const delta = new Delta();
  // 结束条件 Text Image 等节点都会在此时处理
  if (!current.childNodes.length) {
    if (isDOMText(current)) {
      const text = current.textContent || "";
      delta.insert(text);
    } else {
      const context: DeserializeContext = { delta, html: current };
      this.editor.plugin.call(CALLER_TYPE.DESERIALIZE, context);
      return context.delta;
    }
    return delta;
  }
  const children = Array.from(current.childNodes);
  for (const child of children) {
    const newDelta = this.deserialize(child);
    delta.ops.push(...newDelta.ops);
  }
  const context: DeserializeContext = { delta, html: current };
  this.editor.plugin.call(CALLER_TYPE.DESERIALIZE, context);
  return context.delta;
}

此外，对于块级嵌套结构的处理，我们的处理方式可能会更加复杂，但是在当前的实现中还并没有完成，因此暂时还处于设计阶段。序列化的处理方式类似于下面的流程，与先前结构不同的是，当处理到块结构时，直接调用剪贴板的序列化模块，将内容嵌入即可。

| -- bold ··· <strong> -- | | -- line -- | | -- <div> ---| | | -- text ··· <span> ---- | | | | root -- lines -- | -- line -- leaves ··· <elements> --------- <div> ---| -- normalize -- html | | | -- codeblock -- ref(id) ··· <code> ------- <div> ---| | | | -- table -- ref(id) ··· <table> ---------- <div> ---|

反序列化的方式相对更复杂一些，因为我们需要维护嵌套结构的引用关系。虽然本身经过DOMParser解析过后的HTML是嵌套的内容，但是我们的基准解析方法目标是扁平的Delta结构，然而block、table等结构的形式是需要嵌套引用的结构，这个id的关系就需要我们以约定的形式完成。

| -- <b> -- text ··· text|r -- bold|r -- | | -- <align> -- <h1> -- | | -- head|r -- align|r -- | | | -- <a> -- text ··· text|r -- link|r -- | | <body> -- | | -- deltas | | -- <u> -- text ··· text|r -- unl|r --- | | | -- <code> -- <div> -- | | -- block|id -- ref|r -- | | -- <i> -- text ··· text|r -- em|r ---- |

接下来我们将会以delta数据结构为例，处理扁平结构的剪贴板模块设计。同样分别以行内结构、段落结构、组合结构、嵌入结构、块级结构为基础，在上述基本模式的调度下，分类型进行序列化与反序列化的插件实现。

行内结构

行内结构指的是加粗、斜体、下划线、删除线、行内代码块等行内的结构样式，这里以加粗为例来处理序列化与反序列化。序列化行内结构部分基本与slate一致，从这里开始我们采用单元测试的方式执行。

// packages/core/test/clipboard/bold.test.ts
it("serialize", () => {
  const plugin = getMockedPlugin({
    serialize(context) {
      if (context.op.attributes?.bold) {
        const strong = document.createElement("strong");
        strong.appendChild(context.html);
        context.html = strong;
      }
    },
  });
  editor.plugin.register(plugin);
  const delta = new Delta().insert("Hello", { bold: "true" }).insert("World");
  const root = editor.clipboard.copyModule.serialize(delta);
  const plainText = getFragmentText(root);
  const htmlText = serializeHTML(root);
  expect(plainText).toBe("HelloWorld");
  expect(htmlText).toBe(`<div data-node="true"><strong>Hello</strong>World</div>`);
});

反序列化部分则是判断当前正在处理的HTML节点是否为加粗节点，如果是的话就将其转换为Delta节点。

// packages/core/test/clipboard/bold.test.ts
it("deserialize", () => {
  const plugin = getMockedPlugin({
    deserialize(context) {
      const { delta, html } = context;
      if (!isHTMLElement(html)) return void 0;
      if (isMatchHTMLTag(html, "strong") || isMatchHTMLTag(html, "b") || html.style.fontWeight === "bold") {
        // applyMarker packages/core/src/clipboard/utils/deserialize.ts
        applyMarker(delta, { bold: "true" });
      }
    },
  });
  editor.plugin.register(plugin);
  const parser = new DOMParser();
  const transferHTMLText = `<div><strong>Hello</strong>World</div>`;
  const html = parser.parseFromString(transferHTMLText, "text/html");
  const rootDelta = editor.clipboard.pasteModule.deserialize(html.body);
  const delta = new Delta().insert("Hello", { bold: "true" }).insert("World");
  expect(rootDelta).toEqual(delta);
});

段落结构

段落结构指的是标题、行高、文本对齐等结构样式，这里则以标题为例来处理序列化与反序列化。序列化段落结构，我们只需要Node是标题节点时，构造相关的HTML节点，将本来的节点原地包装并赋值到context即可，同样采用嵌套节点的方式。

// packages/core/test/clipboard/heading.test.ts
it("serialize", () => {
  const plugin = getMockedPlugin({
    serialize(context) {
      const { op, html } = context;
      if (isEOLOp(op) && op.attributes?.heading) {
        const element = document.createElement(op.attributes.heading);
        element.appendChild(html);
        context.html = element;
      }
    },
  });
  editor.plugin.register(plugin);
  const delta = new MutateDelta().insert("Hello").insert("\n", { heading: "h1" });
  const root = editor.clipboard.copyModule.serialize(delta);
  const plainText = getFragmentText(root);
  const htmlText = serializeHTML(root);
  expect(plainText).toBe("Hello");
  expect(htmlText).toBe(`<h1>Hello</h1>`);
});

反序列化则是相反的操作，判断当前正在处理的HTML节点是否为标题节点，如果是的话就将其转换为Node节点。这里同样需要原地处理数据，与行内节点不同的是，需要使用applyLineMarker将所有的行节点加入标题格式。

// packages/core/test/clipboard/heading.test.ts
it("deserialize", () => {
  const plugin = getMockedPlugin({
    deserialize(context) {
      const { delta, html } = context;
      if (!isHTMLElement(html)) return void 0;
      if (["h1", "h2"].indexOf(html.tagName.toLowerCase()) > -1) {
        applyLineMarker(delta, { heading: html.tagName.toLowerCase() });
      }
    },
  });
  editor.plugin.register(plugin);
  const parser = new DOMParser();
  const transferHTMLText = `<div><h1>Hello</h1><h2>World</h2></div>`;
  const html = parser.parseFromString(transferHTMLText, TEXT_HTML);
  const rootDelta = editor.clipboard.pasteModule.deserialize(html.body);
  const delta = new Delta()
    .insert("Hello")
    .insert("\n", { heading: "h1" })
    .insert("World")
    .insert("\n", { heading: "h2" });
  expect(rootDelta).toEqual(MutateDelta.from(delta));
});

组合结构

组合结构在这里指的是引用块、有序列表、无序列表等结构样式，这里则以引用块为例来处理序列化与反序列化。序列化组合结构，我同样需要Node是引用块节点时，构造相关的HTML节点进行包装。在扁平结构下类似组合结构的处理方式会是渲染时进行的，因此序列化的过程与先前标题一致。

// packages/core/test/clipboard/quote.test.ts
it("serialize", () => {
  const plugin = getMockedPlugin({
    serialize(context) {
      const { op, html } = context;
      if (isEOLOp(op) && op.attributes?.quote) {
        const element = document.createElement("blockquote");
        element.appendChild(html);
        context.html = element;
      }
    },
  });
  editor.plugin.register(plugin);
  const delta = new MutateDelta().insert("Hello").insert("\n", { quote: "true" });
  const root = editor.clipboard.copyModule.serialize(delta);
  const plainText = getFragmentText(root);
  const htmlText = serializeHTML(root);
  expect(plainText).toBe("Hello");
  expect(htmlText).toBe(`<blockquote>Hello</blockquote>`);
});

反序列化同样是判断是否为引用块节点，并且构造对应的Node节点。这里与标题模块不同的是，标题是将格式应用到相关的行节点上，而引用块则是在原本的节点上嵌套一层结构。反序列化的结构处理方式也类似于标题处理方式，由于在HTML的结构上是嵌套结构，在应用时在所有行节点上加入引用格式。

// packages/core/test/clipboard/quote.test.ts
it("deserialize", () => {
  const plugin = getMockedPlugin({
    deserialize(context) {
      const { delta, html } = context;
      if (!isHTMLElement(html)) return void 0;
      if (isMatchHTMLTag(html, "p")) {
        applyLineMarker(delta, {});
      }
      if (isMatchHTMLTag(html, "blockquote")) {
        applyLineMarker(delta, { quote: "true" });
      }
    },
  });
  editor.plugin.register(plugin);
  const parser = new DOMParser();
  const transferHTMLText = `<div><blockquote><p>Hello</p><p>World</p></blockquote></div>`;
  const html = parser.parseFromString(transferHTMLText, TEXT_HTML);
  const rootDelta = editor.clipboard.pasteModule.deserialize(html.body);
  const delta = new Delta()
    .insert("Hello")
    .insert("\n", { quote: "true" })
    .insert("World")
    .insert("\n", { quote: "true" });
  expect(rootDelta).toEqual(MutateDelta.from(delta));
});

嵌入结构

嵌入结构在这里指的是图片、视频、流程图等结构样式，这里则以图片为例来处理序列化与反序列化。序列化嵌入结构，我们只需要Node是图片节点时，构造相关的HTML节点进行包装。与之前的节点不同的是，此时我们不需要嵌套DOM节点了，将独立节点原地替换即可。

// packages/core/test/clipboard/image.test.ts
it("serialize", () => {
  const plugin = getMockedPlugin({
    serialize(context) {
      const { op } = context;
      if (op.attributes?.image && op.attributes.src) {
        const element = document.createElement("img");
        element.src = op.attributes.src;
        context.html = element;
      }
    },
  });
  editor.plugin.register(plugin);
  const delta = new Delta().insert(" ", {
    image: "true",
    src: "https://example.com/image.png",
  });
  const root = editor.clipboard.copyModule.serialize(delta);
  const plainText = getFragmentText(root);
  const htmlText = serializeHTML(root);
  expect(plainText).toBe("");
  expect(htmlText).toBe(`<div data-node="true"><img src="https://example.com/image.png"></div>`);
});

对于反序列化的结构，判断当前正在处理的HTML节点是否为图片节点，如果是的话就将其转换为Node节点。同样的，这里还有个常用的操作是，粘贴图片内容通常需要将原本的src转储到我们的服务上，例如飞书的图片就是临时链接，在生产环境中需要转储资源。

// packages/core/test/clipboard/image.test.ts
it("deserialize", () => {
  const plugin = getMockedPlugin({
    deserialize(context) {
      const { html } = context;
      if (!isHTMLElement(html)) return void 0;
      if (isMatchHTMLTag(html, "img")) {
        const src = html.getAttribute("src") || "";
        const delta = new Delta();
        delta.insert(" ", { image: "true", src: src });
        context.delta = delta;
      }
    },
  });
  editor.plugin.register(plugin);
  const parser = new DOMParser();
  const transferHTMLText = `<img src="https://example.com/image.png"></img>`;
  const html = parser.parseFromString(transferHTMLText, TEXT_HTML);
  const rootDelta = editor.clipboard.pasteModule.deserialize(html.body);
  const delta = new Delta().insert(" ", { image: "true", src: "https://example.com/image.png" });
  expect(rootDelta).toEqual(delta);
});

块级结构

块级结构

块级结构指的是高亮块、代码块、表格等结构样式，这里则以块结构为例来处理序列化与反序列化。这里的嵌套结构还没有实现，因此这里仅仅是实现了上述deltas图示的测试用例，主要的处理方式是当存在引用关系时，主动调用序列化的方式将其写入到HTML中。

it("serialize", () => {
  const block = new Delta().insert("inside");
  const inside = editor.clipboard.copyModule.serialize(block);
  const plugin = getMockedPlugin({
    serialize(context) {
      const { op } = context;
      if (op.attributes?._ref) {
        const element = document.createElement("div");
        element.setAttribute("data-block", op.attributes._ref);
        element.appendChild(inside);
        context.html = element;
      }
    },
  });
  editor.plugin.register(plugin);
  const delta = new Delta().insert(" ", { _ref: "id" });
  const root = editor.clipboard.copyModule.serialize(delta);
  const plainText = getFragmentText(root);
  const htmlText = serializeHTML(root);
  expect(plainText).toBe("inside\n");
  expect(htmlText).toBe(
    `<div data-node="true"><div data-block="id"><div data-node="true">inside</div></div></div>`
  );
});

反序列化则是判断当前正在处理的HTML节点是否为块级节点，如果是的话就将其转换为Node节点。这里的处理方式则是，深度优先遍历处理节点内容时，若是出现block节点，则生成id并放置于deltas中，然后在ROOT结构中引用该节点。

it("deserialize", () => {
  const deltas: Record<string, Delta> = {};
  const plugin = getMockedPlugin({
    deserialize(context) {
      const { html } = context;
      if (!isHTMLElement(html)) return void 0;
      if (isMatchHTMLTag(html, "div") && html.hasAttribute("data-block")) {
        const id = html.getAttribute("data-block")!;
        deltas[id] = context.delta;
        context.delta = new Delta().insert(" ", { _ref: id });
      }
    },
  });
  editor.plugin.register(plugin);
  const parser = new DOMParser();
  const transferHTMLText = `<div data-node="true"><div data-block="id"><div data-node="true">inside</div></div></div>`;
  const html = parser.parseFromString(transferHTMLText, TEXT_HTML);
  const rootDelta = editor.clipboard.pasteModule.deserialize(html.body);
  deltas[ROOT_BLOCK] = rootDelta;
  expect(deltas).toEqual({
    [ROOT_BLOCK]: new Delta().insert(" ", { _ref: "id" }),
    id: new Delta().insert("inside"),
  });
});

每日一题

参考