😭

contentEditableな要素にplain textでペーストする

2022/05/15に公開

Next.js

React

TypeScript

tech

結論

コード

const Hoge:React.FC = ():JSX.Element => {
  // ...

  // onPaste
  const handlePaste = (e: React.ClipboardEvent<HTMLDivElement>) => {
    // クリップボードの中身を取得
    const text = e.clipboardData.getData("text/plain");

    // キャレットの位置取得して貼り付け
    // ref: https://developer.mozilla.org/ja/docs/Web/API/Element/paste_event
    const selection = window.getSelection();
    if (!selection || !selection.rangeCount) throw new Error("何かおかしい");
    selection.deleteFromDocument();
    selection.getRangeAt(0).insertNode(document.createTextNode(text));

    e.preventDefault();
  };

  return (
    <div
      onPaste={(e) => handlePaste(e)}
      contentEditable
    />
  )
}

Demo

iframeだとnavigater機能しないのか直接アクセスしないとコピーボタンが機能してなさそう
https://34p2ll.csb.app/

引用:

結論

コード

Demo

Discussion