コピペ後にスクロール位置がトップに戻る

[h-yabi2]

結論

• 以下のコードを使用することでURLがペーストされた時にリンクに変換

  
  import { Quill } from 'react-quill'

const Clipboard = Quill.import('modules/clipboard')

class CreateLinkFromURL extends Clipboard { onPaste(e: ClipboardEvent): void { let clipboardData = e.clipboardData || (window as any).clipboardData let pastedText = clipboardData.getData('Text')

// URLを検出する正規表現パターン
// クエリパラメータやフラグメントを含むURLにも対応
const urlPattern = /^(https?:\/\/[\w\.-]+(?:\:[0-9]+)?(?:\/[^\s]*)?)/

// ペーストされたテキストがURLかどうかをチェック
if (urlPattern.test(pastedText)) {
  e.preventDefault() // デフォルトのペースト処理をキャンセル
  const matchedUrl = pastedText.match(urlPattern)[0]
  // リンクとして挿入
  const index =
    (this.quill.getSelection(true) || {}).index || this.quill.getLength()
  this.quill.insertText(index, matchedUrl, 'link', matchedUrl)
} else {
  super.onPaste(e)
}

} }

CreateLinkFromURL.blotName = 'createLinkFromURL' CreateLinkFromURL.className = 'create-link-from-url'

export default CreateLinkFromURL

### 登録時は以下のようにする

Quill.register('modules/clipboard', CreateLinkFromURL)

### CSSも以下を設定していた方が確実かも
- 以下の設定を追加することで、スクロール位置が移動しないようになった

.ql-clipboard { position: fixed !important; left: 50% !important; top: 50% !important; display: none; }

## 解決までの過程
- .ql-clipboard が影響してるっぽい
- 作業環境では、以下のcssを適用することで解消されたが、URLコピペ時にリンクに変換してくれる `quill-auto-links` が機能しなくなった

.ql-clipboard { position: fixed !important; left: 50% !important; top: 50% !important; display: none; }

- `clipboard` のカスタマイズは以下をもとに行う

const Clipboard = Quill.import('modules/clipboard')
class CustomClipboard extends Clipboard {
  onPaste(e: ClipboardEvent): void {
    alert('onPaste')
    super.onPaste(e)
  }
}
Quill.register('modules/clipboard', CustomClipboard)

## 参考
- https://github.com/zenoamaro/react-quill/issues/394
- https://qiita.com/daponta/items/9f40f95099f0616de8f0