ReactHookForm+MaterialUI+NextJSで画像を貼り付けてテキストエリアに画像URLを貼る

0

2022年04月07日 9:04

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

できたもの

image

使うもの

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

実装

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

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

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

img

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

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

img

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

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

# React.js
# Next.js
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。

-

ランク

目次を見る