Use "frequently used emojis" for autocompletion in composer (#8998)
Co-authored-by: grimhilt <grimhilt@users.noreply.github.com>
This commit is contained in:
parent
9edd49818c
commit
35ba389d61
2 changed files with 38 additions and 3 deletions
|
@ -29,8 +29,9 @@ import QueryMatcher from './QueryMatcher';
|
|||
import { PillCompletion } from './Components';
|
||||
import { ICompletion, ISelectionRange } from './Autocompleter';
|
||||
import SettingsStore from "../settings/SettingsStore";
|
||||
import { EMOJI, IEmoji } from '../emoji';
|
||||
import { EMOJI, IEmoji, getEmojiFromUnicode } from '../emoji';
|
||||
import { TimelineRenderingType } from '../contexts/RoomContext';
|
||||
import * as recent from '../emojipicker/recent';
|
||||
|
||||
const LIMIT = 20;
|
||||
|
||||
|
@ -73,6 +74,7 @@ function colonsTrimmed(str: string): string {
|
|||
export default class EmojiProvider extends AutocompleteProvider {
|
||||
matcher: QueryMatcher<ISortedEmoji>;
|
||||
nameMatcher: QueryMatcher<ISortedEmoji>;
|
||||
private readonly recentlyUsed: IEmoji[];
|
||||
|
||||
constructor(room: Room, renderingType?: TimelineRenderingType) {
|
||||
super({ commandRegex: EMOJI_REGEX, renderingType });
|
||||
|
@ -87,6 +89,8 @@ export default class EmojiProvider extends AutocompleteProvider {
|
|||
// For removing punctuation
|
||||
shouldMatchWordsOnly: true,
|
||||
});
|
||||
|
||||
this.recentlyUsed = Array.from(new Set(recent.get().map(getEmojiFromUnicode).filter(Boolean)));
|
||||
}
|
||||
|
||||
async getCompletions(
|
||||
|
@ -109,7 +113,7 @@ export default class EmojiProvider extends AutocompleteProvider {
|
|||
// Do second match with shouldMatchWordsOnly in order to match against 'name'
|
||||
completions = completions.concat(this.nameMatcher.match(matchedString));
|
||||
|
||||
const sorters = [];
|
||||
let sorters = [];
|
||||
// make sure that emoticons come first
|
||||
sorters.push(c => score(matchedString, c.emoji.emoticon || ""));
|
||||
|
||||
|
@ -130,6 +134,15 @@ export default class EmojiProvider extends AutocompleteProvider {
|
|||
sorters.push(c => c._orderBy);
|
||||
completions = sortBy(uniq(completions), sorters);
|
||||
|
||||
completions = completions.slice(0, LIMIT);
|
||||
|
||||
// Do a second sort to place emoji matching with frequently used one on top
|
||||
sorters = [];
|
||||
this.recentlyUsed.forEach(emoji => {
|
||||
sorters.push(c => score(emoji.shortcodes[0], c.emoji.shortcodes[0]));
|
||||
});
|
||||
completions = sortBy(uniq(completions), sorters);
|
||||
|
||||
completions = completions.map(c => ({
|
||||
completion: c.emoji.unicode,
|
||||
component: (
|
||||
|
@ -138,7 +151,7 @@ export default class EmojiProvider extends AutocompleteProvider {
|
|||
</PillCompletion>
|
||||
),
|
||||
range,
|
||||
})).slice(0, LIMIT);
|
||||
}));
|
||||
}
|
||||
return completions;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue