ビデオ添付ファイルにキャプション編集機能を追加

ビデオ添付ファイルに対してもキャプション編集用のtextareaが表示されるようになり、画像添付ファイルと同等の操作性が実現されました。これにより、ユーザーはビデオファイルにカスタムキャプションを付与できます。

背景

これまで、ビデオ添付ファイルのキャプション表示は静的なファイル情報（ファイル名とサイズ）のみで構成されており、ユーザーが独自のキャプションを追加する手段がありませんでした。画像添付ファイルでは編集可能なtextareaが用意されていたため、ビデオとの間に機能的な非対称性が生じていました。

この非対称性は createDOM() メソッドのDOM構築ロジックに起因していました。プレビュー可能な画像の場合は #createEditableCaption() が呼ばれ、それ以外のファイルは一律で #createDOMForNotImage() にフォールスルーする分岐しか存在せず、ビデオを個別に扱うパスが用意されていませんでした。

技術的な変更

ActionTextAttachmentNode に isVideo ゲッターを追加し、createDOM() にビデオ専用の分岐を設けることで、ビデオ添付ファイルのDOM構造を制御できるようになりました。

isVideo ゲッターは contentType が "video/" で始まるかどうかを判定します：

get isVideo() {
  return this.contentType.startsWith("video/")
}

createDOM() の分岐は以下のように変更されました：

変更前:

if (this.isPreviewableAttachment) {
  figure.appendChild(this.#createDOMForImage())
  figure.appendChild(this.#createEditableCaption())
} else {
  figure.appendChild(this.#createDOMForFile())
  figure.appendChild(this.#createDOMForNotImage())
}

変更後:

if (this.isPreviewableAttachment) {
  figure.appendChild(this.#createDOMForImage())
  figure.appendChild(this.#createEditableCaption())
} else if (this.isVideo) {
  figure.appendChild(this.#createDOMForFile())
  figure.appendChild(this.#createEditableCaption())
} else {
  figure.appendChild(this.#createDOMForFile())
  figure.appendChild(this.#createDOMForNotImage())
}

ビデオの場合、ファイルアイコンは引き続き #createDOMForFile() で生成しつつ、キャプション部分だけ #createEditableCaption() に差し替えています。ビデオファイル自体のプレビュー描画は変更せず、キャプション領域のみを可変にした最小限の変更です。

テストは Playwright を用いたブラウザテストとして追加されました（test/browser/tests/attachments/video_caption.test.js）。video/mp4 の content-type を持つ action-text-attachment 要素を挿入し、figcaption textarea の存在確認と placeholder 属性の検証、さらにキャプション入力・保存のフローを検証しています。

設計判断

ビデオを「プレビュー可能な画像」とは別のカテゴリとして明示的に分類する設計が採用されました。

isPreviewableAttachment の条件にビデオを含める方法も考えられますが、ビデオのレンダリング自体（#createDOMForImage() vs #createDOMForFile()）は画像と異なります。ビデオ用の独立した else if 分岐を設けることで、「ファイルアイコン＋編集可能キャプション」という組み合わせをビデオ固有の表現として明確に定義しています。

contentType.startsWith("video/") による判定は、video/mp4・video/webm・video/ogg など、MIMEタイプが video/ で始まる全てのビデオ形式を網羅します。特定の形式を列挙する代わりにプレフィックス判定を用いることで、将来の形式追加に対して設計が開かれています。

まとめ

isVideo ゲッターの追加と createDOM() への1分岐の挿入という最小限の変更で、ビデオ添付ファイルと画像添付ファイルの操作性が統一されました。既存のメソッド群（#createDOMForFile()・#createEditableCaption()）を再利用しつつ組み合わせを変えるだけで新しい挙動を実現しており、添付ファイルのDOM構築ロジックが組み合わせ可能な形に設計されていることが示されています。