Add emoji autosuggest (#5053)

* Add emoji autosuggest

Some credit goes to glitch-soc/mastodon#149

* Remove server-side shortcode->unicode conversion

* Insert shortcode when suggestion is custom emoji

* Remove remnant of server-side emojis

* Update style of autosuggestions

* Fix wrong emoji filenames generated in autosuggest item

* Do not lazy load emoji picker, as that no longer works

* Fix custom emoji autosuggest

* Fix multiple "Custom" categories getting added to emoji index, only add once

1 files changed, 6 insertions, 31 deletions

diff --git a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
index f55d59e03..3cac9b7a6 100644
--- a/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
+++ b/app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
+import { Picker, Emoji } from 'emoji-mart';
 import { Overlay } from 'react-overlays';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { buildCustomEmojis } from '../../../emoji';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -26,8 +25,6 @@ const messages = defineMessages({
 
 const assetHost = process.env.CDN_HOST || '';
 
-let EmojiPicker, Emoji; // load asynchronously
-
 const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`;
 
 class ModifierPickerMenu extends React.PureComponent {
@@ -133,7 +130,6 @@ class EmojiPickerMenu extends React.PureComponent {
 
   static propTypes = {
     custom_emojis: ImmutablePropTypes.list,
-    loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
     onPick: PropTypes.func.isRequired,
     style: PropTypes.object,
@@ -145,7 +141,6 @@ class EmojiPickerMenu extends React.PureComponent {
 
   static defaultProps = {
     style: {},
-    loading: true,
     placement: 'bottom',
   };
 
@@ -220,19 +215,13 @@ class EmojiPickerMenu extends React.PureComponent {
   }
 
   render () {
-    const { loading, style, intl } = this.props;
-
-    if (loading) {
-      return <div style={{ width: 299 }} />;
-    }
-
+    const { style, intl } = this.props;
     const title = intl.formatMessage(messages.emoji);
     const { modifierOpen, modifier } = this.state;
 
     return (
       <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
-        <EmojiPicker
-          custom={buildCustomEmojis(this.props.custom_emojis)}
+        <Picker
           perLine={8}
           emojiSize={22}
           sheetSize={32}
@@ -270,7 +259,6 @@ export default class EmojiPickerDropdown extends React.PureComponent {
 
   state = {
     active: false,
-    loading: false,
   };
 
   setRef = (c) => {
@@ -279,18 +267,6 @@ export default class EmojiPickerDropdown extends React.PureComponent {
 
   onShowDropdown = () => {
     this.setState({ active: true });
-
-    if (!EmojiPicker) {
-      this.setState({ loading: true });
-
-      EmojiPickerAsync().then(EmojiMart => {
-        EmojiPicker = EmojiMart.Picker;
-        Emoji = EmojiMart.Emoji;
-        this.setState({ loading: false });
-      }).catch(() => {
-        this.setState({ loading: false });
-      });
-    }
   }
 
   onHideDropdown = () => {
@@ -298,7 +274,7 @@ export default class EmojiPickerDropdown extends React.PureComponent {
   }
 
   onToggle = (e) => {
-    if (!this.state.loading && (!e.key || e.key === 'Enter')) {
+    if (!e.key || e.key === 'Enter') {
       if (this.state.active) {
         this.onHideDropdown();
       } else {
@@ -324,13 +300,13 @@ export default class EmojiPickerDropdown extends React.PureComponent {
   render () {
     const { intl, onPickEmoji } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading } = this.state;
+    const { active } = this.state;
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown}>
         <div ref={this.setTargetRef} className='emoji-button' title={title} aria-label={title} aria-expanded={active} role='button' onClick={this.onToggle} onKeyDown={this.onToggle} tabIndex={0}>
           <img
-            className={classNames('emojione', { 'pulse-loading': active && loading })}
+            className='emojione'
             alt='🙂'
             src={`${assetHost}/emoji/1f602.svg`}
           />
@@ -339,7 +315,6 @@ export default class EmojiPickerDropdown extends React.PureComponent {
         <Overlay show={active} placement='bottom' target={this.findTarget}>
           <EmojiPickerMenu
             custom_emojis={this.props.custom_emojis}
-            loading={loading}
             onClose={this.onHideDropdown}
             onPick={onPickEmoji}
           />