diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx index 9479a6982..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; @@ -33,16 +30,11 @@ type EmoticonAutocompleteProps = { }; const SEARCH_OPTIONS: UseAsyncSearchOptions = { - limit: 20, matchOptions: { contain: true, }, }; -const getEmoticonStr: SearchItemStrGetter = (emoticon) => [ - `:${emoticon.shortcode}:`, -]; - export function EmoticonAutocomplete({ imagePackRooms, editor, @@ -63,8 +55,12 @@ export function EmoticonAutocomplete({ ); }, [imagePacks]); - const [result, search, resetSearch] = useAsyncSearch(searchList, getEmoticonStr, SEARCH_OPTIONS); - const autoCompleteEmoticon = result ? result.items : recentEmoji; + const [result, search, resetSearch] = useAsyncSearch( + searchList, + getEmoticonSearchStr, + SEARCH_OPTIONS + ); + const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji; useEffect(() => { if (query.text) search(query.text); diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx index 049be94a0..cc431f58d 100644 --- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx @@ -65,7 +65,6 @@ type RoomMentionAutocompleteProps = { }; const SEARCH_OPTIONS: UseAsyncSearchOptions = { - limit: 20, matchOptions: { contain: true, }, @@ -97,7 +96,7 @@ export function RoomMentionAutocomplete({ SEARCH_OPTIONS ); - const autoCompleteRoomIds = result ? result.items : allRooms.slice(0, 20); + const autoCompleteRoomIds = result ? result.items.slice(0, 20) : allRooms.slice(0, 20); useEffect(() => { if (query.text) search(query.text); diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx index 88ac9f39b..d6c0f3021 100644 --- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx +++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx @@ -74,7 +74,7 @@ const withAllowedMembership = (member: RoomMember): boolean => member.membership === Membership.Knock; const SEARCH_OPTIONS: UseAsyncSearchOptions = { - limit: 20, + limit: 1000, matchOptions: { contain: true, }, @@ -97,7 +97,7 @@ export function UserMentionAutocomplete({ const members = useRoomMembers(mx, roomId); const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS); - const autoCompleteMembers = (result ? result.items : members.slice(0, 20)).filter( + const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter( withAllowedMembership ); 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/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx index a4305e456..df8008ca2 100644 --- a/src/app/features/room/MembersDrawer.tsx +++ b/src/app/features/room/MembersDrawer.tsx @@ -156,7 +156,7 @@ export type MembersFilterOptions = { }; const SEARCH_OPTIONS: UseAsyncSearchOptions = { - limit: 100, + limit: 1000, matchOptions: { contain: true, }, @@ -428,8 +428,9 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { }} after={} > - {`${result.items.length || 'No'} ${result.items.length === 1 ? 'Result' : 'Results' - }`} + {`${result.items.length || 'No'} ${ + result.items.length === 1 ? 'Result' : 'Results' + }`} ) } @@ -485,15 +486,17 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) { const member = tagOrMember; const name = getName(member); const avatarMxcUrl = member.getMxcAvatarUrl(); - const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp( - avatarMxcUrl, - 100, - 100, - 'crop', - undefined, - false, - useAuthentication - ) : undefined; + const avatarUrl = avatarMxcUrl + ? mx.mxcUrlToHttp( + avatarMxcUrl, + 100, + 100, + 'crop', + undefined, + false, + useAuthentication + ) + : undefined; return ( = (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; +};