Quill編輯器實現原理初探

簡介

從事前端開發的同學，對富文字編輯器都不是很陌生。但是大多數富文字編輯器都是開箱即用，很少會對其實現原理進行深入的探討。假如靜下心去細細品味，會發現想要做好一款富文字編輯器，需要對整個前端生態有較深入的理解。在某種意義上說，富文字編輯器是前端一個集大成者。

富文字編輯器根據其實現方式，業內將其劃分為L0 ~ L2，層層遞進，功能的支撐也越來越強大。

L0級編輯器，基於contenteditable與document.execCommand指令，直接操作DOM，簡單粗暴，所見即所得，其優點是簡單，我們只需要聚焦在檢視層，document.execCommand自身也提供一些操作指令，可以滿足基本的文字操作需求，個性化的需求也可以通過封裝自定義指令來滿足；同理，缺點也很明顯，只關注檢視層，沒有邏輯抽象，對於操作記錄，檔案結構變化，是黑盒，對於檔案的版本管理、協同辦公之類的需求，無能為力，因此，帶著痛點，孕育出了L1級編輯器。

L1級編輯器核心亮點為增加了一層DOM抽象，用資料去驅動檢視的更新。HTML是一門標示語言，沒有較強邏輯性，而且可以層層巢狀，元素的種類又分為行內元素、行內塊元素、塊級元素，每個元素的表現形式又有區別，刪繁就簡，客觀描述出每個元素的結構與行為，會讓整個檔案變得自主可控。字元是分散在不同的DOM節點中，樹形結構遍歷的時間複雜度是O(n*h)，這無疑是一種巨大的效能消耗，因此L1級編輯器，用一種扁平化的資料結構去描述字元的位置、樣式，這樣對於字元查詢、字元操作，會提升不少效能，具體實現細節也是很複雜的，後面會慢慢介紹。

L0、L1級編輯器，自身並沒有脫離DOM,底層還是依賴於contenteditable，還是受限於瀏覽器自身，比如頁面排版、焦點、選區等。但是到了L2級編輯器，就脫離了瀏覽器原生操作。使用canvas或svg來實現內容編排，焦點、選區等操作都是自身手動去實現。這部分過於複雜，也只有Google、WPS之類的廠商才有實力去研發，我們不做過多的深究。

Quill編輯器API比較簡單，概念比較清晰，上手也比prosemirror簡單，又有底層客製化開發能力，使用範圍較廣。本文將簡單介紹Quill的一些核心概念和操作過程，實現細節在後續的文章中慢慢介紹。

Quill 基本原理

通過簡介中的介紹，我們知道L1級編輯器的幾個核心概念，

1. document檔案資料模型（對應Quill中的Parchment）
2. DOM節點Node的描述（對應Quill中的Blot）
3. 一種扁平化的字元位置、樣式描述（對應Quill中的Delta）

下文我們對以上Quill中的概念做進一步的描述。

核心概念

• Delta

套用官網的話,什麼是Delta?

這段話翻譯為中文為：「Deltas是一種簡單而富有表現力的格式，可以用來描述Quill的內容和變化。該格式是JSON的嚴格子集，是人類可讀的，機器很容易解析。Deltas可以描述任何Quill檔案，包括所有文字和格式資訊，沒有HTML的歧義和複雜性。」

一個Delta資料結構表現形式：

// 編輯器初始值
{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World" },
  ]
}
// 給World加粗後的值
// 3種動作：insert: 插入，retain：保留， delete：刪除
{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "bold": true } }
  ]
}

這個能力使檔案協同編輯成為了可能。最簡單的協同編輯，通過以下幾步操作即可：

1. 監聽編輯器文字改變text-change，獲取資料改變的描述Delta
2. 通過websocket將Delta分發給每位協同編輯使用者
3. 呼叫Quill範例中UpdateContents，更新協同編輯檔案

Delta對於檔案的位置、樣式描述，極大的簡化檔案操作，最原始的檔案查詢替換，需要深度優先遍歷，還需要遞迴查詢，十分不便，有了Delta，它精準的描述了每個字元的位置，我們就可以像處理純文字一樣處理富文字。

• Parchment與Blot

Parchment是document的資料抽象，而Blot是對Node節點的抽象。也就是說，Parchment是Blot的父級，很多個Blot組裝成一個Parchment。

Blot分類：

• ContainerBlot(容器節點)
• ScrollBlot root(檔案的根節點，不可格式化)
• BlockBlot 塊級(可格式化的父級節點)
• InlineBlot 內聯(可格式化的父級節點)

ScrollBlot的範例資料結構：

{
  "domNode": {}, // 真實的DOM節點
  "prev": null, // 前一個元素
  "next": null, // 後一個元素
  "uiNode": null,
  "registry": { // 註冊的資訊
    "attributes": {},
    "classes": {},
    "tags": {},
    "types": {}
  },
  "children": { // 子元素的節點描述，為一個連結串列
    "head": null, // 第一個元素
    "tail": null, // 最後一個元素
    "length": 0 // 子元素長度
  },
  "observer": {} // DOM監聽器
}

DOM變化與Parchment之間的資料同步

檔案資料描述固然好，但是真實DOM和資料模型如何實現實時同步呢？

在ScrollBlot中，有個MutationObserver，去實時監測DOM變化。當DOM發生變化時，會根據偵測到的真實DOM,去查詢對應節點的blot資訊，真實DOM與blot快取在Registry中，以一個WeakMap的形式儲存，具體快取可見：

// parchment\src\registry.ts
public static blots = new WeakMap<Node, Blot>();

根據MutationObserver回撥的變化資訊，執行對應的blot update，以blockBlot為例，其update方法如下：

// 
public update(
  mutations: MutationRecord[],
  _context: { [key: string]: any },
): void {
  // 呼叫ParentBlot中update方法，對新增和刪除節點做邏輯同步
  super.update(mutations, context);
  // 更新樣式的邏輯同步
  const attributeChanged = mutations.some(
    (mutation) =>
      mutation.target === this.domNode && mutation.type === 'attributes',
  );
  if (attributeChanged) {
    this.attributes.build();
  }
}

Parchment對映成Delta的過程

有了Parchment對DOM的抽象，就方便對檔案字元位置和樣式進行扁平化的描述，以編輯器初始化為例，看看Quill是如何獲取檔案模型的Delta。

1. 獲取ScrollBlot中所有的Block，預設從Block開始處理，即最小顆粒度是塊級元素

// editor.ts中獲取delta方法
getDelta(): Delta {
  return this.scroll.lines().reduce((delta, line) => {
    // 以Block為維度，分別獲取每行的delta描述
    return delta.concat(line.delta());
  }, new Delta());
}
// scroll.ts中獲取所有line的方法，即Block
lines(index = 0, length = Number.MAX_VALUE): (Block | BlockEmbed)[] {
    const getLines = (
      blot: ParentBlot,
      blotIndex: number,
      blotLength: number,
    ) => {
      let lines = [];
      let lengthLeft = blotLength;
      blot.children.forEachAt(
        blotIndex,
        blotLength,
        (child, childIndex, childLength) => {
          // 最小顆粒度為Block
          if (isLine(child)) {
            lines.push(child);
          } else if (child instanceof ContainerBlot) {
            lines = lines.concat(getLines(child, childIndex, lengthLeft));
          }
          lengthLeft -= childLength;
        },
      );
      return lines;
    };
    return getLines(this, index, length);
  }

2. 獲取每行資料的delta描述

// block.ts
delta(): Delta {
  if (this.cache.delta == null) {
    this.cache.delta = blockDelta(this);
  }
  return this.cache.delta;
}

function blockDelta(blot: BlockBlot, filter = true) {
  return (
    blot
      // @ts-expect-error
      .descendants(LeafBlot) // 獲取所有葉子節點
      .reduce((delta, leaf: LeafBlot) => {
        if (leaf.length() === 0) { // 葉子節點的長度
          return delta;
        }
        // 插入一個delta描述符，包含位置，樣式描述
        return delta.insert(leaf.value(), bubbleFormats(leaf, {}, filter));
      }, new Delta())
      .insert('\n', bubbleFormats(blot))
  );
}

獲取delta的過程也是遍歷至葉子節點，根據葉子節點的位置進行計算。

結語

以上只是對Quill的核心概念的簡單描述，還有很多細節沒有做過多的闡述，如如何註冊自定義擴充套件、Quill的渲染流程、Parchment架構等，後續文章會慢慢進行闡述。

參考資料

• Quill
• Quill富文字編輯器的實踐
• 深入淺出QuillJS