textareaをカスタマイズできるReact用のライブラリを作成しました

HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す

[daruyanagi]

うわー、大変そうだ……しゅごい

[ledsun]

“styleを全てコピーしたdivを作成しています。この中にtextareaと全く同じテキストを逐一表示し、textareaを透過させた上で被せれば、理論上はtextareaの見た目のままテキストを装飾できる”

[efcl]

textarea要素に対してオーバーレイする要素をおいて、テキストの装飾やイベントを設定できるReactライブラリについて