Chapter: Emoji Picker

Emoji Picker

For emojis, RocketChat uses Joypixels emoji pack. To implement this a custom Emoji Picker component is made. This component will be used in both the react to a message part and also for sending emojis from the <ChatInput /> component.

For the custom component, we are using [email protected] which contains the Joypixels emoji pack. The custom component takes a function called handleEmojiClick describing what the on-click behavior should be (as it can be different for sending messages and reacting to messages).

This handleEmojiClick function receives the (n: unified code of emoji, e: event object for clicking an emoji).

For sending an emoji in the message and showing the parsed emoji in the Input box we are using,

// src/components/ChatInput/ChatInput.js

const handleEmojiClick = (n) => {
    // for working with flag emojis
    if (n.length > 5) {
      let flagUnifed = '&#x' + n.split('-').join(';&#x') + ';';
      let flag = he.decode(flagUnifed);
      setMessage(message + flag);
      return;
    }
    let unified_emoji = he.decode(`&#x${n};`);
    setMessage(message + unified_emoji);
};

Parsing of Emojis in the Text Inputs

For parsing an emoji, we need a decoder. Emojis look like images or icons, but they are not. They are letters (characters) from the UTF-8 (Unicode) character set. You can read more about them and about UTF-8 encoding here.

So, we were receiving the unified code from the EmojiPicker component which when embedded within &#<UNIFIED>x; became an HTML entity. Then, we went with he to parse the emoji string that we were getting to a native emoji.

// for example,
// 😂 => 😂

It worked with every emoji except the flag ones, because flag ones were a combination of two different unicodes. Those two unicodes are letters indicating the country code of countries. So, a way to approach this was,

// n = 1F1EE-1F1F3 two unicodes we were receiving
let flagUnifed = '&#x' + n.split('-').join(';&#x') + ';';
// what it does is -> 🇮🇳 => parses to => 🇮🇳

These universal native emojis will be automatically handled in both RocketChat as well as EmbeddedChat. Also, we didn't forget about the parsing of Joypixels emojis. Because with Joypixels emojis, we can just send :heart: and it will render out to ❤️. There is a function declared to convert the string emojis (:heart:) to images.

// src/components/Markdown/Markdown.js
function emojify(message) {
  return EmojiOne.toImage(message);
}
const Markdown = (props) => {
  return (
    <Box
      dangerouslySetInnerHTML={{
        __html: emojify(DOMPurify.sanitize(marked.parse(props.body))),
      }}
    ></Box>
  );
};