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/async_client.jsx

@@ -1384,3 +1384,88 @@ export function getPublicLink(filename, success, error) {
         }
     );
 }
+
+export function listEmoji() {
+    if (isCallInProgress('listEmoji')) {
+        return;
+    }
+
+    callTracker.listEmoji = utils.getTimestamp();
+
+    Client.listEmoji(
+        (data) => {
+            callTracker.listEmoji = 0;
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_CUSTOM_EMOJIS,
+                emojis: data
+            });
+        },
+        (err) => {
+            callTracker.listEmoji = 0;
+            dispatchError(err, 'listEmoji');
+        }
+    );
+}
+
+export function addEmoji(emoji, image, success, error) {
+    const callName = 'addEmoji' + emoji.name;
+
+    if (isCallInProgress(callName)) {
+        return;
+    }
+
+    callTracker[callName] = utils.getTimestamp();
+
+    Client.addEmoji(
+        emoji,
+        image,
+        (data) => {
+            callTracker[callName] = 0;
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_CUSTOM_EMOJI,
+                emoji: data
+            });
+
+            if (success) {
+                success();
+            }
+        },
+        (err) => {
+            callTracker[callName] = 0;
+
+            if (error) {
+                error(err);
+            } else {
+                dispatchError(err, 'addEmoji');
+            }
+        }
+    );
+}
+
+export function deleteEmoji(id) {
+    const callName = 'deleteEmoji' + id;
+
+    if (isCallInProgress(callName)) {
+        return;
+    }
+
+    callTracker[callName] = utils.getTimestamp();
+
+    Client.deleteEmoji(
+        id,
+        () => {
+            callTracker[callName] = 0;
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.REMOVED_CUSTOM_EMOJI,
+                id
+            });
+        },
+        (err) => {
+            callTracker[callName] = 0;
+            dispatchError(err, 'deleteEmoji');
+        }
+    );
+}

webapp/utils/constants.jsx

@@ -86,6 +86,11 @@ export default {
         UPDATED_COMMAND: null,
         REMOVED_COMMAND: null,
 
+        RECEIVED_CUSTOM_EMOJIS: null,
+        RECEIVED_CUSTOM_EMOJI: null,
+        UPDATED_CUSTOM_EMOJI: null,
+        REMOVED_CUSTOM_EMOJI: null,
+
         RECEIVED_MSG: null,
 
         RECEIVED_MY_TEAM: null,

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';
-}

webapp/utils/text_formatting.jsx

@@ -4,6 +4,7 @@
 import Autolinker from 'autolinker';
 import {browserHistory} from 'react-router/es6';
 import Constants from './constants.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
 import * as Emoticons from './emoticons.jsx';
 import * as Markdown from './markdown.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
@@ -61,7 +62,7 @@ export function doFormatText(text, options) {
     output = autolinkHashtags(output, tokens);
 
     if (!('emoticons' in options) || options.emoticon) {
-        output = Emoticons.handleEmoticons(output, tokens);
+        output = Emoticons.handleEmoticons(output, tokens, options.emojis || EmojiStore.getEmojis());
     }
 
     if (options.searchTerm) {
@@ -75,15 +76,13 @@ export function doFormatText(text, options) {
     if (!('emoticons' in options) || options.emoticon) {
         output = twemoji.parse(output, {
             className: 'emoticon',
-            base: '',
-            folder: Constants.EMOJI_PATH,
-            callback: (icon, twemojiOptions) => {
-                if (!Emoticons.getEmoticonsByCodePoint().has(icon)) {
+            callback: (icon) => {
+                if (!EmojiStore.hasUnicode(icon)) {
                     // just leave the unicode characters and hope the browser can handle it
                     return null;
                 }
 
-                return ''.concat(twemojiOptions.base, twemojiOptions.size, '/', icon, twemojiOptions.ext);
+                return EmojiStore.getEmojiImageUrl(EmojiStore.getUnicode(icon));
             }
         });
     }

webapp/utils/utils.jsx

@@ -982,7 +982,10 @@ export function getDisplayName(user) {
 }
 
 export function displayUsername(userId) {
-    const user = UserStore.getProfile(userId);
+    return displayUsernameForUser(UserStore.getProfile(userId));
+}
+
+export function displayUsernameForUser(user) {
     const nameFormat = PreferenceStore.get(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false');
 
     let username = '';