textareaをカスタマイズするReactのライブラリの記事
textareaをカスタマイズできるReact用のライブラリを作成しました
読んだ。
たしかにGitHubのプルリクエストのコメントなど、textareaなんだけど高機能というか、メンション先のサジェストがあったりするしどうやってるんだろうとは思っていた。
が、実際に高機能なtextareaを作ろうとするとこういうことをすることになるのか……。
contenteditableの話が出ていたが、自分は触ったことはないけどたしかにあんまりいい話は聞かないような気もする。
具体的には、textareaのstyleの内、テキストのサイズやレイアウトに影響すると思われるstyleを全てコピーしたdivを作成しています。この中にtextareaと全く同じテキストを逐一表示し、textareaを透過させた上で被せれば、理論上はtextareaの見た目のままテキストを装飾できることになります。実際はスクロールやリサイズなどtextareaとずれた見た目になってしまう要因が複数あるので、これらを個別に対応しています
すごい、こういうことをやっているのか。めちゃくちゃ大変だな……。
自分がこういう領域に手を出してなにか作れるようになるのか不安になってきた。
バンドルサイズの話も参考になった。
トランスパイルを出来る限り使わない(例えばnullish coalescingを使わず、falsyか否かで判定すれば十分な場合もあるはず)
これとかバグの原因になったりしそうな予感がするけど、でもバンドルサイズを削るとなるとこうするしかないのか……。