diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx index eac5427b3..cc0dff19c 100644 --- a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx @@ -6,11 +6,7 @@ import { Room } from 'matrix-js-sdk'; import { AutocompleteQuery } from './autocompleteQuery'; import { AutocompleteMenu } from './AutocompleteMenu'; import { useMatrixClient } from '../../../hooks/useMatrixClient'; -import { - SearchItemStrGetter, - UseAsyncSearchOptions, - useAsyncSearch, -} from '../../../hooks/useAsyncSearch'; +import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch'; import { onTabPress } from '../../../utils/keyboard'; import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils'; import { useRecentEmoji } from '../../../hooks/useRecentEmoji'; @@ -20,6 +16,7 @@ import { useKeyDown } from '../../../hooks/useKeyDown'; import { mxcUrlToHttp } from '../../../utils/matrix'; import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication'; import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji'; +import { getEmoticonSearchStr } from '../../../plugins/utils'; type EmoticonCompleteHandler = (key: string, shortcode: string) => void; @@ -38,10 +35,6 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = { }, }; -const getEmoticonStr: SearchItemStrGetter = (emoticon) => [ - `:${emoticon.shortcode}:`, -]; - export function EmoticonAutocomplete({ imagePackRooms, editor, @@ -62,7 +55,11 @@ export function EmoticonAutocomplete({ ); }, [imagePacks]); - const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS); + const [result, search, resetSearch] = useAsyncSearch( + searchList, + getEmoticonSearchStr, + SEARCH_OPTIONS + ); const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji; useEffect(() => { diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx index 77e56a912..287350818 100644 --- a/src/app/components/emoji-board/EmojiBoard.tsx +++ b/src/app/components/emoji-board/EmojiBoard.tsx @@ -50,6 +50,7 @@ import { addRecentEmoji } from '../../plugins/recent-emoji'; import { mobileOrTablet } from '../../utils/user-agent'; import { useMediaAuthentication } from '../../hooks/useMediaAuthentication'; import { ImagePack, ImageUsage, PackImageReader } from '../../plugins/custom-emoji'; +import { getEmoticonSearchStr } from '../../plugins/utils'; const RECENT_GROUP_ID = 'recent_group'; const SEARCH_GROUP_ID = 'search_group'; @@ -636,15 +637,8 @@ export const NativeEmojiGroups = memo( ) ); -const getSearchListItemStr = (item: PackImageReader | IEmoji) => { - const shortcode = `:${item.shortcode}:`; - if ('body' in item) { - return [shortcode, item.body ?? '']; - } - return shortcode; -}; const SEARCH_OPTIONS: UseAsyncSearchOptions = { - limit: 26, + limit: 1000, matchOptions: { contain: true, }, @@ -696,10 +690,12 @@ export function EmojiBoard({ const [result, search, resetSearch] = useAsyncSearch( searchList, - getSearchListItemStr, + getEmoticonSearchStr, SEARCH_OPTIONS ); + const searchedItems = result?.items.slice(0, 100); + const handleOnChange: ChangeEventHandler = useDebounce( useCallback( (evt) => { @@ -920,13 +916,13 @@ export function EmojiBoard({ direction="Column" gap="200" > - {result && ( + {searchedItems && ( )} diff --git a/src/app/plugins/utils.ts b/src/app/plugins/utils.ts new file mode 100644 index 000000000..27d27e7ab --- /dev/null +++ b/src/app/plugins/utils.ts @@ -0,0 +1,19 @@ +import { SearchItemStrGetter } from '../hooks/useAsyncSearch'; +import { PackImageReader } from './custom-emoji'; +import { IEmoji } from './emoji'; + +export const getEmoticonSearchStr: SearchItemStrGetter = (item) => { + const shortcode = `:${item.shortcode}:`; + if (item instanceof PackImageReader) { + if (item.body) { + return [shortcode, item.body]; + } + return shortcode; + } + + const names = [shortcode, item.label]; + if (Array.isArray(item.shortcodes)) { + return names.concat(item.shortcodes); + } + return names; +};