Add support for rendering Rich Text translations

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 9156e6a..a5a1b48 100644
--- a/app/javascript/controllers/trix_form_controller.js
+++ b/app/javascript/controllers/trix_form_controller.js
@@ -1,9 +1,15 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-  static targets = [ "editor" ]
+  static targets = [ "editor", "toolbarAddition" ]
 
   connect() {
+    const buttonRow = this.toolbarTarget.querySelector(".trix-button-row")
+
+    for (const target of this.toolbarAdditionTargets) {
+      if (buttonRow) buttonRow.append(target)
+    }
+
     this.dismiss()
   }

app/javascript/packs/application.css

diff --git a/app/javascript/packs/application.css b/app/javascript/packs/application.css
index 65c8d71..d80bccc 100644
--- a/app/javascript/packs/application.css
+++ b/app/javascript/packs/application.css
@@ -22,3 +22,7 @@ trix-toolbar .trix-button-row--end {
 trix-toolbar .trix-button-group--block-tools {
   @apply hidden;
 }
+
+.trix-content a {
+  @apply underline;
+}

app/models/translation.rb

diff --git a/app/models/translation.rb b/app/models/translation.rb
index 0d3cfd9..16a0df5 100644
--- a/app/models/translation.rb
+++ b/app/models/translation.rb
@@ -16,7 +16,7 @@ class Translation
   def value
     content = ActionText::Content.new(super)
 
-    content.to_plain_text
+    plain? ? content.to_plain_text : content.html_safe
   end
 
   def new_record?
@@ -32,6 +32,14 @@ class Translation
     end
   end
 
+  def html?
+    key.to_s == "html" || %w[_html .html].any? { key.to_s.ends_with? _1 }
+  end
+
+  def plain?
+    !html?
+  end
+
   def to_key
     [key.gsub(".", "_")]
   end

app/views/marketings/index.html.erb

diff --git a/app/views/marketings/index.html.erb b/app/views/marketings/index.html.erb
index 390c2a3..cabb50f 100644
--- a/app/views/marketings/index.html.erb
+++ b/app/views/marketings/index.html.erb
@@ -9,7 +9,7 @@
     </h1>
 
     <div class="leading-normal text-gray-800 text-base md:text-xl lg:text-2xl mb-8">
-      <%= translate(".hero.subtitle.html") %>
+      <%= editable.translate(".hero.subtitle.html") %>
     </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 1e848bd..04eb447 100644
--- a/app/views/translations/_form.html.erb
+++ b/app/views/translations/_form.html.erb
@@ -1,19 +1,20 @@
 <%= form_with model: translation, class: "relative", data: {
   controller: "trix-form",
-  action: "
-    trix-file-accept->trix-form#reject
+  action: token_list(
+    { "trix-file-accept->trix-form#reject" => translation.plain? },
+    { "trix-file-accept->trix-form#showToolbar" => translation.html? }, "
     trix-focus@document->trix-form#dismissDismissUnlessFocused
     click@document->trix-form#dismissUnlessContained
     focusout->trix-form#dismissUnlessContained
     reset->trix-form#dismiss
-  "
+  ")
 } do |form| %>
   <%= form.hidden_field :locale %>
   <%= form.hidden_field :key %>
 
   <trix-toolbar id="<%= dom_id(translation, :toolbar) %>" hidden>
     <div class="trix-button-row trix-button-row--end">
-      <span class="trix-button-group">
+      <span class="trix-button-group" data-trix-form-target="toolbarAddition">
         <% tag.with_options class: "trix-button trix-button--icon", tabindex: -1 do |trix| %>
           <%= 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">
@@ -37,8 +38,8 @@
   </trix-toolbar>
 
   <%= rich_text_area_tag "translation[value]", translation.value,
-    class: "outline-none focus:shadow-outline min-h-0 border-0 p-0",
+    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" },
-    toolbar: dom_id(translation, :toolbar) %>
+    toolbar: (dom_id(translation, :toolbar) if translation.plain?) %>
 <% end %>

app/views/translations/_translation.html.erb

diff --git a/app/views/translations/_translation.html.erb b/app/views/translations/_translation.html.erb
index 0a71547..15868b2 100644
--- a/app/views/translations/_translation.html.erb
+++ b/app/views/translations/_translation.html.erb
@@ -1 +1,5 @@
-<%= translation %>
+<% if translation.html? %>
+  <span class="trix-content"><%= translation %></span>
+<% else %>
+  <%= translation %>
+<% end %>

test/controllers/marketings_controller_test.rb

diff --git a/test/controllers/marketings_controller_test.rb b/test/controllers/marketings_controller_test.rb
index f305cfb..7fdb688 100644
--- a/test/controllers/marketings_controller_test.rb
+++ b/test/controllers/marketings_controller_test.rb
@@ -24,6 +24,15 @@ class MarketingsControllerTest < ActionDispatch::IntegrationTest
     end
   end
 
+  test "#index renders HTML translations as HTML" do
+    with_translations en: { marketings: { index: { hero: { subtitle: { html: "<strong>Bold</strong>" } } } } } do
+      get root_path
+
+      assert_response :success
+      assert_select ".trix-content strong", text: "Bold"
+    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 9bae499..3719e58 100644
--- a/test/models/translation_test.rb
+++ b/test/models/translation_test.rb
@@ -55,6 +55,36 @@ class TranslationTest < ActiveSupport::TestCase
     end
   end
 
+  test "#html? returns true when the key ends with html" do
+    assert_predicate Translation.new(key: "key_html"), :html?
+    assert_predicate Translation.new(key: "key.html"), :html?
+    assert_predicate Translation.new(key: "html"), :html?
+  end
+
+  test "#html? returns false when the key does not end with html" do
+    assert_not_predicate Translation.new(key: "key"), :html?
+    assert_not_predicate Translation.new(key: "html.key"), :html?
+  end
+
+  test "#plain? returns true when the key does no end with html" do
+    assert_predicate Translation.new(key: "key"), :plain?
+    assert_predicate Translation.new(key: "html.key"), :plain?
+  end
+
+  test "#plain? returns false when the key ends with html" do
+    assert_not_predicate Translation.new(key: "key_html"), :plain?
+    assert_not_predicate Translation.new(key: "key.html"), :plain?
+    assert_not_predicate Translation.new(key: "html"), :plain?
+  end
+
+  test "#value contains HTML elements for HTML translations" do
+    translation = Translation.new(key: :html, value: "<strong>text</strong>")
+
+    value = translation.value
+
+    assert_equal "<strong>text</strong>", value
+  end
+
   test "#value strips HTML elements for plain text translations" do
     translation = Translation.new(key: :plain, value: "<strong>text</strong>")