アップロード中の添付ファイルをDOM出力から除外

LexxyのRich Textエディタにおいて、アップロード中および失敗した添付ファイルがDOM出力に含まれないよう変更されました。これにより、未完了の添付ファイルがフォーム送信時にHTMLに含まれる問題が解消されます。

背景

従来の実装では、ファイルアップロード中の添付ファイルノードが exportDOM() メソッドで空の <img> タグを返していました。このため、アップロードが完了していない状態でフォームを送信すると、実体のない画像要素がHTMLに含まれてしまう問題がありました。Rich Textエディタの内容をサーバーに送信する際、完了していないアップロードの情報が含まれることは、データ整合性の観点から望ましくありません。

技術的な変更

ActionTextAttachmentUploadNode クラスの exportDOM() メソッドが変更され、DOM要素として null を返すようになりました。

変更前:

exportDOM() {
  const img = document.createElement("img")
  return { element: img }
}

変更後:

exportDOM() {
  return { element: null }
}

element: null を返すことで、Lexicalエディタのシリアライゼーション処理において、このノードがHTML出力から除外されます。exportJSON() メソッドは変更されていないため、エディタの内部状態としてはアップロード情報が保持され続けます。

テストコードでは、アップロード完了を待機する処理が追加されました。wait_until ブロックでエディタの empty? と blank? が両方とも false になるまで待機し、タイムアウト時は例外をキャッチして後続のアサーションに進みます。これにより、アップロード完了後の状態を確実にテストできるようになっています。

設計判断

DOM出力の完全な抑制 という方針が採用されました。

空の <img> タグを出力する代わりに null を返すことで、未完了のアップロードがHTMLに一切現れないようにしています。PR内のコミットメッセージ「Don't export any DOM for in-progress / errored uploads」が示すように、この変更はアップロード進行中だけでなく、エラー状態の添付ファイルにも適用されます。

この変更は、不完全な情報をHTMLに含めないことを優先した結果です。エディタのUI上ではアップロード状態が表示され続ける一方、HTMLシリアライゼーションの結果には含まれないという、表示層とデータ層の適切な分離が実現されています。

本PRは、Rich Textエディタにおけるファイルアップロードの状態管理を改善する変更です。exportDOM() が null を返すという単純な変更により、未完了の添付ファイルがフォーム送信データに含まれる問題を解消し、データの整合性を保証しています。