FEATURE: Added EmojiPreview component for typing Emojis using : shortcut

packages/react/src/components/ChatInput/ChatInput.js

@@ -23,6 +23,7 @@ import { CommandsList } from '../CommandList';
 import { ActionButton } from '../ActionButton';
 import useComponentOverrides from '../../theme/useComponentOverrides';
 import { useToastBarDispatch } from '../../hooks/useToastBarDispatch';
+import EmojiPreview from '../EmojiPreview/EmojiPreview';
 
 const editingMessageCss = css`
  background-color: #fff8e0;
@@ -218,6 +219,9 @@ const ChatInput = () => {
  }
  }, [RCInstance, setRoomMembers]);
 
+ const [currentEmojiIndex, setCurrentEmojiIndex] = useState(0);
+ const emojiListLengthRef = useRef(0);
+
  useEffect(() => {
  if (editMessage.msg) {
  messageRef.current.value = editMessage.msg;
@@ -378,11 +382,17 @@ const ChatInput = () => {
  setmentionIndex(
  mentionIndex + 1 >= filteredMembers.length + 2 ? 0 : mentionIndex + 1
  );
+ setCurrentEmojiIndex((prevIndex) =>
+ prevIndex >= emojiListLengthRef.current - 1 ? 0 : prevIndex + 1
+ );
  }
  if (e.key === 'ArrowUp') {
  setmentionIndex(
  mentionIndex - 1 < 0 ? filteredMembers.length + 1 : mentionIndex - 1
  );
+ setCurrentEmojiIndex((prevIndex) =>
+ prevIndex > 0 ? prevIndex - 1 : emojiListLengthRef.current - 1
+ );
  }
  if (showMembersList && e.key === 'Enter') {
  e.preventDefault();
@@ -403,8 +413,15 @@ const ChatInput = () => {
  setmentionIndex(-1);
  }
  };
+
  return (
  <Box className={`ec-chat-input ${classNames}`} style={styleOverrides}>
+ <EmojiPreview
+ messageRef={messageRef}
+ currentEmojiIndex={currentEmojiIndex}
+ setCurrentEmojiIndex={setCurrentEmojiIndex}
+ emojiListLengthRef={emojiListLengthRef}
+ />
  <Box
  css={css`
  margin-inline-start: 20px;

packages/react/src/components/EmojiPreview/EmojiPreview.js

@@ -0,0 +1,97 @@
+import emojione from 'emoji-toolkit';
+// import useComponentOverrides from '../../theme/useComponentOverrides';
+// import { appendClassNames } from '../../lib/appendClassNames';
+import { Box } from '../Box';
+import { css } from '@emotion/react';
+import styles from './EmojiPreview.module.css';
+import emojis from './emojis';
+import { useEffect, useState } from 'react';
+
+const EmojiPreview = ({
+ messageRef,
+ currentEmojiIndex,
+ setCurrentEmojiIndex,
+ emojiListLengthRef,
+}) => {
+ const regx = /:([^:]+)/g;
+ const [emojisList, setEmojisList] = useState([]);
+
+ emojiListLengthRef.current = emojisList.length;
+ console.log(currentEmojiIndex, emojisList.length);
+ if (emojiListLengthRef.current === 0) setCurrentEmojiIndex(0);
+
+ const findMatchingEmojis = (unicode) => {
+ const matchingEmojis = [];
+ for (const emoji in emojis) {
+ if (emoji.startsWith(unicode)) {
+ matchingEmojis.push({ unicode: emojis[emoji], value: emoji });
+ if (matchingEmojis.length === 5) break;
+ }
+ }
+ return matchingEmojis;
+ };
+
+ const selectEmoji = (emoji) => {
+ const matchingRegex = messageRef.current.value?.match(regx);
+ const lastRegex = matchingRegex[matchingRegex.length - 1];
+ messageRef.current.value =
+ messageRef.current.value.slice(0, -lastRegex.length) + emoji;
+ setEmojisList([]);
+ emojiListLengthRef.current = 0;
+ setCurrentEmojiIndex(0);
+ };
+
+ useEffect(() => {
+ const regx_data = messageRef.current.value?.match(regx);
+ if (regx_data) {
+ const unicode = emojione
+ .shortnameToUnicode(regx_data[regx_data.length - 1])
+ .toLowerCase();
+ setEmojisList(findMatchingEmojis(unicode));
+ } else {
+ setEmojisList([]);
+ }
+ }, [messageRef.current?.value]);
+
+ useEffect(() => {
+ if (currentEmojiIndex >= 3) {
+ document
+ .getElementById('emoji-list')
+ ?.scrollTo(0, 35.3 * (currentEmojiIndex - 2));
+ } else {
+ document.getElementById('emoji-list')?.scrollTo(0, 0);
+ }
+ }, [currentEmojiIndex]);
+
+ return (
+ <Box>
+ {emojisList.length > 0 && (
+ <div className={styles.container}>
+ <div className={styles.containerHeader}>Emoji</div>
+ <div style={{ backgroundColor: 'white' }}>
+ <ul className={styles.emojiContainer} id="emoji-list">
+ {emojisList.map((emoji, index) => {
+ return (
+ <li
+ className={styles.emojiList}
+ style={{
+ backgroundColor:
+ index === currentEmojiIndex
+ ? 'rgba(223, 223, 223, 0.6)'
+ : '',
+ }}
+ onClick={() => selectEmoji(emoji.unicode)}
+ >
+ {emoji.value + ' ' + emoji.unicode}
+ </li>
+ );
+ })}
+ </ul>
+ </div>
+ </div>
+ )}
+ </Box>
+ );
+};
+
+export default EmojiPreview;

packages/react/src/components/EmojiPreview/EmojiPreview.module.css

@@ -0,0 +1,42 @@
+.container {
+ border: 1px solid lightgray;
+ border-radius: 7px;
+ -webkit-border-radius: 7px;
+ -moz-border-radius: 7px;
+ -ms-border-radius: 7px;
+ -o-border-radius: 7px;
+ overflow: hidden;
+ margin-top: 5px;
+}
+
+.emojiContainer {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ max-height: 100px;
+ overflow-y: scroll;
+ scroll-margin-top: 20px;
+}
+
+.containerHeader {
+ background-color: #cbced1;
+ box-sizing: border-box;
+ font-size: 16px;
+ padding: 10px 14px;
+ width: 100%;
+ font-weight: 600;
+ border-radius: 5px 5px 0px 0px;
+ -webkit-border-radius: 5px 5px 0px 0px;
+ -moz-border-radius: 5px 5px 0px 0px;
+ -ms-border-radius: 5px 5px 0px 0px;
+ -o-border-radius: 5px 5px 0px 0px;
+}
+
+.emojiList {
+ background-color: rgba(223, 223, 223, 0.25);
+ padding: 8px 12px;
+}
+
+.emojiList:hover {
+ cursor: pointer;
+}

packages/react/src/components/EmojiPreview/EmojiPreview.stories.js

@@ -0,0 +1,30 @@
+import { ThemeProvider } from '@emotion/react';
+import { EmojiPreview } from '.';
+import DefaultTheme from '../../theme/DefaultTheme';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+export default {
+ title: 'Components/EmojiPreview',
+ component: EmojiPreview,
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Default = {
+ args: {
+ messageRef: {
+ current: {
+ value: ':smi',
+ },
+ },
+ emojiListLengthRef: {
+ current: 0,
+ },
+ currentEmojiIndex: 0,
+ setCurrentEmojiIndex: () => {},
+ },
+ render: (args) => (
+ <ThemeProvider theme={DefaultTheme}>
+ <EmojiPreview {...args} />
+ </ThemeProvider>
+ ),
+};