リッチテキストモジュールを直接使わない方がよい

HubSpot CMS（CMS Hub）で誰でも運用できるテンプレートを作るとなると、必然的にフレキシブルカラムまたはDrag and Drop Areasを使うことになると思います。

その際、通常のテキストや見出し、リストの表現にHubSpot標準のリッチテキストモジュールが有用です。.hs_cos_wrapper_type_rich_text クラスに子（孫）セレクタでCSSを当てることで、自由にスタイリングもできます。

しかし、執筆時点ではリッチテキストモジュールを直接するよりも、リッチテキストフィールドのみでも良いのでカスタムモジュールを使用する方がベストプラクティスと考えます。

というのも、リッチテキストモジュールを直接フレキシブルカラムやDrag and Drop Areasに配置した場合、出力前にコンテンツを制御することができません。逆に言うと、同じリッチテキストでもカスタムモジュールのリッチテキストフィールドを経由してコンテンツを出力するような形にしていると、HubLにてレンダリング前にHTMLに手を加えることができます。

例えばこのケースが有用なのは、画像の遅延読み込みです。

<img loading=“lazy”>

とすることで簡単に画像の遅延読み込みを実装できますが、仮にリッチテキストモジュールを使用する場合、画像を貼る度にいちいちソースコードを開き、img要素にloading属性を手作業で追加しなければなりません。大切な作業ではありますが、これは非常に面倒です（表示の関係で、全角の引用符を使用しています）。

これをカスタムモジュール経由にしていると、カスタムモジュール側で例えば

{{ module.content|replace('<img)', '<img loading=“lazy”') }}

という風に記述するだけで、カスタムモジュールが使用されている全ての箇所に自動的に画像の遅延読み込みを実装することができます。

画像の遅延読み込みだけでなく、アクセシビリティ対応などもあり、昨今ではHTML属性に後から手を加えることが非常に多くなっています。いまいま何か手を加える訳ではなくても、後々のためにリッチテキストは標準モジュールを使うのではなく、カスタムモジュールを経由させておいた方が良さそうです。