diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx index a7a4dff28..834b556f2 100644 --- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx +++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx @@ -4,7 +4,7 @@ import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { buildCustomEmojis } from '../../../emoji/emoji'; +import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji'; import { EmojiPicker } from './emoji-picker-dropdown'; import ModifierPicker from './modifier-picker'; @@ -14,19 +14,6 @@ import type { Emoji } from 'soapbox/components/autosuggest-emoji'; const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png'); const listenerOptions = supportsPassiveEvents ? { passive: true } : false; -const categoriesSort = [ - 'recent', - 'custom', - 'people', - 'nature', - 'foods', - 'activity', - 'places', - 'objects', - 'symbols', - 'flags', -]; - const messages = defineMessages({ emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' }, @@ -71,6 +58,20 @@ const EmojiPickerMenu: React.FC = ({ const [modifierOpen, setModifierOpen] = useState(false); + const categoriesSort = [ + 'recent', + 'people', + 'nature', + 'foods', + 'activity', + 'places', + 'objects', + 'symbols', + 'flags', + ]; + + categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set).sort()); + const handleDocumentClick = useCallback(e => { if (node.current && !node.current.contains(e.target)) { onClose();