1 files changed, 62 insertions, 35 deletions
diff --git a/app/assets/javascripts/behaviors/gl_emoji.js b/app/assets/javascripts/behaviors/gl_emoji.js
index d1d75658181..9034563d9b3 100644
--- a/app/assets/javascripts/behaviors/gl_emoji.js
+++ b/app/assets/javascripts/behaviors/gl_emoji.js
@@ -1,47 +1,74 @@
 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;
-        }
-        // 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);
+    let emojiUnicode = this.textContent.trim();
+    const { fallbackSpriteClass, fallbackSrc, forceFallback } = this.dataset;
+    let { name, unicodeVersion } = this.dataset;
+
+    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.uni = unicodeVersion;
+
+            if (forceFallback === 'true' && !fallbackSpriteClass) {
+              this.innerHTML = emojiImageTag(name, emojiFallbackImageSrc(name));
             } else {
-              const src = emojiFallbackImageSrc(name);
-              this.innerHTML = emojiImageTag(name, src);
+              emojiUnicode = emojiInfo.e;
+              this.innerHTML = emojiInfo.e;
             }
-          })
-          .catch(() => {
-            // do nothing
-          });
-      }
-    }
+
+            this.title = emojiInfo.d;
+          }
+        }
+
+        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;
+            }
+            // 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);
+          }
+        }
+      })
+      .catch(error => {
+        // Only reject is already handled in initEmojiMap
+        throw error;
+      });
   }
 }