diff --git a/app/assets/javascripts/discourse/components/d-editor.js.es6 b/app/assets/javascripts/discourse/components/d-editor.js.es6
index e668828ccbf..f223071d733 100644
--- a/app/assets/javascripts/discourse/components/d-editor.js.es6
+++ b/app/assets/javascripts/discourse/components/d-editor.js.es6
@@ -912,7 +912,11 @@ export default Component.extend({
       const captures = selected.pre.match(/\B:(\w*)$/);
 
       if (_.isEmpty(captures)) {
-        this._addText(selected, `:${code}:`);
+        if (selected.pre.match(/\S$/)) {
+          this._addText(selected, ` :${code}:`);
+        } else {
+          this._addText(selected, `:${code}:`);
+        }
       } else {
         let numOfRemovedChars = selected.pre.length - captures[1].length;
         selected.pre = selected.pre.slice(
diff --git a/test/javascripts/acceptance/emoji-picker-test.js.es6 b/test/javascripts/acceptance/emoji-picker-test.js.es6
index f6b4046eaa4..449838135cd 100644
--- a/test/javascripts/acceptance/emoji-picker-test.js.es6
+++ b/test/javascripts/acceptance/emoji-picker-test.js.es6
@@ -4,7 +4,7 @@ import { IMAGE_VERSION as v } from "pretty-text/emoji/version";
 acceptance("EmojiPicker", {
   loggedIn: true,
   beforeEach() {
-    const store = Discourse.__container__.lookup("service:emojis-store");
+    const store = Discourse.__container__.lookup("service:emoji-store");
     store.reset();
   }
 });
@@ -60,6 +60,36 @@ QUnit.skip("emoji picker triggers event when picking emoji", async assert => {
   );
 });
 
+QUnit.test(
+  "emoji picker adds leading whitespace before emoji",
+  async assert => {
+    await visit("/t/internationalization-localization/280");
+    await click("#topic-footer-buttons .btn.create");
+
+    // Whitespace should be added on text
+    await fillIn(".d-editor-input", "This is a test input");
+    await click("button.emoji.btn");
+    await click(".emoji-picker button[title='grinning']");
+    assert.equal(
+      find(".d-editor-input").val(),
+      "This is a test input :grinning:",
+      "it adds the emoji code and a leading whitespace when there is text"
+    );
+    await click("button.emoji.btn");
+
+    // Whitespace should not be added on whitespace
+    await fillIn(".d-editor-input", "This is a test input ");
+    await click("button.emoji.btn");
+    await click(".emoji-picker button[title='grinning']");
+    assert.equal(
+      find(".d-editor-input").val(),
+      "This is a test input :grinning:",
+      "it adds the emoji code and no leading whitespace when user already entered whitespace"
+    );
+    await click("button.emoji.btn");
+  }
+);
+
 QUnit.skip("emoji picker has a list of recently used emojis", async assert => {
   await visit("/t/internationalization-localization/280");
   await click("#topic-footer-buttons .btn.create");
diff --git a/test/javascripts/components/d-editor-test.js.es6 b/test/javascripts/components/d-editor-test.js.es6
index 8c6d936e89e..131de74e68f 100644
--- a/test/javascripts/components/d-editor-test.js.es6
+++ b/test/javascripts/components/d-editor-test.js.es6
@@ -618,7 +618,6 @@ testCase(`doesn't jump to bottom with long text`, async function(
 });
 
 componentTest("emoji", {
-  skip: true,
   template: "{{d-editor value=value}}",
   beforeEach() {
     // Test adding a custom button
@@ -641,7 +640,7 @@ componentTest("emoji", {
     await click(
       '.emoji-picker .section[data-section="smileys_&_emotion"] button.emoji[title="grinning"]'
     );
-    assert.equal(this.value, "hello world.:grinning:");
+    assert.equal(this.value, "hello world. :grinning:");
   }
 });