FIX: rich editor base64 replacement position (#37602)

On the rich editor automatic download of base64 image data, image
positions retrieved from `dataURIMap` are now sorted in descending order
before replacement. This prevents issues when replacing multiple images
with the same data URI by ensuring that later positions are replaced
first, avoiding offset errors.

frontend/discourse/app/static/prosemirror/extensions/image.js

@@ -358,7 +358,10 @@ const extension = {
             const tr = view.state.tr;
             const dataURIMap = dataImageUploader.getState(view.state);
 
-            dataURIMap.get(dataURI)?.forEach((pos) => {
+            const positions = [...dataURIMap.get(dataURI)].sort(
+              (a, b) => b - a
+            );
+            positions.forEach((pos) => {
               const node = view.state.doc.nodeAt(pos);
               tr.replaceWith(
                 pos,
@@ -428,7 +431,10 @@ const extension = {
               const tr = view.state.tr;
               const dataURIMap = dataImageUploader.getState(view.state);
 
-              dataURIMap.get(dataURI)?.forEach((pos) => {
+              const positions = [...dataURIMap.get(dataURI)].sort(
+                (a, b) => b - a
+              );
+              positions.forEach((pos) => {
                 const node = view.state.doc.nodeAt(pos);
                 tr.replaceWith(
                   pos,

spec/system/composer/prosemirror_pasting_spec.rb

@@ -161,6 +161,27 @@ describe "Composer - ProseMirror - Pasting content", type: :system do
       composer.toggle_rich_editor
       expect(composer).to have_value("image")
     end
+
+    it "replaces multiple base64 images with same data URI" do
+      valid_png_data_uri =
+        "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg=="
+      cdp.allow_clipboard
+      open_composer
+      html = <<~HTML
+        <p>before</p>
+        <img src="#{valid_png_data_uri}" alt="img1">
+        <p>middle</p>
+        <img src="#{valid_png_data_uri}" alt="img2">
+        <p>after</p>
+      HTML
+      cdp.copy_paste(html, html: true)
+      expect(rich).to have_no_css("img")
+      expect(rich).to have_text("before")
+      expect(rich).to have_text("middle")
+      expect(rich).to have_text("after")
+      composer.toggle_rich_editor
+      expect(composer).to have_value("before\n\nimage\n\nmiddle\n\nimage\n\nafter")
+    end
   end
 
   it "merges text with link marks created from parsing" do