TipTap を react-hook-form と使う

目的

• 少しリッチな入力ができるようにしたい
• 既存の入力欄と組み合わせて、react-hook-form で管理したい

できたもの

tiptap 側はmarkdown-shortcutsのサンプルと、管理画面的なところで使うことを想定してplaceholderを組み合わせました。

コンポーネントの分割と名前はReact Hook Form を 1 年以上運用してきたちょっと良く使うための Tips in ログラス（と現状の課題）を参考にさせていただきました。

詰まった所

一文字入力する度に入力欄からフォーカスが外れる

useEditor(src/components/Editor/Editor.tsx#L44)で tiptap の Editor を初期化する際、onUpdateでonChange(外から渡される onChange = react-hook-form の state を更新する onChange)を呼ぶようにした所、一文字入力する度に入力欄からフォーカスが外れるようになってしまいました。

原因

(当たり前かもしれませんが)onUpdate で react-hook-form の state を更新するとonBlur/onChange等のメソッドが再生成されるため、

1. これらのメソッドに依存しているuseEditorが再実行される
2. editorのインスタンスが新しいものになる
3. editor 部分が再描画される
4. フォーカスが外れる

のような動きになっていたのではないかと思っています。

苦し紛れの対応として、onBlur時に onChange 的な意味合いのメソッド(src/components/Editor/Editor.tsx#L60)を呼ぶようにして対応しました。

prosemirror-commands, prosemirror-keymap 等の import エラー

この記事の内容とは少し異なりますが、tiptap の最近のバージョンで不具合(?)があるようです。
https://github.com/ueberdosis/tiptap/issues/3492

いくつかのパッケージを追加してあげることで、一旦起動できるようになりました。
私の環境では以下が必要でした。

yarn add \
  prosemirror-schema-list \
  prosemirror-keymap \
  prosemirror-gapcursor \
  prosemirror-history \
  prosemirror-dropcursor \
  prosemirror-commands

---

ご意見/ご指摘/気になったこと/もっとこうすれば良くなる等、コメントいただけると大喜びします！
ありがとうございました！