趣味開発で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の値しか渡ってこないからだいぶ無理そうだった。ぐへ〜。
しばらくあれこれ試してみようと思う。