從零開始，開發一個 Web Office 套件（10）：捕獲鍵盤事件，輸入文字

這是一個系列部落格，最終目的是要做一個基於 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.22 Feature：通過鍵盤輸入英文

為了實現鍵盤輸入，我們需要在container div元素（canvas父元素）中插入一個input（或者textarea）元素，作為代理，來捕獲鍵盤相關事件。

所以，我們先來重構下程式碼。

2.22.1 重構

2.22.1.1 讓Editor獲取container HTML元素

首先，修改src/demo/App.tsx，將傳入new CanvasTextEditor()中的canvas元素替換為div元素：

然後，修改Editor：

同時，修改Store的建構函式，在其中儲存container元素：

2.22.1.2 在Store中初始化和儲存游標

然後，我們希望input元素可以讀取到游標的位置。但是，目前游標是作為Editor的property存在的，並不方便讀取。所以，就需要將游標提取到store中。

接下來，我們開始實現feature.

2.22.2 在點選文字時，記錄下游標的必要資訊

在點選文字時：

記錄下游標的如下資訊，儲存到Store中:

• cursorIdxInChars：游標在所有chars中，處於第幾的位置
• curParaIdx：游標在第幾個段落
• cursorIdxInCurPara：游標在當前段落中，處於第幾的位置

同時，順便記錄下目標字元的如下樣式資訊，儲存到游標例項上，方便以後插入字元時使用：

• color
• fontSize

2.22.3 處理英文輸入邏輯

在BlinkingCursor初始化時，根據需要插入input元素。

然後，當input元素的input事件觸發後：

• 根據鍵盤輸入的字元，新建Char，並插入全域性chars列表和當前段落chars列表
• 重新計算每個段落的佈局，以便於：重新生成SoftLine和計算chars位置
• 將游標移動到新插入的字元後面

2.22.4 效果

（未完待續）