1 files changed, 57 insertions, 35 deletions

diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index d1d75658181..bcf732e9522 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -1,47 +1,69 @@
 import 'document-register-element';
 import isEmojiUnicodeSupported from '../emoji/support';
+import { initEmojiMap, getEmojiInfo, emojiFallbackImageSrc, emojiImageTag } from '../emoji';
 
 class GlEmoji extends HTMLElement {
   constructor() {
     super();
 
-    const emojiUnicode = this.textContent.trim();
-    const { name, unicodeVersion, fallbackSrc, fallbackSpriteClass } = this.dataset;
-
-    const isEmojiUnicode =
-      this.childNodes &&
-      Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
-    const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
-    const hasCssSpriteFalback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
-
-    if (emojiUnicode && isEmojiUnicode && !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)) {
-      // CSS sprite fallback takes precedence over image fallback
-      if (hasCssSpriteFalback) {
-        if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
-          const emojiSpriteLinkTag = document.createElement('link');
-          emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
-          emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
-          document.head.appendChild(emojiSpriteLinkTag);
-          gon.emoji_sprites_css_added = true;
+    this.initialize();
+  }
+  initialize() {
+    let emojiUnicode = this.textContent.trim();
+    const { fallbackSpriteClass, fallbackSrc } = this.dataset;
+    let { name, unicodeVersion } = this.dataset;
+
+    return initEmojiMap().then(() => {
+      if (!unicodeVersion) {
+        const emojiInfo = getEmojiInfo(name);
+
+        if (emojiInfo) {
+          if (name !== emojiInfo.name) {
+            ({ name } = emojiInfo);
+            this.dataset.name = emojiInfo.name;
+          }
+          unicodeVersion = emojiInfo.u;
+          this.dataset.unicodeVersion = unicodeVersion;
+
+          emojiUnicode = emojiInfo.e;
+          this.innerHTML = emojiInfo.e;
+
+          this.title = emojiInfo.d;
+        }
+      }
+
+      const isEmojiUnicode =
+        this.childNodes &&
+        Array.prototype.every.call(this.childNodes, childNode => childNode.nodeType === 3);
+
+      if (
+        emojiUnicode &&
+        isEmojiUnicode &&
+        !isEmojiUnicodeSupported(emojiUnicode, unicodeVersion)
+      ) {
+        const hasImageFallback = fallbackSrc && fallbackSrc.length > 0;
+        const hasCssSpriteFallback = fallbackSpriteClass && fallbackSpriteClass.length > 0;
+
+        // CSS sprite fallback takes precedence over image fallback
+        if (hasCssSpriteFallback) {
+          if (!gon.emoji_sprites_css_added && gon.emoji_sprites_css_path) {
+            const emojiSpriteLinkTag = document.createElement('link');
+            emojiSpriteLinkTag.setAttribute('rel', 'stylesheet');
+            emojiSpriteLinkTag.setAttribute('href', gon.emoji_sprites_css_path);
+            document.head.appendChild(emojiSpriteLinkTag);
+            gon.emoji_sprites_css_added = true;
+          }
+          // IE 11 doesn't like adding multiple at once :(
+          this.classList.add('emoji-icon');
+          this.classList.add(fallbackSpriteClass);
+        } else if (hasImageFallback) {
+          this.innerHTML = emojiImageTag(name, fallbackSrc);
+        } else {
+          const src = emojiFallbackImageSrc(name);
+          this.innerHTML = emojiImageTag(name, src);
         }
-        // IE 11 doesn't like adding multiple at once :(
-        this.classList.add('emoji-icon');
-        this.classList.add(fallbackSpriteClass);
-      } else {
-        import(/* webpackChunkName: 'emoji' */ '../emoji')
-          .then(({ emojiImageTag, emojiFallbackImageSrc }) => {
-            if (hasImageFallback) {
-              this.innerHTML = emojiImageTag(name, fallbackSrc);
-            } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
-            }
-          })
-          .catch(() => {
-            // do nothing
-          });
       }
-    }
+    });
   }
 }