ISSUEではテキストエリアに画像をペーストしたり、ドラッグすると画像をアップロードしてマークダウンで読み込める文字列を自動で入力してくれます。この実装にReactHookFormを使う情報がなかなか落ちてなく苦労しました。

できたもの

使うもの

• react-hook-form @7.10.1
• material-ui @4.12.3
• next @11.0.1

実装

画像をペースト・ドロップしたら関数を発火させる

ReactのRefを設定して、テキストエリアに入力済みの値を取得するために使います。
注意点の1つめですが、material-uiだとrefではなく、inputRefを使います。

あとは、画像アップロード処理はドロップ時とペースト時に発火させたいので、
onDropとonPasteに関数をおきます。
注意点の2つ目ですが、react hook form でonChangeを使うときは書いてあるように、field.onChangeを書く必要があります。これを書くと、onPasteやonDropで画像の文字列をテキストエリアに挿入しても、テキストエリアのフォーカスを外すと文字列が消えてしまいます。ですので、文字列を更新するときは setValue を使います。詳しくは後述します。

ペーストしたら、画像をアップロードさせる

ペーストしたら画像ファイル取得、画像でなければ文字列をそのまま貼り付け、画像ならアップロードして文字列をテキストエリアに挿入する流れです。しかし、textarea.value = text のようなやり方だとonChangeの影響で値が更新されません。そこで、setValueを使いますがsetValueを使うと、文の途中で画像を挿入してもカーソルが最後尾に移動します。ですので、カーソルは挿入した画像の文字列の次におくように setSelectionRange を使いましょう。

dropの場合も処理は大体同じです。
値を取り出すときは、e.dataTransfer を使いましょう。

原因がReactHookFormのonChangeにあることにしばらく気づかなかったのでここは時間がかかりました。
マークダウンを扱うサービスでは、画像挿入は必須とも言えるので実装の一助になれば幸いです。