Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Sort short/exact emoji matches before longer incomplete matches (#10212)
Browse files Browse the repository at this point in the history
* 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>
  • Loading branch information
3 people authored Feb 27, 2023
1 parent b9f61da commit 0546a11
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 17 deletions.
26 changes: 21 additions & 5 deletions src/autocomplete/EmojiProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand Down Expand Up @@ -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 || ""));

Expand All @@ -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,
Expand Down
22 changes: 21 additions & 1 deletion src/components/views/emojipicker/EmojiPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
32 changes: 21 additions & 11 deletions test/autocomplete/EmojiProvider-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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

add("❤️"); //heart
const ep = new EmojiProvider(testRoom);
const completionsList = await ep.getCompletions(":heart", { beginning: true, start: 0, end: 6 });

completionsList = await emojiProvider.getCompletions(":so", { beginning: true, end: 2, start: 2 });
expect(completionsList[0].component!.props.title).toEqual(":sob:");
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:");
});
});
34 changes: 34 additions & 0 deletions test/components/views/emojipicker/EmojiPicker-test.tsx
Original file line number Diff line number Diff line change
@@ -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");
});
});

0 comments on commit 0546a11

Please sign in to comment.