先に結論
この記事で分かること
対象読者
まず、ユーザー体験
全体像
1. Find / Replace を開く入口
2. Search extension は lazy load する
3. CodeMirror の search extension を compartment に差し込む
4. CodeMirror 標準パネルは隠して、独自 SearchBar を使う
5. SearchSupport API で React と CodeMirror をつなぐ
6. SearchQuery を作る
7. SearchBar の state
8. 開いたら検索欄に focus する
9. 選択範囲を検索語として初期入力する
10. 入力するたびに query を適用する
11. match count は UI 用に軽く数える
12. 一致なしを UI で表現する
13. オプション toggle は aria-pressed を持つ
14. Enter / Shift+Enter で移動する
15. CodeMirror keymap でも次へ / 前へを扱う
16. query が無効なら検索バーを開く
17. 置換は Replace row に分ける
18. 置換欄で Enter を押すと 1 件置換する
19. 1 件置換の流れ
20. 現在 selection が match か確認する
21. 全置換の流れ
22. Select All は CodeMirror の selectMatches に任せる
23. 検索バーの開閉と CodeMirror panel を同期する
24. SearchBar の layout
25. i18n
26. テストで守っていること
- SearchBar UI
- SearchBar CSS
- match count
- shortcut
実装の要点
- 1. UI と検索エンジンを分ける
- 2. Search extension は必要になるまで読み込まない
- 3. 選択範囲を初期検索語にする
- 4. 置換前に selection が query と一致するか確認する
- 5. SearchBar も accessibility の対象にする
この記事の要点を 3 行でまとめると