從零開始,開發一個 Web Office 套件(12):刪除文字 & 回車換行

趙康發表於2022-03-24

這是一個系列部落格,最終目的是要做一個基於 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元素的compositionstartcompositionend事件。並記錄使用者狀態:是否正在使用輸入法
  2. 監聽input元素的keydown事件。當事件觸發:
    1. 如果此時使用者沒有正在使用輸入法 & 使用者按下的是Backspace鍵:刪除游標前的一個字元
    2. 否則,不做任何操作
  3. 當要刪除游標前的一個字元時:
    1. 如果游標處於不顯示狀態,不做任何操作
    2. 如果游標處於所有字元的前面,不做任何操作
    3. 如果游標處於當前段落的開頭,將當前段落和上一個段落合併,並將游標挪動到合併處
    4. 否則,刪除游標前一個字元,後面字元補位,並將游標挪動到前一個位置

參考文件:

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 效果

(未完待續)

相關文章