Use native unicode emojis

 - gl_emoji for falling back to image/css-sprite when the browser
   doesn't support an emoji
 - Markdown rendering (Banzai filter)
 - Autocomplete
 - Award emoji menu
    - Perceived perf
    - Immediate response because we now build client-side
 - Update `digests.json` generation in gemojione rake task to be more
   useful and  include `unicodeVersion`

MR: !9437

See issues

 - #26371
 - #27250
 - #22474

1 files changed, 24 insertions, 1 deletions

diff --git a/lib/gitlab/emoji.rb b/lib/gitlab/emoji.rb
index bbbca8acc40..35712c214fc 100644
--- a/lib/gitlab/emoji.rb
+++ b/lib/gitlab/emoji.rb
@@ -1,7 +1,9 @@
 module Gitlab
   module Emoji
     extend self
-    
+    @emoji_unicode_version = JSON.parse(File.read(File.absolute_path(File.dirname(__FILE__) + '/../../node_modules/emoji-unicode-version/emoji-unicode-version-map.json')))
+    @emoji_aliases = JSON.parse(File.read(File.join(Rails.root, 'fixtures', 'emojis', 'aliases.json')))
+
     def emojis
       Gemojione.index.instance_variable_get(:@emoji_by_name)
     end
@@ -18,6 +20,10 @@ module Gitlab
       emojis.keys
     end
 
+    def emojis_aliases
+      @emoji_aliases
+    end
+
     def emoji_filename(name)
       emojis[name]["unicode"]
     end
@@ -25,5 +31,22 @@ module Gitlab
     def emoji_unicode_filename(moji)
       emojis_by_moji[moji]["unicode"]
     end
+
+    def emoji_unicode_version(name)
+      @emoji_unicode_version[name]
+    end
+
+    def emoji_image_tag(name, src)
+      "<img class='emoji' title=':#{name}:' alt=':#{name}:' src='#{src}' height='20' width='20' align='absmiddle' />"
+    end
+
+    # CSS sprite fallback takes precedence over image fallback
+    def gl_emoji_tag(name, sprite: false, force_fallback: false)
+      emoji_name = emojis_aliases[name] || name
+      emoji_info = emojis[emoji_name]
+      emoji_fallback_image_source = ActionController::Base.helpers.asset_url("emoji/#{emoji_info['name']}.png")
+      emoji_fallback_sprite_class = "emoji-#{emoji_name}"
+      "<gl-emoji #{force_fallback && sprite ? "class='emoji-icon #{emoji_fallback_sprite_class}'" : ""} data-name='#{emoji_name}' data-fallback-src='#{emoji_fallback_image_source}' #{sprite ? "data-fallback-sprite-class='#{emoji_fallback_sprite_class}'" : ""} data-unicode-version='#{emoji_unicode_version(emoji_name)}'>#{force_fallback && sprite === false ? emoji_image_tag(emoji_name, emoji_fallback_image_source) : emoji_info['moji']}</gl-emoji>"
+    end
   end
 end