雑文発散

▼ [Crowi] Crowi の編集画面に Markdown 編集用のツールバーを付けてみた

「Markdown で書けるよ」というのが Crowi のウリではあるけれど、一方で Markdown に慣れていない人もいる。その救済策として編集用のツールバーがあったほうが良さそうという意見があったので、React を使って、ちょっと実装してみた。

• Add Markdown edit toolbar

どんなことができるかは、上記の GIF アニメや pull request を見てもらえれば分かると思う。ツールバーが常時表示されっぱなしで良いのかどうかは賛否ありそうだけど、とりあえず一番単純な形にしてしまった。

あと、GitHub 互換のキーボードショートカットも付けてみた。例えば、文字列を選択した状態で command + b を押すと、Bold の記号（ ** ）が追加される。

そして、この実装に当たって大変参考になったのが、この記事。

• JSからtextareaの文字列を変更した時、Undoに対応できるようにする

実は Crowi の Undo の挙動については、ここ3ヶ月くらい断続的に悩んでいたところだったので、この記事を見つけた時にはひとりではしゃいでいた。

ヒャッハー！

— suzuki (@suzuki) 2016年12月10日

うおおおおおおお

— suzuki (@suzuki) 2016年12月10日

細かすぎて誰にも伝わらないであろうこの喜びの気持ち。

— suzuki (@suzuki) 2016年12月10日

今回の pull request では、この記事ベースの置換処理を使っている。以前に実装した入力ヘルパー系の実装にはまだ適用していない。以前のものは jQuery + jQuery.selection を使っているのだけど、これも React コンポーネントに持っていきたいと思っている。その移動時に jQuery.selection の依存を外そうかな、と。