diff --git a/app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js b/app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js
index 462324baf27..9e46e0c4543 100644
--- a/app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js
+++ b/app/assets/javascripts/discourse/app/mixins/textarea-text-manipulation.js
@@ -570,14 +570,12 @@ export default Mixin.create({
         this.addText(selected, `:${code}:`);
       }
     } else {
-      let numOfRemovedChars = selected.pre.length - captures[1].length;
-      selected.pre = selected.pre.slice(
-        0,
-        selected.pre.length - captures[1].length
+      let numOfRemovedChars = captures[1].length;
+      this._insertAt(
+        selected.start - numOfRemovedChars,
+        selected.end,
+        `${code}:`
       );
-      selected.start -= numOfRemovedChars;
-      selected.end -= numOfRemovedChars;
-      this.addText(selected, `${code}:`);
     }
   },
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
index d0cf310f8d5..0b1a4f98c52 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js
@@ -19,6 +19,7 @@ import formatTextWithSelection from "discourse/tests/helpers/d-editor-helper";
 import hbs from "htmlbars-inline-precompile";
 import { next } from "@ember/runloop";
 import { withPluginApi } from "discourse/lib/plugin-api";
+import { isLegacyEmber } from "discourse-common/config/environment";
 
 discourseModule("Integration | Component | d-editor", function (hooks) {
   setupRenderingTest(hooks);
@@ -727,7 +728,27 @@ third line`
       await click(
         '.emoji-picker .section[data-section="smileys_&_emotion"] img.emoji[title="grinning"]'
       );
-      assert.strictEqual(this.value, "hello world. :grinning:");
+      assert.strictEqual(
+        this.value,
+        "hello world. :grinning:",
+        "it works when there is no partial emoji"
+      );
+
+      if (!isLegacyEmber()) {
+        await click("textarea.d-editor-input");
+        await fillIn(".d-editor-input", "starting to type an emoji like :gri");
+        jumpEnd(query("textarea.d-editor-input"));
+        await click("button.emoji");
+
+        await click(
+          '.emoji-picker .section[data-section="smileys_&_emotion"] img.emoji[title="grinning"]'
+        );
+        assert.strictEqual(
+          this.value,
+          "starting to type an emoji like :grinning:",
+          "it works when there is a partial emoji"
+        );
+      }
     },
   });