Fix wrong image src with cached gl-emoji and relative root

app/assets/javascripts/behaviors/gl_emoji.js

@@ -10,6 +10,14 @@ function emojiImageTag(name, src) {
   return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
 }
 
+function assembleFallbackImageSrc(inputName) {
+  const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
+    emojiAliases[inputName] : inputName;
+  const emojiInfo = emojiMap[name];
+  const fallbackImageSrc = `${gon.asset_host || ''}${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
+
+  return fallbackImageSrc;
+}
 const glEmojiTagDefaults = {
   sprite: false,
   forceFallback: false,
@@ -19,7 +27,7 @@ function glEmojiTag(inputName, options) {
   const name = Object.prototype.hasOwnProperty.call(emojiAliases, inputName) ?
     emojiAliases[inputName] : inputName;
   const emojiInfo = emojiMap[name];
-  const fallbackImageSrc = `${gon.relative_url_root || ''}/assets/emoji/${name}-${emojiInfo.digest}.png`;
+  const fallbackImageSrc = assembleFallbackImageSrc(name);
   const fallbackSpriteClass = `emoji-${name}`;
 
   const classList = [];
@@ -162,6 +170,7 @@ const GlEmojiElementProto = Object.create(HTMLElement.prototype);
 GlEmojiElementProto.createdCallback = function createdCallback() {
   const emojiUnicode = this.textContent.trim();
   const {
+    name,
     unicodeVersion,
     fallbackSrc,
     fallbackSpriteClass,
@@ -184,8 +193,10 @@ GlEmojiElementProto.createdCallback = function createdCallback() {
       this.classList.add('emoji-icon');
       this.classList.add(fallbackSpriteClass);
     } else if (hasImageFallback) {
-      const emojiName = this.dataset.name;
-      this.innerHTML = emojiImageTag(emojiName, fallbackSrc);
+      this.innerHTML = emojiImageTag(name, fallbackSrc);
+    } else {
+      const src = assembleFallbackImageSrc(name);
+      this.innerHTML = emojiImageTag(name, src);
     }
   }
 };

lib/gitlab/emoji.rb

@@ -41,12 +41,12 @@ module Gitlab
     end
 
     # CSS sprite fallback takes precedence over image fallback
-    def gl_emoji_tag(name, sprite: false, force_fallback: false)
+    def gl_emoji_tag(name, image: false, 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_image_source = ActionController::Base.helpers.url_to_image("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>"
+      "<gl-emoji #{force_fallback && sprite ? "class='emoji-icon #{emoji_fallback_sprite_class}'" : ""} data-name='#{emoji_name}' #{image ? "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

lib/gitlab/gon_helper.rb

@@ -4,6 +4,7 @@ module Gitlab
       gon.api_version            = 'v3' # v4 Is not officially released yet, therefore can't be considered as "frozen"
       gon.default_avatar_url     = URI.join(Gitlab.config.gitlab.url, ActionController::Base.helpers.image_path('no_avatar.png')).to_s
       gon.max_file_size          = current_application_settings.max_attachment_size
+      gon.asset_host             = ActionController::Base.asset_host
       gon.relative_url_root      = Gitlab.config.gitlab.relative_url_root
       gon.shortcuts_path         = help_page_path('shortcuts')
       gon.user_color_scheme      = Gitlab::ColorSchemes.for_user(current_user).css_class

spec/helpers/gitlab_markdown_helper_spec.rb

@@ -113,7 +113,7 @@ describe GitlabMarkdownHelper do
     it 'replaces commit message with emoji to link' do
       actual = link_to_gfm(':book:Book', '/foo')
       expect(actual).
-        to eq '<gl-emoji data-name="book" data-fallback-src="/assets/emoji/book.png" data-unicode-version="6.0">📖</gl-emoji><a href="/foo">Book</a>'
+        to eq '<gl-emoji data-name="book" data-unicode-version="6.0">📖</gl-emoji><a href="/foo">Book</a>'
     end
   end
 

spec/lib/banzai/filter/emoji_filter_spec.rb

@@ -88,11 +88,6 @@ describe Banzai::Filter::EmojiFilter, lib: true do
     expect(doc.css('gl-emoji').first.attr('data-name')).to eq 'thumbsdown'
   end
 
-  it 'has a data-fallback-src attribute' do
-    doc = filter(':-1:')
-    expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to end_with '.png'
-  end
-
   it 'has a data-unicode-version attribute' do
     doc = filter(':-1:')
     expect(doc.css('gl-emoji').first.attr('data-unicode-version')).to eq '6.0'
@@ -109,18 +104,4 @@ describe Banzai::Filter::EmojiFilter, lib: true do
 
     expect(doc.to_html).to match(/^This deserves a <gl-emoji.+>, big time\.\z/)
   end
-
-  it 'uses a custom asset_host context' do
-    ActionController::Base.asset_host = 'https://cdn.example.com'
-
-    doc = filter(':frowning:', asset_host: 'https://this-is-ignored-i-guess?')
-    expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to start_with('https://cdn.example.com')
-  end
-
-  it 'uses a custom asset_host context' do
-    ActionController::Base.asset_host = 'https://cdn.example.com'
-
-    doc = filter("'🎱'", asset_host: 'https://this-is-ignored-i-guess?')
-    expect(doc.css('gl-emoji').first.attr('data-fallback-src')).to start_with('https://cdn.example.com')
-  end
 end

spec/support/matchers/markdown_matchers.rb

@@ -29,7 +29,8 @@ module MarkdownMatchers
       expect(actual).to have_selector('gl-emoji', count: 10)
 
       emoji_element = actual.at_css('gl-emoji')
-      expect(emoji_element['data-fallback-src'].to_s).to start_with('/assets')
+      expect(emoji_element['data-name'].to_s).not_to be_empty
+      expect(emoji_element['data-unicode-version'].to_s).not_to be_empty
     end
   end