diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js index aae11a9ba..e6c26106b 100644 --- a/src/components/emoji-input/emoji-input.js +++ b/src/components/emoji-input/emoji-input.js @@ -64,6 +64,7 @@ const EmojiInput = { if (!input) return this.input = input this.resize() + input.elm.addEventListener('transitionend', this.onTransition) input.elm.addEventListener('blur', this.onBlur) input.elm.addEventListener('focus', this.onFocus) input.elm.addEventListener('paste', this.onPaste) @@ -73,6 +74,7 @@ const EmojiInput = { unmounted () { const { input } = this if (input) { + input.elm.removeEventListener('transitionend', this.onTransition) input.elm.removeEventListener('blur', this.onBlur) input.elm.removeEventListener('focus', this.onFocus) input.elm.removeEventListener('paste', this.onPaste) @@ -86,8 +88,8 @@ const EmojiInput = { this.$emit('input', newValue) this.caret = 0 }, - replaceText () { - const len = this.suggestions.length || 0 + replaceText (e) { + const len = (this.suggestions && this.suggestions.length) || 0 if (this.textAtCaret.length === 1) { return } if (len > 0) { const suggestion = this.suggestions[this.highlighted] @@ -96,9 +98,10 @@ const EmojiInput = { this.$emit('input', newValue) this.caret = 0 this.highlighted = 0 + e.preventDefault() } }, - cycleBackward () { + cycleBackward (e) { const len = this.suggestions.length || 0 if (len > 0) { this.highlighted -= 1 @@ -109,7 +112,7 @@ const EmojiInput = { this.highlighted = 0 } }, - cycleForward () { + cycleForward (e) { const len = this.suggestions.length || 0 if (len > 0) { this.highlighted += 1 @@ -120,6 +123,9 @@ const EmojiInput = { this.highlighted = 0 } }, + onTransition (e) { + this.resize(e) + }, onBlur (e) { this.focused = false this.setCaret(e) @@ -145,24 +151,20 @@ const EmojiInput = { const { ctrlKey, shiftKey, key } = e if (key === 'Tab') { if (shiftKey) { - this.cycleBackward() - e.preventDefault() + this.cycleBackward(e) } else { - this.cycleForward() - e.preventDefault() + this.cycleForward(e) } } if (key === 'ArrowUp') { - this.cycleBackward() + this.cycleBackward(e) e.preventDefault() } else if (key === 'ArrowDown') { - this.cycleForward() - e.preventDefault() + this.cycleForward(e) } if (key === 'Enter') { if (!ctrlKey) { - this.replaceText() - e.preventDefault() + this.replaceText(e) } } }, diff --git a/src/components/emoji-input/suggestor.js b/src/components/emoji-input/suggestor.js index c414b1bfa..40c7aa3d0 100644 --- a/src/components/emoji-input/suggestor.js +++ b/src/components/emoji-input/suggestor.js @@ -1,13 +1,11 @@ export default function suggest (data) { return input => { - const trimmed = input.trim() - const firstChar = trimmed[0] - console.log(`'${trimmed}'`, firstChar, firstChar === ':') + const firstChar = input[0] if (firstChar === ':' && data.emoji) { - return suggestEmoji(data.emoji)(trimmed) + return suggestEmoji(data.emoji)(input) } if (firstChar === '@' && data.users) { - return suggestUsers(data.users)(trimmed) + return suggestUsers(data.users)(input) } return [] } @@ -18,6 +16,19 @@ function suggestEmoji (emojis) { const noPrefix = input.toLowerCase().substr(1) return emojis .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix)) + .sort((a, b) => { + let aScore = 0 + let bScore = 0 + + // Make custom emojis a priority + aScore += Number(!!a.imageUrl) * 10 + bScore += Number(!!b.imageUrl) * 10 + + // Sort alphabetically + const alphabetically = a.displayText > b.displayText ? 1 : -1 + + return bScore - aScore + alphabetically + }) } } @@ -33,12 +44,17 @@ function suggestUsers (users) { let aScore = 0 let bScore = 0 + // Matches on screen name (i.e. user@instance) makes a priority aScore += a.screen_name.toLowerCase().startsWith(noPrefix) * 2 - aScore += a.name.toLowerCase().startsWith(noPrefix) bScore += b.screen_name.toLowerCase().startsWith(noPrefix) * 2 + + // Matches on name takes second priority + aScore += a.name.toLowerCase().startsWith(noPrefix) bScore += b.name.toLowerCase().startsWith(noPrefix) const diff = bScore * 10 - aScore * 10 + + // Then sort alphabetically const nameAlphabetically = a.name > b.name ? 1 : -1 const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1 diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 0d5567a82..137e46827 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -105,7 +105,7 @@ const PostStatusForm = { }) }, emojiSuggestor () { - suggestor({ emoji: [ + return suggestor({ emoji: [ ...this.$store.state.instance.emoji, ...this.$store.state.instance.customEmoji ]})