Introduce trix/actiontext module

In an effort to absorb responsibilities from `@rails/actiontext` (namely
the [app/javascript/actiontext/index.js][] and
[app/javascript/actiontext/attachment_upload.js][] files), this commit
introduces a new `trix/actiontext` file that the build process will
output to be consumable from the `action_text-trix` engine's asset
directory.

The `trix/actiontext` module will depend on two in-browser dependencies:

* `trix` expected to be imported separately
* `@rails/activestorage` expected to available for import. Since there
  is a direct dependency on `@rails/activestorage` through the
  `@rails/acitontext` package, the dependency will dependably (😉) be
  present.

In support of this change, this commit also expands the system test
coverage introduced by [#1258][] to also account for
`direct-upload:`-prefixed events dispatched during file uploads.

[app/javascript/actiontext/index.js]: https://github.com/rails/rails/blob/v8.0.3/actiontext/app/javascript/actiontext/index.js
[app/javascript/actiontext/attachment_upload.js]: https://github.com/rails/rails/blob/v8.0.3/actiontext/app/javascript/actiontext/attachment_upload.js
[#1258]: #1258

Author: seanpdoyle

action_text-trix/Gemfile

@@ -5,6 +5,7 @@ gemspec
 
 branch = ENV.fetch("RAILS_BRANCH", "main")
 gem "rails", github: "rails/rails", branch: branch
+gem "image_processing"
 gem "importmap-rails"
 gem "propshaft"
 gem "puma"

action_text-trix/app/assets/javascripts/trix.js

@@ -89,6 +89,9 @@ Copyright © 2025 37signals, LLC
   var engines = {
   	node: ">= 18"
   };
+  var peerDependencies = {
+  	"@rails/actiontext": "^8.1.100"
+  };
   var _package = {
   	name: name,
   	version: version,
@@ -107,7 +110,8 @@ Copyright © 2025 37signals, LLC
   	resolutions: resolutions,
   	scripts: scripts,
   	dependencies: dependencies,
-  	engines: engines
+  	engines: engines,
+  	peerDependencies: peerDependencies
   };
 
   const attachmentSelector = "[data-trix-attachment]";

action_text-trix/app/assets/javascripts/trix/actiontext.esm.js

@@ -0,0 +1,18 @@
+/*
+trix/actiontext 2.1.15
+Copyright © 2025 37signals, LLC
+ */
+import { AttachmentUpload } from '@rails/actiontext';
+
+addEventListener("trix-attachment-add", event => {
+  const {
+    attachment,
+    target
+  } = event;
+  if (attachment.file) {
+    const upload = new AttachmentUpload(attachment, target, attachment.file);
+    const onProgress = event => attachment.setUploadProgress(event.detail.progress);
+    target.addEventListener("direct-upload:progress", onProgress);
+    upload.start().then(attributes => attachment.setAttributes(attributes)).catch(error => alert(error)).finally(() => target.removeEventListener("direct-upload:progress", onProgress));
+  }
+});

action_text-trix/app/assets/javascripts/trix/actiontext.esm.min.js

@@ -0,0 +1,5 @@
+/*
+trix/actiontext 2.1.15
+Copyright © 2025 37signals, LLC
+ */
+import{AttachmentUpload as t}from"@rails/actiontext";addEventListener("trix-attachment-add",(e=>{const{attachment:r,target:a}=e;if(r.file){const e=new t(r,a,r.file),s=t=>r.setUploadProgress(t.detail.progress);a.addEventListener("direct-upload:progress",s),e.start().then((t=>r.setAttributes(t))).catch((t=>alert(t))).finally((()=>a.removeEventListener("direct-upload:progress",s)))}}));

action_text-trix/lib/action_text/trix/engine.rb

@@ -2,7 +2,7 @@ module Trix
   class Engine < ::Rails::Engine
     initializer "trix.asset" do |app|
       if app.config.respond_to?(:assets)
-        app.config.assets.precompile += %w[ trix.js trix.css ]
+        app.config.assets.precompile += %w[ trix.js trix.css trix/actiontext.esm.js trix/actiontext.esm.min.js ]
       end
     end
   end

action_text-trix/test/application_system_test_case.rb

@@ -7,6 +7,34 @@ class ApplicationSystemTestCase < ActionDispatch::SystemTestCase
     js_errors: true,
     headless: ENV["HEADLESS"] != "0"
   }
+
+  def capture_events(event_names)
+    execute_script <<~JS, *event_names
+      window.capturedEvents = []
+
+      function capture({ target: { id }, type, detail }) {
+        for (const name in detail) {
+          detail[name] = detail[name].constructor.name
+        }
+
+        capturedEvents.push({ id, type, detail })
+      }
+
+      for (const eventName of arguments) {
+        addEventListener(eventName, capture, { once: true })
+      }
+    JS
+
+    yield
+
+    evaluate_script("window.capturedEvents").each do |event|
+      event["target"] = find(id: event.delete("id"))
+    end
+  end
+
+  def go_offline!
+    page.driver.browser.network.emulate_network_conditions(offline: true)
+  end
 end
 
 Capybara.server = :puma, { Silent: true }

action_text-trix/test/dummy/app/javascript/application.js

@@ -1,2 +1 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
-import "trix"

action_text-trix/test/dummy/app/views/layouts/application.html.erb

@@ -20,6 +20,15 @@
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app %>
     <%= javascript_importmap_tags %>
+    <script type="module">
+      import "trix"
+
+      <% if ActionText.version < "8.2.0" %>
+        import "@rails/actiontext"
+      <% else %>
+        import "trix/actiontext"
+      <% end %>
+    </script>
   </head>
 
   <body>

action_text-trix/test/dummy/config/application.rb

@@ -26,6 +26,6 @@ class Application < Rails::Application
     # config.time_zone = "Central Time (US & Canada)"
     # config.eager_load_paths << Rails.root.join("extras")
 
-    config.active_storage.variant_processor = :disabled
+    config.active_storage.variant_processor = :vips
   end
 end

action_text-trix/test/dummy/config/importmap.rb

@@ -3,3 +3,6 @@
 pin "application"
 
 pin "trix"
+pin "trix/actiontext", to: "trix/actiontext.esm.js"
+pin "@rails/activestorage", to: "activestorage.esm.js"
+pin "@rails/actiontext", to: "actiontext.esm.js"