diff --git a/packages/client/src/components/emoji-picker.vue b/packages/client/src/components/emoji-picker.vue index f32a65f62..03ba29184 100644 --- a/packages/client/src/components/emoji-picker.vue +++ b/packages/client/src/components/emoji-picker.vue @@ -126,145 +126,32 @@ const searchResultCustom = ref([]); const searchResultUnicode = ref([]); const tab = ref<'index' | 'custom' | 'unicode' | 'tags'>('index'); +function emojiSearch(src: Type[], max: number, query: string): Type[] { + // discount fuzzy matching pattern + const re = new RegExp(query.split(' ').join('.*'), 'i'); + const match = (str: string): boolean => str && re.test(str); + const matches = src.filter(emoji => + match(emoji.name) + || emoji.aliases?.some(match) // custom emoji + || emoji.keywords?.some(match) // unicode emoji + ); + // TODO: sort matches by distance to query + if (max <= 0 || matches.length < max) return matches; + return matches.slice(0, max); +} + watch(q, () => { if (emojis.value) emojis.value.scrollTop = 0; - if (q.value == null || q.value === '') { + const query = q.value; + if (query == null || query === '') { searchResultCustom.value = []; searchResultUnicode.value = []; return; } - - const newQ = q.value.replace(/:/g, '').toLowerCase(); - - const searchCustom = () => { - const max = 8; - const emojis = customEmojis; - const matches = new Set(); - - const exactMatch = emojis.find(emoji => emoji.name === newQ); - if (exactMatch) matches.add(exactMatch); - - if (newQ.includes(' ')) { // AND検索 - const keywords = newQ.split(' '); - - // 名前にキーワードが含まれている - for (const emoji of emojis) { - if (keywords.every(keyword => emoji.name.includes(keyword))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - // 名前またはエイリアスにキーワードが含まれている - for (const emoji of emojis) { - if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.aliases.some(alias => alias.includes(keyword)))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - } else { - for (const emoji of emojis) { - if (emoji.name.startsWith(newQ)) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.aliases.some(alias => alias.startsWith(newQ))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.name.includes(newQ)) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.aliases.some(alias => alias.includes(newQ))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - } - - return matches; - }; - - const searchUnicode = () => { - const max = 8; - const emojis = emojilist; - const matches = new Set(); - - const exactMatch = emojis.find(emoji => emoji.name === newQ); - if (exactMatch) matches.add(exactMatch); - - if (newQ.includes(' ')) { // AND検索 - const keywords = newQ.split(' '); - - // 名前にキーワードが含まれている - for (const emoji of emojis) { - if (keywords.every(keyword => emoji.name.includes(keyword))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - // 名前またはエイリアスにキーワードが含まれている - for (const emoji of emojis) { - if (keywords.every(keyword => emoji.name.includes(keyword) || emoji.keywords.some(alias => alias.includes(keyword)))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - } else { - for (const emoji of emojis) { - if (emoji.name.startsWith(newQ)) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.keywords.some(keyword => keyword.startsWith(newQ))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.name.includes(newQ)) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - if (matches.size >= max) return matches; - - for (const emoji of emojis) { - if (emoji.keywords.some(keyword => keyword.includes(newQ))) { - matches.add(emoji); - if (matches.size >= max) break; - } - } - } - - return matches; - }; - - searchResultCustom.value = Array.from(searchCustom()); - searchResultUnicode.value = Array.from(searchUnicode()); + + searchResultCustom.value = emojiSearch(instance.emojis, 10, query); + searchResultUnicode.value = emojiSearch(emojilist, 10, query); }); function focus() {