diff --git a/src/autocomplete/EmojiProvider.tsx b/src/autocomplete/EmojiProvider.tsx index 55d58a8953..4c051a7126 100644 --- a/src/autocomplete/EmojiProvider.tsx +++ b/src/autocomplete/EmojiProvider.tsx @@ -3,6 +3,7 @@ Copyright 2016 Aviral Dasgupta Copyright 2017 Vector Creations Ltd Copyright 2017, 2018 New Vector Ltd Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2022 Ryan Browne Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. @@ -62,6 +63,13 @@ function score(query, space) { } } +function colonsTrimmed(str: string): string { + // Trim off leading and potentially trailing `:` to correctly match the emoji data as they exist in emojibase. + // Notes: The regex is pinned to the start and end of the string so that we can use the lazy-capturing `*?` matcher. + // It needs to be lazy so that the trailing `:` is not captured in the replacement group, if it exists. + return str.replace(/^:(.*?):?$/, "$1"); +} + export default class EmojiProvider extends AutocompleteProvider { matcher: QueryMatcher; nameMatcher: QueryMatcher; @@ -108,8 +116,9 @@ export default class EmojiProvider extends AutocompleteProvider { // then sort by score (Infinity if matchedString not in shortcode) sorters.push(c => score(matchedString, c.emoji.shortcodes[0])); // then sort by max score of all shortcodes, trim off the `:` + const trimmedMatch = colonsTrimmed(matchedString); sorters.push(c => Math.min( - ...c.emoji.shortcodes.map(s => score(matchedString.substring(1), s)), + ...c.emoji.shortcodes.map(s => score(trimmedMatch, s)), )); // If the matchedString is not empty, sort by length of shortcode. Example: // matchedString = ":bookmark" diff --git a/test/autocomplete/EmojiProvider-test.ts b/test/autocomplete/EmojiProvider-test.ts new file mode 100644 index 0000000000..a64312fa29 --- /dev/null +++ b/test/autocomplete/EmojiProvider-test.ts @@ -0,0 +1,67 @@ +/* +Copyright 2022 Ryan Browne + +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 EmojiProvider from '../../src/autocomplete/EmojiProvider'; +import { mkStubRoom } from '../test-utils/test-utils'; + +const EMOJI_SHORTCODES = [ + ":+1", + ":heart", + ":grinning", + ":hand", + ":man", + ":sweat", + ":monkey", + ":boat", + ":mailbox", + ":cop", + ":bow", + ":kiss", + ":golf", +]; + +// Some emoji shortcodes are too short and do not actually trigger autocompletion until the ending `:`. +// This means that we cannot compare their autocompletion before and after the ending `:` and have +// to simply assert that the final completion with the colon is the exact emoji. +const TOO_SHORT_EMOJI_SHORTCODE = [ + { emojiShortcode: ":o", expectedEmoji: "⭕️" }, +]; + +describe('EmojiProvider', function() { + const testRoom = mkStubRoom(undefined, undefined, undefined); + + it.each(EMOJI_SHORTCODES)('Returns consistent results after final colon %s', async function(emojiShortcode) { + const ep = new EmojiProvider(testRoom); + const range = { "beginning": true, "start": 0, "end": 3 }; + const completionsBeforeColon = await ep.getCompletions(emojiShortcode, range); + const completionsAfterColon = await ep.getCompletions(emojiShortcode + ':', range); + + const firstCompletionWithoutColon = completionsBeforeColon[0].completion; + const firstCompletionWithColon = completionsAfterColon[0].completion; + + expect(firstCompletionWithoutColon).toEqual(firstCompletionWithColon); + }); + + it.each( + TOO_SHORT_EMOJI_SHORTCODE, + )('Returns correct results after final colon $emojiShortcode', async ({ emojiShortcode, expectedEmoji }) => { + const ep = new EmojiProvider(testRoom); + const range = { "beginning": true, "start": 0, "end": 3 }; + const completions = await ep.getCompletions(emojiShortcode + ':', range); + + expect(completions[0].completion).toEqual(expectedEmoji); + }); +});