Merge commit 'c6facd27ed191177afb003640b8ee7d0742c7f63' into glitch-soc/merge-upstream

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx

@@ -5,8 +5,6 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
@@ -14,7 +12,6 @@ import MoodIcon from '@/material-icons/400-20px/mood.svg?react';
 import { IconButton } from 'mastodon/components/icon_button';
 import { injectIntl } from '@/mastodon/components/intl';
 
-import { buildCustomEmojis, categoriesFromEmojis } from '../../emoji/emoji';
 import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
 
 const messages = defineMessages({
@@ -156,7 +153,6 @@ class ModifierPicker extends PureComponent {
 class EmojiPickerMenuImpl extends PureComponent {
 
   static propTypes = {
-    custom_emojis: ImmutablePropTypes.list,
     frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
@@ -254,7 +250,7 @@ class EmojiPickerMenuImpl extends PureComponent {
   };
 
   render() {
-    const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
+    const { loading, style, intl, skinTone, frequentlyUsedEmojis } = this.props;
 
     if (loading) {
       return <div style={{ width: 299 }} />;
@@ -264,32 +260,16 @@ class EmojiPickerMenuImpl extends PureComponent {
 
     const { modifierOpen } = this.state;
 
-    const categoriesSort = [
-      'recent',
-      'people',
-      'nature',
-      'foods',
-      'activity',
-      'places',
-      'objects',
-      'symbols',
-      'flags',
-    ];
-
-    categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(custom_emojis)).sort());
-
     return (
       <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
         <EmojiPicker
           perLine={8}
           emojiSize={22}
-          custom={buildCustomEmojis(custom_emojis)}
           color=''
           emoji=''
           title={title}
           i18n={this.getI18n()}
           onClick={this.handleClick}
-          include={categoriesSort}
           recent={frequentlyUsedEmojis}
           skin={skinTone}
           showPreview={false}
@@ -315,9 +295,7 @@ class EmojiPickerMenuImpl extends PureComponent {
 const EmojiPickerMenu = injectIntl(EmojiPickerMenuImpl);
 
 class EmojiPickerDropdown extends PureComponent {
-
   static propTypes = {
-    custom_emojis: ImmutablePropTypes.list,
     frequentlyUsedEmojis: PropTypes.arrayOf(PropTypes.string),
     intl: PropTypes.object.isRequired,
     onPickEmoji: PropTypes.func.isRequired,
@@ -346,7 +324,9 @@ class EmojiPickerDropdown extends PureComponent {
         EmojiPicker = EmojiMart.Picker;
         Emoji = EmojiMart.Emoji;
 
-        this.setState({ loading: false });
+        void EmojiMart.loadCustomEmojiData().then(() => {
+          this.setState({ loading: false });
+        });
       }).catch(() => {
         this.setState({ loading: false, active: false });
       });
@@ -408,7 +388,6 @@ class EmojiPickerDropdown extends PureComponent {
             <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>
                 <EmojiPickerMenu
-                  custom_emojis={this.props.custom_emojis}
                   loading={loading}
                   onClose={this.onHideDropdown}
                   onPick={onPickEmoji}