Rails 7: Action Text添付ファイルのHTMLタグ名がカスタマイズ可能になった（翻訳）

Rails 7: Action Text添付ファイルのHTMLタグ名がカスタマイズ可能になった（翻訳）

Rails 7に、Action Textの添付ファイルのデフォルトHTMLタグ名をカスタム文字列に設定する機能が追加されました（#41158）。

変更前

Rails 6までは、Action TextのデフォルトHTMLタグ名はaction-text-attachmentになります。

Action Textのリッチテキストフィールドを添付ファイルでレンダリングすると以下のようなHTMLが生成されます。

<div class="trix-content">
  <div>
    <action-text-attachment sgid="BAh7CEki..." content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png" filename="saeloun logo.png" filesize="9613" width="600" height="600" previewable="true" presentation="gallery">
      <figure class="attachment attachment--preview attachment--png">
          <img src="http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png">

        <figcaption class="attachment__caption">
            <span class="attachment__name">saeloun logo.png</span>
            <span class="attachment__size">9.39 KB</span>
        </figcaption>
      </figure>
    </action-text-attachment>Description for the blog<br><br><br>
  </div>
</div>

このrich_text出力を解析してから、nokogiriでタグ名を変更することは可能です。

変更後

Rails 7では、以下の設定オプションを用いて添付ファイルのデフォルトHTMLタグ名をシンプルかつすっきりと設定できる方法が追加されました。

  # config/application.rb
  config.action_text.attachment_tag_name = "saeloun-rich-text-attachment"

<div class="trix-content">
  <div>Description for the blog<br>
    <saeloun-rich-text-attachment sgid="BAh7CEki..." content-type="image/png" url="http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png" filename="saeloun logo.png" filesize="9613" width="600" height="600" previewable="true" presentation="gallery">
      <figure class="attachment attachment--preview attachment--png">
          <img src="http://localhost:3000/rails/active_storage/representations/redirect/eyJfcmFpbHMiO.../saeloun%20logo.png">

        <figcaption class="attachment__caption">
            <span class="attachment__name">saeloun logo.png</span>
            <span class="attachment__size">9.39 KB</span>
        </figcaption>
      </figure>
    </saeloun-rich-text-attachment><br><br><br>
  </div>
</div>

原注: 既存のRailsプロジェクトで添付ファイルのHTMLタグ名を変更しても、以前の添付ファイルのHTMLタグ名がすべて更新されるわけではないので、新しい設定を導入してからレコードを更新するまではレンダリングされません。

そのようなリッチテキストのレコードをレンダリングしようとするとタグがサニタイズされるので、添付ファイルのHTMLのレンダリングはすべてスキップされます。

タグ名を以前の設定に戻すと、添付ファイルは従来どおりレンダリングされます。

関連記事

Rails 7: Active ModelからActiveModel::APIが切り出された（翻訳）