Replace picmo with emoji-mart (#4001)

* Add emoji-mart deps

* Change EmojiPicker to use emoji-mart

* Change ChatTextField to work with the emoji-mart data object

* Remove picmo, commit package-lock

* Fix mutant svgs having a size of 0

* Get the custom emojis to show up earlier in the picker

* Set emoji-mart to exact semver. Later versions break custom category sorting.

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -152,15 +152,14 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
     contentEditable.innerHTML += textToInsert;
   };
 
-  // Native emoji
-  const onEmojiSelect = (emoji: string) => {
-    insertTextAtEnd(emoji);
-  };
-
-  // Custom emoji images
-  const onCustomEmojiSelect = (name: string, emoji: string) => {
-    const html = `<img src="${emoji}" alt=":${name}:" title=":${name}:" class="emoji" />`;
-    insertTextAtEnd(html);
+  const onEmojiSelect = emoji => {
+    if (emoji.native) {
+      insertTextAtEnd(emoji.native);
+    } else {
+      // Custom emoji images
+      const html = `<img src="${emoji.src}" alt=":${emoji.name}:" title=":${emoji.name}:" class="emoji" />`;
+      insertTextAtEnd(html);
+    }
   };
 
   const onKeyDown = (e: React.KeyboardEvent) => {
@@ -277,13 +276,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, fo
         {enabled && (
           <div style={{ display: 'flex', paddingLeft: '5px' }}>
             <Popover
-              content={
-                <EmojiPicker
-                  customEmoji={customEmoji}
-                  onEmojiSelect={onEmojiSelect}
-                  onCustomEmojiSelect={onCustomEmojiSelect}
-                />
-              }
+              content={<EmojiPicker customEmoji={customEmoji} onEmojiSelect={onEmojiSelect} />}
               trigger="click"
               placement="topRight"
             >