Draft.jsは、Reactベースのテキストエディタ構築フレームワークとして、クリップボード処理に優れた仕組みを提供します。リッチテキスト形式、画像貼り付け、クロスプラットフォーム対応まで、コピー＆ペーストに関連する多様な課題を解決する機能が備わっています。本稿では、Draft.jsのクリップボード処理の内部動作を解説し、5つの実用的テクニックを紹介します。

Draft.jsのクリップボード処理の基本

クリップボード処理の中心は、editOnPaste.jsモジュールとDraftPasteProcessor.jsプロセッサにあります。ユーザーが貼り付け操作を行うと、editOnPaste関数が呼び出され、DataTransferインターフェースを介してデータを取得します。その後、内容のタイプ（テキスト、HTML、ファイル）に応じて処理が分岐します。

テクニック1：貼り付け内容のタイプを自動判別

Draft.jsは、貼り付けされたコンテンツのタイプを自動で識別し、適切な処理を適用します。

• プレーンテキスト：splitTextIntoTextBlocks関数でテキストをブロック要素に分割
• リッチテキストHTML：DraftPasteProcessor.processHTMLでHTMLを解析し、Draftのコンテンツブロックに変換
• ファイル：getTextContentFromFilesでファイル内容を処理。カスタムロジックも可能

この処理はsrc/component/handlers/edit/editOnPaste.jsに実装されており、data.isRichText()やファイルの存在有無で分岐します。

テクニック2：エディタ内のコピペでスタイルを保持

Draft.jsエディタ内でコピー＆ペーストを行うと、元のスタイルやエンティティ情報が自動的に保持されます。これは、貼り付けHTML内のeditorKeyと内部クリップボードの内容を比較することで実現されます。

// 内部貼り付けの検出ロジック
if (html?.indexOf(editor.getEditorKey()) !== -1 || 
    (textBlocks.length === 1 && internalClipboard.size === 1 && 
     internalClipboard.first().getText() === text)) {
  // 内部クリップボードを使用し、スタイルを保持
}

これにより、エディタ内でのスタイルの一貫性が保たれ、ユーザーエクスペリエンスが向上します。

テクニック3：貼り付け内容のフォーマットをカスタマイズ

formatPastedTextプロパティを使うと、貼り付け内容の処理を簡単にカスタマイズできます。

<Editor
  formatPastedText={(text, html) => {
    // テキストの加工、フォーマットの除去など
    return {text: processedText, html: processedHtml};
  }}
/>

この機能は、特定のタグをフィルタリングしたり、貼り付け内容の書式を統一したい場合に有効です。editOnPaste.jsの101〜106行目に該当コードがあります。

テクニック4：ファイル貼り付けとメディアコンテンツの処理

Draft.jsにはファイル貼り付けを処理する仕組みが組み込まれており、handlePastedFilesプロパティでカスタムロジックを追加できます。

<Editor
  handlePastedFiles={(files) => {
    // 画像やドキュメントの処理
    files.forEach(file => {
      // アップロードやプレビュー生成
    });
    return 'handled'; // 処理済みとしてマーク
  }}
/>

ファイル処理のコアコードはeditOnPaste.jsの40〜93行目にあり、getTextContentFromFiles関数で内容を抽出するか、カスタム処理を呼び出します。

テクニック5：貼り付けスタイルの競合を解決

外部ソースからの貼り付け時、stripPastedStylesプロパティを有効にすると、外部スタイルを除去して競合を防げます。

<Editor stripPastedStyles={true} />

このオプションを有効にすると、貼り付け内容はテキスト情報のみが保持され、エディタの現在のスタイル設定が適用されます。実装はeditOnPaste.jsの114行目以降にあり、HTML処理をスキップしてテキストブロックを直接作成します。

まとめ：Draft.jsクリップボード処理の利点

Draft.jsのクリップボード処理は、階層的な設計と柔軟なAPIにより、高いカスタマイズ性を提供します。

1. 完全な処理フロー：イベントキャプチャからコンテンツレンダリングまでの一貫した処理
2. 多様なコンテンツ対応：テキスト、HTML、ファイルを統一的に扱うインターフェース
3. スタイルの保持と除去：内部貼り付けではスタイルを保持し、外部貼り付けでは選択的に除去可能
4. 豊富なカスタマイズオプション：プロパティを通じた個別処理ロジックの実装
5. クロスブラウザ対応：異なるブラウザのクリップボード動作の差異を吸収

これらのテクニックを活用することで、より堅牢でユーザーフレンドリーなリッチテキストエディタを構築できます。Draft.jsのクリップボード機能は、一般的なコピペの問題を解決するだけでなく、複雑な編集シナリオにも拡張可能な柔軟性を提供します。

公式リポジトリは以下のコマンドでクローンできます：

git clone https://gitcode.com/gh_mirrors/dr/draft-js