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

1 files changed, 5 insertions, 6 deletions

diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx
index 91be443fc..0b46edaeb 100644
--- a/webapp/utils/text_formatting.jsx
+++ b/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));
             }
         });
     }