從零開始，開發一個 Web Office 套件（14）：複製、貼上、剪下、全選

這是一個系列部落格，最終目的是要做一個基於 HTML Canvas 的、類似於微軟 Office 的 Web Office 套件（包括：文件、表格、幻燈片……等等）。
部落格園：《從零開始, 開發一個 Web Office 套件》系列部落格目錄
富文字編輯器 Github repo 地址：https://github.com/zhaokang555/canvas-text-editor
富文字編輯器 線上 Demo：https://zhaokang555.github.io/canvas-text-editor/

2. 富文字編輯器（MVP）

2.27 Feature：複製、貼上文字

2.27.1 基本原理

在Mac上，當使用者按下command鍵時，KeyboardEvent.metaKey為true；在Windows上，當使用者按下ctrl鍵時，KeyboardEvent.ctrlKey為true.

參考資料：

• KeyboardEvent.metaKey：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/metaKey
• KeyboardEvent.ctrlKey：https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/ctrlKey
• https://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript

可以使用剪貼簿 Clipboard API 非同步讀寫系統剪貼簿：

參考資料：

• Clipboard.writeText()：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/writeText
• Clipboard.readText()：https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard/readText

2.27.2 演算法

• 當使用者按下command/ctrl + c時，檢測是否有選中文字：

  • 如果有選中文字，將選中文字複製到剪下板；
  • 如果沒有選中文字，不作任何操作。

• 當使用者按下command/ctrl + v時，如果剪貼簿內字串不是空字串，將其拆分成多個字元，插入游標處，並匹配游標處文字樣式；

• 當使用者按下command/ctrl + x時，檢測是否有選中文字：

  • 如果有選中文字：
    • 將選中文字複製到剪下板；
    • 刪除選中文字。
  • 如果沒有選中文字，不作任何操作。

• 當使用者按下command/ctrl + a時，選中全部文字。

2.27.3 實現

實現的同時，我們順便修復下之前留下的一個bug：當我們將游標移動到所有文字的末尾或開頭時（store.moveCursorToEnd, store.moveCursorToStart），如果編輯器內沒有文字，需要將游標挪動到左上角。

呼叫演算法：

實現演算法：

2.27.4 效果

複製：

貼上：

剪下：

全選：

（未完待續）