WIP emoji picker

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -1,12 +1,12 @@
 import { SmileOutlined } from '@ant-design/icons';
-import { Button, Input } from 'antd';
-import React, { useState, useMemo } from 'react';
+import { Button, Popover } from 'antd';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Transforms, createEditor, Node, BaseEditor, Text } from 'slate';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
+import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom } from '../../stores/ClientConfigStore';
-import { getCaretPosition, convertToText, convertOnPaste } from '../chat';
 import { MessageType } from '../../../interfaces/socket-events';
 import s from './ChatTextField.module.scss';
 
@@ -71,7 +71,7 @@ const Element = props => {
 
 const serialize = node => {
   if (Text.isText(node)) {
-    let string = node.text; // escapeHtml(node.text);
+    let string = node.text;
     if (node.bold) {
       string = `<strong>${string}</strong>`;
     }
@@ -115,6 +115,19 @@ export default function ChatTextField(props: Props) {
 
   const handleChange = e => {};
 
+  const handleEmojiSelect = emoji => {
+    console.log(emoji);
+    if (!emoji.native) {
+      // Custom emoji
+      const { src } = emoji;
+      insertImage(editor, src);
+    } else {
+      // Native emoji
+      const { native } = emoji;
+      Transforms.insertText(editor, native);
+    }
+  };
+
   const onKeyDown = e => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -141,9 +154,18 @@ export default function ChatTextField(props: Props) {
       <Button type="default" ghost title="Emoji" onClick={() => setShowEmojis(!showEmojis)}>
         <SmileOutlined style={{ color: 'rgba(0,0,0,.45)' }} />
       </Button>
+
       <Button size={size} type="primary" onClick={sendMessage}>
         Submit
       </Button>
+
+      <Popover
+        content={<EmojiPicker onEmojiSelect={handleEmojiSelect} />}
+        trigger="click"
+        onVisibleChange={visible => setShowEmojis(visible)}
+        visible={showEmojis}
+        placement="bottomLeft"
+      />
     </div>
   );
 }

web/components/chat/ChatTextField/EmojiPicker.tsx

@@ -0,0 +1,28 @@
+import data from '@emoji-mart/data';
+import { Picker } from 'emoji-mart';
+import React, { useRef, useEffect } from 'react';
+
+export default function EmojiPicker(props) {
+  const ref = useRef();
+
+  // TODO: Pull this custom emoji data in from the emoji API.
+  const custom = [
+    {
+      emojis: [
+        {
+          id: 'party_parrot',
+          name: 'Party Parrot',
+          keywords: ['dance', 'dancing'],
+          skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
+        },
+      ],
+    },
+  ];
+
+  // useEffect(() => {
+  //   // eslint-disable-next-line no-new
+  //   new Picker({ ...props, data, custom, ref });
+  // }, []);
+
+  return <div>emoji picker goes here</div>;
+}