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

# できたもの
![image](https://user-images.githubusercontent.com/19757050/162162247-b3638617-3ea6-4855-a699-c5b5a27ff3c0.png)

# 使うもの
* react-hook-form @7.10.1
* material-ui @4.12.3
* next @11.0.1

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

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

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

![img](/mosaic-code.jpg)

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

![img](/mosaic-code.jpg)

dropの場合も処理は大体同じです。
値を取り出すときは、`e.dataTransfer` を使いましょう。
![img](/mosaic-code.jpg)

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


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

# できたもの
![image](https://user-images.githubusercontent.com/19757050/162162247-b3638617-3ea6-4855-a699-c5b5a27ff3c0.png)

# 使うもの
* react-hook-form @7.10.1
* material-ui @4.12.3
* next @11.0.1

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

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

export default function TopicNewPage() {
  const textAreaRef = useRef<HTMLInputElement>(null)
  ...
```

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

```js
<Controller
  name="body"
  control={control}
  rules={{
    required: '内容を入力してください',
  }}
  render={({ field }) => (
    <TextField
      variant="outlined"
      ...
      onDrop={handleDrop}
      onPaste={handlePaste}
      {...field}
      inputRef={textAreaRef} // 注意点1: refじゃなくてinputRef
      onChange={(e) => {
        field.onChange(e) // 注意点2: 別の関数でテキストエリアに文字列を挿入してもフォーカスを外すと消える
        handleCheck()
      }}
    />
  )}
/>
```

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

```js
const handlePaste = async (e) => {
  e.preventDefault() // 注意点3: 画像名がペーストされてしまうので、イベントを止める
  const { items } = e.clipboardData
  const file = items[0].getAsFile()
  const textarea = textAreaRef.current
  const sentence = textarea.value
  const len = sentence.length
  const pos = textarea.selectionStart
  const after = sentence.substring(pos, len)

  if (!file) { // 注意点4: 画像じゃなく文字列をペーストしたら、通常のペースト処理
    const text =
      textarea.value.substring(0, textarea.selectionStart) +
      e.clipboardData.getData('text')

    setValue('body', text + after) // 注意点5: テキストエリアに文字列を更新する
    textarea.setSelectionRange(text.length, text.length) // 注意点6: setValueを使うとカーソルが最後尾に行くので、ペーストしたテキストの最後に行くようにする
    return true
  }

  upload(file)
}

// 画像アップロード処理 + 文字列の埋め込み
const upload = async (file: File) => {
  const textarea = textAreaRef.current
  const sentence = textarea.value
  const len = sentence.length
  const pos = textarea.selectionStart
  const after = sentence.substring(pos, len)

  try {
    const { downloadUrl } = await uploadFile(file, `topics/${uuidv4()}`) // タイムスタンプの方がいいかも
    const imageUrl = '![image](' + downloadUrl + ')'
    const text =
      textarea.value.substring(0, textarea.selectionStart) + imageUrl
    setValue('body', text + after) // 注意点5と同じ
    textarea.setSelectionRange(text.length, text.length) // 注意点6と同じ
  } catch (error) {
    ...
  }
}
```

dropの場合も処理は大体同じです。
値を取り出すときは、`e.dataTransfer` を使いましょう。
```js
const handleDrop = async (e) => {
  e.preventDefault()
  const { files } = e.dataTransfer // ペーストの時は、clipboardDataを使う
  const file = files[0]
  if (!file) return

  upload(file)
}
```

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


できたもの

続きを読むには単価診断を受けてください 30秒