PLT-3145 Custom Emojis (#3381)

* Reorganized Backstage code to use a view controller and separated it from integrations code

* Renamed InstalledIntegrations component to BackstageList

* Added EmojiList page

* Added AddEmoji page

* Added custom emoji to autocomplete and text formatter

* Moved system emoji to EmojiStore

* Stopped trying to get emoji before logging in

* Rerender posts when emojis change

* Fixed submit handler on backstage pages to properly support enter

* Removed debugging code

* Updated javascript driver

* Fixed unit tests

* Fixed backstage routes

* Added clientside validation to prevent users from creating an emoji with the same name as a system one

* Fixed AddEmoji page to properly redirect when an emoji is created successfully

* Fixed updating emoji list when an emoji is deleted

* Added type prop to BackstageList to properly support using a table for the list

* Added help text to EmojiList

* Fixed backstage on smaller screen sizes

* Disable custom emoji by default

* Improved restrictions on creating emojis

* Fixed non-admin users seeing the option to delete each other's emojis

* Fixing gofmt

* Fixed emoji unit tests

* Fixed trying to get emoji from the server when it's disabled

webapp/utils/emoticons.jsx

@@ -1,8 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import Constants from './constants.jsx';
-import emojis from './emoji.json';
+import EmojiStore from 'stores/emoji_store.jsx';
 
 export const emoticonPatterns = {
     slightly_smiling_face: /(^|\s)(:-?\))(?=$|\s)/g, // :)
@@ -27,117 +26,17 @@ export const emoticonPatterns = {
     thumbsdown: /(^|\s)(:\-1:)(?=$|\s)/g // :-1:
 };
 
-let emoticonsByName;
-let emoticonsByCodePoint;
-
-function initializeEmoticons() {
-    emoticonsByName = new Map();
-    emoticonsByCodePoint = new Set();
-
-    for (const emoji of emojis) {
-        const unicode = emoji.emoji;
-
-        let filename = '';
-        if (unicode) {
-            // this is a unicode emoji so the character code determines the file name
-            let codepoint = '';
-
-            for (let i = 0; i < unicode.length; i += 2) {
-                const code = fixedCharCodeAt(unicode, i);
-
-                // ignore variation selector characters
-                if (code >= 0xfe00 && code <= 0xfe0f) {
-                    continue;
-                }
-
-                // some emoji (such as country flags) span multiple unicode characters
-                if (i !== 0) {
-                    codepoint += '-';
-                }
-
-                codepoint += pad(code.toString(16));
-            }
-
-            filename = codepoint;
-            emoticonsByCodePoint.add(codepoint);
-        } else {
-            // this isn't a unicode emoji so the first alias determines the file name
-            filename = emoji.aliases[0];
-        }
-
-        for (const alias of emoji.aliases) {
-            emoticonsByName.set(alias, {
-                alias,
-                path: getImagePathForEmoticon(filename)
-            });
-        }
-    }
-}
-
-// Pads a hexadecimal number with zeroes to be at least 4 digits long
-function pad(n) {
-    if (n.length >= 4) {
-        return n;
-    }
-
-    // http://stackoverflow.com/questions/10073699/pad-a-number-with-leading-zeros-in-javascript
-    return ('0000' + n).slice(-4);
-}
-
-// Gets the unicode character code of a character starting at the given index in the string
-// Adapted from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charCodeAt
-function fixedCharCodeAt(str, idx = 0) {
-    // ex. fixedCharCodeAt('\uD800\uDC00', 0); // 65536
-    // ex. fixedCharCodeAt('\uD800\uDC00', 1); // false
-    const code = str.charCodeAt(idx);
-
-    // High surrogate (could change last hex to 0xDB7F to treat high
-    // private surrogates as single characters)
-    if (code >= 0xD800 && code <= 0xDBFF) {
-        const hi = code;
-        const low = str.charCodeAt(idx + 1);
-
-        if (isNaN(low)) {
-            console.log('High surrogate not followed by low surrogate in fixedCharCodeAt()'); // eslint-disable-line
-        }
-
-        return ((hi - 0xD800) * 0x400) + (low - 0xDC00) + 0x10000;
-    }
-
-    if (code >= 0xDC00 && code <= 0xDFFF) { // Low surrogate
-        // We return false to allow loops to skip this iteration since should have
-        // already handled high surrogate above in the previous iteration
-        return false;
-    }
-
-    return code;
-}
-
-export function getEmoticonsByName() {
-    if (!emoticonsByName) {
-        initializeEmoticons();
-    }
-
-    return emoticonsByName;
-}
-
-export function getEmoticonsByCodePoint() {
-    if (!emoticonsByCodePoint) {
-        initializeEmoticons();
-    }
-
-    return emoticonsByCodePoint;
-}
-
-export function handleEmoticons(text, tokens) {
+export function handleEmoticons(text, tokens, emojis) {
     let output = text;
 
     function replaceEmoticonWithToken(fullMatch, prefix, matchText, name) {
-        if (getEmoticonsByName().has(name)) {
-            const index = tokens.size;
-            const alias = `MM_EMOTICON${index}`;
-            const path = getEmoticonsByName().get(name).path;
+        const index = tokens.size;
+        const alias = `MM_EMOTICON${index}`;
 
+        if (emojis.has(name)) {
+            const path = EmojiStore.getEmojiImageUrl(emojis.get(name));
+
+            // we have an image path so we found a matching emoticon
             tokens.set(alias, {
                 value: `<img align="absmiddle" alt="${matchText}" class="emoticon" src="${path}" title="${matchText}" />`,
                 originalText: fullMatch
@@ -163,7 +62,3 @@ export function handleEmoticons(text, tokens) {
 
     return output;
 }
-
-export function getImagePathForEmoticon(name) {
-    return Constants.EMOJI_PATH + '/' + name + '.png';
-}