Canvas簡歷編輯器-我的剪貼板裏究竟有什麼數據

Canvas圖形編輯器-我的剪貼板裏究竟有什麼數據

在這裏我們先來聊聊我們究竟應該如何操作剪貼板，也就是我們在瀏覽器的複製粘貼事件，並且在此基礎上聊聊我們在Canvas圖形編輯器中應該如何控制焦點以及如何實現複製粘貼行爲。

• 在線編輯: https://windrunnermax.github.io/CanvasEditor
• 開源地址: https://github.com/WindrunnerMax/CanvasEditor

關於Canvas簡歷編輯器項目的相關文章:

• 社區老給我推Canvas，我也學習Canvas做了個簡歷編輯器
• Canvas圖形編輯器-數據結構與History(undo/redo)
• Canvas圖形編輯器-我的剪貼板裏究竟有什麼數據
• Canvas簡歷編輯器-圖形繪製與狀態管理(輕量級DOM)
• Canvas簡歷編輯器-Monorepo+Rspack工程實踐

剪貼板

我們在平時使用一些在線文檔編輯器的時候，可能會好奇一個問題，爲什麼我能夠直接把格式複製出來，而不僅僅是純文本，甚至於說從瀏覽器中複製內容到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，如果需要兼容性比較高的話可以考慮，但是如果需要在現在瀏覽器中使用的話，則可以直接考慮使用HTML5規範的API完成，在瀏覽器中關於複製的API常用的有兩種，分別是document.execCommand("copy")以及navigator.clipboard.write。

對於document.execCommand("copy")來說，我們可以直接藉助textarea + execCommand來執行寫剪貼板的操作，在這裏需要注意的是如果這個事件必須要是isTrusted的事件，也就是說這個事件必須要是用戶觸發的，例如點擊事件、鍵盤事件等等，如果我們在打開頁面後直接執行這段代碼的話，則實際上是不會觸發的。此外，如果在控制檯執行這段代碼的話，寫入剪貼板是可行的，因爲我們通常會用回車這個操作來執行代碼，所以這個事件是isTrusted的。

const TEXT_PLAIN = "text/plain";

const data = {"text/plain": "1", "text/html":"<div>1</div>"};
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();
  },
  true
);
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);

對於navigator.clipboard來說，如果我們只寫入純文本的話是比較簡單的，直接調用write方法即可，只不過需要注意Document is focused，也就是焦點需要在當前頁面內。如果需要在剪貼板中寫入其他的值，則需要ClipboardItem對象來寫入Blob，在這裏需要注意的是，FireFox只有Nightly中有定義，所以在這裏需要判斷下，如果不存在這個對象的話就需要走降級的複製，可以使用上述的document.execCommand API。

const data = {"text/plain": "1", "text/html":"<div>1</div>"};
if (navigator.clipboard && window.ClipboardItem) {
  const dataItems = {};
  for (const [key, value] of Object.entries(data)) {
    const blob = new Blob([value], { type: key });
    dataItems[key] = blob;
  }
  navigator.clipboard.write([new ClipboardItem(dataItems)]);
}

緊接着我們可以聊下粘貼行爲，在這裏我們可以用onPaste事件以及navigator.clipboard.read方法，對於navigator.clipboard.read方法來說，我們可以直接讀取並且打印即可，在這裏需要注意的是需要Document is focused，所以這裏我們需要在控制檯延時幾秒，然後將鼠標點擊到頁面上纔可以正常打印，此外還有一個問題是打印的types並不完整，可能是必須要規範內的MIME Type才直接支持，自定義的key不支持。

navigator.clipboard.read().then(res => {
  for (const item of res) {
    const types = item.types;
    for (const type of types) {
      item.getType(type).then(data => {
        const reader = new FileReader();
        reader.readAsText(data, "utf-8");
        reader.onload = () => {
          console.info(type, reader.result);
        };
      });
    }
  }
});

針對onPaste事件，我們可以通過clipboardData獲取更加完整的相關數據，我們可以獲取比較完整的數據以及構造File數據，這裏可以使用下面的代碼直接在控制檯執行，並且可以將內容粘貼到其中，這樣就可以打印出當前剪貼板的內容了。

const input = document.createElement("input");
input.style.position = "fixed";
input.style.top = "100px";
input.style.right = "10px";
input.style.zIndex = "999999";
input.style.width = "200px";
input.placeholder = "Read Clipboard On Paste";
input.addEventListener("paste", event => {
  const clipboardData = event.clipboardData || window.clipboardData;
  for (const item of clipboardData.items) {
    console.log(`%c${item.type}`, "background-color: #165DFF; color: #fff; padding: 3px 5px;");
    console.log(item.kind === "file" ? item.getAsFile() : clipboardData.getData(item.type));
  }
});
document.body.appendChild(input);

Clipboard模塊

上邊我們已經瞭解到如何操作我們的剪貼板了，那麼下面我們就需要將其應用在編輯器當中了，不過我們首先需要關注焦點問題，因爲在編輯器中我們不能保證所有的焦點都是在編輯器Canvas上的，比如我彈出一個輸入框輸入畫布大小的時候，也是可能會使用粘貼行爲的，而如果此時進行粘貼是會觸發document上的onPaste事件的，那麼此時就有可能錯誤的將不應該粘貼的內容插入到剪貼板當中了，所以我們需要處理焦點，也就是說我們需要確定當前操作是在編輯器上的時候才觸發Copy/Paste行爲。

平時我做富文本相關的功能比較多，所以在實現畫板的時候總想按照富文本的設計思路來實現，同樣的因爲之前也說過我們需要實現History以及在編輯面板富文本的能力，所以焦點就很重要，如果焦點不在畫板上的時候如果按下Undo/Redo鍵畫板是不應該響應的，所以現在就需要有一個狀態來控制當前焦點是否在Canvas上，經過調研發現了兩個方案，方案一是使用document.activeElement，但是Canvas是不會有焦點的，所以需要將tabIndex="-1"屬性賦予Canvas元素，這樣就可以通過activeElement拿到焦點狀態了，方案二是在Canvas上方再覆蓋一層div，通過pointerEvents: none來防止事件的鼠標指針事件，但是此時通過window.getSelection是可以拿到焦點元素的，此時只需要再判斷焦點元素是不是設置的這個元素就可以了。

當焦點的問題解決之後，我們就可以直接進行剪貼板的讀寫了，這部分實現就比較簡單了，在複製的時候需要注意到將內容序列化爲JSON字符串，並且還要寫入一個text/plain的佔位符，這樣可以讓用戶在其他地方粘貼的時候是有感知的，對於我們的編輯器自身而言是不需要感知的。

public static KEY = "SKETCHING_CLIPBOARD_KEY";
private copyFromCanvas = (e: ClipboardEvent, isCut = false) => {
  const clipboardData = e.clipboardData;
  if (clipboardData) {
    const ids = this.editor.selection.getActiveDeltaIds();
    if (ids.size === 0) return void 0;
    const data: Record<string, DeltaLike> = {};
    for (const id of ids) {
      const delta = this.editor.deltaSet.get(id);
      if (!delta) return void 0;
      data[id] = delta.toJSON();
      if (isCut) {
        const parentId = this.editor.state.getDeltaStateParentId(id);
        this.editor.state.apply(new Op(OP_TYPE.DELETE, { id, parentId }));
      }
    }
    const str = TSON.stringify(data);
    str && clipboardData.setData(Clipboard.KEY, str);
    clipboardData.setData("text/plain", "請在編輯器中粘貼");
    isCut && this.editor.canvas.mask.clearWithOp();
    e.stopPropagation();
    e.preventDefault();
  }
};

粘貼的這部分需要處理一個交互問題，用戶肯定是希望在多選時也可以直接粘貼多個圖形的，所以在此處我們需要處理好粘貼的位置，在這裏我用的方法是取的所有選中圖形的中點，在用戶觸發粘貼行爲時將中點對齊到此時鼠標所在的位置，並且計算好偏移量應用到反序列化的圖形上，這樣就可以做到跟隨用戶的鼠標進行粘貼了，這裏還有一點是需要替換掉粘貼圖形的id，這是新的圖形當然就需要有新的唯一標識符。

public static KEY = "SKETCHING_CLIPBOARD_KEY";
private onPaste = (e: ClipboardEvent) => {
  if (!this.editor.canvas.isActive()) return void 0;
  const clipboardData = e.clipboardData;
  if (clipboardData) {
    const str = clipboardData.getData(Clipboard.KEY);
    const data = str && TSON.parse<Record<string, DeltaLike>>(str);
    if (data) {
      let range: Range | null = null;
      Object.values(data).forEach(deltaLike => {
        const { x, y, width, height } = deltaLike;
        const current = Range.fromRect(x, y, width, height);
        range = range ? range.compose(current) : current;
      });
      const compose = range as unknown as Range;
      if (compose) {
        const center = compose.center();
        const cursor = this.editor.canvas.root.cursor;
        const { x, y } = center.diff(cursor);
        Object.values(data).forEach(deltaLike => {
          const id = getUniqueId();
          deltaLike.id = id;
          deltaLike.x = deltaLike.x + x;
          deltaLike.y = deltaLike.y + y;
          const delta = DeltaSet.create(deltaLike);
          delta &&
            this.editor.state.apply(new Op(OP_TYPE.INSERT, { delta, parentId: ROOT_DELTA }));
        });
      }
    }
    e.stopPropagation();
    e.preventDefault();
  }
};

最後

本文我們介紹總結了應該如何操作剪貼板，也就是我們在瀏覽器的複製粘貼行爲，並且在此基礎上聊到了在Canvas圖形編輯器中的焦點問題以及如何實現複製粘貼行爲，雖然暫時不涉及到Canvas本身，但是這都是作爲編輯器本身的基礎能力，也是通用的能力可以學習。針對於這個編輯器我們可以介紹的能力還有很多，整體來看會涉及到數據結構、History模塊、複製粘貼模塊、畫布分層、事件管理、無限畫布、按需繪製、性能優化、焦點控制、參考線、富文本、快捷鍵、層級控制、渲染順序、事件模擬、PDF排版等等，整體來說還是比較有意思的，歡迎關注我並留意後續的文章。