Change suggestion logic for performance
This commit is contained in:
parent
3a0c07cb71
commit
e104ac0e6b
|
@ -132,35 +132,38 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
startSuggest (e) {
|
async startSuggest (e) {
|
||||||
const currentValue = e.target.value
|
const currentValue = e.target.value
|
||||||
// Start suggest after user stop writing
|
// Start suggest after user stop writing
|
||||||
setTimeout(() => {
|
setTimeout(async () => {
|
||||||
if (currentValue === this.status) {
|
if (currentValue === this.status) {
|
||||||
this.suggest(e)
|
await this.suggest(e)
|
||||||
}
|
}
|
||||||
}, 500)
|
}, 700)
|
||||||
},
|
},
|
||||||
async suggest (e) {
|
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.sectionStart: Cursor position
|
||||||
// e.target.value: current value of the textarea
|
// 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) {
|
if (!start || !word) {
|
||||||
this.closeSuggest()
|
this.closeSuggest()
|
||||||
return false
|
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 {
|
try {
|
||||||
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchAccount', word)
|
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchAccount', word)
|
||||||
this.openSuggest = true
|
this.openSuggest = true
|
||||||
|
@ -173,12 +176,7 @@ export default {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async suggestHashtag (e) {
|
async suggestHashtag (start, word) {
|
||||||
const [start, word] = suggestText(e.target.value, e.target.selectionStart, '#')
|
|
||||||
if (!start || !word) {
|
|
||||||
this.closeSuggest()
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchHashtag', word)
|
await this.$store.dispatch('TimelineSpace/Modals/NewToot/Status/searchHashtag', word)
|
||||||
this.openSuggest = true
|
this.openSuggest = true
|
||||||
|
@ -191,14 +189,7 @@ export default {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
suggestEmoji (e) {
|
suggestEmoji (start, word) {
|
||||||
// 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
|
|
||||||
}
|
|
||||||
// Find native emojis
|
// Find native emojis
|
||||||
const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word))
|
const filteredEmojiName = emojilib.ordered.filter(emoji => `:${emoji}`.includes(word))
|
||||||
const filteredNativeEmoji = filteredEmojiName.map((name) => {
|
const filteredNativeEmoji = filteredEmojiName.map((name) => {
|
||||||
|
@ -218,18 +209,20 @@ export default {
|
||||||
return (array.findIndex(ar => e.name === ar.name) === i)
|
return (array.findIndex(ar => e.name === ar.name) === i)
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
this.openSuggest = false
|
this.closeSuggest()
|
||||||
}
|
}
|
||||||
return true
|
return true
|
||||||
},
|
},
|
||||||
closeSuggest () {
|
closeSuggest () {
|
||||||
this.openSuggest = false
|
if (this.openSuggest) {
|
||||||
this.startIndex = null
|
this.openSuggest = false
|
||||||
this.matchWord = null
|
this.startIndex = null
|
||||||
this.highlightedIndex = 0
|
this.matchWord = null
|
||||||
this.filteredSuggestion = []
|
this.highlightedIndex = 0
|
||||||
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts')
|
this.filteredSuggestion = []
|
||||||
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags')
|
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredAccounts')
|
||||||
|
this.$store.commit('TimelineSpace/Modals/NewToot/Status/clearFilteredHashtags')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
suggestHighlight (index) {
|
suggestHighlight (index) {
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
// https://github.com/tootsuite/mastodon/blob/master/app/javascript/mastodon/components/autosuggest_textarea.js
|
// 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 word
|
||||||
|
|
||||||
let left = str.slice(0, cursorPosition).search(/\S+$/)
|
let left = str.slice(0, cursorPosition).search(/\S+$/)
|
||||||
|
@ -11,7 +11,7 @@ const textAtCursorMatch = (str, cursorPosition, separator = '@') => {
|
||||||
word = str.slice(left, right + cursorPosition)
|
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]
|
return [null, null]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue