Support Translation Interpolations

app/helpers/application_helper.rb

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 347c95d..c212a9e 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -14,6 +14,10 @@ module ApplicationHelper
 
         @template.render translation
       end
+    rescue I18n::MissingInterpolationArgument => error
+      options[error.key] = "%{#{error.key}}"
+
+      retry
     end
   end
   private_constant :Editable

app/javascript/controllers/trix_form_controller.js

diff --git a/app/javascript/controllers/trix_form_controller.js b/app/javascript/controllers/trix_form_controller.js
index a5a1b48..a0ff4f2 100644
--- a/app/javascript/controllers/trix_form_controller.js
+++ b/app/javascript/controllers/trix_form_controller.js
@@ -1,14 +1,18 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-  static targets = [ "editor", "toolbarAddition" ]
+  static targets = [ "editor", "dialogAddition", "toolbarAddition" ]
 
   connect() {
     const buttonRow = this.toolbarTarget.querySelector(".trix-button-row")
+    const dialogs = this.toolbarTarget.querySelector("[data-trix-dialogs]")
 
     for (const target of this.toolbarAdditionTargets) {
       if (buttonRow) buttonRow.append(target)
     }
+    for (const target of this.dialogAdditionTargets) {
+      if (dialogs) dialogs.append(target)
+    }
 
     this.dismiss()
   }

app/javascript/packs/application.css

diff --git a/app/javascript/packs/application.css b/app/javascript/packs/application.css
index d80bccc..ac8041b 100644
--- a/app/javascript/packs/application.css
+++ b/app/javascript/packs/application.css
@@ -23,6 +23,10 @@ trix-toolbar .trix-button-group--block-tools {
   @apply hidden;
 }
 
+trix-toolbar .trix-dialog--interpolations {
+  @apply left-auto right-0 text-lg;
+}
+
 .trix-content a {
   @apply underline;
 }

app/models/translation.rb

diff --git a/app/models/translation.rb b/app/models/translation.rb
index 16a0df5..4cb83ac 100644
--- a/app/models/translation.rb
+++ b/app/models/translation.rb
@@ -5,6 +5,7 @@ class Translation
   attribute :locale, :string, default: -> { I18n.locale }
   attribute :key, :string
   attribute :value, :string
+  attribute :options, default: -> { {} }
 
   validates :value, presence: true
   validate { errors.add(:key, :invalid) if new_record? }
@@ -19,6 +20,19 @@ class Translation
     plain? ? content.to_plain_text : content.html_safe
   end
 
+  def template
+    without_interpolations = attributes.merge(
+      value: I18n.translate(key, locale: locale, **reserved_options),
+      options: reserved_options
+    )
+
+    Translation.new(without_interpolations)
+  end
+
+  def interpolations
+    interpolation_options.transform_values(&:to_s).reject { |key, value| "%{#{key}}" == value }
+  end
+
   def new_record?
     I18n.translate(key, locale: locale, default: "").blank?
   end
@@ -47,4 +61,14 @@ class Translation
   def to_s
     value
   end
+
+  private
+
+  def interpolation_options
+    options.except *I18n::RESERVED_KEYS
+  end
+
+  def reserved_options
+    options.slice *I18n::RESERVED_KEYS
+  end
 end

app/views/marketings/index.html.erb

diff --git a/app/views/marketings/index.html.erb b/app/views/marketings/index.html.erb
index cabb50f..96fc32f 100644
--- a/app/views/marketings/index.html.erb
+++ b/app/views/marketings/index.html.erb
@@ -5,11 +5,11 @@
 <div class="container mx-auto h-screen">
   <div class="text-center px-3 lg:px-0">
     <h1 class="my-4 text-2xl md:text-3xl lg:text-5xl font-black leading-tight">
-      <%= editable.translate(".hero.title") %>
+      <%= editable.translate(".hero.title", count: number_to_human(30_000_000)) %>
     </h1>
 
     <div class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
-      <%= editable.translate(".hero.subtitle.html") %>
+      <%= editable.translate(".hero.subtitle.html", content: "Lorem ipsum dolor") %>
     </div>
 
     <button class="mx-auto lg:mx-0 hover:underline bg-gradient-to-r from-orange-300 to-orange-400 text-gray-800 font-extrabold rounded py-4 px-8 shadow opacity-75 my-2 md:my-6">

app/views/translations/_form.html.erb

diff --git a/app/views/translations/_form.html.erb b/app/views/translations/_form.html.erb
index 04eb447..9784e67 100644
--- a/app/views/translations/_form.html.erb
+++ b/app/views/translations/_form.html.erb
@@ -16,6 +16,17 @@
     <div class="trix-button-row trix-button-row--end">
       <span class="trix-button-group" data-trix-form-target="toolbarAddition">
         <% tag.with_options class: "trix-button trix-button--icon", tabindex: -1 do |trix| %>
+          <% if translation.interpolations.any? %>
+            <%= trix.button type: :button, title: "Interpolations", data: { trix_action: "interpolations" } do %>
+              <svg viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <circle cx="17" cy="17" r="1" />
+                <circle cx="7" cy="7" r="1" />
+                <line x1="6" y1="18" x2="18" y2="6" />
+              </svg>
+            <% end %>
+          <% end %>
+
           <%= trix.button type: :submit, title: "Save" do %>
             <svg class="text-green-500" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
               <title>Save</title>
@@ -35,9 +46,30 @@
         <% end %>
       </span>
     </div>
+
+    <div class="trix-dialogs" data-trix-dialogs>
+      <% if translation.interpolations.any? %>
+        <div class="trix-dialog trix-dialog--interpolations" data-trix-dialog="interpolations" data-trix-form-target="dialogAddition">
+          <table class="table-auto">
+            <thead>
+              <th>Placeholder</th>
+              <th>Replacement</th>
+            </thead>
+            <tbody>
+            <% translation.interpolations.each do |interpolation, argument| %>
+              <tr>
+                <th class="border p-2">%{<%= interpolation %>}</th>
+                <td class="border p-2"><%= truncate(argument, length: 15) %></td>
+              </tr>
+            <% end %>
+            </tbody>
+          </table>
+        </div>
+      <% end %>
+    </div>
   </trix-toolbar>
 
-  <%= rich_text_area_tag "translation[value]", translation.value,
+  <%= rich_text_area_tag "translation[value]", translation.template,
     class: class_names("outline-none focus:shadow-outline min-h-0 border-0 p-0", { "trix-content": translation.html? }),
     aria: { label: translation.key },
     data: { trix_form_target: "editor" },

test/controllers/marketings_controller_test.rb

diff --git a/test/controllers/marketings_controller_test.rb b/test/controllers/marketings_controller_test.rb
index 7fdb688..c8375b2 100644
--- a/test/controllers/marketings_controller_test.rb
+++ b/test/controllers/marketings_controller_test.rb
@@ -33,6 +33,33 @@ class MarketingsControllerTest < ActionDispatch::IntegrationTest
     end
   end
 
+  test "#index interpolates plain text values" do
+    with_translations en: { marketings: { index: { hero: { title: "%{count}" } } } } do
+      get root_path
+
+      assert_response :success
+      assert_select "h1", text: "30 Million"
+    end
+  end
+
+  test "#index interpolates HTML text values" do
+    with_translations en: { marketings: { index: { hero: { subtitle: { html: "<em>%{content}</em>" } } } } } do
+      get root_path
+
+      assert_response :success
+      assert_select ".trix-content em", text: "Lorem ipsum dolor"
+    end
+  end
+
+  test "#index with a missing interpolation renders the placeholder" do
+    with_translations en: { marketings: { index: { hero: { title: "%{missing}" } } } } do
+      get root_path
+
+      assert_response :success
+      assert_select "h1", text: "%{missing}"
+    end
+  end
+
   private
 
   def assert_trix_editor(name, value)

test/models/translation_test.rb

diff --git a/test/models/translation_test.rb b/test/models/translation_test.rb
index 3719e58..5e3dd78 100644
--- a/test/models/translation_test.rb
+++ b/test/models/translation_test.rb
@@ -93,6 +93,46 @@ class TranslationTest < ActiveSupport::TestCase
     assert_equal "text", value
   end
 
+  test "#interpolations returns pairings of placeholders and replacements" do
+    with_translations en: { key: "%{count} %{name}" } do
+      translation = Translation.new(key: :key, options: { count: 1, name: "foo" })
+
+      interpolations = translation.interpolations
+
+      assert_equal({ count: "1", name: "foo" }, interpolations)
+    end
+  end
+
+  test "#interpolations omits replacements that are placeholders" do
+    with_translations en: { key: "%{count} %{name}" } do
+      translation = Translation.new(key: :key, options: { count: 1, name: "%{name}" })
+
+      interpolations = translation.interpolations
+
+      assert_equal({ count: "1" }, interpolations)
+    end
+  end
+
+  test "#template renders plain text translation placeholders" do
+    with_translations en: { key: "%{count}" } do
+      translation = Translation.new(key: :key)
+
+      template = translation.template
+
+      assert_equal "%{count}", template.to_s
+    end
+  end
+
+  test "#template renders HTML translation placeholders" do
+    with_translations en: { html: "<em>%{count}</em>" } do
+      translation = Translation.new(key: :html)
+
+      template = translation.template
+
+      assert_equal "<em>%{count}</em>", template.to_s
+    end
+  end
+
   test "#to_s returns the value for direct interpolation" do
     translation = Translation.new(value: "translation text")

test/system/translations_test.rb

diff --git a/test/system/translations_test.rb b/test/system/translations_test.rb
index 86fa8e6..fed5b0b 100644
--- a/test/system/translations_test.rb
+++ b/test/system/translations_test.rb
@@ -20,4 +20,21 @@ class TranslationsTest < ApplicationSystemTestCase
       end
     end
   end
+
+  test "edit with interpolation options" do
+    translation = translate("marketings.index.hero.title")
+
+    visit root_path
+    click_on "Edit"
+    within "h1", text: translation do
+      find(:rich_text_area).click
+      fill_in_rich_text_area with: "%{count} users"
+      click_on "Save"
+    end
+    click_on "Preview"
+
+    within "h1", text: "30 Million users" do
+      assert_no_text translation
+    end
+  end
 end