better search string selection for emoticons

cinnyapp · Feb 20, 2025 · 13d2233 · 13d2233
1 parent cb4e0e9
commit 13d2233
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 22 deletions.
diff --git 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<EmoticonSearchItem> = (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
@@ -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<HTMLInputElement> = useDebounce(
     useCallback(
       (evt) => {
@@ -920,13 +916,13 @@ export function EmojiBoard({
               direction="Column"
               gap="200"
             >
-              {result && (
+              {searchedItems && (
                 <SearchEmojiGroup
                   mx={mx}
                   tab={tab}
                   id={SEARCH_GROUP_ID}
-                  label={result.items.length ? 'Search Results' : 'No Results found'}
-                  emojis={result.items}
+                  label={searchedItems.length ? 'Search Results' : 'No Results found'}
+                  emojis={searchedItems}
                   useAuthentication={useAuthentication}
                 />
               )}

diff --git a/src/app/plugins/utils.ts 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<PackImageReader | IEmoji> = (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;
+};