split spam mode into two separate options (one in settings page)

src/components/emoji_input/emoji_input.js

@@ -89,7 +89,7 @@ const EmojiInput = {
       blurTimeout: null,
       showPicker: false,
       temporarilyHideSuggestions: false,
-      spamMode: false,
+      keepOpen: false,
       disableClickOutside: false
     }
   },
@@ -97,6 +97,9 @@ const EmojiInput = {
     EmojiPicker
   },
   computed: {
+    padEmoji () {
+      return this.$store.state.config.padEmoji
+    },
     suggestions () {
       const firstchar = this.textAtCaret.charAt(0)
       if (this.textAtCaret === firstchar) { return [] }
@@ -176,7 +179,7 @@ const EmojiInput = {
       this.$emit('input', newValue)
       this.caret = 0
     },
-    insert ({ insertion, spamMode }) {
+    insert ({ insertion, keepOpen }) {
       const before = this.value.substring(0, this.caret) || ''
       const after = this.value.substring(this.caret) || ''
 
@@ -195,8 +198,8 @@ const EmojiInput = {
        * 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 spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0 ? ' ' : ''
+      const spaceAfter = !isSpaceRegex.exec(after[0]) && this.padEmoji ? ' ' : ''
 
       const newValue = [
         before,
@@ -205,7 +208,7 @@ const EmojiInput = {
         spaceAfter,
         after
       ].join('')
-      this.spamMode = spamMode
+      this.keepOpen = keepOpen
       this.$emit('input', newValue)
       const position = this.caret + (insertion + spaceAfter + spaceBefore).length
 
@@ -283,7 +286,7 @@ const EmojiInput = {
         this.blurTimeout = null
       }
 
-      if (!this.spamMode) {
+      if (!this.keepOpen) {
         this.showPicker = false
       }
       this.focused = true

src/components/emoji_picker/emoji_picker.js

@@ -18,7 +18,7 @@ const EmojiPicker = {
       activeGroup: 'custom',
       showingStickers: false,
       groupsScrolledClass: 'scrolled-top',
-      spamMode: false
+      keepOpen: false
     }
   },
   components: {
@@ -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, keepOpen: this.keepOpen })
     },
     highlight (key) {
       const ref = this.$refs['group-' + key]

src/components/emoji_picker/emoji_picker.scss

@@ -10,11 +10,11 @@
   margin: 0 !important;
   z-index: 1;
 
-  .spam-mode {
+  .keep-open {
     padding: 7px;
     line-height: normal;
   }
-  .spam-mode-label {
+  .keep-open-label {
     padding: 0 7px;
     display: flex;
   }

src/components/emoji_picker/emoji_picker.vue

@@ -76,16 +76,16 @@
           </div>
         </div>
         <div
-          class="spam-mode"
+          class="keep-open"
           >
           <input
-            :id="labelKey + 'spam-mode'"
-            v-model="spamMode"
+            :id="labelKey + 'keep-open'"
+            v-model="keepOpen"
             type="checkbox"
             >
-          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">
-            <div class="spam-mode-label-text">
-              {{ $t('emoji.spam') }}
+          <label class="keep-open-label" :for="labelKey + 'keep-open'">
+            <div class="keep-open-label-text">
+              {{ $t('emoji.keep_open') }}
             </div>
           </label>
         </div>

src/components/settings/settings.js

@@ -16,6 +16,7 @@ const settings = {
 
     return {
       hideAttachmentsLocal: user.hideAttachments,
+      padEmojiLocal: user.padEmoji,
       hideAttachmentsInConvLocal: user.hideAttachmentsInConv,
       maxThumbnails: user.maxThumbnails,
       hideNsfwLocal: user.hideNsfw,
@@ -127,6 +128,9 @@ const settings = {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })
     },
+    padEmojiLocal (value) {
+      this.$store.dispatch('setOption', { name: 'padEmoji', value })
+    },
     hideAttachmentsInConvLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value })
     },

src/components/settings/settings.vue

@@ -198,6 +198,14 @@
                   >
                   <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label>
                 </li>
+                <li>
+                  <input
+                    id="padEmoji"
+                    v-model="padEmojiLocal"
+                    type="checkbox"
+                  >
+                  <label for="padEmoji">{{ $t('settings.pad_emoji') }}</label>
+                </li>
               </ul>
             </div>