FIX: backport caret moves to a wrong position when uploading an image via toolbar (#15865)

* FIX: Caret moves to a wrong position when uploading an image via toolbar

* Skip the test

app/assets/javascripts/discourse/app/components/d-editor.js

@@ -477,7 +477,7 @@ export default Component.extend(TextareaTextManipulation, {
       key: "#",
       afterComplete: (value) => {
         this.set("value", value);
-        return this._focusTextArea();
+        schedule("afterRender", this, this._focusTextArea);
       },
       transformComplete: (obj) => {
         return obj.text;
@@ -504,7 +504,7 @@ export default Component.extend(TextareaTextManipulation, {
       key: ":",
       afterComplete: (text) => {
         this.set("value", text);
-        this._focusTextArea();
+        schedule("afterRender", this, this._focusTextArea);
       },
 
       onKeyUp: (text, cp) => {

app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js

@@ -25,18 +25,16 @@ export default Mixin.create({
 
   // ensures textarea scroll position is correct
   _focusTextArea() {
-    schedule("afterRender", () => {
+    if (!this.element || this.isDestroying || this.isDestroyed) {
-      if (!this.element || this.isDestroying || this.isDestroyed) {
+      return;
-        return;
+    }
-      }
 
-      if (!this._textarea) {
+    if (!this._textarea) {
-        return;
+      return;
-      }
+    }
 
-      this._textarea.blur();
+    this._textarea.blur();
-      this._textarea.focus();
+    this._textarea.focus();
-    });
   },
 
   _insertBlock(text) {
@@ -171,7 +169,7 @@ export default Mixin.create({
     this._$textarea.prop("selectionStart", (pre + text).length + 2);
     this._$textarea.prop("selectionEnd", (pre + text).length + 2);
 
-    this._focusTextArea();
+    schedule("afterRender", this, this._focusTextArea);
   },
 
   _addText(sel, text, options) {

app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js

@@ -316,6 +316,30 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) {
     appEvents.trigger("composer:add-files", image);
   });
 
+  skip("should place cursor properly after inserting a placeholder", async function (assert) {
+    const appEvents = loggedInUser().appEvents;
+    const done = assert.async();
+
+    await visit("/");
+    await click("#create-topic");
+    await fillIn(".d-editor-input", "The image:\ntext after image");
+    const input = query(".d-editor-input");
+    input.selectionStart = 10;
+    input.selectionEnd = 10;
+
+    appEvents.on("composer:all-uploads-complete", () => {
+      // after uploading we have this in the textarea:
+      // "The image:\n![avatar.PNG|690x320](upload://yoj8pf9DdIeHRRULyw7i57GAYdz.jpeg)\ntext after image"
+      // cursor should be just before "text after image":
+      assert.equal(input.selectionStart, 76);
+      assert.equal(input.selectionEnd, 76);
+      done();
+    });
+
+    const image = createFile("avatar.png");
+    appEvents.trigger("composer:add-files", image);
+  });
+
   test("should be able to paste a table with files and not upload the files", async function (assert) {
     await visit("/");
     await click("#create-topic");