Paste files in the new editor

app/javascript/controllers/remote_auto_save_controller.js

@@ -10,4 +10,26 @@ 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,9 +103,9 @@
     <% 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">
+          <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">
             <%= 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" } %>
+                  data: { action: "house-md:change->remote-auto-save#change focusout->remote-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
           </form>
         </div>
       </div>