[FIX] Emoji parser not working on Hermes (#1445)

__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,5 +1,4 @@
 import React from 'react';
-import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
@@ -7,6 +6,7 @@ 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/ascii.js

@@ -0,0 +1,10 @@
+/* eslint-disable quote-props */
+/* eslint-disable object-curly-newline */
+/* eslint-disable object-curly-spacing */
+/* eslint-disable comma-spacing */
+/* eslint-disable key-spacing */
+const ascii = {'*\\0/*':'🙆','*\\O/*':'🙆','-___-':'😑',':\'-)':'😂','\':-)':'😅','\':-D':'😅','>:-)':'😆','\':-(':'😓','>:-(':'😠',':\'-(':'😢','O:-)':'😇','0:-3':'😇','0:-)':'😇','0;^)':'😇','O;-)':'😇','0;-)':'😇','O:-3':'😇','-__-':'😑',':-Þ':'😛','</3':'💔',':\')':'😂',':-D':'😃','\':)':'😅','\'=)':'😅','\':D':'😅','\'=D':'😅','>:)':'😆','>;)':'😆','>=)':'😆',';-)':'😉','*-)':'😉',';-]':'😉',';^)':'😉','\':(':'😓','\'=(':'😓',':-*':'😘',':^*':'😘','>:P':'😜','X-P':'😜','>:[':'😞',':-(':'😞',':-[':'😞','>:(':'😠',':\'(':'😢',';-(':'😢','>.<':'😣','#-)':'😵','%-)':'😵','X-)':'😵','\\0/':'🙆','\\O/':'🙆','0:3':'😇','0:)':'😇','O:)':'😇','O=)':'😇','O:3':'😇','B-)':'😎','8-)':'😎','B-D':'😎','8-D':'😎','-_-':'😑','>:\\':'😕','>:/':'😕',':-/':'😕',':-.':'😕',':-P':'😛',':Þ':'😛',':-b':'😛',':-O':'😮','O_O':'😮','>:O':'😮',':-X':'😶',':-#':'😶',':-)':'🙂','(y)':'👍','<3':'❤','=D':'😃',';)':'😉','*)':'😉',';]':'😉',';D':'😉',':*':'😘','=*':'😘',':(':'😞',':[':'😞','=(':'😞',':@':'😠',';(':'😢','D:':'😨',':$':'😳','=$':'😳','#)':'😵','%)':'😵','X)':'😵','B)':'😎','8)':'😎',':/':'😕',':\\':'😕','=/':'😕','=\\':'😕',':L':'😕','=L':'😕',':P':'😛','=P':'😛',':b':'😛',':O':'😮',':X':'😶',':#':'😶','=X':'😶','=#':'😶',':)':'🙂','=]':'🙂','=)':'🙂',':]':'🙂',':D':'😄'};
+
+export const asciiRegexp = '(\\*\\\\0\\/\\*|\\*\\\\O\\/\\*|\\-___\\-|\\:\'\\-\\)|\'\\:\\-\\)|\'\\:\\-D|\\>\\:\\-\\)|>\\:\\-\\)|\'\\:\\-\\(|\\>\\:\\-\\(|>\\:\\-\\(|\\:\'\\-\\(|O\\:\\-\\)|0\\:\\-3|0\\:\\-\\)|0;\\^\\)|O;\\-\\)|0;\\-\\)|O\\:\\-3|\\-__\\-|\\:\\-Þ|\\:\\-Þ|\\<\\/3|<\\/3|\\:\'\\)|\\:\\-D|\'\\:\\)|\'\\=\\)|\'\\:D|\'\\=D|\\>\\:\\)|>\\:\\)|\\>;\\)|>;\\)|\\>\\=\\)|>\\=\\)|;\\-\\)|\\*\\-\\)|;\\-\\]|;\\^\\)|\'\\:\\(|\'\\=\\(|\\:\\-\\*|\\:\\^\\*|\\>\\:P|>\\:P|X\\-P|\\>\\:\\[|>\\:\\[|\\:\\-\\(|\\:\\-\\[|\\>\\:\\(|>\\:\\(|\\:\'\\(|;\\-\\(|\\>\\.\\<|>\\.<|#\\-\\)|%\\-\\)|X\\-\\)|\\\\0\\/|\\\\O\\/|0\\:3|0\\:\\)|O\\:\\)|O\\=\\)|O\\:3|B\\-\\)|8\\-\\)|B\\-D|8\\-D|\\-_\\-|\\>\\:\\\\|>\\:\\\\|\\>\\:\\/|>\\:\\/|\\:\\-\\/|\\:\\-\\.|\\:\\-P|\\:Þ|\\:Þ|\\:\\-b|\\:\\-O|O_O|\\>\\:O|>\\:O|\\:\\-X|\\:\\-#|\\:\\-\\)|\\(y\\)|\\<3|<3|\\=D|;\\)|\\*\\)|;\\]|;D|\\:\\*|\\=\\*|\\:\\(|\\:\\[|\\=\\(|\\:@|;\\(|D\\:|\\:\\$|\\=\\$|#\\)|%\\)|X\\)|B\\)|8\\)|\\:\\/|\\:\\\\|\\=\\/|\\=\\\\|\\:L|\\=L|\\:P|\\=P|\\:b|\\:O|\\:X|\\:#|\\=X|\\=#|\\:\\)|\\=\\]|\\=\\)|\\:\\]|\\:D)';
+
+export default ascii;

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] || 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];
+	});
+
+	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"