[FIX] Emoji parser not working on Hermes

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -15440,7 +15440,7 @@ exports[`Storyshots Message list 1`] = `
                 "marginTop": 6,
               }
             }
-            testID="message-thread-replied-on-Thread with emoji :) 😂"
+            testID="message-thread-replied-on-Thread with emoji🙂 😂"
           >
             <Text
               allowFontScaling={false}
@@ -15482,7 +15482,7 @@ exports[`Storyshots Message list 1`] = `
                 ]
               }
             >
-              Thread with emoji :) 😂
+              Thread with emoji🙂 😂
             </Text>
             <View
               style={

app/containers/EmojiPicker/EmojiCategory.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, TouchableOpacity, FlatList } from 'react-native';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import { responsive } from 'react-native-responsive-ui';
 
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import styles from './styles';
 import CustomEmoji from './CustomEmoji';
 import scrollPersistTaps from '../../utils/scrollPersistTaps';

app/containers/EmojiPicker/index.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { View } from 'react-native';
 import PropTypes from 'prop-types';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import equal from 'deep-equal';
 import { connect } from 'react-redux';
 import orderBy from 'lodash/orderBy';
@@ -15,6 +14,7 @@ import categories from './categories';
 import database from '../../lib/database';
 import { emojisByCategory } from '../../emojis';
 import protectedFunction from '../../lib/methods/helpers/protectedFunction';
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import log from '../../utils/log';
 import { themes } from '../../constants/colors';
 import { withTheme } from '../../theme';

app/containers/MessageBox/Mentions/MentionEmoji.js

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { shortnameToUnicode } from 'emoji-toolkit';
 
+import shortnameToUnicode from '../../../utils/shortnameToUnicode';
 import styles from '../styles';
 import MessageboxContext from '../Context';
 import CustomEmoji from '../../EmojiPicker/CustomEmoji';

app/containers/markdown/Emoji.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import { shortnameToUnicode } from 'emoji-toolkit';
 
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import { themes } from '../../constants/colors';
 

app/containers/markdown/index.js

@@ -3,8 +3,8 @@ import { Text, Image } from 'react-native';
 import { Parser, Node } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import PropTypes from 'prop-types';
-import { shortnameToUnicode } from 'emoji-toolkit';
 
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import I18n from '../../i18n';
 import { themes } from '../../constants/colors';
 

app/containers/message/Emoji.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { shortnameToUnicode } from 'emoji-toolkit';
 
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
 const Emoji = React.memo(({

app/containers/message/RepliedThread.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import removeMarkdown from 'remove-markdown';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 import { CustomIcon } from '../../lib/Icons';
 import DisclosureIndicator from '../DisclosureIndicator';
 import styles from './styles';

app/presentation/RoomItem/LastMessage.js

@@ -1,12 +1,12 @@
 import React from 'react';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
 import I18n from '../../i18n';
 import styles from './styles';
 import Markdown from '../../containers/markdown';
 import { themes } from '../../constants/colors';
+import shortnameToUnicode from '../../utils/shortnameToUnicode';
 
 const formatMsg = ({
 	lastMessage, type, showLastMessage, username

app/utils/shortnameToUnicode/index.js

@@ -0,0 +1,46 @@
+import emojis from './emojis';
+import ascii, { asciiRegexp } from './ascii';
+
+const shortnamePattern = new RegExp(/:[-+_a-z0-9]+:/, 'gi');
+const replaceShortNameWithUnicode = shortname => (emojis[shortname] && emojis[shortname].unicode) || shortname;
+const regAscii = new RegExp(`((\\s|^)${ asciiRegexp }(?=\\s|$|[!,.?]))`, 'gi');
+
+const unescapeHTML = (string) => {
+	const unescaped = {
+		'&': '&',
+		'&': '&',
+		'&': '&',
+		'&lt;': '<',
+		'&#60;': '<',
+		'&#x3C;': '<',
+		'&gt;': '>',
+		'&#62;': '>',
+		'&#x3E;': '>',
+		'&quot;': '"',
+		'&#34;': '"',
+		'&#x22;': '"',
+		'&apos;': '\'',
+		'&#39;': '\'',
+		'&#x27;': '\''
+	};
+
+	return string.replace(/&(?:amp|#38|#x26|lt|#60|#x3C|gt|#62|#x3E|apos|#39|#x27|quot|#34|#x22);/ig, match => unescaped[match]);
+};
+
+const shortnameToUnicode = (str) => {
+	str = str.replace(shortnamePattern, replaceShortNameWithUnicode);
+
+	str = str.replace(regAscii, (entire, m1, m2, m3) => {
+		if (!m3 || (!(unescapeHTML(m3) in ascii))) {
+			// if the ascii doesnt exist just return the entire match
+			return entire;
+		}
+
+		m3 = unescapeHTML(m3);
+		return ascii[m3].unicode;
+	});
+
+	return str;
+};
+
+export default shortnameToUnicode;

app/utils/shortnameToUnicode/shortnameToUnicode.test.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+import shortnameToUnicode from './index';
+
+test('render joy', () => {
+	expect(shortnameToUnicode(':joy:')).toBe('😂');
+});
+
+test('render several emojis', () => {
+	expect(shortnameToUnicode(':dog::cat::hamburger::icecream::rocket:')).toBe('🐶🐱🍔🍦🚀');
+});
+
+test('render unknown emoji', () => {
+	expect(shortnameToUnicode(':unknown:')).toBe(':unknown:');
+});
+
+test('render empty', () => {
+	expect(shortnameToUnicode('')).toBe('');
+});
+
+test('render text with emoji', () => {
+	expect(shortnameToUnicode('Hello there! :hugging:')).toBe('Hello there! 🤗');
+});
+
+test('render ascii smile', () => {
+	expect(shortnameToUnicode(':)')).toBe('🙂');
+});
+
+test('render several ascii emojis', () => {
+	expect(shortnameToUnicode(':) :( -_- \':-D')).toBe('🙂😞😑😅');
+});
+
+test('render text with ascii emoji', () => {
+	expect(shortnameToUnicode('Hello there! :)')).toBe('Hello there!🙂');
+});
+
+test('render emoji and ascii emoji', () => {
+	expect(shortnameToUnicode('\':-D :joy:')).toBe('😅 😂');
+});

app/views/RoomView/Header/Header.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import {
 	View, Text, StyleSheet, ScrollView, TouchableOpacity
 } from 'react-native';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import removeMarkdown from 'remove-markdown';
 
+import shortnameToUnicode from '../../../utils/shortnameToUnicode';
 import I18n from '../../../i18n';
 import sharedStyles from '../../Styles';
 import { isAndroid, isTablet } from '../../../utils/deviceInfo';

index.js

@@ -1,11 +1,8 @@
 import 'react-native-gesture-handler';
 import 'react-native-console-time-polyfill';
 import { AppRegistry } from 'react-native';
-import joypixels from 'emoji-toolkit';
 import { name as appName, share as shareName } from './app.json';
 
-joypixels.ascii = true;
-
 if (__DEV__) {
 	require('./app/ReactotronConfig');
 } else {

package.json

@@ -31,7 +31,6 @@
     "commonmark-react-renderer": "git+https://github.com/RocketChat/commonmark-react-renderer.git",
     "deep-equal": "1.1.1",
     "ejson": "2.2.0",
-    "emoji-toolkit": "^5.0.5",
     "expo-av": "^6.0.0",
     "expo-file-system": "^6.0.2",
     "expo-haptics": "6.0.0",

yarn.lock

@@ -3846,11 +3846,6 @@ emoji-regex@^8.0.0:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
   integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
 
-emoji-toolkit@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-5.0.5.tgz#83f92fc5e78031e046f9fe861c804effdc4380ee"
-  integrity sha512-I57/yzEll8mIczqUCv2DaBhF61eBKtOwUN/7bxFPjwtwoVB9FnkRoabQRLZS6+KeSZNscw0av8o/N7tfy59PUg==
-
 emotion-theming@^10.0.14, emotion-theming@^10.0.19:
   version "10.0.19"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.19.tgz#66d13db74fccaefad71ba57c915b306cf2250295"