discourse/app/serializers/admin_email_template_serializer.rb
Régis Hanol 5f6e69f64f
UX: Display interpolation keys as interactive pills in admin editors (#37254)
When editing site texts or email templates, admins need to know which
interpolation keys are available and whether they're being used
correctly.
Previously there was no UI for this.

Show interpolation keys as clickable pill buttons below the editor:
- Unused keys are dimmed — clicking inserts %{key} at the last cursor
position
- Used keys are highlighted green to confirm they're present in the text
- Invalid keys (typos or unknown keys) appear in red as non-clickable
pills

Implementation:
- New `<AdminInterpolationKeys>` template-only component renders the
pills
- New `interpolationKeysWithStatus()` utility in admin/lib centralizes
the
logic for computing key statuses (used/unused/invalid) across both
editors
- Controllers track textarea focus and cursor position via private
fields
  (no @Tracked — these are only read imperatively on pill click)
- Uses document.execCommand("insertText") for native undo/redo support
- Fix duplicate keys in backend by using Array#| (set union) instead of
Array#+

<img width="1662" height="1355" alt="2026-02-26 @ 17 09 32"
src="https://github.com/user-attachments/assets/05497832-4e17-4eb2-b4c1-e9e0e036304a"
/>

<img width="1662" height="1355" alt="2026-02-26 @ 17 09 19"
src="https://github.com/user-attachments/assets/f13271ad-511e-4fa1-9bec-eb6fbc7a66d8"
/>


Ref - t/172375
2026-02-27 21:21:26 +01:00

59 lines
1.6 KiB
Ruby

# frozen_string_literal: true
class AdminEmailTemplateSerializer < ApplicationSerializer
attributes :id, :title, :subject, :body, :can_revert?, :interpolation_keys
def id
object
end
def title
if I18n.exists?("#{object}.title")
I18n.t("#{object}.title")
else
object.gsub(/.*\./, "").titleize
end
end
def subject
if I18n.exists?("#{object}.subject_template.other")
@subject = nil
else
@subject ||= I18n.t("#{object}.subject_template")
end
end
def body
@body ||= I18n.t("#{object}.text_body_template")
end
def can_revert?
subject_key = "#{object}.subject_template"
body_key = "#{object}.text_body_template"
keys = [subject_key, body_key]
if options[:overridden_keys]
keys.any? { |k| options[:overridden_keys].include?(k) }
else
TranslationOverride.exists?(locale: I18n.locale, translation_key: keys)
end
end
def interpolation_keys
@interpolation_keys ||=
begin
keys = []
subject_key = "#{object}.subject_template"
subject_text = I18n.overrides_disabled { I18n.t(subject_key, locale: :en, default: "") }
keys |= I18nInterpolationKeysFinder.find(subject_text) if subject_text.is_a?(String)
body_key = "#{object}.text_body_template"
body_text = I18n.overrides_disabled { I18n.t(body_key, locale: :en, default: "") }
keys |= I18nInterpolationKeysFinder.find(body_text) if body_text.is_a?(String)
keys |= TranslationOverride.custom_interpolation_keys(object)
keys.sort
end
end
end