mirror of https://github.com/vector-im/riot-web
Sort short/exact emoji matches before longer incomplete matches (#10212)
* apply sort for exact match * add tests for emoji provider * apply filter in the emoji picker * add tests * revert cypress version * put correct copyright * fix eslint * fix eslint * add type * fix cypress test * fix tsc types issues * add forgotten space... --------- Co-authored-by: grimhilt <grimhilt@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com>pull/28217/head
grimhilt
GitHub
parent
b9f61da7e6
commit
0546a11fd9
|
|
@ -19,7 +19,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { uniq, sortBy, ListIteratee } from "lodash";
|
||||
import { uniq, sortBy, uniqBy, ListIteratee } from "lodash";
|
||||
import EMOTICON_REGEX from "emojibase-regex/emoticon";
|
||||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
|
|
@ -118,7 +118,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));
|
||||
|
||||
let sorters: ListIteratee<ISortedEmoji>[] = [];
|
||||
const sorters: ListIteratee<ISortedEmoji>[] = [];
|
||||
// make sure that emoticons come first
|
||||
sorters.push((c) => score(matchedString, c.emoji.emoticon || ""));
|
||||
|
||||
|
|
@ -140,11 +140,27 @@ export default class EmojiProvider extends AutocompleteProvider {
|
|||
completions = completions.slice(0, LIMIT);
|
||||
|
||||
// Do a second sort to place emoji matching with frequently used one on top
|
||||
sorters = [];
|
||||
const recentlyUsedAutocomplete: ISortedEmoji[] = [];
|
||||
this.recentlyUsed.forEach((emoji) => {
|
||||
sorters.push((c) => score(emoji.shortcodes[0], c.emoji.shortcodes[0]));
|
||||
if (emoji.shortcodes[0].indexOf(trimmedMatch) === 0) {
|
||||
recentlyUsedAutocomplete.push({ emoji: emoji, _orderBy: 0 });
|
||||
}
|
||||
});
|
||||
completions = sortBy<ISortedEmoji>(uniq(completions), sorters);
|
||||
|
||||
//if there is an exact shortcode match in the frequently used emojis, it goes before everything
|
||||
for (let i = 0; i < recentlyUsedAutocomplete.length; i++) {
|
||||
if (recentlyUsedAutocomplete[i].emoji.shortcodes[0] === trimmedMatch) {
|
||||
const exactMatchEmoji = recentlyUsedAutocomplete[i];
|
||||
for (let j = i; j > 0; j--) {
|
||||
recentlyUsedAutocomplete[j] = recentlyUsedAutocomplete[j - 1];
|
||||
}
|
||||
recentlyUsedAutocomplete[0] = exactMatchEmoji;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
completions = recentlyUsedAutocomplete.concat(completions);
|
||||
completions = uniqBy(completions, "emoji");
|
||||
|
||||
return completions.map((c) => ({
|
||||
completion: c.emoji.unicode,
|
||||
|
|
|
|||
|
|
@ -194,10 +194,30 @@ class EmojiPicker extends React.Component<IProps, IState> {
|
|||
emojis = cat.id === "recent" ? this.recentlyUsed : DATA_BY_CATEGORY[cat.id];
|
||||
}
|
||||
emojis = emojis.filter((emoji) => this.emojiMatchesFilter(emoji, lcFilter));
|
||||
emojis = emojis.sort((a, b) => {
|
||||
const indexA = a.shortcodes[0].indexOf(lcFilter);
|
||||
const indexB = b.shortcodes[0].indexOf(lcFilter);
|
||||
|
||||
// Prioritize emojis containing the filter in its shortcode
|
||||
if (indexA == -1 || indexB == -1) {
|
||||
return indexB - indexA;
|
||||
}
|
||||
|
||||
// If both emojis start with the filter
|
||||
// put the shorter emoji first
|
||||
if (indexA == 0 && indexB == 0) {
|
||||
return a.shortcodes[0].length - b.shortcodes[0].length;
|
||||
}
|
||||
|
||||
// Prioritize emojis starting with the filter
|
||||
return indexA - indexB;
|
||||
});
|
||||
this.memoizedDataByCategory[cat.id] = emojis;
|
||||
cat.enabled = emojis.length > 0;
|
||||
// The setState below doesn't re-render the header and we already have the refs for updateVisibility, so...
|
||||
cat.ref.current.disabled = !cat.enabled;
|
||||
if (cat.ref.current) {
|
||||
cat.ref.current.disabled = !cat.enabled;
|
||||
}
|
||||
}
|
||||
this.setState({ filter });
|
||||
// Header underlines need to be updated, but updating requires knowing
|
||||
|
|
|
|||
|
|
@ -69,20 +69,30 @@ describe("EmojiProvider", function () {
|
|||
},
|
||||
);
|
||||
|
||||
it("Returns correct autocompletion based on recently used emoji", async function () {
|
||||
it("Recently used emojis are correctly sorted", async function () {
|
||||
add("😘"); //kissing_heart
|
||||
add("😘");
|
||||
add("😚"); //kissing_closed_eyes
|
||||
const emojiProvider = new EmojiProvider(null!);
|
||||
add("💗"); //heartpulse
|
||||
add("💗"); //heartpulse
|
||||
add("😍"); //heart_eyes
|
||||
|
||||
let completionsList = await emojiProvider.getCompletions(":kis", { beginning: true, end: 3, start: 3 });
|
||||
expect(completionsList[0].component!.props.title).toEqual(":kissing_heart:");
|
||||
expect(completionsList[1].component!.props.title).toEqual(":kissing_closed_eyes:");
|
||||
const ep = new EmojiProvider(testRoom);
|
||||
const completionsList = await ep.getCompletions(":heart", { beginning: true, start: 0, end: 6 });
|
||||
expect(completionsList[0]?.component?.props.title).toEqual(":heartpulse:");
|
||||
expect(completionsList[1]?.component?.props.title).toEqual(":heart_eyes:");
|
||||
});
|
||||
|
||||
completionsList = await emojiProvider.getCompletions(":kissing_c", { beginning: true, end: 3, start: 3 });
|
||||
expect(completionsList[0].component!.props.title).toEqual(":kissing_closed_eyes:");
|
||||
it("Exact match in recently used takes the lead", async function () {
|
||||
add("😘"); //kissing_heart
|
||||
add("💗"); //heartpulse
|
||||
add("💗"); //heartpulse
|
||||
add("😍"); //heart_eyes
|
||||
|
||||
completionsList = await emojiProvider.getCompletions(":so", { beginning: true, end: 2, start: 2 });
|
||||
expect(completionsList[0].component!.props.title).toEqual(":sob:");
|
||||
add("❤️"); //heart
|
||||
const ep = new EmojiProvider(testRoom);
|
||||
const completionsList = await ep.getCompletions(":heart", { beginning: true, start: 0, end: 6 });
|
||||
|
||||
expect(completionsList[0]?.component?.props.title).toEqual(":heart:");
|
||||
expect(completionsList[1]?.component?.props.title).toEqual(":heartpulse:");
|
||||
expect(completionsList[2]?.component?.props.title).toEqual(":heart_eyes:");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import EmojiPicker from "../../../../src/components/views/emojipicker/EmojiPicker";
|
||||
import { stubClient } from "../../../test-utils";
|
||||
|
||||
describe("EmojiPicker", function () {
|
||||
stubClient();
|
||||
|
||||
it("sort emojis by shortcode and size", function () {
|
||||
const ep = new EmojiPicker({ onChoose: (str: String) => false });
|
||||
|
||||
//@ts-ignore private access
|
||||
ep.onChangeFilter("heart");
|
||||
|
||||
//@ts-ignore private access
|
||||
expect(ep.memoizedDataByCategory["people"][0].shortcodes[0]).toEqual("heart");
|
||||
//@ts-ignore private access
|
||||
expect(ep.memoizedDataByCategory["people"][1].shortcodes[0]).toEqual("heartbeat");
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue