趣味開発でcontenteditableに触れてみる

NotionやDropbox Paperのような、使いやすいWYSIWYGエディタを作ってみたい。ライブラリを利用するのが良さそうだけど、その前に自分でcontenteditableなどを使って実装頑張ってみるというのも面白そうだ。

試してみて早速あれと思ったのは、onchangeが呼ばれない。contenteditableで入力のイベントリスナーを追加するにはoninputを使う必要がありそう。

なので、oninputに

function handleInput(e) { setEditorState(e.target.textContent) })

みたいなのを渡せばよさそうだ。そんで表示のほうでいい感じにparseしたものを表示すれば少しリッチなエディタっぽくなりそう。contenteditableの要素のなかで改行したときにうまいこと別要素を追加したり、構造がおかしくならないように制御できるのかまだ試せていない。きっと難しいんだろうな。

できればElmで書こうと思ってたけど、Html.EventsのonInputではe.target.valueの値しか渡ってこないからだいぶ無理そうだった。ぐへ〜。

しばらくあれこれ試してみようと思う。