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 spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0 ? ' ' : ''
-      const spaceAfter = !isSpaceRegex.exec(after[0]) && !spamMode ? ' ' : ''
+      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'"
+            :id="labelKey + 'keep-open'"
-            v-model="spamMode"
+            v-model="keepOpen"
             type="checkbox"
             >
-          <label class="spam-mode-label" :for="labelKey + 'spam-mode'">
+          <label class="keep-open-label" :for="labelKey + 'keep-open'">
-            <div class="spam-mode-label-text">
+            <div class="keep-open-label-text">
-              {{ $t('emoji.spam') }}
+              {{ $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>
 

src/i18n/en.json

@@ -109,7 +109,7 @@
   "emoji": {
     "stickers": "Stickers",
     "emoji": "Emoji",
-    "spam": "Keep picker open, don't separate emoji with spaces",
+    "keep_open": "Keep picker open",
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
@@ -232,6 +232,7 @@
     "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.",
     "delete_account_instructions": "Type your password in the input below to confirm account deletion.",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
+    "pad_emoji": "Pad emoji with spaces when adding from picker",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "filtering_explanation": "All statuses containing these words will be muted, one per line",

src/modules/config.js

@@ -7,6 +7,7 @@ const defaultState = {
   colors: {},
   hideMutedPosts: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
+  padEmoji: true,
   hideAttachments: false,
   hideAttachmentsInConv: false,
   maxThumbnails: 16,

test/unit/specs/components/emoji_input.spec.js

@@ -26,7 +26,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
-      wrapper.vm.insert({ insertion: '(test)', spamMode: false })
+      wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
       expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
     })
 
@@ -36,7 +36,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
-      wrapper.vm.insert({ insertion: '(test)', spamMode: false })
+      wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
       expect(wrapper.emitted().input[0][0]).to.eql('Testing (test) ')
     })
 
@@ -46,7 +46,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
-      wrapper.vm.insert({ insertion: '(test)', spamMode: false })
+      wrapper.vm.insert({ insertion: '(test)', keepOpen: false })
       expect(wrapper.emitted().input[0][0]).to.eql('(test) Testing')
     })
 
@@ -56,7 +56,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 6 })
-      wrapper.vm.insert({ insertion: ':ebin:', spamMode: false })
+      wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
       expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
@@ -66,7 +66,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 7 })
-      wrapper.vm.insert({ insertion: ':ebin:', spamMode: false })
+      wrapper.vm.insert({ insertion: ':ebin:', keepOpen: false })
       expect(wrapper.emitted().input[0][0]).to.eql('Spurdo :ebin: Sparde')
     })
 
@@ -76,7 +76,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
-      wrapper.vm.insert({ insertion: ':spam:', spamMode: true })
+      wrapper.vm.insert({ insertion: ':spam:', keepOpen: true })
       expect(wrapper.emitted().input[0][0]).to.eql('Eat some spam!:spam:')
     })
 
@@ -86,7 +86,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
-      wrapper.vm.insert({ insertion: '1234', spamMode: false })
+      wrapper.vm.insert({ insertion: '1234', keepOpen: false })
       vue.nextTick(() => {
         expect(wrapper.vm.caret).to.eql(5)
         done()
@@ -99,7 +99,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
-      wrapper.vm.insert({ insertion: '1234', spamMode: false })
+      wrapper.vm.insert({ insertion: '1234', keepOpen: false })
       vue.nextTick(() => {
         expect(wrapper.vm.caret).to.eql(10)
         done()
@@ -112,7 +112,7 @@ describe('EmojiInput', () => {
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
-      wrapper.vm.insert({ insertion: '1234', spamMode: true })
+      wrapper.vm.insert({ insertion: '1234', keepOpen: true })
       vue.nextTick(() => {
         expect(wrapper.vm.caret).to.eql(8)
         done()