Reactで、貼り付けた画像を受け取って表示する方法

--- 1. 画像を貼り付ける ---
paste イベントの中身: {"target":"textarea","types":["Files"],"files":["image.png:image/png:254"],"items":["file:image/png"]}
--- 3. 文字を貼り付ける ---
paste イベントの中身: {"target":"textarea","types":["text/plain"],"files":[],"items":["string:text/plain"]}

import { useEffect, useState, type ClipboardEvent } from 'react';

type Pasted = { id: number; file: File };

let nextId = 1;

// File から表示用の URL を作り、使わなくなったら解放する
function useObjectUrl(file: File) {
  const [url, setUrl] = useState<string>();
  useEffect(() => {
    const objectUrl = URL.createObjectURL(file);
    setUrl(objectUrl);
    return () => URL.revokeObjectURL(objectUrl);
  }, [file]);
  return url;
}

function Preview({ file, onRemove }: { file: File; onRemove: () => void }) {
  const url = useObjectUrl(file);
  return (
    <li>
      {url && <img src={url} alt={`貼り付けた画像（${file.name}）`} width={120} />}
      <span>
        {file.name}（{file.type}、{file.size}バイト）
      </span>
      <button type="button" onClick={onRemove}>
        削除
      </button>
    </li>
  );
}

export function PasteImageBox() {
  const [text, setText] = useState('');
  const [images, setImages] = useState<Pasted[]>([]);
  const [message, setMessage] = useState('');

  const handlePaste = (e: ClipboardEvent<HTMLTextAreaElement>) => {
    const files = [...e.clipboardData.files].filter((file) => file.type.startsWith('image/'));
    // 画像がなければ何もしない。文字はふだんどおり入力欄に入る
    if (files.length === 0) return;
    // 画像のときは、入力欄に何も入らないように止める
    e.preventDefault();
    setImages((prev) => [...prev, ...files.map((file) => ({ id: nextId++, file }))]);
    setMessage(`画像を${files.length}枚貼り付けました`);
  };

  const remove = (id: number) => {
    setImages((prev) => prev.filter((image) => image.id !== id));
  };

  return (
    <div className="box">
      <label htmlFor="comment">コメント（画像も貼り付けられます）</label>
      <textarea
        id="comment"
        value={text}
        onChange={(e) => setText(e.target.value)}
        onPaste={handlePaste}
        rows={4}
      />
      <p role="status">{message}</p>
      <ul>
        {images.map(({ id, file }) => (
          <Preview key={id} file={file} onRemove={() => remove(id)} />
        ))}
      </ul>
    </div>
  );
}

貼り付けたあと: {"list":["image.png（image/png、254バイト）","image.png（image/png、170バイト）"],"imgs":[{"loaded":true,"w":80,"h":60},{"loaded":true,"w":40,"h":40}]}

貼り付けたあと: {"textarea":"猫の写真です","list":["image.png（image/png、254バイト）","image.png（image/png、170バイト）"]}

--- 4. 文字と画像が両方入ったクリップボードを貼り付ける ---
paste イベントの中身: {"target":"textarea","types":["text/plain","Files"],"files":["image.png:image/png:137"],"items":["string:text/plain","file:image/png"]}
貼り付けたあと: {"textarea":"","list":["image.png（image/png、254バイト）","image.png（image/png、170バイト）","image.png（image/png、137バイト）"]}
--- 6. 画像を貼り付けても preventDefault を呼ばない版 ---
画像だけのとき: 入力欄="" 一覧=["image.png"]
文字と画像が両方のとき: 入力欄="表のセルの文字" 一覧=["image.png","image.png"]

削除した画像の URL: 読めない（TypeError）
残っている画像の URL: 読める（170バイト）

function MemoPreview({ file }: { file: File }) {
  const url = useMemo(() => URL.createObjectURL(file), [file]);
  useEffect(() => () => URL.revokeObjectURL(url), [url]);
  return <img src={url} alt="memo" width={120} />;
}

--- 7. 開発用ビルド（StrictMode）で、URL を作る場所を比べる ---
画像の読み込み: ["memo: 表示されない（naturalWidth=0）","effect: 表示された（naturalWidth=50）"]
本番用ビルドでは: ["memo: 表示された（naturalWidth=50）","effect: 表示された（naturalWidth=50）"]

useEffect(() => {
  const onPaste = (e: globalThis.ClipboardEvent) => {
    if (!e.clipboardData) return;
    const images = imagesOf(e.clipboardData);
    if (images.length === 0) return;
    e.preventDefault();
    setFiles((prev) => [...prev, ...images]);
  };
  document.addEventListener('paste', onPaste);
  return () => document.removeEventListener('paste', onPaste);
}, []);

document で受ける版の一覧: [ 'image.png' ]
件名の入力欄に文字を貼り付けたあと: "お知らせ"