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>;
+}

web/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@ant-design/icons": "4.7.0",
+        "@emoji-mart/data": "^1.0.1",
         "@storybook/react": "^6.4.22",
         "antd": "4.18.9",
         "autoprefixer": "^10.4.4",
@@ -16,6 +17,7 @@
         "chartkick": "4.1.1",
         "classnames": "2.3.1",
         "date-fns": "2.28.0",
+        "emoji-mart": "^5.0.0",
         "lodash": "4.17.21",
         "markdown-it": "12.3.2",
         "next": "^12.1.5",
@@ -2069,6 +2071,11 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@emoji-mart/data": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.1.tgz",
+      "integrity": "sha512-5X6DbIdyFvSFMfGdPkPd/yxQmtfMptZg5UUSL+afb39SdbPvobJY7VhzGM0IekxjszW3ygxZ2X5mVhy5AqF5vQ=="
+    },
     "node_modules/@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -15761,6 +15768,11 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
+    "node_modules/emoji-mart": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
+      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -33137,6 +33149,11 @@
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw=="
     },
+    "@emoji-mart/data": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emoji-mart/data/-/data-1.0.1.tgz",
+      "integrity": "sha512-5X6DbIdyFvSFMfGdPkPd/yxQmtfMptZg5UUSL+afb39SdbPvobJY7VhzGM0IekxjszW3ygxZ2X5mVhy5AqF5vQ=="
+    },
     "@emotion/cache": {
       "version": "10.0.29",
       "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
@@ -43707,6 +43724,11 @@
       "dev": true,
       "peer": true
     },
+    "emoji-mart": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.0.0.tgz",
+      "integrity": "sha512-4O75LxV/RPOrtC9+0qhHhfPgJgW/Kwc4zv15h190liC3vJ/5RVibIrnPlDZ0xqYx0bPVOy3W/QcDTZY+jq1qOw=="
+    },
     "emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",

web/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@ant-design/icons": "4.7.0",
+    "@emoji-mart/data": "^1.0.1",
     "@storybook/react": "^6.4.22",
     "antd": "4.18.9",
     "autoprefixer": "^10.4.4",
@@ -19,6 +20,7 @@
     "chartkick": "4.1.1",
     "classnames": "2.3.1",
     "date-fns": "2.28.0",
+    "emoji-mart": "^5.0.0",
     "lodash": "4.17.21",
     "markdown-it": "12.3.2",
     "next": "^12.1.5",

web/stories/ChatTextField.stories.tsx

@@ -32,7 +32,7 @@ export const Example = Template.bind({});
 export const LongerMessage = Template.bind({});
 LongerMessage.args = {
   value:
-    'Lorem ipsum dolor sit amet, <img src="https://watch.owncast.online/img/emoji/bluntparrot.gif" width="40px" /> consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+    'Lorem ipsum dolor sit amet,  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
 };
 
 LongerMessage.parameters = {