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/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" %>
+        import "@rails/actiontext"
+      <% else %>
+        import "trix/actiontext"
+      <% end %>
+    </script>
   </head>
 
   <body>

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

@@ -25,7 +25,5 @@ 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
   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"

action_text-trix/test/system/action_text_test.rb

@@ -10,4 +10,82 @@ class ActionTextTest < ApplicationSystemTestCase
 
     assert_element class: "trix-content", text: "Hello, world!"
   end
+
+  test "attaches and uploads image file" do
+    visit new_message_url
+    attach_fixture_file "racecar.jpg"
+
+    within :rich_text_area do
+      assert_selector :element, "img", src: %r{/rails/active_storage/blobs/redirect/.*/racecar.jpg\Z}
+    end
+
+    click_button "Create Message"
+
+    within class: "trix-content" do
+      assert_selector :element, "img", src: %r{/rails/active_storage/representations/redirect/.*/racecar.jpg\Z}
+    end
+  end
+
+  test "dispatches direct-upload:-prefixed events when uploading a File" do
+    visit new_message_url
+    events = capture_direct_upload_events do
+      attach_fixture_file "racecar.jpg"
+
+      assert_selector :element, "img", src: %r{/rails/active_storage/blobs/redirect/.*/racecar.jpg\Z}
+    end
+
+    assert_equal 1, ActiveStorage::Blob.where(filename: "racecar.jpg").count
+    if ActionText.version > "7.2.0"
+      assert_equal direct_upload_event("start"), events[0]
+      assert_equal direct_upload_event("progress", progress: "Number"), events[1]
+      assert_equal direct_upload_event("end"), events[2]
+    end
+  end
+
+  test "dispatches direct-upload:error event when uploading fails" do
+    visit new_message_url
+    events = capture_direct_upload_events do
+      accept_alert 'Error creating Blob for "racecar.jpg". Status: 0' do
+        go_offline!
+        attach_fixture_file "racecar.jpg"
+      end
+
+      assert_no_selector :element, "img", src: /racecar.jpg\Z/
+    end
+
+    assert_empty ActiveStorage::Blob.where(filename: "racecar.jpg")
+    if ActionText.version > "7.2.0"
+      assert_equal direct_upload_event("error", error: "String"), events.last
+    end
+  end
+
+  def attach_fixture_file(path)
+    attach_file(file_fixture(path)) { click_button "Attach Files" }
+  rescue Ferrum::JavaScriptError => error
+    case error.message
+    when /Direct upload failed/
+      # ignore the error in Ruby, let it bubble up on the browser side
+    else
+      raise
+    end
+  end
+
+  def capture_direct_upload_events(&block)
+    capture_events %w[
+      direct-upload:start
+      direct-upload:progress
+      direct-upload:error
+      direct-upload:end
+    ], &block
+  end
+
+  def direct_upload_event(name, target: find(:rich_text_area), **detail)
+    ActiveSupport::HashWithIndifferentAccess.new(
+      type: "direct-upload:#{name}",
+      target: target,
+      detail: detail.with_defaults(
+        attachment: "ManagedAttachment"
+      )
+    )
+  end
 end