Merge pull request #255 from glific/revert-254-emoji-bugs

Revert "Adding emoji-mart and DraftJS integration to overcome styling issues"

package.json

@@ -33,7 +33,6 @@
     "ajv-keywords": "^3.5.0",
     "axios": "^0.19.2",
     "draft-js": "^0.11.6",
-    "draft-js-emoji-mart-plugin": "^0.0.6",
     "draft-js-emoji-plugin": "^2.1.3",
     "draft-js-plugins-editor": "^3.0.0",
     "emoji-mart": "^3.0.0",

src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.module.css

@@ -1,19 +1,10 @@
 .EmojiButton {
   position: absolute;
-  bottom: 0;
-  right: 150px;
+  bottom: 14px;
+  right: 160px;
 }
 
 .Editor {
   width: 75%;
   min-height: 40px;
 }
-
-/* TODO: Override emoji-mart-emoji font-size to make it medium. */
-span.emoji-mart-emoji {
-  font-size: medium;
-}
-
-.emoji-mart-emoji {
-  font-size: medium;
-}

src/components/UI/Form/WhatsAppEditor/WhatsAppEditor.tsx

@@ -1,22 +1,15 @@
-import React, { useState } from 'react';
+import React from 'react';
+import createEmojiPlugin from 'draft-js-emoji-plugin';
 import Editor from 'draft-js-plugins-editor';
 import { RichUtils, getDefaultKeyBinding } from 'draft-js';
+import 'draft-js-emoji-plugin/lib/plugin.css';
 import { convertToWhatsApp } from '../../../../common/RichEditor';
 import ReactResizeDetector from 'react-resize-detector';
 import styles from './WhatsAppEditor.module.css';
-import MoodIcon from '@material-ui/icons/Mood';
-import { IconButton, ClickAwayListener } from '@material-ui/core';
 
-// Emoji mart <-> DraftJS imports
-import createEmojiMartPlugin from 'draft-js-emoji-mart-plugin';
-import data from 'emoji-mart/data/apple.json';
-import 'emoji-mart/css/emoji-mart.css';
-const emojiMartPlugin = createEmojiMartPlugin({
-  data,
-  set: 'apple',
-});
-const { Picker } = emojiMartPlugin;
-const plugins = [emojiMartPlugin];
+const emojiPlugin = createEmojiPlugin({ useNativeArt: true }); // , theme: emojiTheme
+const { EmojiSelect } = emojiPlugin;
+const plugins = [emojiPlugin];
 
 interface WhatsAppEditorProps {
   handleHeightChange(newHeight: number): void;
@@ -26,7 +19,6 @@ interface WhatsAppEditorProps {
 }
 
 export const WhatsAppEditor: React.SFC<WhatsAppEditorProps> = (props) => {
-  const [showEmojiPicker, setShowEmojiPicker] = useState(false);
   const handleChange = (editorState: any) => {
     props.setEditorState(editorState);
   };
@@ -54,10 +46,6 @@ export const WhatsAppEditor: React.SFC<WhatsAppEditorProps> = (props) => {
     return getDefaultKeyBinding(e);
   };
 
-  const handleClickAway = () => {
-    setShowEmojiPicker(false);
-  };
-
   return (
     <>
       <ReactResizeDetector
@@ -76,29 +64,9 @@ export const WhatsAppEditor: React.SFC<WhatsAppEditorProps> = (props) => {
           />
         </div>
       </ReactResizeDetector>
-      <ClickAwayListener onClickAway={handleClickAway}>
-        <div>
-          <div className={styles.EmojiButton}>
-            <IconButton
-              data-testid="emoji-picker"
-              color="primary"
-              aria-label="pick emoji"
-              component="span"
-              onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-            >
-              <MoodIcon fontSize="large" />
-            </IconButton>
-          </div>
-          {showEmojiPicker ? (
-            <Picker
-              data-testid="emoji-popup"
-              title="Pick your emoji…"
-              emoji="point_up"
-              style={{ position: 'absolute', bottom: '60px', right: '-150px', zIndex: 100 }}
-            />
-          ) : null}
-        </div>
-      </ClickAwayListener>
+      <div className={styles.EmojiButton}>
+        <EmojiSelect aria-label="pick emoji" data-testid="emoji-picker" />
+      </div>
     </>
   );
 };