Merge branch 'update-emoji-mart-2' into 'develop'

Update emoji mart See merge request soapbox-pub/soapbox!2309
2023-03-05 10:05:08 +00:00 · 2023-03-05 10:05:08 +00:00 · b54a466bfd
commit b54a466bfd
parent aad7df89a5 c9f2cc0ae2
62 changed files with 2966 additions and 1175 deletions
--- a/app/soapbox/actions/compose.ts
+++ b/app/soapbox/actions/compose.ts
@ -4,7 +4,8 @@ import throttle from 'lodash/throttle';
 import { defineMessages, IntlShape } from 'react-intl';

 import api from 'soapbox/api';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
+import { isNativeEmoji } from 'soapbox/features/emoji';
+import emojiSearch from 'soapbox/features/emoji/search';
 import { tagHistory } from 'soapbox/settings';
 import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
@ -19,8 +20,8 @@ import { openModal, closeModal } from './modals';
 import { getSettings } from './settings';
 import { createStatus } from './statuses';

-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities';
 import type { History } from 'soapbox/types/history';
@ -516,7 +517,9 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, composeId,
 }, 200, { leading: true, trailing: true });

 const fetchComposeSuggestionsEmojis = (dispatch: AppDispatch, getState: () => RootState, composeId: string, token: string) => {
-  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 } as any);
+  const state = getState();
+  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 }, state.custom_emojis);
+
  dispatch(readyComposeSuggestionsEmojis(composeId, token, results));
 };

@ -561,7 +564,7 @@ const selectComposeSuggestion = (composeId: string, position: number, token: str
    let completion, startPosition;

    if (typeof suggestion === 'object' && suggestion.id) {
-      completion    = suggestion.native || suggestion.colons;
+      completion    = isNativeEmoji(suggestion) ? suggestion.native : suggestion.colons;
      startPosition = position - 1;

      dispatch(useEmoji(suggestion));
--- a/app/soapbox/actions/emojis.ts
+++ b/app/soapbox/actions/emojis.ts
@ -1,6 +1,6 @@
 import { saveSettings } from './settings';

-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch } from 'soapbox/store';

 const EMOJI_USE = 'EMOJI_USE';
--- a/app/soapbox/actions/events.ts
+++ b/app/soapbox/actions/events.ts
@ -569,7 +569,7 @@ const rejectEventParticipationRequestFail = (id: string, accountId: string, erro
 });

 const fetchEventIcs = (id: string) =>
-  (dispatch: any, getState: () => RootState) =>
+  (dispatch: AppDispatch, getState: () => RootState) =>
    api(getState).get(`/api/v1/pleroma/events/${id}/ics`);

 const cancelEventCompose = () => ({
--- a/app/soapbox/components/announcements/emoji.tsx
+++ b/app/soapbox/components/announcements/emoji.tsx
@ -1,6 +1,6 @@
 import React from 'react';

-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';
 import { joinPublicPath } from 'soapbox/utils/static';

--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';

 import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';

 import Emoji from './emoji';

--- a/app/soapbox/components/announcements/reactions-bar.tsx
+++ b/app/soapbox/components/announcements/reactions-bar.tsx
@ -2,14 +2,13 @@ import clsx from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';

-import { Icon } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { useSettings } from 'soapbox/hooks';

 import Reaction from './reaction';

 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
 import type { AnnouncementReaction } from 'soapbox/types/entities';

 interface IReactionsBar {
@ -24,7 +23,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
  const reduceMotion = useSettings().get('reduceMotion');

  const handleEmojiPick = (data: Emoji) => {
-    addReaction(announcementId, data.native.replace(/:/g, ''));
+    addReaction(announcementId, (data as NativeEmoji).native.replace(/:/g, ''));
  };

  const willEnter = () => ({ scale: reduceMotion ? 1 : 0 });
@ -55,7 +54,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
            />
          ))}

-          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} button={<Icon className='h-4 w-4 text-gray-400 hover:text-gray-600 dark:hover:text-white' src={require('@tabler/icons/plus.svg')} />} />}
+          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />}
        </div>
      )}
    </TransitionMotion>
--- a/app/soapbox/components/autosuggest-emoji.tsx
+++ b/app/soapbox/components/autosuggest-emoji.tsx
@ -1,38 +1,30 @@
 import React from 'react';

-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import { isCustomEmoji } from 'soapbox/features/emoji';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { joinPublicPath } from 'soapbox/utils/static';

-export type Emoji = {
-  id: string
-  custom: boolean
-  imageUrl: string
-  native: string
-  colons: string
-}
-
-type UnicodeMapping = {
-  filename: string
-}
+import type { Emoji } from 'soapbox/features/emoji';

 interface IAutosuggestEmoji {
  emoji: Emoji
 }

 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
-  let url;
+  let url, alt;

-  if (emoji.custom) {
+  if (isCustomEmoji(emoji)) {
    url = emoji.imageUrl;
+    alt = emoji.colons;
  } else {
-    // @ts-ignore
-    const mapping: UnicodeMapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
+    const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];

    if (!mapping) {
      return null;
    }

-    url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
+    url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    alt = emoji.native;
  }

  return (
@ -40,7 +32,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
      <img
        className='emojione'
        src={url}
-        alt={emoji.native || emoji.colons}
+        alt={alt}
      />

      {emoji.colons}
--- a/app/soapbox/components/autosuggest-input.tsx
+++ b/app/soapbox/components/autosuggest-input.tsx
@ -3,7 +3,7 @@ import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';

-import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input, Portal } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
@ -12,6 +12,7 @@ import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';

 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
 import type { InputThemes } from 'soapbox/components/ui/input/input';
+import type { Emoji } from 'soapbox/features/emoji';

 export type AutoSuggestion = string | Emoji;

--- a/app/soapbox/components/autosuggest-textarea.tsx
+++ b/app/soapbox/components/autosuggest-textarea.tsx
@ -4,14 +4,14 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';

 import { Portal } from 'soapbox/components/ui';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
+import { isRtl } from 'soapbox/rtl';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';

-import AutosuggestAccount from '../features/compose/components/autosuggest-account';
-import { isRtl } from '../rtl';
-
-import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
+import AutosuggestEmoji from './autosuggest-emoji';

 import type { List as ImmutableList } from 'immutable';
+import type { Emoji } from 'soapbox/features/emoji';

 interface IAutosuggesteTextarea {
  id?: string
--- a/app/soapbox/components/status-reaction-wrapper.tsx
+++ b/app/soapbox/components/status-reaction-wrapper.tsx
@ -112,6 +112,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
            referenceElement={referenceElement}
            onReact={handleReact}
            visible={visible}
+            onClose={() => setVisible(false)}
          />
        </Portal>
      )}
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@ -3,10 +3,12 @@ import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { usePopper } from 'react-popper';

-import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
-import { Picker } from 'soapbox/features/emoji/emoji-picker';
+import { Emoji as EmojiComponent, HStack, IconButton } from 'soapbox/components/ui';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
 import { useSoapboxConfig } from 'soapbox/hooks';

+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+
 interface IEmojiButton {
  /** Unicode emoji character. */
  emoji: string
@ -29,7 +31,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd

  return (
    <button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
-      <Emoji className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
+      <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
    </button>
  );
 };
@ -68,10 +70,16 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);

  const handleClickOutside = (event: MouseEvent) => {
-    if (referenceElement?.contains(event.target as Node) || popperElement?.contains(event.target as Node)) {
+    if ([referenceElement, popperElement, document.querySelector('em-emoji-picker')].some(el => el?.contains(event.target as Node))) {
      return;
    }

+    if (document.querySelector('em-emoji-picker')) {
+      event.preventDefault();
+      event.stopPropagation();
+      return setExpanded(false);
+    }
+
    if (onClose) {
      onClose();
    }
@ -93,6 +101,14 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
    setExpanded(true);
  };

+  const handlePickEmoji = (emoji: Emoji) => {
+    onReact((emoji as NativeEmoji).native);
+  };
+
+  useEffect(() => () => {
+    document.body.style.overflow = '';
+  }, []);
+
  useEffect(() => {
    setExpanded(false);
  }, [visible]);
@ -103,7 +119,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
-  }, [referenceElement]);
+  }, [referenceElement, popperElement]);

  useEffect(() => {
    if (visible && update) {
@ -117,6 +133,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
    }
  }, [expanded, update]);

+
  return (
    <div
      className={clsx('z-[101] transition-opacity duration-100', {
@ -127,10 +144,12 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
      {...attributes.popper}
    >
      {expanded ? (
-        <Picker
-          set='twitter'
-          backgroundImageFn={() => require('emoji-datasource/img/twitter/sheets/32.png')}
-          onClick={(emoji: any) => onReact(emoji.native)}
+        <EmojiPickerDropdown
+          visible={expanded}
+          setVisible={setExpanded}
+          update={update}
+          withCustom={false}
+          onPickEmoji={handlePickEmoji}
        />
      ) : (
        <HStack
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@ -103,7 +103,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
  } else if (attachment.type === 'audio') {
    const remoteURL = attachment.remote_url || '';
    const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
-    const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+    const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
    thumbnail = (
      <div className='media-gallery__item-thumbnail'>
        <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@ -6,13 +6,15 @@ import { openModal } from 'soapbox/actions/modals';
 import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import UploadButton from 'soapbox/features/compose/components/upload-button';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
+import emojiSearch from 'soapbox/features/emoji/search';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 import { Attachment } from 'soapbox/types/entities';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';

 import ChatTextarea from './chat-textarea';

+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+
 const messages = defineMessages({
  placeholder: { id: 'chat.input.placeholder', defaultMessage: 'Type a message' },
  send: { id: 'chat.actions.send', defaultMessage: 'Send' },
@ -31,7 +33,7 @@ const initialSuggestionState = {
 };

 interface Suggestion {
-  list: { native: string, colons: string }[]
+  list: Emoji[]
  tokenStart: number
  token: string
 }
@ -209,7 +211,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
                      key={emojiSuggestion.colons}
                      value={renderSuggestionValue(emojiSuggestion)}
                    >
-                      <span>{emojiSuggestion.native}</span>
+                      <span>{(emojiSuggestion as NativeEmoji).native}</span>
                      <span className='ml-1'>
                        {emojiSuggestion.colons}
                      </span>
--- a/app/soapbox/features/chats/components/chat-message-reaction.tsx
+++ b/app/soapbox/features/chats/components/chat-message-reaction.tsx
@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';

 import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { EmojiReaction } from 'soapbox/types/entities';

 interface IChatMessageReaction {
@ -42,4 +42,4 @@ const ChatMessageReaction = (props: IChatMessageReaction) => {
  );
 };

-export default ChatMessageReaction;
+export default ChatMessageReaction;
--- a/app/soapbox/features/chats/components/chat-message.tsx
+++ b/app/soapbox/features/chats/components/chat-message.tsx
@ -9,7 +9,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
 import DropdownMenu from 'soapbox/components/dropdown-menu';
 import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
@ -390,4 +390,4 @@ const ChatMessage = (props: IChatMessage) => {
  );
 };

-export default ChatMessage;
+export default ChatMessage;
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@ -16,6 +16,7 @@ import {
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
 import { Button, HStack, Stack } from 'soapbox/components/ui';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';

@ -26,7 +27,6 @@ import UploadButtonContainer from '../containers/upload-button-container';
 import WarningContainer from '../containers/warning-container';
 import { countableText } from '../util/counter';

-import EmojiPickerDropdown from './emoji-picker/emoji-picker-dropdown';
 import MarkdownButton from './markdown-button';
 import PollButton from './poll-button';
 import PollForm from './polls/poll-form';
@ -40,7 +40,7 @@ import UploadForm from './upload-form';
 import VisualCharacterCounter from './visual-character-counter';
 import Warning from './warning';

-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';

 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';

@ -116,7 +116,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
      // FIXME: Make this less brittle
      getClickableArea(),
      document.querySelector('.privacy-dropdown__dropdown'),
-      document.querySelector('.emoji-picker-dropdown__menu'),
+      document.querySelector('em-emoji-picker'),
      document.getElementById('modal-overlay'),
    ].some(element => element?.contains(e.target as any));
  };
@ -179,7 +179,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab

  const handleEmojiPick = (data: Emoji) => {
    const position   = autosuggestTextareaRef.current!.textarea!.selectionStart;
-    const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
+    const needsSpace = !!data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);

    dispatch(insertEmojiCompose(id, position, data, needsSpace));
  };
@ -226,7 +226,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
  const renderButtons = useCallback(() => (
    <HStack alignItems='center' space={2}>
      {features.media && <UploadButtonContainer composeId={id} />}
-      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
+      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} condensed={shouldCondense} />
      {features.polls && <PollButton composeId={id} />}
      {features.privacyScopes && !group && !groupId && <PrivacyDropdown composeId={id} />}
      {features.scheduledStatuses && <ScheduleButton composeId={id} />}
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
@ -1,209 +0,0 @@
-import clsx from 'clsx';
-import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-// @ts-ignore
-import Overlay from 'react-overlays/lib/Overlay';
-import { createSelector } from 'reselect';
-
-import { useEmoji } from 'soapbox/actions/emojis';
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
-import { IconButton } from 'soapbox/components/ui';
-import { EmojiPicker as EmojiPickerAsync } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-import EmojiPickerMenu from './emoji-picker-menu';
-
-import type { Emoji as EmojiType } from 'soapbox/components/autosuggest-emoji';
-import type { RootState } from 'soapbox/store';
-
-let EmojiPicker: any, Emoji: any; // load asynchronously
-
-const perLine = 8;
-const lines   = 2;
-
-const DEFAULTS = [
-  '+1',
-  'grinning',
-  'kissing_heart',
-  'heart_eyes',
-  'laughing',
-  'stuck_out_tongue_winking_eye',
-  'sweat_smile',
-  'joy',
-  'yum',
-  'disappointed',
-  'thinking_face',
-  'weary',
-  'sob',
-  'sunglasses',
-  'heart',
-  'ok_hand',
-];
-
-const getFrequentlyUsedEmojis = createSelector([
-  (state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
-], emojiCounters => {
-  let emojis = emojiCounters
-    .keySeq()
-    .sort((a: number, b: number) => emojiCounters.get(a) - emojiCounters.get(b))
-    .reverse()
-    .slice(0, perLine * lines)
-    .toArray();
-
-  if (emojis.length < DEFAULTS.length) {
-    const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
-    emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
-  }
-
-  return emojis;
-});
-
-const getCustomEmojis = createSelector([
-  (state: RootState) => state.custom_emojis as ImmutableList<ImmutableMap<string, string>>,
-], emojis => emojis.filter((e) => e.get('visible_in_picker')).sort((a, b) => {
-  const aShort = a.get('shortcode')!.toLowerCase();
-  const bShort = b.get('shortcode')!.toLowerCase();
-
-  if (aShort < bShort) {
-    return -1;
-  } else if (aShort > bShort) {
-    return 1;
-  } else {
-    return 0;
-  }
-}) as ImmutableList<ImmutableMap<string, string>>);
-
-const messages = defineMessages({
-  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
-  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
-  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
-  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
-  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
-  people: { id: 'emoji_button.people', defaultMessage: 'People' },
-  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
-  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
-  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
-  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
-  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
-  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
-  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
-});
-
-interface IEmojiPickerDropdown {
-  onPickEmoji: (data: EmojiType) => void
-  button?: JSX.Element
-}
-
-const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, button }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const customEmojis = useAppSelector((state) => getCustomEmojis(state));
-  const skinTone = useAppSelector((state) => getSettings(state).get('skinTone') as number);
-  const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
-
-  const [active, setActive] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [placement, setPlacement] = useState<'bottom' | 'top'>();
-
-  const target = useRef(null);
-
-  const onSkinTone = (skinTone: number) => {
-    dispatch(changeSetting(['skinTone'], skinTone));
-  };
-
-  const handlePickEmoji = (emoji: EmojiType) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    dispatch(useEmoji(emoji));
-
-    if (onPickEmoji) {
-      onPickEmoji(emoji);
-    }
-  };
-
-  const onShowDropdown: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
-    e.stopPropagation();
-
-    setActive(true);
-
-    if (!EmojiPicker) {
-      setLoading(true);
-
-      EmojiPickerAsync().then(EmojiMart => {
-        EmojiPicker = EmojiMart.Picker;
-        Emoji = EmojiMart.Emoji;
-
-        setLoading(false);
-      }).catch(() => {
-        setLoading(false);
-      });
-    }
-
-    const { top } = (e.target as any).getBoundingClientRect();
-    setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
-  };
-
-  const onHideDropdown = () => {
-    setActive(false);
-  };
-
-  const onToggle: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
-    if (!loading && (!(e as React.KeyboardEvent).key || (e as React.KeyboardEvent).key === 'Enter')) {
-      if (active) {
-        onHideDropdown();
-      } else {
-        onShowDropdown(e);
-      }
-    }
-  };
-
-  const handleKeyDown: React.KeyboardEventHandler = e => {
-    if (e.key === 'Escape') {
-      onHideDropdown();
-    }
-  };
-
-  const title = intl.formatMessage(messages.emoji);
-
-  return (
-    <div className='relative' onKeyDown={handleKeyDown}>
-      <div
-        ref={target}
-        title={title}
-        aria-label={title}
-        aria-expanded={active}
-        role='button'
-        onClick={onToggle}
-        onKeyDown={onToggle}
-        tabIndex={0}
-      >
-        {button || <IconButton
-          className={clsx({
-            'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
-            'pulse-loading': active && loading,
-          })}
-          title='😀'
-          src={require('@tabler/icons/mood-happy.svg')}
-        />}
-      </div>
-
-      <Overlay show={active} placement={placement} target={target.current}>
-        <EmojiPickerMenu
-          customEmojis={customEmojis}
-          loading={loading}
-          onClose={onHideDropdown}
-          onPick={handlePickEmoji}
-          onSkinTone={onSkinTone}
-          skinTone={skinTone}
-          frequentlyUsedEmojis={frequentlyUsedEmojis}
-        />
-      </Overlay>
-    </div>
-  );
-};
-
-export { EmojiPicker, Emoji };
-
-export default EmojiPickerDropdown;
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
@ -1,171 +0,0 @@
-import clsx from 'clsx';
-import { supportsPassiveEvents } from 'detect-passive-events';
-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, categoriesFromEmojis } from '../../../emoji/emoji';
-
-import { EmojiPicker } from './emoji-picker-dropdown';
-import ModifierPicker from './modifier-picker';
-
-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 messages = defineMessages({
-  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
-  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
-  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
-  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
-  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
-  people: { id: 'emoji_button.people', defaultMessage: 'People' },
-  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
-  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
-  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
-  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
-  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
-  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
-  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
-});
-
-interface IEmojiPickerMenu {
-  customEmojis: ImmutableList<ImmutableMap<string, string>>
-  loading?: boolean
-  onClose: () => void
-  onPick: (emoji: Emoji) => void
-  onSkinTone: (skinTone: number) => void
-  skinTone?: number
-  frequentlyUsedEmojis?: Array<string>
-  style?: React.CSSProperties
-}
-
-const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
-  customEmojis,
-  loading = true,
-  onClose,
-  onPick,
-  onSkinTone,
-  skinTone,
-  frequentlyUsedEmojis = [],
-  style = {},
-}) => {
-  const intl = useIntl();
-
-  const node = useRef<HTMLDivElement>(null);
-
-  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<string>).sort());
-
-  const handleDocumentClick = useCallback((e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }, []);
-
-  const getI18n = () => {
-    return {
-      search: intl.formatMessage(messages.emoji_search),
-      notfound: intl.formatMessage(messages.emoji_not_found),
-      categories: {
-        search: intl.formatMessage(messages.search_results),
-        recent: intl.formatMessage(messages.recent),
-        people: intl.formatMessage(messages.people),
-        nature: intl.formatMessage(messages.nature),
-        foods: intl.formatMessage(messages.food),
-        activity: intl.formatMessage(messages.activity),
-        places: intl.formatMessage(messages.travel),
-        objects: intl.formatMessage(messages.objects),
-        symbols: intl.formatMessage(messages.symbols),
-        flags: intl.formatMessage(messages.flags),
-        custom: intl.formatMessage(messages.custom),
-      },
-    };
-  };
-
-  const handleClick = (emoji: any) => {
-    if (!emoji.native) {
-      emoji.native = emoji.colons;
-    }
-
-    onClose();
-    onPick(emoji);
-  };
-
-  const handleModifierOpen = () => {
-    setModifierOpen(true);
-  };
-
-  const handleModifierClose = () => {
-    setModifierOpen(false);
-  };
-
-  const handleModifierChange = (modifier: number) => {
-    onSkinTone(modifier);
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, false);
-      document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
-    };
-  }, []);
-
-  if (loading) {
-    return <div style={{ width: 299 }} />;
-  }
-
-  const title = intl.formatMessage(messages.emoji);
-
-  return (
-    <div className={clsx('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
-      <EmojiPicker
-        perLine={8}
-        emojiSize={22}
-        sheetSize={32}
-        custom={buildCustomEmojis(customEmojis)}
-        color=''
-        emoji=''
-        set='twitter'
-        title={title}
-        i18n={getI18n()}
-        onClick={handleClick}
-        include={categoriesSort}
-        recent={frequentlyUsedEmojis}
-        skin={skinTone}
-        showPreview={false}
-        backgroundImageFn={backgroundImageFn}
-        autoFocus
-        emojiTooltip
-      />
-
-      <ModifierPicker
-        active={modifierOpen}
-        modifier={skinTone}
-        onOpen={handleModifierOpen}
-        onClose={handleModifierClose}
-        onChange={handleModifierChange}
-      />
-    </div>
-  );
-};
-
-export default EmojiPickerMenu;
--- a/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx
@ -1,73 +0,0 @@
-import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Emoji } from './emoji-picker-dropdown';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
-
-interface IModifierPickerMenu {
-  active: boolean
-  onSelect: (modifier: number) => void
-  onClose: () => void
-}
-
-const ModifierPickerMenu: React.FC<IModifierPickerMenu> = ({ active, onSelect, onClose }) => {
-  const node = useRef<HTMLDivElement>(null);
-
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = e => {
-    onSelect(+e.currentTarget.getAttribute('data-index')! * 1);
-  };
-
-  const handleDocumentClick = useCallback(((e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }), []);
-
-  const attachListeners = () => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-  };
-
-  const removeListeners = () => {
-    document.removeEventListener('click', handleDocumentClick, false);
-    document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
-  };
-
-  useEffect(() => {
-    return () => {
-      removeListeners();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (active) attachListeners();
-    else removeListeners();
-  }, [active]);
-
-  return (
-    <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={node}>
-      <button onClick={handleClick} data-index={1}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={2}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={3}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={4}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={5}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={6}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
-      </button>
-    </div>
-  );
-};
-
-export default ModifierPickerMenu;
--- a/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx
@ -1,38 +0,0 @@
-import React from 'react';
-
-import { Emoji } from './emoji-picker-dropdown';
-import ModifierPickerMenu from './modifier-picker-menu';
-
-const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
-
-interface IModifierPicker {
-  active: boolean
-  modifier?: number
-  onOpen: () => void
-  onClose: () => void
-  onChange: (skinTone: number) => void
-}
-
-const ModifierPicker: React.FC<IModifierPicker> = ({ active, modifier, onOpen, onClose, onChange }) => {
-  const handleClick = () => {
-    if (active) {
-      onClose();
-    } else {
-      onOpen();
-    }
-  };
-
-  const handleSelect = (modifier: number) => {
-    onChange(modifier);
-    onClose();
-  };
-
-  return (
-    <div className='emoji-picker-dropdown__modifiers'>
-      <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={handleClick} backgroundImageFn={backgroundImageFn} />
-      <ModifierPickerMenu active={active} onSelect={handleSelect} onClose={onClose} />
-    </div>
-  );
-};
-
-export default ModifierPicker;
--- a/app/soapbox/features/emoji/tests/emoji-index.test.ts
+++ b/app/soapbox/features/emoji/tests/emoji-index.test.ts
@ -1,8 +1,7 @@
-// @ts-ignore
-import { emojiIndex } from 'emoji-mart';
+import { List, Map } from 'immutable';
 import pick from 'lodash/pick';

-import { search } from '../emoji-mart-search-light';
+import search, { addCustomToPool } from '../search';

 const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);

@ -16,116 +15,83 @@ describe('emoji_index', () => {
      },
    ];
    expect(search('pineapple').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('pineapple').map(trimEmojis)).toEqual(expected);
  });

  it('orders search results correctly', () => {
    const expected = [
-      {
-        id: 'apple',
-        unified: '1f34e',
-        native: '🍎',
-      },
      {
        id: 'pineapple',
        unified: '1f34d',
        native: '🍍',
      },
+      {
+        id: 'apple',
+        unified: '1f34e',
+        native: '🍎',
+      },
      {
        id: 'green_apple',
        unified: '1f34f',
        native: '🍏',
      },
-      {
-        id: 'iphone',
-        unified: '1f4f1',
-        native: '📱',
-      },
    ];
    expect(search('apple').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('apple').map(trimEmojis)).toEqual(expected);
  });

-  it('can include/exclude categories', () => {
-    expect(search('flag', { include: ['people'] } as any)).toEqual([]);
-    expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
-  });
-
-  it('(different behavior from emoji-mart) do not erases custom emoji if not passed again', () => {
+  it('handles custom emojis', () => {
    const custom = [
      {
        id: 'mastodon',
        name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
        keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
+        skins: { src: 'http://example.com' },
      },
    ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
+
+    const custom_emojis = List([
+      Map({ static_url: 'http://example.com', shortcode: 'mastodon' }),
+    ]);
+
    const lightExpected = [
      {
        id: 'mastodon',
        custom: true,
      },
    ];
-    expect(search('masto').map(trimEmojis)).toEqual(lightExpected);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
+
+    addCustomToPool(custom);
+    expect(search('masto', {}, custom_emojis).map(trimEmojis)).toEqual(lightExpected);
  });

-  it('(different behavior from emoji-mart) erases custom emoji if another is passed', () => {
+  it('updates custom emoji if another is passed', () => {
    const custom = [
      {
        id: 'mastodon',
        name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
        keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
+        skins: { src: 'http://example.com' },
      },
    ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
-    expect(search('masto', { custom: [] } as any).map(trimEmojis)).toEqual([]);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
-  });

-  it('handles custom emoji', () => {
-    const custom = [
-      {
-        id: 'mastodon',
-        name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
-        keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
-      },
-    ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
-    const expected = [
-      {
-        id: 'mastodon',
-        custom: true,
-      },
-    ];
-    expect(search('masto', { custom } as any).map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('masto', { custom }).map(trimEmojis)).toEqual(expected);
-  });
+    addCustomToPool(custom);

-  it('should filter only emojis we care about, exclude pineapple', () => {
-    const emojisToShowFilter = (emoji: any) => emoji.unified !== '1F34D';
-    expect(search('apple', { emojisToShowFilter } as any).map((obj: any) => obj.id))
-      .not.toContain('pineapple');
-    expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj: any) => obj.id))
-      .not.toContain('pineapple');
+    const custom2 = [
+      {
+        id: 'pleroma',
+        name: 'pleroma',
+        keywords: ['pleroma'],
+        skins: { src: 'http://example.com' },
+      },
+    ];
+
+    addCustomToPool(custom2);
+
+    const custom_emojis = List([
+      Map({ static_url: 'http://example.com', shortcode: 'pleroma' }),
+    ]);
+
+    const expected: any = [];
+    expect(search('masto', {}, custom_emojis).map(trimEmojis)).toEqual(expected);
  });

  it('does an emoji whose unified name is irregular', () => {
@ -147,7 +113,6 @@ describe('emoji_index', () => {
      },
    ];
    expect(search('polo').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('polo').map(trimEmojis)).toEqual(expected);
  });

  it('can search for thinking_face', () => {
@ -159,7 +124,6 @@ describe('emoji_index', () => {
      },
    ];
    expect(search('thinking_fac').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('thinking_fac').map(trimEmojis)).toEqual(expected);
  });

  it('can search for woman-facepalming', () => {
@ -171,6 +135,5 @@ describe('emoji_index', () => {
      },
    ];
    expect(search('woman-facep').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('woman-facep').map(trimEmojis)).toEqual(expected);
  });
 });
--- a/app/soapbox/features/emoji/tests/emoji.test.ts
+++ b/app/soapbox/features/emoji/tests/emoji.test.ts
--- a/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
+++ b/app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx
@ -0,0 +1,259 @@
+import { Map as ImmutableMap } from 'immutable';
+import React, { useEffect, useState, useLayoutEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { createSelector } from 'reselect';
+
+import { useEmoji } from 'soapbox/actions/emojis';
+import { changeSetting } from 'soapbox/actions/settings';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
+import { RootState } from 'soapbox/store';
+
+import { buildCustomEmojis } from '../../emoji';
+import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
+
+import type { State as PopperState } from '@popperjs/core';
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+
+let EmojiPicker: any; // load asynchronously
+
+export const messages = defineMessages({
+  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
+  emoji_pick: { id: 'emoji_button.pick', defaultMessage: 'Pick an emoji…' },
+  emoji_oh_no: { id: 'emoji_button.oh_no', defaultMessage: 'Oh no!' },
+  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
+  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
+  emoji_add_custom: { id: 'emoji_button.add_custom', defaultMessage: 'Add custom emoji' },
+  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
+  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
+  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
+  people: { id: 'emoji_button.people', defaultMessage: 'People' },
+  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
+  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
+  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
+  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
+  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
+  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
+  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
+  skins_choose: { id: 'emoji_button.skins_choose', defaultMessage: 'Choose default skin tone' },
+  skins_1: { id: 'emoji_button.skins_1', defaultMessage: 'Default' },
+  skins_2: { id: 'emoji_button.skins_2', defaultMessage: 'Light' },
+  skins_3: { id: 'emoji_button.skins_3', defaultMessage: 'Medium-Light' },
+  skins_4: { id: 'emoji_button.skins_4', defaultMessage: 'Medium' },
+  skins_5: { id: 'emoji_button.skins_5', defaultMessage: 'Medium-Dark' },
+  skins_6: { id: 'emoji_button.skins_6', defaultMessage: 'Dark' },
+});
+
+export interface IEmojiPickerDropdown {
+  onPickEmoji?: (emoji: Emoji) => void
+  condensed?: boolean
+  withCustom?: boolean
+  visible: boolean
+  setVisible: (value: boolean) => void
+  update: (() => Promise<Partial<PopperState>>) | null
+}
+
+const perLine = 8;
+const lines   = 2;
+
+const DEFAULTS = [
+  '+1',
+  'grinning',
+  'kissing_heart',
+  'heart_eyes',
+  'laughing',
+  'stuck_out_tongue_winking_eye',
+  'sweat_smile',
+  'joy',
+  'yum',
+  'disappointed',
+  'thinking_face',
+  'weary',
+  'sob',
+  'sunglasses',
+  'heart',
+  'ok_hand',
+];
+
+export const getFrequentlyUsedEmojis = createSelector([
+  (state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
+], (emojiCounters: ImmutableMap<string, number>) => {
+  let emojis = emojiCounters
+    .keySeq()
+    .sort((a, b) => emojiCounters.get(a)! - emojiCounters.get(b)!)
+    .reverse()
+    .slice(0, perLine * lines)
+    .toArray();
+
+  if (emojis.length < DEFAULTS.length) {
+    const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
+    emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
+  }
+
+  return emojis;
+});
+
+const getCustomEmojis = createSelector([
+  (state: RootState) => state.custom_emojis,
+], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
+  const aShort = a.get('shortcode')!.toLowerCase();
+  const bShort = b.get('shortcode')!.toLowerCase();
+
+  if (aShort < bShort) {
+    return -1;
+  } else if (aShort > bShort) {
+    return 1;
+  } else {
+    return 0;
+  }
+}));
+
+// Fixes render bug where popover has a delayed position update
+const RenderAfter = ({ children, update }: any) => {
+  const [nextTick, setNextTick] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setNextTick(true);
+    }, 0);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (nextTick) {
+      update();
+    }
+  }, [nextTick, update]);
+
+  return nextTick ? children : null;
+};
+
+const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
+  onPickEmoji, visible, setVisible, update, withCustom = true,
+}) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const settings = useSettings();
+  const title = intl.formatMessage(messages.emoji);
+  const userTheme = settings.get('themeMode');
+  const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto';
+
+  const customEmojis = useAppSelector((state) => getCustomEmojis(state));
+  const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
+
+  const [loading, setLoading] = useState(false);
+
+  const handlePick = (emoji: any) => {
+    setVisible(false);
+
+    let pickedEmoji: Emoji;
+
+    if (emoji.native) {
+      pickedEmoji = {
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: false,
+        native: emoji.native,
+        unified: emoji.unified,
+      } as NativeEmoji;
+    } else {
+      pickedEmoji = {
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: true,
+        imageUrl: emoji.src,
+      } as CustomEmoji;
+    }
+
+    dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
+
+    if (onPickEmoji) {
+      onPickEmoji(pickedEmoji);
+    }
+  };
+
+  const handleSkinTone = (skinTone: string) => {
+    dispatch(changeSetting(['skinTone'], skinTone));
+  };
+
+  const getI18n = () => {
+    return {
+      search: intl.formatMessage(messages.emoji_search),
+      pick: intl.formatMessage(messages.emoji_pick),
+      search_no_results_1: intl.formatMessage(messages.emoji_oh_no),
+      search_no_results_2: intl.formatMessage(messages.emoji_not_found),
+      add_custom: intl.formatMessage(messages.emoji_add_custom),
+      categories: {
+        search: intl.formatMessage(messages.search_results),
+        frequent: intl.formatMessage(messages.recent),
+        people: intl.formatMessage(messages.people),
+        nature: intl.formatMessage(messages.nature),
+        foods: intl.formatMessage(messages.food),
+        activity: intl.formatMessage(messages.activity),
+        places: intl.formatMessage(messages.travel),
+        objects: intl.formatMessage(messages.objects),
+        symbols: intl.formatMessage(messages.symbols),
+        flags: intl.formatMessage(messages.flags),
+        custom: intl.formatMessage(messages.custom),
+      },
+      skins: {
+        choose: intl.formatMessage(messages.skins_choose),
+        1: intl.formatMessage(messages.skins_1),
+        2: intl.formatMessage(messages.skins_2),
+        3: intl.formatMessage(messages.skins_3),
+        4: intl.formatMessage(messages.skins_4),
+        5: intl.formatMessage(messages.skins_5),
+        6: intl.formatMessage(messages.skins_6),
+      },
+    };
+  };
+
+  useEffect(() => {
+    // fix scrolling focus issue
+    if (visible) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    if (!EmojiPicker) {
+      setLoading(true);
+
+      EmojiPickerAsync().then(EmojiMart => {
+        EmojiPicker = EmojiMart.Picker;
+
+        setLoading(false);
+      }).catch(() => {
+        setLoading(false);
+      });
+    }
+  }, [visible]);
+
+  useEffect(() => () => {
+    document.body.style.overflow = '';
+  }, []);
+
+  return (
+    visible ? (
+      <RenderAfter update={update}>
+        {!loading && (
+          <EmojiPicker
+            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
+            title={title}
+            onEmojiSelect={handlePick}
+            recent={frequentlyUsedEmojis}
+            perLine={8}
+            skin={handleSkinTone}
+            emojiSize={22}
+            emojiButtonSize={34}
+            set='twitter'
+            theme={theme}
+            i18n={getI18n()}
+            skinTonePosition='search'
+            previewPosition='none'
+          />
+        )}
+      </RenderAfter>
+    ) : null
+  );
+};
+
+export default EmojiPickerDropdown;
--- a/app/soapbox/features/emoji/components/emoji-picker.tsx
+++ b/app/soapbox/features/emoji/components/emoji-picker.tsx
@ -0,0 +1,30 @@
+import { Picker as EmojiPicker } from 'emoji-mart';
+import React, { useRef, useEffect } from 'react';
+
+import { joinPublicPath } from 'soapbox/utils/static';
+
+import data from '../data';
+
+const getSpritesheetURL = (set: string) => {
+  return require('emoji-datasource/img/twitter/sheets/32.png');
+};
+
+const getImageURL = (set: string, name: string) => {
+  return joinPublicPath(`/packs/emoji/${name}.svg`);
+};
+
+const Picker = (props: any) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const input = { ...props, data, ref, getImageURL, getSpritesheetURL };
+
+    new EmojiPicker(input);
+  }, []);
+
+  return <div ref={ref} />;
+};
+
+export {
+  Picker,
+};
--- a/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
+++ b/app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx
@ -0,0 +1,96 @@
+import clsx from 'clsx';
+import { supportsPassiveEvents } from 'detect-passive-events';
+import React, { KeyboardEvent, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+import { usePopper } from 'react-popper';
+
+import { IconButton } from 'soapbox/components/ui';
+import { isMobile } from 'soapbox/is-mobile';
+
+import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
+
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+
+export const messages = defineMessages({
+  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
+});
+
+const EmojiPickerDropdownContainer = (
+  props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'>,
+) => {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.emoji);
+
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+  const [popperReference, setPopperReference] = useState<HTMLButtonElement | null>(null);
+  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
+
+  const [visible, setVisible] = useState(false);
+
+  const placement = props.condensed ? 'bottom-start' : 'top-start';
+  const { styles, attributes, update } = usePopper(popperReference, popperElement, {
+    placement: isMobile(window.innerWidth) ? 'auto' : placement,
+  });
+
+  const handleDocClick = (e: any) => {
+    if (!containerElement?.contains(e.target) && !popperElement?.contains(e.target)) {
+      setVisible(false);
+    }
+  };
+
+  const handleToggle = (e: MouseEvent | KeyboardEvent) => {
+    e.stopPropagation();
+    setVisible(!visible);
+  };
+
+  // TODO: move to class
+  const style: React.CSSProperties = !isMobile(window.innerWidth) ? styles.popper : {
+    ...styles.popper, width: '100%',
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocClick, false);
+    document.addEventListener('touchend', handleDocClick, listenerOptions);
+
+    return () => {
+      document.removeEventListener('click', handleDocClick, false);
+      // @ts-ignore
+      document.removeEventListener('touchend', handleDocClick, listenerOptions);
+    };
+  });
+
+  return (
+    <div className='relative' ref={setContainerElement}>
+      <IconButton
+        className={clsx({
+          'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
+        })}
+        ref={setPopperReference}
+        src={require('@tabler/icons/mood-happy.svg')}
+        title={title}
+        aria-label={title}
+        aria-expanded={visible}
+        role='button'
+        onClick={handleToggle as any}
+        onKeyDown={handleToggle as React.KeyboardEventHandler<HTMLButtonElement>}
+        tabIndex={0}
+      />
+
+      {createPortal(
+        <div
+          className='z-[101]'
+          ref={setPopperElement}
+          style={style}
+          {...attributes.popper}
+        >
+          <EmojiPickerDropdown visible={visible} setVisible={setVisible} update={update} {...props} />
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+};
+
+
+export default EmojiPickerDropdownContainer;
--- a/app/soapbox/features/emoji/data.ts
+++ b/app/soapbox/features/emoji/data.ts
@ -0,0 +1,52 @@
+import data from '@emoji-mart/data/sets/14/twitter.json';
+
+export interface NativeEmoji {
+  unified: string
+  native: string
+  x: number
+  y: number
+}
+
+export interface CustomEmoji {
+  src: string
+}
+
+export interface Emoji<T> {
+  id: string
+  name: string
+  keywords: string[]
+  skins: T[]
+  version?: number
+}
+
+export interface EmojiCategory {
+  id: string
+  emojis: string[]
+}
+
+export interface EmojiMap {
+  [s: string]: Emoji<NativeEmoji>
+}
+
+export interface EmojiAlias {
+  [s: string]: string
+}
+
+export interface EmojiSheet {
+  cols: number
+  rows: number
+}
+
+export interface EmojiData {
+  categories: EmojiCategory[]
+  emojis: EmojiMap
+  aliases: EmojiAlias
+  sheet: EmojiSheet
+}
+
+const emojiData = data as EmojiData;
+const { categories, emojis, aliases, sheet } = emojiData;
+
+export { categories, emojis, aliases, sheet };
+
+export default emojiData;
--- a/app/soapbox/features/emoji/emoji-compressed.js
+++ b/app/soapbox/features/emoji/emoji-compressed.js
--- a/app/soapbox/features/emoji/emoji-map.json
+++ b/app/soapbox/features/emoji/emoji-map.json
--- a/app/soapbox/features/emoji/emoji-mart-data-light.ts
+++ b/app/soapbox/features/emoji/emoji-mart-data-light.ts
@ -1,44 +0,0 @@
-// The output of this module is designed to mimic emoji-mart's
-// "data" object, such that we can use it for a light version of emoji-mart's
-// emojiIndex.search functionality.
-import emojiCompressed from './emoji-compressed';
-import { unicodeToUnifiedName } from './unicode-to-unified-name';
-
-const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
-
-const emojis: Record<string, any> = {};
-
-// decompress
-Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
-  const [
-    _filenameData, // eslint-disable-line @typescript-eslint/no-unused-vars
-    searchData,
-  ] = shortCodesToEmojiData[shortCode];
-  const [
-    native,
-    short_names,
-    search,
-    unified,
-  ] = searchData;
-
-  emojis[shortCode] = {
-    native,
-    search,
-    short_names: [shortCode].concat(short_names),
-    unified: unified || unicodeToUnifiedName(native),
-  };
-});
-
-export {
-  emojis,
-  skins,
-  categories,
-  short_names,
-};
-
-export default {
-  emojis,
-  skins,
-  categories,
-  short_names,
-};
--- a/app/soapbox/features/emoji/emoji-mart-search-light.js
+++ b/app/soapbox/features/emoji/emoji-mart-search-light.js
--- a/app/soapbox/features/emoji/emoji-picker.ts
+++ b/app/soapbox/features/emoji/emoji-picker.ts
@ -1,9 +0,0 @@
-// @ts-ignore no types
-import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
-// @ts-ignore no types
-import Picker from 'emoji-mart/dist-es/components/picker/picker';
-
-export {
-  Picker,
-  Emoji,
-};
--- a/app/soapbox/features/emoji/emoji-unicode-mapping-light.js
+++ b/app/soapbox/features/emoji/emoji-unicode-mapping-light.js
--- a/app/soapbox/features/emoji/emoji-utils.js
+++ b/app/soapbox/features/emoji/emoji-utils.js
--- a/app/soapbox/features/emoji/emoji.js
+++ b/app/soapbox/features/emoji/emoji.js
--- a/app/soapbox/features/emoji/index.ts
+++ b/app/soapbox/features/emoji/index.ts
@ -0,0 +1,228 @@
+import split from 'graphemesplit';
+
+import unicodeMapping from './mapping';
+
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
+
+/*
+ * TODO: Consolate emoji object types
+ *
+ * There are five different emoji objects currently
+ *  - emoji-mart's "onPickEmoji" handler
+ *  - emoji-mart's custom emoji types
+ *  - an Emoji type that is either NativeEmoji or CustomEmoji
+ *  - a type inside redux's `store.custom_emoji` immutablejs
+ *
+ * there needs to be one type for the picker handler callback
+ * and one type for the emoji-mart data
+ * and one type that is used everywhere that the above two are converted into
+ */
+
+export interface CustomEmoji {
+  id: string
+  colons: string
+  custom: true
+  imageUrl: string
+}
+
+export interface NativeEmoji {
+  id: string
+  colons: string
+  custom?: boolean
+  unified: string
+  native: string
+}
+
+export type Emoji = CustomEmoji | NativeEmoji;
+
+export function isCustomEmoji(emoji: Emoji): emoji is CustomEmoji {
+  return (emoji as CustomEmoji).imageUrl !== undefined;
+}
+
+export function isNativeEmoji(emoji: Emoji): emoji is NativeEmoji {
+  return (emoji as NativeEmoji).native !== undefined;
+}
+
+const isAlphaNumeric = (c: string) => {
+  const code = c.charCodeAt(0);
+
+  if (!(code > 47 && code < 58) &&  // numeric (0-9)
+      !(code > 64 && code < 91) &&  // upper alpha (A-Z)
+      !(code > 96 && code < 123)) { // lower alpha (a-z)
+    return false;
+  } else {
+    return true;
+  }
+};
+
+const validEmojiChar = (c: string) => {
+  return isAlphaNumeric(c)
+    || c === '_'
+    || c === '-'
+    || c === '.';
+};
+
+const convertCustom = (shortname: string, filename: string) => {
+  return `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+};
+
+const convertUnicode = (c: string) => {
+  const { unified, shortcode } = unicodeMapping[c];
+
+  return `<img draggable="false" class="emojione" alt="${c}" title=":${shortcode}:" src="/packs/emoji/${unified}.svg" />`;
+};
+
+const convertEmoji = (str: string, customEmojis: any) => {
+  if (str.length < 3) return str;
+  if (str in customEmojis) {
+    const emoji = customEmojis[str];
+    const filename = emoji.static_url;
+
+    if (filename?.length > 0) {
+      return convertCustom(str, filename);
+    }
+  }
+
+  return str;
+};
+
+export const emojifyText = (str: string, customEmojis = {}) => {
+  let buf = '';
+  let stack = '';
+  let open = false;
+
+  const clearStack = () => {
+    buf += stack;
+    open = false;
+    stack = '';
+  };
+
+  for (let c of split(str)) {
+    // convert FE0E selector to FE0F so it can be found in unimap
+    if (c.codePointAt(c.length - 1) === 65038) {
+      c = c.slice(0, -1) + String.fromCodePoint(65039);
+    }
+
+    // unqualified emojis aren't in emoji-mart's mappings so we just add FEOF
+    const unqualified = c + String.fromCodePoint(65039);
+
+    if (c in unicodeMapping) {
+      if (open) { // unicode emoji inside colon
+        clearStack();
+      }
+
+      buf += convertUnicode(c);
+    } else if (unqualified in unicodeMapping) {
+      if (open) { // unicode emoji inside colon
+        clearStack();
+      }
+
+      buf += convertUnicode(unqualified);
+    } else if (c === ':') {
+      stack += ':';
+
+      // we see another : we convert it and clear the stack buffer
+      if (open) {
+        buf += convertEmoji(stack, customEmojis);
+        stack = '';
+      }
+
+      open = !open;
+    } else {
+      if (open) {
+        stack += c;
+
+        // if the stack is non-null and we see invalid chars it's a string not emoji
+        // so we push it to the return result and clear it
+        if (!validEmojiChar(c)) {
+          clearStack();
+        }
+      } else {
+        buf += c;
+      }
+    }
+  }
+
+  // never found a closing colon so it's just a raw string
+  if (open) {
+    buf += stack;
+  }
+
+  return buf;
+};
+
+export const parseHTML = (str: string): { text: boolean, data: string }[] => {
+  const tokens = [];
+  let buf = '';
+  let stack = '';
+  let open = false;
+
+  for (const c of str) {
+    if (c === '<') {
+      if (open) {
+        tokens.push({ text: true, data: stack });
+        stack = '<';
+      } else {
+        tokens.push({ text: true, data: buf });
+        stack = '<';
+        open = true;
+      }
+    } else if (c === '>') {
+      if (open) {
+        open = false;
+        tokens.push({ text: false, data: stack + '>' });
+        stack = '';
+        buf = '';
+      } else {
+        buf += '>';
+      }
+
+    } else {
+      if (open) {
+        stack += c;
+      } else {
+        buf += c;
+      }
+    }
+  }
+
+  if (open) {
+    tokens.push({ text: true, data: buf + stack });
+  } else if (buf !== '') {
+    tokens.push({ text: true, data: buf });
+  }
+
+  return tokens;
+};
+
+const emojify = (str: string, customEmojis = {}) => {
+  return parseHTML(str)
+    .map(({ text, data }) => {
+      if (!text) return data;
+      if (data.length === 0 || data === ' ') return data;
+
+      return emojifyText(data, customEmojis);
+    })
+    .join('');
+};
+
+export default emojify;
+
+export const buildCustomEmojis = (customEmojis: any) => {
+  const emojis: EmojiMart<EmojiMartCustom>[] = [];
+
+  customEmojis.forEach((emoji: any) => {
+    const shortcode = emoji.get('shortcode');
+    const url       = emoji.get('static_url');
+    const name      = shortcode.replace(':', '');
+
+    emojis.push({
+      id: name,
+      name,
+      keywords: [name],
+      skins: [{ src: url }],
+    });
+  });
+
+  return emojis;
+};
--- a/app/soapbox/features/emoji/mapping.ts
+++ b/app/soapbox/features/emoji/mapping.ts
@ -0,0 +1,111 @@
+import data, { EmojiData } from './data';
+
+const stripLeadingZeros = /^0+/;
+
+function replaceAll(str: string, find: string, replace: string) {
+  return str.replace(new RegExp(find, 'g'), replace);
+}
+
+interface UnicodeMap {
+  [s: string]: {
+    unified: string
+    shortcode: string
+  }
+}
+
+/*
+ * Twemoji strips their hex codes from unicode codepoints to make it look "pretty"
+ * - leading 0s are removed
+ * - fe0f is removed unless it has 200d
+ * - fe0f is NOT removed for 1f441-fe0f-200d-1f5e8-fe0f even though it has a 200d
+ *
+ * this is all wrong
+ */
+
+const blacklist = {
+  '1f441-fe0f-200d-1f5e8-fe0f': true,
+};
+
+const tweaks = {
+  '#⃣': ['23-20e3', 'hash'],
+  '*⃣': ['2a-20e3', 'keycap_star'],
+  '0⃣': ['30-20e3', 'zero'],
+  '1⃣': ['31-20e3', 'one'],
+  '2⃣': ['32-20e3', 'two'],
+  '3⃣': ['33-20e3', 'three'],
+  '4⃣': ['34-20e3', 'four'],
+  '5⃣': ['35-20e3', 'five'],
+  '6⃣': ['36-20e3', 'six'],
+  '7⃣': ['37-20e3', 'seven'],
+  '8⃣': ['38-20e3', 'eight'],
+  '9⃣': ['39-20e3', 'nine'],
+  '❤‍🔥': ['2764-fe0f-200d-1f525', 'heart_on_fire'],
+  '❤‍🩹': ['2764-fe0f-200d-1fa79', 'mending_heart'],
+  '👁‍🗨️': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '👁️‍🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '👁‍🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '🕵‍♂️': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵️‍♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵‍♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵‍♀️': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🕵️‍♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🕵‍♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🏌‍♂️': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌️‍♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌‍♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌‍♀️': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '🏌️‍♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '🏌‍♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '⛹‍♂️': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹️‍♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹‍♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹‍♀️': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '⛹️‍♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '⛹‍♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '🏋‍♂️': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋️‍♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋‍♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋‍♀️': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏋️‍♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏋‍♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏳‍🌈': ['1f3f3-fe0f-200d-1f308', 'rainbow_flag'],
+  '🏳‍⚧️': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+  '🏳️‍⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+  '🏳‍⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+};
+
+const stripcodes = (unified: string, native: string) => {
+  const stripped = unified.replace(stripLeadingZeros, '');
+
+  if (unified.includes('200d') && !(unified in blacklist)) {
+    return stripped;
+  } else {
+    return replaceAll(stripped, '-fe0f', '');
+  }
+};
+
+export const generateMappings = (data: EmojiData): UnicodeMap => {
+  const result: UnicodeMap = {};
+  const emojis = Object.values(data.emojis ?? {});
+
+  for (const value of emojis) {
+    for (const item of value.skins) {
+      const { unified, native } = item;
+      const stripped = stripcodes(unified, native);
+
+      result[native] = { unified: stripped, shortcode: value.id };
+    }
+  }
+
+  for (const [native, [unified, shortcode]] of Object.entries(tweaks)) {
+    const stripped = stripcodes(unified, native);
+
+    result[native] = { unified: stripped, shortcode };
+  }
+
+  return result;
+};
+
+const unicodeMapping = generateMappings(data);
+
+export default unicodeMapping;
--- a/app/soapbox/features/emoji/search.ts
+++ b/app/soapbox/features/emoji/search.ts
@ -0,0 +1,65 @@
+import { Index } from 'flexsearch';
+
+import data from './data';
+
+import type { Emoji } from './index';
+// import type { Emoji as EmojiMart, CustomEmoji } from 'emoji-mart';
+
+// @ts-ignore
+const index = new Index({
+  tokenize: 'full',
+  optimize: true,
+  context: true,
+});
+
+for (const [key, emoji] of Object.entries(data.emojis)) {
+  index.add('n' + key, emoji.name);
+}
+
+export interface searchOptions {
+  maxResults?: number
+  custom?: any
+}
+
+export const addCustomToPool = (customEmojis: any[]) => {
+  // @ts-ignore
+  for (const key in index.register) {
+    if (key[0] === 'c') {
+      index.remove(key); // remove old custom emojis
+    }
+  }
+
+  let i = 0;
+
+  for (const emoji of customEmojis) {
+    index.add('c' + i++, emoji.id);
+  }
+};
+
+// we can share an index by prefixing custom emojis with 'c' and native with 'n'
+const search = (str: string, { maxResults = 5, custom }: searchOptions = {}, custom_emojis?: any): Emoji[] => {
+  return index.search(str, maxResults)
+    .flatMap((id: string) => {
+      if (id[0] === 'c') {
+        const { shortcode, static_url } = custom_emojis.get((id as string).slice(1)).toJS();
+
+        return {
+          id: shortcode,
+          colons: ':' + shortcode + ':',
+          custom: true,
+          imageUrl: static_url,
+        };
+      }
+
+      const { skins } = data.emojis[(id as string).slice(1)];
+
+      return {
+        id: (id as string).slice(1),
+        colons: ':' + id.slice(1) + ':',
+        unified: skins[0].unified,
+        native: skins[0].native,
+      };
+    });
+};
+
+export default search;
--- a/app/soapbox/features/emoji/unicode-to-filename.js
+++ b/app/soapbox/features/emoji/unicode-to-filename.js
--- a/app/soapbox/features/emoji/unicode-to-unified-name.js
+++ b/app/soapbox/features/emoji/unicode-to-unified-name.js
--- a/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx
@ -13,10 +13,10 @@ const messages = defineMessages({

 interface IIconPickerDropdown {
  value: string
-  onPickEmoji: React.ChangeEventHandler
+  onPickIcon: (icon: string) => void
 }

-const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji }) => {
+const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickIcon }) => {
  const intl = useIntl();

  const [active, setActive] = useState(false);
@ -73,9 +73,9 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji

      <Overlay show={active} placement={placement} target={target.current}>
        <IconPickerMenu
-          customEmojis={forkAwesomeIcons}
+          icons={forkAwesomeIcons}
          onClose={onHideDropdown}
-          onPick={onPickEmoji}
+          onPick={onPickIcon}
        />
      </Overlay>
    </div>
--- a/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
@ -1,31 +1,25 @@
 import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
-// @ts-ignore
-import Picker from 'emoji-mart/dist-es/components/picker/picker';
 import React, { useCallback, useEffect, useRef } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import { Text } from 'soapbox/components/ui';

 const messages = defineMessages({
  emoji: { id: 'icon_button.label', defaultMessage: 'Select icon' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
-  emoji_not_found: { id: 'icon_button.not_found', defaultMessage: 'No icons!! (╯°□°）╯︵ ┻━┻' },
-  custom: { id: 'icon_button.icons', defaultMessage: 'Icons' },
-  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
 });

-const backgroundImageFn = () => '';
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;

-const categoriesSort = ['custom'];

 interface IIconPickerMenu {
-  customEmojis: Record<string, Array<string>>
+  icons: Record<string, Array<string>>
  onClose: () => void
-  onPick: any
+  onPick: (icon: string) => void
  style?: React.CSSProperties
 }

-const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPick, style }) => {
+const IconPickerMenu: React.FC<IIconPickerMenu> = ({ icons, onClose, onPick, style }) => {
  const intl = useIntl();

  const node = useRef<HTMLDivElement | null>(null);
@ -60,70 +54,42 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPi
    });
  };

-  const getI18n = () => {
-
-    return {
-      search: intl.formatMessage(messages.emoji_search),
-      notfound: intl.formatMessage(messages.emoji_not_found),
-      categories: {
-        search: intl.formatMessage(messages.search_results),
-        custom: intl.formatMessage(messages.custom),
-      },
-    };
-  };
-
-  const handleClick = (emoji: Record<string, any>) => {
-    emoji.native = emoji.colons;
-
+  const handleClick = (icon: string) => {
    onClose();
-    onPick(emoji);
+    onPick(icon);
  };

-  const buildIcons = () => {
-    const emojis: Record<string, any> = [];
+  const renderIcon = (icon: string) => {
+    const name = icon.replace('fa fa-', '');

-    Object.values(customEmojis).forEach((category) => {
-      category.forEach((icon) => {
-        const name = icon.replace('fa fa-', '');
-        if (icon !== 'email' && icon !== 'memo') {
-          emojis.push({
-            id: name,
-            name,
-            short_names: [name],
-            emoticons: [],
-            keywords: [name],
-            imageUrl: '',
-          });
-        }
-      });
-    });
-
-    return emojis;
+    return (
+      <li key={icon} className='col-span-1 inline-block'>
+        <button
+          className='flex items-center justify-center rounded-full p-1.5 hover:bg-gray-50 dark:hover:bg-primary-800'
+          aria-label={name}
+          title={name}
+          onClick={() => handleClick(name)}
+        >
+          <i className={clsx(icon, 'h-[1.375rem] w-[1.375rem] text-lg leading-[1.15]')} />
+        </button>
+      </li>
+    );
  };

-  const data = { compressed: true, categories: [], aliases: [], emojis: [] };
  const title = intl.formatMessage(messages.emoji);

  return (
-    <div className={clsx('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
-      <Picker
-        perLine={8}
-        emojiSize={22}
-        include={categoriesSort}
-        sheetSize={32}
-        custom={buildIcons()}
-        color=''
-        emoji=''
-        set=''
-        title={title}
-        i18n={getI18n()}
-        onClick={handleClick}
-        showPreview={false}
-        backgroundImageFn={backgroundImageFn}
-        emojiTooltip
-        noShowAnchors
-        data={data}
-      />
+    <div
+      className={clsx('absolute z-[101] -my-0.5')}
+      style={{ transform: 'translateX(calc(-1 * env(safe-area-inset-right)))', ...style }}
+      ref={setRef}
+    >
+      <div className='h-[270px] overflow-x-hidden overflow-y-scroll rounded bg-white p-1.5 text-gray-900 dark:bg-primary-900 dark:text-gray-100' aria-label={title}>
+        <Text className='px-1.5 py-1'><FormattedMessage id='icon_button.icons' defaultMessage='Icons' /></Text>
+        <ul className='grid grid-cols-8'>
+          {Object.values(icons).flat().map(icon => renderIcon(icon))}
+        </ul>
+      </div>
    </div>
  );
 };
--- a/app/soapbox/features/soapbox-config/components/icon-picker.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker.tsx
@ -4,15 +4,13 @@ import IconPickerDropdown from './icon-picker-dropdown';

 interface IIconPicker {
  value: string
-  onChange: React.ChangeEventHandler
+  onChange: (icon: string) => void
 }

-const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => {
-  return (
-    <div className='relative mt-1 rounded-md border border-solid border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-800'>
-      <IconPickerDropdown value={value} onPickEmoji={onChange} />
-    </div>
-  );
-};
+const IconPicker: React.FC<IIconPicker> = ({ value, onChange }) => (
+  <div className='relative mt-1 rounded-md border border-solid border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-800'>
+    <IconPickerDropdown value={value} onPickIcon={onChange} />
+  </div>
+);

 export default IconPicker;
--- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
@ -17,8 +17,8 @@ const messages = defineMessages({
 const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange }) => {
  const intl = useIntl();

-  const handleIconChange = (icon: any) => {
-    onChange(value.set('icon', icon.id));
+  const handleIconChange = (icon: string) => {
+    onChange(value.set('icon', icon));
  };

  const handleChange = (key: 'text' | 'url'): React.ChangeEventHandler<HTMLInputElement> => {
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';

 import { logOut } from 'soapbox/actions/auth';
 import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { useSoapboxConfig, useOwnAccount, useFeatures, useAppDispatch } from 'soapbox/hooks';
 import sourceCode from 'soapbox/utils/code';

--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@ -572,7 +572,7 @@ const UI: React.FC<IUI> = ({ children }) => {

    // @ts-ignore
    hotkeys.current.__mousetrap__.stopCallback = (_e, element) => {
-      return ['TEXTAREA', 'SELECT', 'INPUT'].includes(element.tagName);
+      return ['TEXTAREA', 'SELECT', 'INPUT', 'EM-EMOJI-PICKER'].includes(element.tagName);
    };
  };

--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@ -1,5 +1,5 @@
 export function EmojiPicker() {
-  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/emoji-picker');
+  return import(/* webpackChunkName: "emoji_picker" */'../../emoji/components/emoji-picker');
 }

 export function Notifications() {
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@ -620,6 +620,7 @@
  "email_verifilcation.exists": "This email has already been taken.",
  "embed.instructions": "Embed this post on your website by copying the code below.",
  "emoji_button.activity": "Activity",
+  "emoji_button.add_custom": "Add custom emoji",
  "emoji_button.custom": "Custom",
  "emoji_button.flags": "Flags",
  "emoji_button.food": "Food & Drink",
@ -627,10 +628,19 @@
  "emoji_button.nature": "Nature",
  "emoji_button.not_found": "No emojis found.",
  "emoji_button.objects": "Objects",
+  "emoji_button.oh_no": "Oh no!",
  "emoji_button.people": "People",
+  "emoji_button.pick": "Pick an emoji…",
  "emoji_button.recent": "Frequently used",
  "emoji_button.search": "Search…",
  "emoji_button.search_results": "Search results",
+  "emoji_button.skins_1": "Default",
+  "emoji_button.skins_2": "Light",
+  "emoji_button.skins_3": "Medium-Light",
+  "emoji_button.skins_4": "Medium",
+  "emoji_button.skins_5": "Medium-Dark",
+  "emoji_button.skins_6": "Dark",
+  "emoji_button.skins_choose": "Choose default skin tone",
  "emoji_button.symbols": "Symbols",
  "emoji_button.travel": "Travel & Places",
  "empty_column.account_blocked": "You are blocked by @{accountUsername}.",
@ -794,7 +804,6 @@
  "home.column_settings.show_replies": "Show replies",
  "icon_button.icons": "Icons",
  "icon_button.label": "Select icon",
-  "icon_button.not_found": "No icons!! (╯°□°）╯︵ ┻━┻",
  "import_data.actions.import": "Import",
  "import_data.actions.import_blocks": "Import blocks",
  "import_data.actions.import_follows": "Import follows",
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@ -11,7 +11,7 @@ import {
  fromJS,
 } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers';
--- a/app/soapbox/normalizers/announcement.ts
+++ b/app/soapbox/normalizers/announcement.ts
@ -10,7 +10,7 @@ import {
  fromJS,
 } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { makeEmojiMap } from 'soapbox/utils/normalizers';

--- a/app/soapbox/normalizers/group.ts
+++ b/app/soapbox/normalizers/group.ts
@ -10,7 +10,7 @@ import {
  fromJS,
 } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { unescapeHTML } from 'soapbox/utils/html';
 import { makeEmojiMap } from 'soapbox/utils/normalizers';
--- a/app/soapbox/normalizers/poll.ts
+++ b/app/soapbox/normalizers/poll.ts
@ -11,7 +11,7 @@ import {
  fromJS,
 } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { makeEmojiMap } from 'soapbox/utils/normalizers';

--- a/app/soapbox/normalizers/status-edit.ts
+++ b/app/soapbox/normalizers/status-edit.ts
@ -9,7 +9,7 @@ import {
  fromJS,
 } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeAttachment } from 'soapbox/normalizers/attachment';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { normalizePoll } from 'soapbox/normalizers/poll';
--- a/app/soapbox/reducers/tests/statuses.test.ts
+++ b/app/soapbox/reducers/tests/statuses.test.ts
@ -118,7 +118,7 @@ describe('statuses reducer', () => {
      const status = require('soapbox/__fixtures__/status-custom-emoji.json');
      const action = { type: STATUS_IMPORT, status };

-      const expected = 'Hello <img draggable="false" class="emojione custom-emoji" alt=":ablobcathyper:" title=":ablobcathyper:" src="https://gleasonator.com/emoji/blobcat/ablobcathyper.png" data-original="https://gleasonator.com/emoji/blobcat/ablobcathyper.png" data-static="https://gleasonator.com/emoji/blobcat/ablobcathyper.png"> <img draggable="false" class="emojione custom-emoji" alt=":ageblobcat:" title=":ageblobcat:" src="https://gleasonator.com/emoji/blobcat/ageblobcat.png" data-original="https://gleasonator.com/emoji/blobcat/ageblobcat.png" data-static="https://gleasonator.com/emoji/blobcat/ageblobcat.png"> <img draggable="false" class="emojione" alt="😂" title=":joy:" src="/packs/emoji/1f602.svg"> world <img draggable="false" class="emojione" alt="😋" title=":yum:" src="/packs/emoji/1f60b.svg"> test <img draggable="false" class="emojione custom-emoji" alt=":blobcatphoto:" title=":blobcatphoto:" src="https://gleasonator.com/emoji/blobcat/blobcatphoto.png" data-original="https://gleasonator.com/emoji/blobcat/blobcatphoto.png" data-static="https://gleasonator.com/emoji/blobcat/blobcatphoto.png">';
+      const expected = 'Hello <img draggable="false" class="emojione" alt=":ablobcathyper:" title=":ablobcathyper:" src="https://gleasonator.com/emoji/blobcat/ablobcathyper.png"> <img draggable="false" class="emojione" alt=":ageblobcat:" title=":ageblobcat:" src="https://gleasonator.com/emoji/blobcat/ageblobcat.png"> <img draggable="false" class="emojione" alt="😂" title=":joy:" src="/packs/emoji/1f602.svg"> world <img draggable="false" class="emojione" alt="😋" title=":yum:" src="/packs/emoji/1f60b.svg"> test <img draggable="false" class="emojione" alt=":blobcatphoto:" title=":blobcatphoto:" src="https://gleasonator.com/emoji/blobcat/blobcatphoto.png">';

      const result = reducer(undefined, action).getIn(['AGm7uC9DaAIGUa4KYK', 'contentHtml']);
      expect(result).toBe(expected);
--- a/app/soapbox/reducers/compose.ts
+++ b/app/soapbox/reducers/compose.ts
@ -1,6 +1,7 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, Record as ImmutableRecord, fromJS } from 'immutable';
 import { v4 as uuid } from 'uuid';

+import { isNativeEmoji } from 'soapbox/features/emoji';
 import { tagHistory } from 'soapbox/settings';
 import { PLEROMA } from 'soapbox/utils/features';
 import { hasIntegerMediaIds } from 'soapbox/utils/status';
@ -58,7 +59,7 @@ import { normalizeAttachment } from '../normalizers/attachment';
 import { unescapeHTML } from '../utils/html';

 import type { AnyAction } from 'redux';
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 import type {
  Account as AccountEntity,
  APIEntity,
@ -192,7 +193,8 @@ const updateSuggestionTags = (compose: Compose, token: string, currentTrends: Im

 const insertEmoji = (compose: Compose, position: number, emojiData: Emoji, needsSpace: boolean) => {
  const oldText = compose.text;
-  const emoji = needsSpace ? ' ' + emojiData.native : emojiData.native;
+  const emojiText = isNativeEmoji(emojiData) ? emojiData.native : emojiData.colons;
+  const emoji = needsSpace ? ' ' + emojiText : emojiText;

  return compose.merge({
    text: `${oldText.slice(0, position)}${emoji} ${oldText.slice(position)}`,
--- a/app/soapbox/reducers/custom-emojis.ts
+++ b/app/soapbox/reducers/custom-emojis.ts
@ -1,15 +1,15 @@
 import { List as ImmutableList, Map as ImmutableMap, fromJS } from 'immutable';

-import { emojis as emojiData } from 'soapbox/features/emoji/emoji-mart-data-light';
-import { addCustomToPool } from 'soapbox/features/emoji/emoji-mart-search-light';
+import { buildCustomEmojis } from 'soapbox/features/emoji';
+import emojiData from 'soapbox/features/emoji/data';
+import { addCustomToPool } from 'soapbox/features/emoji/search';

 import { CUSTOM_EMOJIS_FETCH_SUCCESS } from '../actions/custom-emojis';
-import { buildCustomEmojis } from '../features/emoji/emoji';

 import type { AnyAction } from 'redux';
 import type { APIEntity } from 'soapbox/types/entities';

-const initialState = ImmutableList();
+const initialState = ImmutableList<ImmutableMap<string, string>>();

 // Populate custom emojis for composer autosuggest
 const autosuggestPopulate = (emojis: ImmutableList<ImmutableMap<string, string>>) => {
@ -22,7 +22,7 @@ const importEmojis = (customEmojis: APIEntity[]) => {
    // Otherwise it breaks EmojiMart.
    // https://gitlab.com/soapbox-pub/soapbox/-/issues/610
    const shortcode = emoji.get('shortcode', '').toLowerCase();
-    return !emojiData[shortcode];
+    return !emojiData.emojis[shortcode];
  });

  autosuggestPopulate(emojis);
--- a/app/soapbox/reducers/settings.ts
+++ b/app/soapbox/reducers/settings.ts
@ -13,7 +13,7 @@ import {
  FE_NAME,
 } from '../actions/settings';

-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { APIEntity } from 'soapbox/types/entities';

 type State = ImmutableMap<string, any>;
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@ -1,7 +1,7 @@
 import escapeTextContentForBrowser from 'escape-html';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';

-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { normalizeStatus } from 'soapbox/normalizers';
 import { simulateEmojiReact, simulateUnEmojiReact } from 'soapbox/utils/emoji-reacts';
 import { stripCompatibilityFeatures, unescapeHTML } from 'soapbox/utils/html';
--- a/app/styles/emoji-picker.scss
+++ b/app/styles/emoji-picker.scss
@ -1,296 +1,10 @@
-.emoji-mart,
-.emoji-mart * {
-  box-sizing: border-box;
-  line-height: 1.15;
+em-emoji-picker {
+  --rgb-background: 255 255 255;
+  --rgb-accent: var(--color-primary-600);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }

-.emoji-mart {
-  @apply text-base inline-block text-gray-900 dark:text-gray-100 rounded bg-white dark:bg-primary-900 shadow-lg;
-}
-
-.emoji-mart .emoji-mart-emoji {
-  @apply p-1.5 align-middle;
-}
-
-.emoji-mart-bar {
-  @apply border-0 border-solid border-gray-200 dark:border-gray-800;
-}
-
-.emoji-mart-bar:first-child {
-  border-bottom-width: 1px;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
-.emoji-mart-bar:last-child {
-  border-top-width: 1px;
-  border-bottom-left-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-
-.emoji-mart-anchors {
-  @apply flex flex-row justify-between px-1.5;
-}
-
-.emoji-mart-anchor {
-  @apply relative block flex-auto text-gray-700 dark:text-gray-600 text-center overflow-hidden transition-colors py-3 px-1;
-}
-
-.emoji-mart-anchor:focus { outline: 0; }
-
-.emoji-mart-anchor:hover,
-.emoji-mart-anchor:focus,
-.emoji-mart-anchor-selected {
-  @apply text-gray-600 dark:text-gray-300;
-}
-
-.emoji-mart-anchor-selected .emoji-mart-anchor-bar {
-  @apply bottom-0;
-}
-
-.emoji-mart-anchor-bar {
-  @apply absolute -bottom-0.5 left-0 w-11/12 h-0.5 bg-primary-600;
-}
-
-.emoji-mart-anchors i {
-  @apply inline-block w-full;
-  max-width: 22px;
-}
-
-.emoji-mart-anchors svg,
-.emoji-mart-anchors img {
-  fill: currentcolor;
-  height: 18px;
-  width: 18px;
-}
-
-.emoji-mart-scroll {
-  overflow-y: scroll;
-  overflow-x: hidden;
-  height: 270px;
-  padding: 0 6px 6px;
-  will-change: transform; /* avoids "repaints on scroll" in mobile Chrome */
-}
-
-.emoji-mart-search {
-  @apply relative mt-1.5 p-2.5 pr-12 bg-white dark:bg-primary-900;
-}
-
-.emoji-mart-search input {
-  @apply text-sm pr-9 block w-full border-gray-300 dark:bg-transparent dark:border-gray-800 rounded-full focus:ring-primary-500 focus:border-primary-500;
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &::-webkit-search-cancel-button {
-    @apply hidden;
-  }
-
-  &::-moz-focus-inner,
-  &:focus,
-  &:active {
-    outline: 0 !important;
-  }
-}
-
-.emoji-mart-search input,
-.emoji-mart-search input::-webkit-search-decoration,
-.emoji-mart-search input::-webkit-search-cancel-button,
-.emoji-mart-search input::-webkit-search-results-button,
-.emoji-mart-search input::-webkit-search-results-decoration {
-  /* remove webkit/blink styles for <input type="search">
-   * via https://stackoverflow.com/a/9422689 */
-  appearance: none;
-}
-
-.emoji-mart-search-icon {
-  @apply absolute z-10 border-0;
-  top: 20px;
-  right: 56px;
-  padding: 2px 5px 1px;
-}
-
-.emoji-mart-search-icon svg {
-  @apply fill-gray-700 dark:fill-gray-600;
-}
-
-.emoji-mart-search-icon:hover svg {
-  @apply stroke-gray-800;
-}
-
-.emoji-mart-category .emoji-mart-emoji span {
-  @apply relative text-center;
-  z-index: 1;
-}
-
-.emoji-mart-category .emoji-mart-emoji:hover::before {
-  @apply bg-gray-50 dark:bg-primary-800;
-  z-index: 0;
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
-}
-
-.emoji-mart-category-label {
-  z-index: 2;
-  position: relative;
-  position: sticky;
-  top: 0;
-}
-
-.emoji-mart-category-label span {
-  @apply bg-white dark:bg-primary-900;
-  display: block;
-  width: 100%;
-  font-weight: 500;
-  padding: 5px 6px;
-}
-
-.emoji-mart-category-list {
-  margin: 0;
-  padding: 0;
-}
-
-.emoji-mart-category-list li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-}
-
-.emoji-mart-emoji {
-  position: relative;
-  display: inline-block;
-  font-size: 0;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: none;
-  box-shadow: none;
-}
-
-.emoji-mart-emoji-native {
-  font-family: 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI', 'Apple Color Emoji', 'Twemoji Mozilla', 'Noto Color Emoji', 'Android Emoji', sans-serif;
-}
-
-.emoji-mart-no-results {
-  @apply text-sm text-center text-gray-600 dark:text-gray-300;
-  padding-top: 70px;
-}
-
-.emoji-mart-no-results-img {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-  width: 50%;
-}
-
-.emoji-mart-no-results .emoji-mart-category-label {
-  display: none;
-}
-
-.emoji-mart-no-results .emoji-mart-no-results-label {
-  margin-top: 0.2em;
-}
-
-.emoji-mart-no-results .emoji-mart-emoji:hover::before {
-  content: none;
-}
-
-.emoji-mart-preview {
-  @apply hidden;
-}
-
-/* For screenreaders only, via https://stackoverflow.com/a/19758620 */
-.emoji-mart-sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-
-.emoji-picker-dropdown__menu {
-  @apply rounded-lg absolute mt-1.5;
-  transform: translateX(calc(-1 * env(safe-area-inset-right))); /* iOS PWA */
-  z-index: 20000;
-
-  .emoji-mart-scroll {
-    transition: opacity 200ms ease;
-  }
-
-  &.selecting .emoji-mart-scroll {
-    opacity: 0.5;
-  }
-}
-
-.emoji-picker-dropdown__modifiers {
-  position: absolute;
-  top: 65px;
-  right: 14px;
-  cursor: pointer;
-}
-
-.emoji-picker-dropdown__modifiers__menu {
-  @apply absolute bg-white dark:bg-primary-900 rounded-3xl shadow overflow-hidden;
-  z-index: 4;
-  top: -4px;
-  left: -8px;
-
-  button {
-    @apply block cursor-pointer border-0 px-2 py-1 bg-transparent;
-
-    &:hover,
-    &:focus,
-    &:active {
-      @apply bg-gray-300 dark:bg-primary-600;
-    }
-  }
-
-  .emoji-mart-emoji {
-    height: 22px;
-  }
-}
-
-.font-icon-picker {
-  .emoji-mart-search {
-    // Search doesn't work. Hide it for now.
-    display: none;
-    padding: 10px !important;
-  }
-
-  .emoji-mart-category-label > span {
-    padding: 9px 6px 5px;
-  }
-
-  .emoji-mart-scroll {
-    border-radius: 4px;
-  }
-
-  .emoji-mart-search-icon {
-    right: 18px;
-  }
-
-  .emoji-mart-bar {
-    display: none;
-  }
-
-  .fa {
-    font-size: 18px;
-    width: 22px;
-    height: 22px;
-    text-align: center;
-  }
-
-  .fa-hack {
-    margin: 0 auto;
-  }
+.dark em-emoji-picker {
+  --rgb-background: var(--color-primary-900);
 }
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@ -11,6 +11,7 @@

  &__link {
    @apply px-2 py-2.5 space-y-1 flex flex-col flex-1 items-center text-gray-600 text-lg;
+
    // padding: 8px 10px;
    // display: flex;
    // flex-direction: column;
--- a/jest.config.cjs
+++ b/jest.config.cjs
@ -22,7 +22,6 @@ module.exports = {
    'app/soapbox/**/*.mjs',
    'app/soapbox/**/*.ts',
    'app/soapbox/**/*.tsx',
-    '!app/soapbox/features/emoji/emoji-compressed.js',
    '!app/soapbox/service-worker/entry.ts',
    '!app/soapbox/jest/test-setup.ts',
    '!app/soapbox/jest/test-helpers.ts',
--- a/package.json
+++ b/package.json
@ -47,6 +47,7 @@
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.20.13",
+    "@emoji-mart/data": "^1.1.2",
    "@floating-ui/react": "^0.19.1",
    "@fontsource/inter": "^4.5.1",
    "@fontsource/roboto-mono": "^4.5.8",
@ -72,6 +73,7 @@
    "@tanstack/react-query": "^4.0.10",
    "@testing-library/react": "^13.0.0",
    "@types/escape-html": "^1.0.1",
+    "@types/flexsearch": "^0.7.3",
    "@types/http-link-header": "^1.0.3",
    "@types/jest": "^29.0.0",
    "@types/leaflet": "^1.8.0",
@ -104,7 +106,6 @@
    "bootstrap-icons": "^1.5.0",
    "bowser": "^2.11.0",
    "browserslist": "^4.16.6",
-    "cheerio": "^1.0.0-rc.10",
    "clsx": "^1.2.1",
    "copy-webpack-plugin": "^11.0.0",
    "core-js": "^3.27.2",
@ -113,11 +114,13 @@
    "cssnano": "^5.1.10",
    "detect-passive-events": "^2.0.0",
    "dotenv": "^16.0.0",
-    "emoji-datasource": "5.0.1",
-    "emoji-mart": "npm:emoji-mart-lazyload",
+    "emoji-datasource": "14.0.0",
+    "emoji-mart": "^5.5.2",
    "escape-html": "^1.0.3",
    "exif-js": "^2.3.0",
+    "flexsearch": "^0.7.31",
    "fork-ts-checker-webpack-plugin": "^7.2.11",
+    "graphemesplit": "^2.4.4",
    "html-webpack-harddisk-plugin": "^2.0.0",
    "html-webpack-plugin": "^5.5.0",
    "http-link-header": "^1.0.2",
--- a/yarn.lock
+++ b/yarn.lock
@ -1698,6 +1698,11 @@
  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
  integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==

+"@emoji-mart/data@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emoji-mart/data/-/data-1.1.2.tgz#777c976f8f143df47cbb23a7077c9ca9fe5fc513"
+  integrity sha512-1HP8BxD2azjqWJvxIaWAMyTySeZY0Osr83ukYjltPVkNXeJvTz7yDrPLBtnrD5uqJ3tg4CcLuuBW09wahqL/fg==
+
 "@es-joy/jsdoccomment@~0.36.0":
  version "0.36.0"
  resolved "https://registry.yarnpkg.com/@es-joy/jsdoccomment/-/jsdoccomment-0.36.0.tgz#e3898aad334281a10ceb3c0ec406297a79f2b043"
@ -4128,6 +4133,11 @@
  resolved "https://registry.yarnpkg.com/@types/filewriter/-/filewriter-0.0.29.tgz#a48795ecadf957f6c0d10e0c34af86c098fa5bee"
  integrity sha512-BsPXH/irW0ht0Ji6iw/jJaK8Lj3FJemon2gvEqHKpCdDCeemHa+rI3WBGq5z7cDMZgoLjY40oninGxqk+8NzNQ==

+"@types/flexsearch@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@types/flexsearch/-/flexsearch-0.7.3.tgz#ee79b1618035c82284278e05652e91116765b634"
+  integrity sha512-HXwADeHEP4exXkCIwy2n1+i0f1ilP1ETQOH5KDOugjkTFZPntWo0Gr8stZOaebkxsdx+k0X/K6obU/+it07ocg==
+
 "@types/fs-extra@^9.0.1":
  version "9.0.13"
  resolved "https://registry.yarnpkg.com/@types/fs-extra/-/fs-extra-9.0.13.tgz#7594fbae04fe7f1918ce8b3d213f74ff44ac1f45"
@ -6577,30 +6587,6 @@ character-reference-invalid@^1.0.0:
  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
  integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==

-cheerio-select@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823"
-  integrity sha512-qocaHPv5ypefh6YNxvnbABM07KMxExbtbfuJoIie3iZXX1ERwYmJcIiRrr9H05ucQP1k28dav8rpdDgjQd8drg==
-  dependencies:
-    css-select "^4.1.3"
-    css-what "^5.0.1"
-    domelementtype "^2.2.0"
-    domhandler "^4.2.0"
-    domutils "^2.7.0"
-
-cheerio@^1.0.0-rc.10:
-  version "1.0.0-rc.10"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.10.tgz#2ba3dcdfcc26e7956fc1f440e61d51c643379f3e"
-  integrity sha512-g0J0q/O6mW8z5zxQ3A8E8J1hUgp4SMOvEoW/x84OwyHKe/Zccz83PVT4y5Crcr530FV6NgmKI1qvGTKVl9XXVw==
-  dependencies:
-    cheerio-select "^1.5.0"
-    dom-serializer "^1.3.2"
-    domhandler "^4.2.0"
-    htmlparser2 "^6.1.0"
-    parse5 "^6.0.1"
-    parse5-htmlparser2-tree-adapter "^6.0.1"
-    tslib "^2.2.0"
-
 "chokidar@>=3.0.0 <4.0.0":
  version "3.5.2"
  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
@ -7315,7 +7301,7 @@ css-tree@^1.1.2, css-tree@^1.1.3:
    mdn-data "2.0.14"
    source-map "^0.6.1"

-css-what@^5.0.0, css-what@^5.0.1:
+css-what@^5.0.0:
  version "5.0.1"
  resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
  integrity sha512-FYDTSHb/7KXsWICVsxdmiExPjCfRC4qRFBdVwv7Ax9hMnvMmEjP9RfxTEZ3qPZGmADDn2vAKSo9UcN1jKVYscg==
@ -7838,7 +7824,7 @@ dom-helpers@^3.2.1, dom-helpers@^3.4.0:
  dependencies:
    "@babel/runtime" "^7.1.2"

-dom-serializer@^1.0.1, dom-serializer@^1.3.2:
+dom-serializer@^1.0.1:
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
@ -7883,7 +7869,7 @@ domhandler@^4.0.0, domhandler@^4.2.0:
  dependencies:
    domelementtype "^2.2.0"

-domutils@^2.5.2, domutils@^2.6.0, domutils@^2.7.0:
+domutils@^2.5.2, domutils@^2.6.0:
  version "2.8.0"
  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
@ -7995,19 +7981,15 @@ emittery@^0.13.1:
  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.13.1.tgz#c04b8c3457490e0847ae51fced3af52d338e3dad"
  integrity sha512-DeWwawk6r5yR9jFgnDKYt4sLS0LmHJJi3ZOnb5/JdbYwj3nW+FxQnHIjhBKz8YLC7oRNPVM9NQ47I3CVx34eqQ==

-emoji-datasource@5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-5.0.1.tgz#31eaaff7caa6640929327b4f4ff66f2bf313df0a"
-  integrity sha512-RXokuCv4o8RFLiigN1skAdZwJuJWqtBvcK3GVKpvAL/7BeH95enmKsli7cG8YZ85RTjyEe3+GAdpJJOV43KLKQ==
+emoji-datasource@14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/emoji-datasource/-/emoji-datasource-14.0.0.tgz#99529a62f3a86546fc670c09b672ddc9f24f3d44"
+  integrity sha512-SoOv0lSa+9/2X9ulSRDhu2u1zAOaOv5vtMY3OYUDcQCoReEh0/3eQAMuBM9LyD7Hy3G4K7mDPDqVeHUWvy7cow==

-"emoji-mart@npm:emoji-mart-lazyload":
-  version "3.0.1-j"
-  resolved "https://registry.yarnpkg.com/emoji-mart-lazyload/-/emoji-mart-lazyload-3.0.1-j.tgz#87a90d30b79d9145ece078d53e3e683c1a10ce9c"
-  integrity sha512-0wKF7MR0/iAeCIoiBLY+JjXCugycTgYRC2SL0y9/bjNSQlbeMdzILmPQJAufU/mgLFDUitOvjxLDhOZ9yxZ48g==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    intersection-observer "^0.12.0"
-    prop-types "^15.6.0"
+emoji-mart@^5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-5.5.2.tgz#3ddbaf053139cf4aa217650078bc1c50ca8381af"
+  integrity sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A==

 emoji-regex@^8.0.0:
  version "8.0.0"
@ -9062,6 +9044,11 @@ flatted@^3.1.0:
  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.2.tgz#64bfed5cb68fe3ca78b3eb214ad97b63bedce561"
  integrity sha512-JaTY/wtrcSyvXJl4IMFHPKyFur1sE9AUqc0QnhOaJ0CxHtAoIV8pYDzeEfAaNEtGkOfq4gr3LBFmdXW5mOQFnA==

+flexsearch@^0.7.31:
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/flexsearch/-/flexsearch-0.7.31.tgz#065d4110b95083110b9b6c762a71a77cc52e4702"
+  integrity sha512-XGozTsMPYkm+6b5QL3Z9wQcJjNYxp0CYn3U1gO7dwD6PAqU1SVWZxI9CCg3z+ml3YfqdPnrBehaBrnH2AGKbNA==
+
 flush-write-stream@^1.0.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@ -9627,6 +9614,14 @@ grapheme-splitter@^1.0.4:
  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==

+graphemesplit@^2.4.4:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/graphemesplit/-/graphemesplit-2.4.4.tgz#6d325c61e928efdaec2189f54a9b87babf89b75a"
+  integrity sha512-lKrpp1mk1NH26USxC/Asw4OHbhSQf5XfrWZ+CDv/dFVvd1j17kFgMotdJvOesmHkbFX9P9sBfpH8VogxOWLg8w==
+  dependencies:
+    js-base64 "^3.6.0"
+    unicode-trie "^2.0.0"
+
 gzip-size@^6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
@ -10328,11 +10323,6 @@ interpret@^3.1.1:
  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==

-intersection-observer@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.0.tgz#6c84628f67ce8698e5f9ccf857d97718745837aa"
-  integrity sha512-2Vkz8z46Dv401zTWudDGwO7KiGHNDkMv417T5ItcNYfmvHR/1qCTVBO9vwH8zZmQ0WkA/1ARwpysR9bsnop4NQ==
-
 intersection-observer@^0.12.2:
  version "0.12.2"
  resolved "https://registry.yarnpkg.com/intersection-observer/-/intersection-observer-0.12.2.tgz#4a45349cc0cd91916682b1f44c28d7ec737dc375"
@ -11528,6 +11518,11 @@ jest@^29.0.0:
    import-local "^3.0.2"
    jest-cli "^29.3.1"

+js-base64@^3.6.0:
+  version "3.7.5"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.7.5.tgz#21e24cf6b886f76d6f5f165bfcd69cc55b9e3fca"
+  integrity sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==
+
 js-sdsl@^4.1.4:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0"
@ -13344,6 +13339,11 @@ p-try@^2.0.0:
  resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==

+pako@^0.2.5:
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
+  integrity sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==
+
 pako@~1.0.5:
  version "1.0.11"
  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
@ -13444,14 +13444,7 @@ parse-passwd@^1.0.0:
  resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
  integrity sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==

-parse5-htmlparser2-tree-adapter@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz#2cdf9ad823321140370d4dbf5d3e92c7c8ddc6e6"
-  integrity sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==
-  dependencies:
-    parse5 "^6.0.1"
-
-parse5@^6.0.0, parse5@^6.0.1:
+parse5@^6.0.0:
  version "6.0.1"
  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
@ -16754,6 +16747,11 @@ timers-browserify@^2.0.4:
  dependencies:
    setimmediate "^1.0.4"

+tiny-inflate@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-inflate/-/tiny-inflate-1.0.3.tgz#122715494913a1805166aaf7c93467933eea26c4"
+  integrity sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==
+
 tiny-invariant@^1.0.2:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
@ -16965,7 +16963,7 @@ tslib@^2.0.0:
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
  integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==

-tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.2.0, tslib@^2.3.1:
+tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.1:
  version "2.3.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
  integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@ -17159,6 +17157,14 @@ unicode-property-aliases-ecmascript@^2.0.0:
  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz#0a36cb9a585c4f6abd51ad1deddb285c165297c8"
  integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==

+unicode-trie@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unicode-trie/-/unicode-trie-2.0.0.tgz#8fd8845696e2e14a8b67d78fa9e0dd2cad62fec8"
+  integrity sha512-x7bc76x0bm4prf1VLg79uhAzKw8DVboClSN5VxJuQ+LKDOVEW9CdH+VY7SP+vX7xCYQqzzgQpFqz15zeLvAtZQ==
+  dependencies:
+    pako "^0.2.5"
+    tiny-inflate "^1.0.0"
+
 unified@9.2.0:
  version "9.2.0"
  resolved "https://registry.yarnpkg.com/unified/-/unified-9.2.0.tgz#67a62c627c40589edebbf60f53edfd4d822027f8"