From d2ab5ab53fb0ef6148f3e4df094a21ac74bf0b70 Mon Sep 17 00:00:00 2001
From: Rafael dos Santos Silva <xfalcox@gmail.com>
Date: Fri, 30 Jul 2021 18:46:55 -0300
Subject: [PATCH] FIX: Better composer placeholder handling during media
 optimization (#13907)

---
 .../app/components/composer-editor.js         | 48 ++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-editor.js b/app/assets/javascripts/discourse/app/components/composer-editor.js
index c9d5566e671..fcfa1683cb9 100644
--- a/app/assets/javascripts/discourse/app/components/composer-editor.js
+++ b/app/assets/javascripts/discourse/app/components/composer-editor.js
@@ -85,6 +85,8 @@ export default Component.extend({
   shouldBuildScrollMap: true,
   scrollMap: null,
   uploadFilenamePlaceholder: null,
+  uploadProcessingFilename: null,
+  uploadProcessingPlaceholdersAdded: false,
 
   @discourseComputed("uploadFilenamePlaceholder")
   uploadPlaceholder(uploadFilenamePlaceholder) {
@@ -691,21 +693,20 @@ export default Component.extend({
         });
       })
       .on("fileuploadprocess", (e, data) => {
-        this.appEvents.trigger(
-          "composer:insert-text",
-          `[${I18n.t("processing_filename", {
-            filename: data.files[data.index].name,
-          })}]()\n`
-        );
-      })
-      .on("fileuploadprocessalways", (e, data) => {
-        this.appEvents.trigger(
-          "composer:replace-text",
-          `[${I18n.t("processing_filename", {
-            filename: data.files[data.index].name,
-          })}]()\n`,
-          ""
-        );
+        if (!this.uploadProcessingPlaceholdersAdded) {
+          data.originalFiles
+            .map((f) => f.name)
+            .forEach((f) => {
+              this.appEvents.trigger(
+                "composer:insert-text",
+                `[${I18n.t("processing_filename", {
+                  filename: f,
+                })}]()\n`
+              );
+            });
+          this.uploadProcessingPlaceholdersAdded = true;
+        }
+        this.uploadProcessingFilename = data.files[data.index].name;
       })
       .on("fileuploadprocessstop", () => {
         this.setProperties({
@@ -714,6 +715,7 @@ export default Component.extend({
           isProcessingUpload: false,
           isCancellable: false,
         });
+        this.uploadProcessingPlaceholdersAdded = false;
       });
 
     $element.on("fileuploadpaste", (e) => {
@@ -804,7 +806,21 @@ export default Component.extend({
 
         this._setUploadPlaceholderSend(data);
 
-        this.appEvents.trigger("composer:insert-text", this.uploadPlaceholder);
+        if (this.uploadProcessingFilename) {
+          this.appEvents.trigger(
+            "composer:replace-text",
+            `[${I18n.t("processing_filename", {
+              filename: this.uploadProcessingFilename,
+            })}]()\n`,
+            this.uploadPlaceholder.trim()
+          );
+          this.uploadProcessingFilename = null;
+        } else {
+          this.appEvents.trigger(
+            "composer:insert-text",
+            this.uploadPlaceholder
+          );
+        }
 
         if (data.xhr && data.originalFiles.length === 1) {
           this.set("isCancellable", true);