從零開始，開發一個 Web Office 套件（12）：刪除文字 & 回車換行

這是一個系列部落格，最終目的是要做一個基於 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.24 Feature：刪除文字

2.24.1 演算法

1. 監聽input元素的compositionstart和compositionend事件。並記錄使用者狀態：是否正在使用輸入法
2. 監聽input元素的keydown事件。當事件觸發：
   1. 如果此時使用者沒有正在使用輸入法 & 使用者按下的是Backspace鍵：刪除游標前的一個字元
   2. 否則，不做任何操作
3. 當要刪除游標前的一個字元時：
   1. 如果游標處於不顯示狀態，不做任何操作
   2. 如果游標處於所有字元的前面，不做任何操作
   3. 如果游標處於當前段落的開頭，將當前段落和上一個段落合併，並將游標挪動到合併處
   4. 否則，刪除游標前一個字元，後面字元補位，並將游標挪動到前一個位置

參考文件：

• KeyboardEvent.key: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/key
• compositionstart：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/compositionstart_event
• compositionend: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event

2.24.2 實現

實現演算法的同時，我們對程式碼進行一些重構：

• 簡化邏輯：使用一個狀態store.charUnderCursor（游標所處的字元） 替代store.cursorIdxInChars, store.curParaIdx, store.cursorIdxInCurPara這3個狀態所起到的作用
• 減少狀態：使用store.getPrevCharInSoftLine(char: Char)替代shar.prev指標所起到的作用
• 修改分段邏輯：使用new Char('\n', ...)進行分段

呼叫演算法：

實現演算法&重構：

2.24.3 效果

刪除：

刪除with中文輸入法：

2.25 Feature：回車換行

2.25.1 演算法

監聽keydown事件，當使用者按下'Enter'鍵時：

1. 如果使用者正在使用輸入法，不做任何操作。程式後續會進入處理中文輸入法的邏輯：將輸入法中的原始英文字元上屏。
2. 如果使用者沒有正在使用輸入法:
   1. 如果游標在所有文字末尾，追加新的一個段落。
   2. 如果游標在文字中間（即游標前後都有字元），在游標處將本段落截斷，拆分成兩個段落。
3. 將游標移到下一段開頭的位置。

2.25.2 實現

直接呼叫我們上一小節重構好的store.insertChar(char)就可以：

2.25.3 效果

（未完待續）