mirror of
https://github.com/owncast/owncast.git
synced 2024-10-10 19:16:02 +00:00
WIP emoji picker
This commit is contained in:
Gabe Kangas
parent
66a55401a8
commit
44173ac09d
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
28
web/components/chat/ChatTextField/EmojiPicker.tsx
Normal file
28
web/components/chat/ChatTextField/EmojiPicker.tsx
Normal file
@ -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>;
|
||||
}
|
||||
22
web/package-lock.json
generated
22
web/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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 = {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user