Extract into a single-purpose controller

app/javascript/controllers/form_controller.js

@@ -11,31 +11,6 @@ export default class extends Controller {
     this.cancelTarget?.click()
   }
 
-  pasteFiles(event) {
-    const editor = event.target.closest("house-md")
-    if (!editor) return
-    
-    const files = event.clipboardData?.files
-    if (!files?.length) return
-
-    event.preventDefault()
-
-    for (const file of files) {
-      const uploadEvent = new CustomEvent("house-md:before-upload", { 
-        bubbles: true, 
-        detail: { file },
-        cancelable: true 
-      })
-      
-      if (editor.dispatchEvent(uploadEvent)) {
-        const upload = document.createElement("house-md-upload")
-        upload.file = file
-        upload.uploadsURL = editor.dataset.uploadsUrl
-        editor.appendChild(upload)
-      }
-    }
-  }
-
   preventAttachment(event) {
     event.preventDefault()
   }

app/javascript/controllers/paste_controller.js

@@ -0,0 +1,28 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  pasteFiles(event) {
+    const editor = event.target.closest("house-md")
+    if (!editor) return
+    
+    const files = event.clipboardData?.files
+    if (!files?.length) return
+
+    event.preventDefault()
+
+    for (const file of files) {
+      const uploadEvent = new CustomEvent("house-md:before-upload", { 
+        bubbles: true, 
+        detail: { file },
+        cancelable: true 
+      })
+      
+      if (editor.dispatchEvent(uploadEvent)) {
+        const upload = document.createElement("house-md-upload")
+        upload.file = file
+        upload.uploadsURL = editor.dataset.uploadsUrl
+        editor.appendChild(upload)
+      }
+    }
+  }
+}

app/javascript/controllers/remote_auto_save_controller.js

@@ -10,26 +10,4 @@ export default class extends Controller {
   submit() {
     this.autoSaveOutlet.submit()
   }
-
-  pasteFiles(event) {
-    const files = event.clipboardData?.files
-    if (!files?.length) return
-    
-    const editor = this.element.querySelector('house-md')
-    if (!editor) return
-
-    for (const file of files) {
-      const upload = new CustomEvent('house-md:before-upload', {
-        bubbles: true,
-        detail: { file }
-      })
-      
-      if (editor.dispatchEvent(upload)) {
-        const uploadElement = document.createElement('house-md-upload')
-        uploadElement.file = file
-        uploadElement.uploadsURL = editor.dataset.uploadsUrl
-        editor.appendChild(uploadElement)
-      }
-    }
-  }
 }

app/views/bubbles/show.html.erb

@@ -103,7 +103,7 @@
     <% else %>
       <div class="comments">
         <div class="comment comment--new border-radius flex align-start full-width margin-block-double">
-          <form data-controller="remote-auto-save" data-remote-auto-save-auto-save-outlet="#bubble_form" class="flex flex-column gap full-width" data-action="paste->remote-auto-save#pasteFiles">
+          <form data-controller="remote-auto-save paste" data-remote-auto-save-auto-save-outlet="#bubble_form" class="flex flex-column gap full-width" data-action="paste->paste#pasteFiles">
             <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input", form: "bubble_form", placeholder: new_comment_placeholder(@bubble),
                   data: { action: "house-md:change->remote-auto-save#change focusout->remote-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
           </form>

app/views/comments/_new.html.erb

@@ -2,8 +2,8 @@
   <div class="flex flex-column full-width">
     <div class="position-relative">
       <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", 
-            data: { controller: "form", 
-                   action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->form#pasteFiles" } do |form| %>
+            data: { controller: "form paste", 
+                   action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
         <%= form.markdown_area :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(bubble) %>
         <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>

app/views/comments/edit.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag dom_id(@comment) do %>
   <div class="comment__content flex-inline flex-column full-width border border-radius">
     <%= form_with model: [@bubble.bucket, @bubble, @comment], class: "flex flex-column gap full-width",
-          data: { controller: "form", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %>
+          data: { controller: "form paste", action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
       <%= form.markdown_area :body, class: "input comment__input", required: true, autofocus: true %>
       <div class="flex gap-half justify-start">
         <%= form.button class: "btn btn--reversed txt-small", type: :submit do %>