そんなに使うわけではないのだが、ルビの入力を何とかしたかった。そんなわけで次のような2つのボタンを追加してルビ入力支援を実装した。
リンクボタンのすぐ左がrtタグ用ボタン、さらにその左がrubyタグ用ボタンとなる。ボタンのイメージはdashiconsではなく、「Tabler Icons」のSVGを使ってみた。
このボタンを実際に使ったのが、挨拶。「挨拶あいさつ」とタイプした後でそれらを選択し、rubyタグ用ボタンをクリック。続いて「あいさつ」を選択してrtタグ用ボタンをクリックする。rtタグ用ボタンについていくつか制御を検討したのだが、読みの部分を入力するタイミングはユーザー任せでいいかなと思い、rubyタグ内のみ有効にするといった制限については今回見送った。
理想的には、rtタグで囲むタイミングでrpタグを自動的に挿入したかったのだが、うまく対応する方法がわからなかった。かといってrpタグ用ボタンを追加するのも野暮ったいので、とりあえずはこんな感じに。
RichTextToolbarButtonのiconプロパティにdashiconsではなくSVGを指定するわけだが、JavaScript（ES5）の場合はcreateElement関数を使う必要があるのでちょっとだけ面倒かも！？（svgタグをそのまま記述できるJSXの方が楽だよね）