Stimulus JS Controller to Disable File Attachments in the Trix Editor

edit.html.erb

  <!-- File uploads will be disabled for any trix editor in this div -->
<div data-controller="registrations">
 
  <!-- Other html elements ... -->
  
  <div class="form-group">
    <%= form.label :bio, "Bio" %>
    <!-- File uploads, and the attachment button will be disabled in this rich text (trix) editor -->
    <%= form.rich_text_area :bio  %> 
  </div>
  
   <!-- Other html elements ... -->
</div>

registrations_controller.js

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    connect() {
        // Disable file attachment
        document.addEventListener("trix-file-accept", this.onTrixFileAccept)

        // Remove the file attachment button from the trix editor
        document.querySelector(".trix-button-group--file-tools").remove();
    }

    disconnect() {
        document.removeEventListener("trix-file-accept", this.onTrixFileAccept)
    }

    onTrixFileAccept(e) {
        // Prevents file uploads on trix (even when dragging/dropping)
        e.preventDefault()
    }
}

This actually disables them any where in the document, but if you only have one, this works just fine.