Scrapbox で書ける仕組みがすごかった
WYSIWYGっぽく書けるけど、どうやって描画しているのか気になったので、開発者コンソールをおもむろに見てみる。
自分の知っているところだと contenteditable 属性とか使っているのかな〜、と思ってみるけど見つからない。
https://gyazo.com/e3f26cdbf82f340971c2613177e782cf
これ無しでやる方法ってあるの?と思ってネットで調べてみるも見つからない・・・。
仕方ない、虱潰しで見てみよう、と思って逐一追ってみたら、謎の textarea 要素がある。
https://gyazo.com/3c25f7e05d93e2ea40448ea9704a93c8
そう、これが入力するたびに動いているのだ。
https://gyazo.com/2b158fdcc442ecd603ded0b9534885fe
入力するに当たって、この textarea に入力した上で画面上に反映意しているっぽい。
(幅が変更されるのは、たぶん IME 入力中の状態と思われる)
更に、一文字毎におそらく一意になるクラスが割り振られている。
https://gyazo.com/2b991aa2f04c19da540a3c0f283db53c
たぶん、クリックした時にクリックされた要素を特定してその座標を取得して、textarea 要素を表示させているんじゃないかと思う。
いや〜、中々手が込んでいますね・・・。
これ以外の様々な操作にも対応しているので、かなり大変そう!
これだけこだわった作りをしているからこその、Scrapbox の快適な操作性なんだなー、と納得しました。