Improve performance issue when users type new status

src/renderer/components/TimelineSpace/Modals/NewToot.vue

@@ -92,6 +92,8 @@ export default {
   },
   data () {
     return {
+      status: '',
+      spoiler: '',
       showContentWarning: false,
       visibilityList: Visibility
     }
@@ -110,6 +112,7 @@ export default {
       blockSubmit: state => state.blockSubmit,
       visibility: state => state.visibility,
       sensitive: state => state.sensitive,
+      initialStatus: state => state.initialStatus,
       visibilityIcon: (state) => {
         switch (state.visibility) {
           case Visibility.Public.value:
@@ -143,22 +146,6 @@ export default {
         }
       }
     },
-    status: {
-      get () {
-        return this.$store.state.TimelineSpace.Modals.NewToot.status
-      },
-      set (value) {
-        this.$store.commit('TimelineSpace/Modals/NewToot/updateStatus', value)
-      }
-    },
-    spoiler: {
-      get () {
-        return this.$store.state.TimelineSpace.Modals.NewToot.spoiler
-      },
-      set (value) {
-        this.$store.commit('TimelineSpace/Modals/NewToot/updateSpoiler', value)
-      }
-    },
     pinedHashtag: {
       get () {
         return this.$store.state.TimelineSpace.Modals.NewToot.pinedHashtag
@@ -172,6 +159,8 @@ export default {
     newTootModal: function (newState, oldState) {
       if (!oldState && newState) {
         this.showContentWarning = false
+        this.spoiler = ''
+        this.status = this.initialStatus
       }
     }
   },

src/renderer/components/TimelineSpace/Modals/NewToot/Status.vue

@@ -132,35 +132,38 @@ export default {
     }
   },
   methods: {
-    startSuggest (e) {
+    async startSuggest (e) {
       const currentValue = e.target.value
       // Start suggest after user stop writing
-      setTimeout(() => {
+      setTimeout(async () => {
         if (currentValue === this.status) {
-          this.suggest(e)
+          await this.suggest(e)
         }
-      }, 500)
+      }, 700)
     },
     async suggest (e) {
-      const emoji = this.suggestEmoji(e)
-      if (emoji) {
-        return true
-      }
-      const ac = await this.suggestAccount(e)
-      if (ac) {
-        return true
-      }
-      const tag = await this.suggestHashtag(e)
-      return tag
-    },
-    async suggestAccount (e) {
       // e.target.sectionStart: Cursor position
       // e.target.value: current value of the textarea
-      const [start, word] = suggestText(e.target.value, e.target.selectionStart, '@')
+      const [start, word] = suggestText(e.target.value, e.target.selectionStart)
       if (!start || !word) {
         this.closeSuggest()
         return false
       }
+      switch (word.charAt(0)) {
+        case ':':
+          await this.suggestEmoji(start, word)
+          return true
+        case '@':
+          await this.suggestAccount(start, word)
+          return true
+        case '#':
+          await this.suggestHashtag(start, word)
+          return true
+        default:
+          return false
+      }
+    },
+    async suggestAccount (start, word) {
       try {
         await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchAccount', word)
         this.openSuggest = true
@@ -173,12 +176,7 @@ export default {
         return false
       }
     },
-    async suggestHashtag (e) {
-      const [start, word] = suggestText(e.target.value, e.target.selectionStart, '#')
-      if (!start || !word) {
-        this.closeSuggest()
-        return false
-      }
+    async suggestHashtag (start, word) {
       try {
         await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchHashtag', word)
         this.openSuggest = true
@@ -191,14 +189,7 @@ export default {
         return false
       }
     },
-    suggestEmoji (e) {
-      // e.target.sectionStart: Cursor position
-      // e.target.value: current value of the textarea
-      const [start, word] = suggestText(e.target.value, e.target.selectionStart, ':')
-      if (!start || !word) {
-        this.closeSuggest()
-        return false
-      }
+    suggestEmoji (start, word) {
       // Find native emojis
       const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word))
       const filteredNativeEmoji = filteredEmojiName.map((name) => {
@@ -218,18 +209,20 @@ export default {
           return (array.findIndex(ar => e.name === ar.name) === i)
         })
       } else {
-        this.openSuggest = false
+        this.closeSuggest()
       }
       return true
     },
     closeSuggest () {
-      this.openSuggest = false
-      this.startIndex = null
-      this.matchWord = null
-      this.highlightedIndex = 0
-      this.filteredSuggestion = []
-      this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts')
-      this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags')
+      if (this.openSuggest) {
+        this.openSuggest = false
+        this.startIndex = null
+        this.matchWord = null
+        this.highlightedIndex = 0
+        this.filteredSuggestion = []
+        this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts')
+        this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags')
+      }
     },
     suggestHighlight (index) {
       if (index < 0) {

src/renderer/store/TimelineSpace/Modals/NewToot.js

@@ -10,13 +10,12 @@ const NewToot = {
   },
   state: {
     modalOpen: false,
-    status: '',
+    initialStatus: '',
     replyToMessage: null,
     blockSubmit: false,
     attachedMedias: [],
     visibility: Visibility.Public.value,
     sensitive: false,
-    spoiler: '',
     attachedMediaId: 0,
     pinedHashtag: false,
     hashtags: []
@@ -28,8 +27,8 @@ const NewToot = {
     setReplyTo (state, message) {
       state.replyToMessage = message
     },
-    updateStatus (state, status) {
-      state.status = status
+    updateInitialStatus (state, status) {
+      state.initialStatus = status
     },
     changeBlockSubmit (state, value) {
       state.blockSubmit = value
@@ -55,9 +54,6 @@ const NewToot = {
     changeSensitive (state, value) {
       state.sensitive = value
     },
-    updateSpoiler (state, value) {
-      state.spoiler = value
-    },
     updateMediaId (state, value) {
       state.attachedMediaId = value
     },
@@ -93,8 +89,8 @@ const NewToot = {
       const mentionAccounts = [message.account.acct].concat(message.mentions.map(a => a.acct))
         .filter((a, i, self) => self.indexOf(a) === i)
         .filter((a) => a !== rootState.TimelineSpace.account.username)
+      commit('updateInitialStatus', `${mentionAccounts.map(m => `@${m}`).join(' ')} `)
       commit('changeModal', true)
-      commit('updateStatus', `${mentionAccounts.map(m => `@${m}`).join(' ')} `)
       let value = Visibility.Public.value
       Object.keys(Visibility).map((key, index) => {
         const target = Visibility[key]
@@ -105,20 +101,19 @@ const NewToot = {
       commit('changeVisibilityValue', value)
     },
     openModal ({ dispatch, commit, state, rootState }) {
-      commit('changeModal', true)
       if (!state.replyToMessage && state.pinedHashtag) {
-        commit('updateStatus', state.hashtags.map(t => ` #${t.name}`).join())
+        commit('updateInitialStatus', state.hashtags.map(t => ` #${t.name}`).join())
       }
+      commit('changeModal', true)
       dispatch('fetchVisibility')
     },
     closeModal ({ commit }) {
       commit('changeModal', false)
-      commit('updateStatus', '')
+      commit('updateInitialStatus', '')
       commit('setReplyTo', null)
       commit('changeBlockSubmit', false)
       commit('clearAttachedMedias')
       commit('changeSensitive', false)
-      commit('updateSpoiler', '')
       commit('changeVisibilityValue', Visibility.Public.value)
     },
     uploadImage ({ state, commit, rootState }, image) {

src/renderer/utils/suggestText.js

@@ -1,5 +1,5 @@
 // https://github.com/tootsuite/mastodon/blob/master/app/javascript/mastodon/components/autosuggest_textarea.js
-const textAtCursorMatch = (str, cursorPosition, separator = '@') => {
+const textAtCursorMatch = (str, cursorPosition, separators = ['@', '#', ':']) => {
   let word
 
   let left = str.slice(0, cursorPosition).search(/\S+$/)
@@ -11,7 +11,7 @@ const textAtCursorMatch = (str, cursorPosition, separator = '@') => {
     word = str.slice(left, right + cursorPosition)
   }
 
-  if (!word || word.trim().length < 3 || [separator].indexOf(word[0]) === -1) {
+  if (!word || word.trim().length < 3 || separators.indexOf(word[0]) === -1) {
     return [null, null]
   }