hotwired · seanpdoyle · Sep 30, 2024
diff --git a/app/assets/javascripts/turbo.js b/app/assets/javascripts/turbo.js
@@ -5430,10 +5430,35 @@ function isBodyInit(body) {
   return body instanceof FormData || body instanceof URLSearchParams;
 }
 
+function observeAttributes(element, attributeFilter, callback) {
+  const observer = new MutationObserver((mutations => {
+    mutations.forEach((({attributeName: attributeName, target: target}) => {
+      callback(target.getAttribute(attributeName), attributeName);
+    }));
+  }));
+  observer.observe(element, {
+    attributeFilter: attributeFilter
+  });
+  attributeFilter.forEach((attributeName => {
+    callback(element.getAttribute(attributeName), attributeName);
+  }));
+  return observer;
+}
+
+function observeTurboAttributes({target: target}) {
+  observeAttributes(target, [ "data-turbo-permanent" ], (value => {
+    if (target.inputElement) {
+      target.inputElement.toggleAttribute("data-turbo-permanent", value ?? false);
+    }
+  }));
+}
+
 window.Turbo = Turbo$1;
 
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody);
 
+addEventListener("trix-initialize", observeTurboAttributes);
+
 var adapters = {
   logger: self.console,
   WebSocket: self.WebSocket

diff --git a/app/assets/javascripts/turbo.min.js b/app/assets/javascripts/turbo.min.js
diff --git a/app/assets/javascripts/turbo.min.js.map b/app/assets/javascripts/turbo.min.js.map
diff --git a/app/javascript/turbo/actiontext.js b/app/javascript/turbo/actiontext.js
@@ -0,0 +1,9 @@
+import { observeAttributes } from "./util"
+
+export function observeTurboAttributes({ target }) {
+  observeAttributes(target, ["data-turbo-permanent"], (value) => {
+    if (target.inputElement) {
+      target.inputElement.toggleAttribute("data-turbo-permanent", value ?? false)
+    }
+  })
+}
diff --git a/app/javascript/turbo/index.js b/app/javascript/turbo/index.js
@@ -7,7 +7,9 @@ import * as cable from "./cable"
 export { cable }
 
 import { encodeMethodIntoRequestBody } from "./fetch_requests"
+import { observeTurboAttributes } from "./actiontext"
 
 window.Turbo = Turbo
 
 addEventListener("turbo:before-fetch-request", encodeMethodIntoRequestBody)
+addEventListener("trix-initialize", observeTurboAttributes)
diff --git a/app/javascript/turbo/util.js b/app/javascript/turbo/util.js
@@ -0,0 +1,14 @@
+export function observeAttributes(element, attributeFilter, callback) {
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach(({ attributeName, target }) => {
+      callback(target.getAttribute(attributeName), attributeName)
+    })
+  })
+  observer.observe(element, { attributeFilter })
+
+  attributeFilter.forEach((attributeName) => {
+    callback(element.getAttribute(attributeName), attributeName)
+  })
+
+  return observer
+}
diff --git a/test/dummy/app/controllers/messages_controller.rb b/test/dummy/app/controllers/messages_controller.rb
@@ -1,4 +1,8 @@
 class MessagesController < ApplicationController
+  def new
+    @message = Message.new
+  end
+
   def show
     @message = Message.find(params[:id])
 

diff --git a/test/dummy/app/views/layouts/application.html.erb b/test/dummy/app/views/layouts/application.html.erb
@@ -7,6 +7,7 @@
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= yield :head %>
     <%= javascript_importmap_tags %>
+    <%= javascript_tag('import "trix"', type: "module") unless Rails.version < "7.1" %>
   </head>
 
   <body class="<%= "turbo-native" if turbo_native_app? %>">

diff --git a/test/dummy/app/views/messages/new.html.erb b/test/dummy/app/views/messages/new.html.erb
@@ -0,0 +1,9 @@
+<% if params[:method] == "morph" %>
+  <% turbo_refreshes_with method: :morph %>
+<% end %>
+
+<%= form_with model: @message do |form| %>
+  <%= form.rich_text_area :content, data: {turbo_permanent: true} %>
+<% end %>
+
+<%= link_to "Page Refresh", params.permit(:method), data: {turbo_action: "replace"} %>
diff --git a/test/dummy/config/application.rb b/test/dummy/config/application.rb
@@ -2,6 +2,8 @@
 
 require "action_controller/railtie"
 require "action_cable/engine"
+require "action_text/engine"
+require "active_storage/engine"
 require "active_job/railtie"
 require "active_model/railtie"
 require "active_record/railtie"

diff --git a/test/dummy/config/environments/test.rb b/test/dummy/config/environments/test.rb
@@ -24,6 +24,9 @@
   config.consider_all_requests_local       = true
   config.action_controller.perform_caching = false
 
+  # Store uploaded files on the local file system in a temporary directory.
+  config.active_storage.service = :test
+
   # Raise exceptions instead of rendering exception templates.
   config.action_dispatch.show_exceptions = :none
 

diff --git a/test/dummy/config/importmap.rb b/test/dummy/config/importmap.rb
@@ -6,3 +6,4 @@
 pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.js"
 pin "@rails/actioncable", to: "actioncable.esm.js"
+pin "trix", to: "trix.js"
diff --git a/test/dummy/config/storage.yml b/test/dummy/config/storage.yml
@@ -0,0 +1,3 @@
+test:
+  service: Disk
+  root: <%= Rails.root.join("tmp/storage") %>
diff --git a/test/system/actiontext_test.rb b/test/system/actiontext_test.rb
@@ -0,0 +1,38 @@
+require "application_system_test_case"
+
+class ActionTextTest < ApplicationSystemTestCase
+  setup { skip if Rails.version < "7.1" }
+
+  test "forwards [data-turbo-permanent] from trix-editor to its input and trix-toolbar" do
+    visit new_message_path
+
+    assert_trix_editor name: "message[content]", "data-turbo-permanent": true
+
+    find(:rich_text_area).execute_script <<~JS
+      this.removeAttribute("data-turbo-permanent")
+    JS
+
+    assert_trix_editor name: "message[content]", "data-turbo-permanent": false
+  end
+
+  test "keeps a trix-editor[data-turbo-permanent] interactive through a Page Refresh" do
+    visit new_message_path(method: "morph")
+    fill_in_rich_text_area with: "Hello"
+    click_link "Page Refresh"
+
+    assert_trix_editor name: "message[content]", with: /Hello/
+
+    fill_in_rich_text_area with: "Hello world"
+
+    assert_trix_editor name: "message[content]", with: /Hello world/
+  end
+
+  def assert_trix_editor(name: nil, with: nil, **options, &block)
+    trix_editor = find(:element, "trix-editor", **options, &block)
+
+    assert_field name, type: "hidden", with: with do |input|
+      assert_equal trix_editor.evaluate_script("this.inputElement"), input
+      assert_matches_selector input, :element, **options
+    end
+  end
+end