[MM-13677] Fix to ensure unsupported unicode emoji can be rendered jumbo size (#2545)

* fixes unicode emoji not rendering jumbo

- replace inline emoji regex with npm emoji-regex library
- update notice.txt with emoji-regex license
- jumbo emoji issue automatically fixed with updated unicode emoji regex

* Add several tests specifically for 🤟emoji.

NOTICE.txt

@@ -310,6 +310,42 @@ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 ---
 
+## emoji-regex
+
+This product contains 'emoji-regex' by Mathias Bynens.
+
+Regular expression to match all emoji symbols (including textual representations of emoji) as per the Unicode Standard.
+
+* HOMEPAGE:
+  * https://github.com/mathiasbynens/emoji-regex
+
+* LICENSE: MIT
+
+MIT License
+
+Copyright Mathias Bynens <https://mathiasbynens.be/>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
 ## fuse.js
 
 This product contains 'fuse.js' by Kirollos Risk.

app/utils/emoji_utils.test.js

@@ -83,6 +83,10 @@ describe('hasEmojisOnly with unicode emojis', () => {
         name: 'Unicode emoji',
         message: '🙌',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'Unicode emoji',
+        message: '🤟',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: 'Unicode emojis',
         message: '🙌 👏',
@@ -91,10 +95,18 @@ describe('hasEmojisOnly with unicode emojis', () => {
         name: 'Unicode emojis without whitespace in between',
         message: '🙌👏',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'Unicode emojis without whitespace in between',
+        message: '🙌🤟',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: 'Unicode emojis with white spaces',
         message: '  😣   😖  ',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'Unicode emojis with white spaces',
+        message: '  😣   🤟  ',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: '4 unicode emojis',
         message: '😣 😖 🙌 👏',
@@ -197,14 +209,26 @@ describe('hasEmojisOnly with empty and mixed emojis', () => {
         name: 'with unicode emoji and emoticon',
         message: '👍 :)',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'with unicode emoji and emoticon',
+        message: '🤟 :)',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: 'with named and unicode emojis',
         message: ':smile: 👍',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'with named and unicode emojis',
+        message: ':smile: 🤟',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: 'with named & unicode emojis and emoticon',
         message: ':smile: 👍 :)',
         expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
+    }, {
+        name: 'with named & unicode emojis and emoticon',
+        message: ':smile: 🤟 :)',
+        expected: {isEmojiOnly: true, shouldRenderJumboEmoji: true},
     }, {
         name: 'with 4 named & unicode emojis and emoticon',
         message: ':smile: 👍 :) :heart:',

package-lock.json

@@ -3333,6 +3333,11 @@
       "integrity": "sha512-IYhbzJYOopiTaNWMBp7RjbecUBsbnbDneOP86f3qvS0G0xfzwNSvMJpTrvi5/Y1gU7tg2NAgeg8a8rCYvW9Whw==",
       "dev": true
     },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "commonmark": "github:mattermost/commonmark.js#d5a7a7bfb373778d3bfd4575962c10fb3f3909c6",
     "commonmark-react-renderer": "github:mattermost/commonmark-react-renderer#3a2ac19cab725ad28b170fdc1d397dddedcf87eb",
     "deep-equal": "1.0.1",
+    "emoji-regex": "7.0.3",
     "fuse.js": "3.3.0",
     "intl": "1.2.5",
     "jail-monkey": "1.0.0",