Scrapboxの複雑GUI
同時編集できるエディタ
https://gyazo.com/343caf0f14cc565ce656a43e9a02aad2https://gyazo.com/471d8cab15bf364febe29e6f2cafb5ad
React + socket.ioで実装
自前エディタ
https://gyazo.com/f094ef438cce1fd3a66c7ef50f831da3
範囲選択は半透明の四角いDOM
カーソルはSVGの縦棒
左端に行毎の更新時刻が可視化されている
https://gyazo.com/0204f06d4ed4af1554dc3c2a87a806b2
https://gyazo.com/a79e9ee19821dbe62a507c96661e42a7
これ意外と簡単に実装できたshokai.icon
カーソルキーでの候補選択
隣接するAタグを上下キーで移動するのはブラウザの機能
Enterキーでページに移動
focusあたってるAタグを開くのも、ブラウザが持っている機能
text inputからdropdownへ、下キーで移動する機能
これだけ作ればほぼ完成だったshokai.icon
入力補完
https://gyazo.com/d487581f31f748e594a067d758880ef6
ロジックはインクリメンタルサーチと同じ
UIは自前実装
テキストの上にフキダシのコンポーネントを表示している