[CHORE] Use JoyPixels (RocketChat#1164)

* react-emojione -> emoji-toolkit * Change to toUnicode() * Fix ascii emoji on joypixels * Revert unnecessary modify * Fix some emojis * Fix custom emojis (Android) * Update Snapshot
pmpleader · Sep 16, 2019 · 32a6810 · 32a6810
1 parent 9ba3710
commit 32a6810
Show file tree

Hide file tree

Showing 14 changed files with 3,345 additions and 3,639 deletions.
diff --git a/__tests__/__snapshots__/Storyshots.test.js.snap b/__tests__/__snapshots__/Storyshots.test.js.snap
diff --git a/app/containers/EmojiPicker/EmojiCategory.js b/app/containers/EmojiPicker/EmojiCategory.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text, TouchableOpacity } from 'react-native';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import { responsive } from 'react-native-responsive-ui';
 import { OptimizedFlatList } from 'react-native-optimized-flatlist';
 
@@ -18,7 +18,7 @@ const renderEmoji = (emoji, size, baseUrl) => {
 	}
 	return (
 		<Text style={[styles.categoryEmoji, { height: size, width: size, fontSize: size - 14 }]}>
-			{emojify(`:${ emoji }:`, { output: 'unicode' })}
+			{shortnameToUnicode(`:${ emoji }:`)}
 		</Text>
 	);
 };

diff --git a/app/containers/EmojiPicker/index.js b/app/containers/EmojiPicker/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { ScrollView } from 'react-native';
 import ScrollableTabView from 'react-native-scrollable-tab-view';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import equal from 'deep-equal';
 import { connect } from 'react-redux';
 import orderBy from 'lodash/orderBy';
@@ -80,7 +80,7 @@ class EmojiPicker extends Component {
 				const content = emoji;
 				this._addFrequentlyUsed({ content, isCustom: false });
 				const shortname = `:${ emoji }:`;
-				onEmojiSelected(emojify(shortname, { output: 'unicode' }), shortname);
+				onEmojiSelected(shortnameToUnicode(shortname), shortname);
 			}
 		} catch (e) {
 			log(e);
@@ -119,7 +119,7 @@ class EmojiPicker extends Component {
 			if (item.isCustom) {
 				return { content: item.content, extension: item.extension, isCustom: item.isCustom };
 			}
-			return emojify(`${ item.content }`, { output: 'unicode' });
+			return shortnameToUnicode(`${ item.content }`);
 		});
 		this.setState({ frequentlyUsed });
 	}

diff --git a/app/containers/MessageBox/index.js b/app/containers/MessageBox/index.js
@@ -4,7 +4,7 @@ import {
 	View, TextInput, FlatList, Text, TouchableOpacity, Alert, ScrollView
 } from 'react-native';
 import { connect } from 'react-redux';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import { KeyboardAccessoryView } from 'react-native-keyboard-input';
 import ImagePicker from 'react-native-image-crop-picker';
 import equal from 'deep-equal';
@@ -709,7 +709,7 @@ class MessageBox extends Component {
 				key='mention-item-avatar'
 				style={styles.mentionItemEmoji}
 			>
-				{emojify(`:${ item }:`, { output: 'unicode' })}
+				{shortnameToUnicode(`:${ item }:`)}
 			</Text>
 		);
 	}

diff --git a/app/containers/markdown/Emoji.js b/app/containers/markdown/Emoji.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Text } from 'react-native';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
@@ -10,7 +10,7 @@ import styles from './styles';
 const Emoji = React.memo(({
 	emojiName, literal, isMessageContainsOnlyEmoji, getCustomEmoji, baseUrl
 }) => {
-	const emojiUnicode = emojify(literal, { output: 'unicode' });
+	const emojiUnicode = shortnameToUnicode(literal);
 	const emoji = getCustomEmoji && getCustomEmoji(emojiName);
 	if (emoji) {
 		return (

diff --git a/app/containers/markdown/index.js b/app/containers/markdown/index.js
@@ -3,6 +3,7 @@ import { View, Text, Image } from 'react-native';
 import { Parser, Node } from 'commonmark';
 import Renderer from 'commonmark-react-renderer';
 import PropTypes from 'prop-types';
+import { toShort, shortnameToUnicode } from 'emoji-toolkit';
 
 import I18n from '../../i18n';
 
@@ -52,6 +53,8 @@ const emojiCount = (str) => {
 	return counter;
 };
 
+const encodeEmojis = str => toShort(shortnameToUnicode(str));
+
 export default class Markdown extends PureComponent {
 	static propTypes = {
 		msg: PropTypes.string,
@@ -154,16 +157,12 @@ export default class Markdown extends PureComponent {
 	}
 
 	renderParagraph = ({ children }) => {
-		const { numberOfLines } = this.props;
-
 		if (!children || children.length === 0) {
 			return null;
 		}
 		return (
 			<View style={styles.block}>
-				<Text numberOfLines={numberOfLines}>
-					{children}
-				</Text>
+				{children}
 			</View>
 		);
 	};
@@ -286,7 +285,8 @@ export default class Markdown extends PureComponent {
 		}
 
 		const ast = this.parser.parse(m);
-		this.isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
+		const encodedEmojis = encodeEmojis(m);
+		this.isMessageContainsOnlyEmoji = isOnlyEmoji(encodedEmojis) && emojiCount(encodedEmojis) <= 3;
 
 		this.editedMessage(ast);
 

diff --git a/app/containers/message/Emoji.js b/app/containers/message/Emoji.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 import PropTypes from 'prop-types';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 
 import CustomEmoji from '../EmojiPicker/CustomEmoji';
 
@@ -13,7 +13,7 @@ const Emoji = React.memo(({
 	if (emoji) {
 		return <CustomEmoji key={content} baseUrl={baseUrl} style={customEmojiStyle} emoji={emoji} />;
 	}
-	return <Text style={standardEmojiStyle}>{ emojify(content, { output: 'unicode' }) }</Text>;
+	return <Text style={standardEmojiStyle}>{ shortnameToUnicode(content) }</Text>;
 }, () => true);
 
 Emoji.propTypes = {

diff --git a/app/containers/message/RepliedThread.js b/app/containers/message/RepliedThread.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import removeMarkdown from 'remove-markdown';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 
 import { CustomIcon } from '../../lib/Icons';
@@ -20,7 +20,7 @@ const RepliedThread = React.memo(({
 		return null;
 	}
 
-	let msg = emojify(tmsg, { output: 'unicode' });
+	let msg = shortnameToUnicode(tmsg);
 	msg = removeMarkdown(msg);
 
 	return (

diff --git a/app/presentation/RoomItem/LastMessage.js b/app/presentation/RoomItem/LastMessage.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 
@@ -33,7 +33,7 @@ const formatMsg = ({
 
 	let msg = `${ prefix }${ lastMessage.msg.replace(/[\n\t\r]/igm, '') }`;
 	if (msg) {
-		msg = emojify(msg, { output: 'unicode' });
+		msg = shortnameToUnicode(msg);
 	}
 	return msg;
 };

diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
 	View, Text, StyleSheet, ScrollView
 } from 'react-native';
-import { emojify } from 'react-emojione';
+import { shortnameToUnicode } from 'emoji-toolkit';
 import removeMarkdown from 'remove-markdown';
 
 import I18n from '../../../i18n';
@@ -101,7 +101,7 @@ const Header = React.memo(({
 		}
 	}
 	if (title) {
-		title = emojify(title, { output: 'unicode' });
+		title = shortnameToUnicode(title);
 		if (tmid) {
 			title = removeMarkdown(title);
 		}

diff --git a/index.js b/index.js
@@ -1,7 +1,10 @@
 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');
 }

diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "commonmark-react-renderer": "git+https://github.com/RocketChat/commonmark-react-renderer.git",
     "deep-equal": "^1.0.1",
     "ejson": "2.2.0",
+    "emoji-toolkit": "^5.0.4",
     "expo-av": "^6.0.0",
     "expo-file-system": "^6.0.2",
     "expo-haptics": "6.0.0",
@@ -42,7 +43,6 @@
     "moment": "^2.24.0",
     "prop-types": "15.7.2",
     "react": "16.8.6",
-    "react-emojione": "^5.0.1",
     "react-native": "0.60.4",
     "react-native-action-sheet": "^2.2.0",
     "react-native-audio": "^4.3.0",

diff --git a/patches/emoji-toolkit+5.0.4.patch b/patches/emoji-toolkit+5.0.4.patch
@@ -0,0 +1,35 @@
+diff --git a/node_modules/emoji-toolkit/lib/js/joypixels.js b/node_modules/emoji-toolkit/lib/js/joypixels.js
+index 8e696e6..f2998b9 100644
+--- a/node_modules/emoji-toolkit/lib/js/joypixels.js
++++ b/node_modules/emoji-toolkit/lib/js/joypixels.js
+@@ -111,6 +111,7 @@
+         ':L':'1f615',
+         '=L':'1f615',
+         ':P':'1f61b',
++        ':p':'1f61b',
+         '=P':'1f61b',
+         ':b':'1f61b',
+         ':O':'1f62e',
+@@ -245,12 +246,19 @@
+         // replace regular shortnames first
+         var unicode,fname;
+         str = str.replace(ns.regShortNames, function(shortname) {
+-            if( (typeof shortname === 'undefined') || (shortname === '') || (!(shortname in ns.emojiList)) ) {
+-                // if the shortname doesnt exist just return the entire matchhju
++            if( (typeof shortname === 'undefined') || (shortname === '') || (ns.shortnames.indexOf(shortname) === -1) ) {
++                // if the shortname doesnt exist just return the entire match
+                 return shortname;
+             }
++            if (!ns.emojiList[shortname]) {
++                for ( var emoji in ns.emojiList ) {
++                    if (!ns.emojiList.hasOwnProperty(emoji) || (emoji === '')) continue;
++                    if (ns.emojiList[emoji].shortnames.indexOf(shortname) === -1) continue;
++                    shortname = emoji;
++                    break;
++                }
++            }
+             unicode = ns.emojiList[shortname].uc_full.toUpperCase();
+-            fname = ns.emojiList[shortname].uc_base;
+             return ns.convert(unicode);
+         });
+
diff --git a/yarn.lock b/yarn.lock
@@ -3837,6 +3837,11 @@ emoji-regex@^7.0.1, emoji-regex@^7.0.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
   integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==
 
+emoji-toolkit@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/emoji-toolkit/-/emoji-toolkit-5.0.4.tgz#73e6902b73894aa1899c7f148d3801eb157455a6"
+  integrity sha512-ZZfVQkWQ+1v3q3EdeYSVOQHVg/idvOhARoG4G+hPesN1i00vSeSgI+PUrsRRQSdrET7/Fe9Jr0n7iFbLlY5dKA==
+
 emotion-theming@^10.0.9:
   version "10.0.14"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.14.tgz#e548d388493d07bedbb0d9d3bbe221766174b1f4"
@@ -9299,11 +9304,6 @@ react-dom@16.8.6, react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
-react-emojione@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-emojione/-/react-emojione-5.0.1.tgz#faa4ccdad4bf24e2f5a1a96d9b44c2e902d2bc79"
-  integrity sha512-sjI6k8uQ14rWENYoAb+2BFQGLBt/cpLDJJNhnZvdFJytAJijhv+JmbmyyrfQPdyID0Cs4N8XFqnek0xq6POwGA==
-
 react-fast-compare@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"