FIX: pasting img on rich editor could be double-processed (#32356)

Without the `useCapture` as `true` on this `ComposerUpload`'s
`addEventListener`, if the clipboard contained both a Files array and a
`text/html` item, the paste event would be captured by ProseMirror
before being captured by the `ComposerUpload` setup and its
`preventDefault` call.

app/assets/javascripts/discourse/app/lib/uppy/composer-upload.js

@@ -147,7 +147,7 @@ export default class UppyComposerUpload {
       this.#fileInputEl,
       this._addFiles
     );
-    this.#editorEl.addEventListener("paste", this._pasteEventListener);
+    this.#editorEl.addEventListener("paste", this._pasteEventListener, true);
 
     this.uppyWrapper.uppyInstance = new Uppy({
       id: this.uppyId,

spec/system/composer/prosemirror_editor_spec.rb

@@ -533,7 +533,7 @@ describe "Composer - ProseMirror editor", type: :system do
         html: true,
       )
 
-      expect(page).to have_css(
+      expect(rich).to have_css(
         "img[src$='image.png'][alt='alt text'][data-orig-src='upload://1234567890']",
       )
     end
@@ -583,7 +583,7 @@ describe "Composer - ProseMirror editor", type: :system do
           lines">
         HTML
 
-      expect(page).to have_css("img[alt='alt with new lines'][title='title with new lines']")
+      expect(rich).to have_css("img[alt='alt with new lines'][title='title with new lines']")
 
       composer.toggle_rich_editor
 
@@ -591,6 +591,20 @@ describe "Composer - ProseMirror editor", type: :system do
         '![alt with new lines](https://example.com/image.png "title with new lines")',
       )
     end
+
+    it "ignores text/html content if Files are present" do
+      cdp.allow_clipboard
+      open_composer_and_toggle_rich_editor
+      cdp.copy_test_image
+      cdp.paste
+
+      expect(rich).to have_css("img", count: 1)
+
+      composer.focus # making sure the toggle click won't be captured as a double click
+      composer.toggle_rich_editor
+
+      expect(composer).to have_value("![image|244x66](upload://4uyKKMzLG4oNnAYDWCgpRMjBr9X.png)")
+    end
   end
 
   describe "trailing paragraph" do

spec/system/page_objects/cdp.rb

@@ -49,6 +49,20 @@ module PageObjects
       end
     end
 
+    def copy_test_image
+      image_path = "spec/fixtures/images/logo.png"
+      image_data = File.read(image_path)
+      image_base64 = Base64.strict_encode64(image_data)
+
+      page.evaluate_async_script(<<~JAVASCRIPT)
+        const htmlBlob = new Blob(['<img src="data:image/png;base64,placeholder"/>'], { type: 'text/html' });
+        const imageBlob = new Blob([Uint8Array.from(atob("#{image_base64}"), c => c.charCodeAt(0))], { type: 'image/png' });
+        const item = new ClipboardItem({ 'text/html': htmlBlob, 'image/png': imageBlob });
+
+        navigator.clipboard.write([item]).then(arguments[0]).catch(console.error);
+      JAVASCRIPT
+    end
+
     def clipboard_has_text?(text, chomp: false, strict: true)
       try_until_success do
         clipboard_text = chomp ? read_clipboard.chomp : read_clipboard