updated logic for padding with spaces, improved spam mode

src/components/emoji_input/emoji_input.js

@@ -178,14 +178,37 @@ const EmojiInput = {
       this.caret = 0
     },
     insert ({ insertion, spamMode }) {
+      const before = this.value.substring(0, this.caret) || ''
+      const after = this.value.substring(this.caret) || ''
+
+      /* Using a bit more smart approach to padding emojis with spaces:
+       * - put a space before cursor if there isn't one already, unless we
+       *   are at the beginning of post or in spam mode
+       * - put a space after emoji if there isn't one already unless we are
+       *   in spam mode
+       *
+       * The idea is that when you put a cursor somewhere in between sentence
+       * inserting just ' :emoji: ' will add more spaces to post which might
+       * break the flow/spacing, as well as the case where user ends sentence
+       * with a space before adding emoji.
+       *
+       * Spam mode is intended for creating multi-part emojis and overall spamming
+       * them, masto seem to be rendering :emoji::emoji: correctly now so why not
+       */
+      const isSpaceRegex = /\s/
+      const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && !spamMode > 0 ? ' ' : ''
+      const spaceAfter = !isSpaceRegex.exec(after[0]) && !spamMode ? ' ' : ''
+
       const newValue = [
-        this.value.substring(0, this.caret),
+        before,
+        spaceBefore,
         insertion,
-        this.value.substring(this.caret)
+        spaceAfter,
+        after
       ].join('')
       this.spamMode = spamMode
       this.$emit('input', newValue)
-      const position = this.caret + insertion.length
+      const position = this.caret + (insertion + spaceAfter + spaceBefore).length
 
       this.$nextTick(function () {
         // Re-focus inputbox after clicking suggestion

src/components/emoji_picker/emoji_picker.js

@@ -27,7 +27,7 @@ const EmojiPicker = {
   methods: {
     onEmoji (emoji) {
       const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement
-      this.$emit('emoji', { insertion: ` ${value} `, spamMode: this.spamMode })
+      this.$emit('emoji', { insertion: value, spamMode: this.spamMode })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]

src/components/emoji_picker/emoji_picker.scss

@@ -15,7 +15,8 @@
     line-height: normal;
   }
   .spam-mode-label {
-    padding: 7px;
+    padding: 0 7px;
+    display: flex;
   }
 
   .heading {
@@ -104,6 +105,7 @@
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      user-select: none;
       mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
             linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
             linear-gradient(to top, white, white);

src/components/emoji_picker/emoji_picker.vue

@@ -83,7 +83,11 @@
             v-model="spamMode"
             type="checkbox"
             >
-          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">{{ $t('emoji.spam') }}</label>
+          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">
+            <div class="spam-mode-label-text">
+              {{ $t('emoji.spam') }}
+            </div>
+          </label>
         </div>
       </div>
       <div

src/i18n/en.json

@@ -109,7 +109,7 @@
   "emoji": {
     "stickers": "Stickers",
     "emoji": "Emoji",
-    "spam": "Keep open after adding emoji",
+    "spam": "Keep picker open, don't separate emoji with spaces",
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",