Progress

app/javascript/gabsocial/components/composer.js

@@ -10,7 +10,7 @@ import { me } from '../initial_state'
 import { makeGetAccount } from '../selectors'
 import Button from './button'
 
-import 'draft-js/dist/Draft.css'
+// import 'draft-js/dist/Draft.css'
 
 const cx = classNames.bind(_s)
 

app/javascript/gabsocial/components/popover/emoji_picker_popover.js

@@ -11,6 +11,8 @@ import { EmojiPicker as EmojiPickerAsync } from '../../features/ui/util/async_co
 import { buildCustomEmojis } from '../emoji/emoji'
 import PopoverLayout from './popover_layout'
 
+import '!style-loader!css-loader!emoji-mart/css/emoji-mart.css'
+
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search...' },
@@ -31,7 +33,7 @@ const messages = defineMessages({
 const assetHost = process.env.CDN_HOST || ''
 let EmojiPicker, Emoji // load asynchronously
 
-const backgroundImageFn = () => `${assetHost}/emoji/sheet_10.png`
+const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`
 const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false
 
 const categoriesSort = [
@@ -47,115 +49,6 @@ const categoriesSort = [
   'flags',
 ];
 
-class ModifierPickerMenu extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    onSelect: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-  };
-
-  handleClick = e => {
-    this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1);
-  }
-
-  componentWillReceiveProps (nextProps) {
-    if (nextProps.active) {
-      this.attachListeners();
-    } else {
-      this.removeListeners();
-    }
-  }
-
-  componentWillUnmount () {
-    this.removeListeners();
-  }
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  attachListeners () {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  removeListeners () {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  render () {
-    const { active } = this.props;
-
-    return (
-      <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
-        <button onClick={this.handleClick} data-index={1}>
-          {/*<Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />*/}
-        </button>
-        {/*<button onClick={this.handleClick} data-index={2}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
-        </button>
-        <button onClick={this.handleClick} data-index={3}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
-        </button>
-        <button onClick={this.handleClick} data-index={4}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
-        </button>
-        <button onClick={this.handleClick} data-index={5}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
-        </button>
-        <button onClick={this.handleClick} data-index={6}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
-    </button>*/}
-      </div>
-    );
-  }
-
-}
-
-class ModifierPicker extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    modifier: PropTypes.number,
-    onChange: PropTypes.func,
-    onClose: PropTypes.func,
-    onOpen: PropTypes.func,
-  };
-
-  handleClick = () => {
-    if (this.props.active) {
-      this.props.onClose();
-    } else {
-      this.props.onOpen();
-    }
-  }
-
-  handleSelect = modifier => {
-    this.props.onChange(modifier);
-    this.props.onClose();
-  }
-
-  render () {
-    const { active, modifier } = this.props;
-
-    return (
-      <div className='emoji-picker-dropdown__modifiers'>
-        { /* <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} /> */ }
-        <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
-      </div>
-    );
-  }
-
-}
-
 @injectIntl
 class EmojiPickerMenu extends ImmutablePureComponent {
 
@@ -250,7 +143,7 @@ class EmojiPickerMenu extends ImmutablePureComponent {
     const { loading, style, intl, custom_emojis, skinTone, frequentlyUsedEmojis } = this.props;
 
     if (loading) {
-      return <div style={{ width: 299 }} />;
+      return <div style={{ width: 340 }} />;
     }
 
     const title = intl.formatMessage(messages.emoji);
@@ -259,32 +152,29 @@ class EmojiPickerMenu extends ImmutablePureComponent {
     return (
       <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={this.setRef}>
         <EmojiPicker
-          perLine={8}
-          emojiSize={22}
-          sheetSize={32}
+          backgroundImageFn={backgroundImageFn}
           custom={buildCustomEmojis(custom_emojis)}
-          color=''
-          emoji=''
-          set='twitter'
           title={title}
           i18n={this.getI18n()}
           onClick={this.handleClick}
           include={categoriesSort}
           recent={frequentlyUsedEmojis}
           skin={skinTone}
-          showPreview={false}
-          backgroundImageFn={backgroundImageFn}
+          emojiSize={24}
+          set='twitter'
+          color='#30CE7D'
+          emoji=''
           autoFocus
           emojiTooltip
         />
 
-        <ModifierPicker
+        {/*<ModifierPicker
           active={modifierOpen}
           modifier={skinTone}
           onOpen={this.handleModifierOpen}
           onClose={this.handleModifierClose}
           onChange={this.handleModifierChange}
-        />
+        />*/}
       </div>
     );
   }
@@ -434,8 +324,8 @@ class EmojiPickerPopover extends ImmutablePureComponent {
     const { active, loading } = this.state
 
     return (
-      <PopoverLayout>
-        <div className={_s.emojiMart} onKeyDown={this.handleKeyDown}>
+      <PopoverLayout width={340}>
+        <div onKeyDown={this.handleKeyDown}>
           <EmojiPickerMenu
             custom_emojis={this.props.custom_emojis}
             loading={loading}

config/webpack/rules/css.js

@@ -20,4 +20,4 @@ module.exports = {
       },
     },
   ],
-};
+};

package.json

@@ -90,7 +90,7 @@
     "detect-passive-events": "^1.0.2",
     "dotenv": "^8.0.0",
     "draft-js": "^0.11.4",
-    "emoji-mart": "Gargron/emoji-mart#build",
+    "emoji-mart": "^3.0.0",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
@@ -154,6 +154,7 @@
     "sass-loader": "^7.0.3",
     "sass-resources-loader": "^2.0.1",
     "stringz": "^1.0.0",
+    "style-loader": "^1.1.3",
     "substring-trie": "^1.0.2",
     "throng": "^4.0.0",
     "tiny-queue": "^0.2.1",
@@ -184,4 +185,4 @@
     "webpack-dev-server": "^3.10.1",
     "yargs": "^12.0.5"
   }
-}
+}

public/emoji/1f1e8-1f1f3.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#DE2910" d="M36 27c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V9c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v18z"/><path fill="#FFDE02" d="M7 10.951l.929 2.671 2.826.058-2.253 1.708.819 2.706L7 16.479l-2.321 1.615.819-2.706-2.253-1.708 2.826-.058zm6-3.423l.34.688.759.11-.549.536.129.756L13 9.261l-.679.357.13-.756-.55-.536.76-.11zm2 4l.34.688.759.11-.549.536.129.756-.679-.357-.679.357.13-.756-.55-.536.76-.11zm0 4l.34.688.759.11-.549.536.129.756-.679-.357-.679.357.13-.756-.55-.536.76-.11zm-2 3.999l.34.689.759.11-.549.535.129.757-.679-.356-.679.356.13-.757-.55-.535.76-.11z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#DE2910" d="M36 27c0 2.209-1.791 4-4 4H4c-2.209 0-4-1.791-4-4V9c0-2.209 1.791-4 4-4h28c2.209 0 4 1.791 4 4v18z"/><path fill="#FFDE02" d="M11.136 8.977l.736.356.589-.566-.111.81.72.386-.804.144-.144.804-.386-.72-.81.111.566-.589zm4.665 2.941l-.356.735.566.59-.809-.112-.386.721-.144-.805-.805-.144.721-.386-.112-.809.59.566zm-.957 3.779l.268.772.817.017-.651.493.237.783-.671-.467-.671.467.236-.783-.651-.493.817-.017zm-3.708 3.28l.736.356.589-.566-.111.81.72.386-.804.144-.144.804-.386-.72-.81.111.566-.589zM7 10.951l.929 2.671 2.826.058-2.253 1.708.819 2.706L7 16.479l-2.321 1.615.819-2.706-2.253-1.708 2.826-.058z"/></svg>