Commit f8fe9f10 authored by Rémy Coutable's avatar Rémy Coutable

Merge branch '22591-Convert-UTF-8-Emoji-to-Gitlab-emoji' into 'master'

Convert unicode emojis to images.

## Why was this MR needed?

For better cross platform interoperability with emojis.

Closes #22591

See merge request !6829
parents 8776d9a3 ae95118a
...@@ -38,6 +38,7 @@ v 8.13.0 (unreleased) ...@@ -38,6 +38,7 @@ v 8.13.0 (unreleased)
- API: Ability to retrieve version information (Robert Schilling) - API: Ability to retrieve version information (Robert Schilling)
- Fix permission for setting an issue's due date - Fix permission for setting an issue's due date
- API: Multi-file commit !6096 (mahcsig) - API: Multi-file commit !6096 (mahcsig)
- Unicode emoji are now converted to images
- Revert "Label list shows all issues (opened or closed) with that label" - Revert "Label list shows all issues (opened or closed) with that label"
- Expose expires_at field when sharing project on API - Expose expires_at field when sharing project on API
- Fix VueJS template tags being rendered in code comments - Fix VueJS template tags being rendered in code comments
......
module Banzai module Banzai
module Filter module Filter
# HTML filter that replaces :emoji: with images. # HTML filter that replaces :emoji: and unicode with images.
# #
# Based on HTML::Pipeline::EmojiFilter # Based on HTML::Pipeline::EmojiFilter
# #
...@@ -13,16 +13,17 @@ module Banzai ...@@ -13,16 +13,17 @@ module Banzai
def call def call
search_text_nodes(doc).each do |node| search_text_nodes(doc).each do |node|
content = node.to_html content = node.to_html
next unless content.include?(':')
next if has_ancestor?(node, IGNORED_ANCESTOR_TAGS) next if has_ancestor?(node, IGNORED_ANCESTOR_TAGS)
html = emoji_image_filter(content) next unless content.include?(':') || node.text.match(emoji_unicode_pattern)
html = emoji_name_image_filter(content)
html = emoji_unicode_image_filter(html)
next if html == content next if html == content
node.replace(html) node.replace(html)
end end
doc doc
end end
...@@ -31,18 +32,38 @@ module Banzai ...@@ -31,18 +32,38 @@ module Banzai
# text - String text to replace :emoji: in. # text - String text to replace :emoji: in.
# #
# Returns a String with :emoji: replaced with images. # Returns a String with :emoji: replaced with images.
def emoji_image_filter(text) def emoji_name_image_filter(text)
text.gsub(emoji_pattern) do |match| text.gsub(emoji_pattern) do |match|
name = $1 name = $1
"<img class='emoji' title=':#{name}:' alt=':#{name}:' src='#{emoji_url(name)}' height='20' width='20' align='absmiddle' />" emoji_image_tag(name, emoji_url(name))
end end
end end
# Replace unicode emoji with corresponding images if they exist.
#
# text - String text to replace unicode emoji in.
#
# Returns a String with unicode emoji replaced with images.
def emoji_unicode_image_filter(text)
text.gsub(emoji_unicode_pattern) do |moji|
emoji_image_tag(Gitlab::Emoji.emojis_by_moji[moji]['name'], emoji_unicode_url(moji))
end
end
def emoji_image_tag(emoji_name, emoji_url)
"<img class='emoji' title=':#{emoji_name}:' alt=':#{emoji_name}:' src='#{emoji_url}' height='20' width='20' align='absmiddle' />"
end
# Build a regexp that matches all valid :emoji: names. # Build a regexp that matches all valid :emoji: names.
def self.emoji_pattern def self.emoji_pattern
@emoji_pattern ||= /:(#{Gitlab::Emoji.emojis_names.map { |name| Regexp.escape(name) }.join('|')}):/ @emoji_pattern ||= /:(#{Gitlab::Emoji.emojis_names.map { |name| Regexp.escape(name) }.join('|')}):/
end end
# Build a regexp that matches all valid unicode emojis names.
def self.emoji_unicode_pattern
@emoji_unicode_pattern ||= /(#{Gitlab::Emoji.emojis_unicodes.map { |moji| Regexp.escape(moji) }.join('|')})/
end
private private
def emoji_url(name) def emoji_url(name)
...@@ -60,6 +81,18 @@ module Banzai ...@@ -60,6 +81,18 @@ module Banzai
end end
end end
def emoji_unicode_url(moji)
emoji_unicode_path = emoji_unicode_filename(moji)
if context[:asset_host]
url_to_image(emoji_unicode_path)
elsif context[:asset_root]
File.join(context[:asset_root], url_to_image(emoji_unicode_path))
else
url_to_image(emoji_unicode_path)
end
end
def url_to_image(image) def url_to_image(image)
ActionController::Base.helpers.url_to_image(image) ActionController::Base.helpers.url_to_image(image)
end end
...@@ -71,6 +104,14 @@ module Banzai ...@@ -71,6 +104,14 @@ module Banzai
def emoji_filename(name) def emoji_filename(name)
"#{Gitlab::Emoji.emoji_filename(name)}.png" "#{Gitlab::Emoji.emoji_filename(name)}.png"
end end
def emoji_unicode_pattern
self.class.emoji_unicode_pattern
end
def emoji_unicode_filename(name)
"#{Gitlab::Emoji.emoji_unicode_filename(name)}.png"
end
end end
end end
end end
...@@ -10,12 +10,20 @@ module Gitlab ...@@ -10,12 +10,20 @@ module Gitlab
Gemojione.index.instance_variable_get(:@emoji_by_moji) Gemojione.index.instance_variable_get(:@emoji_by_moji)
end end
def emojis_unicodes
emojis_by_moji.keys
end
def emojis_names def emojis_names
emojis.keys.sort emojis.keys
end end
def emoji_filename(name) def emoji_filename(name)
emojis[name]["unicode"] emojis[name]["unicode"]
end end
def emoji_unicode_filename(moji)
emojis_by_moji[moji]["unicode"]
end
end end
end end
...@@ -12,11 +12,16 @@ describe Banzai::Filter::EmojiFilter, lib: true do ...@@ -12,11 +12,16 @@ describe Banzai::Filter::EmojiFilter, lib: true do
ActionController::Base.asset_host = @original_asset_host ActionController::Base.asset_host = @original_asset_host
end end
it 'replaces supported emoji' do it 'replaces supported name emoji' do
doc = filter('<p>:heart:</p>') doc = filter('<p>:heart:</p>')
expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/2764.png' expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/2764.png'
end end
it 'replaces supported unicode emoji' do
doc = filter('<p>❤️</p>')
expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/2764.png'
end
it 'ignores unsupported emoji' do it 'ignores unsupported emoji' do
exp = act = '<p>:foo:</p>' exp = act = '<p>:foo:</p>'
doc = filter(act) doc = filter(act)
...@@ -28,46 +33,96 @@ describe Banzai::Filter::EmojiFilter, lib: true do ...@@ -28,46 +33,96 @@ describe Banzai::Filter::EmojiFilter, lib: true do
expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/1F44D.png' expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/1F44D.png'
end end
it 'correctly encodes unicode to the URL' do
doc = filter('<p>👍</p>')
expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/1F44D.png'
end
it 'matches at the start of a string' do it 'matches at the start of a string' do
doc = filter(':+1:') doc = filter(':+1:')
expect(doc.css('img').size).to eq 1 expect(doc.css('img').size).to eq 1
end end
it 'unicode matches at the start of a string' do
doc = filter("'👍'")
expect(doc.css('img').size).to eq 1
end
it 'matches at the end of a string' do it 'matches at the end of a string' do
doc = filter('This gets a :-1:') doc = filter('This gets a :-1:')
expect(doc.css('img').size).to eq 1 expect(doc.css('img').size).to eq 1
end end
it 'unicode matches at the end of a string' do
doc = filter('This gets a 👍')
expect(doc.css('img').size).to eq 1
end
it 'matches with adjacent text' do it 'matches with adjacent text' do
doc = filter('+1 (:+1:)') doc = filter('+1 (:+1:)')
expect(doc.css('img').size).to eq 1 expect(doc.css('img').size).to eq 1
end end
it 'unicode matches with adjacent text' do
doc = filter('+1 (👍)')
expect(doc.css('img').size).to eq 1
end
it 'matches multiple emoji in a row' do it 'matches multiple emoji in a row' do
doc = filter(':see_no_evil::hear_no_evil::speak_no_evil:') doc = filter(':see_no_evil::hear_no_evil::speak_no_evil:')
expect(doc.css('img').size).to eq 3 expect(doc.css('img').size).to eq 3
end end
it 'unicode matches multiple emoji in a row' do
doc = filter("'🙈🙉🙊'")
expect(doc.css('img').size).to eq 3
end
it 'mixed matches multiple emoji in a row' do
doc = filter("'🙈:see_no_evil:🙉:hear_no_evil:🙊:speak_no_evil:'")
expect(doc.css('img').size).to eq 6
end
it 'has a title attribute' do it 'has a title attribute' do
doc = filter(':-1:') doc = filter(':-1:')
expect(doc.css('img').first.attr('title')).to eq ':-1:' expect(doc.css('img').first.attr('title')).to eq ':-1:'
end end
it 'unicode has a title attribute' do
doc = filter("'👎'")
expect(doc.css('img').first.attr('title')).to eq ':thumbsdown:'
end
it 'has an alt attribute' do it 'has an alt attribute' do
doc = filter(':-1:') doc = filter(':-1:')
expect(doc.css('img').first.attr('alt')).to eq ':-1:' expect(doc.css('img').first.attr('alt')).to eq ':-1:'
end end
it 'unicode has an alt attribute' do
doc = filter("'👎'")
expect(doc.css('img').first.attr('alt')).to eq ':thumbsdown:'
end
it 'has an align attribute' do it 'has an align attribute' do
doc = filter(':8ball:') doc = filter(':8ball:')
expect(doc.css('img').first.attr('align')).to eq 'absmiddle' expect(doc.css('img').first.attr('align')).to eq 'absmiddle'
end end
it 'unicode has an align attribute' do
doc = filter("'🎱'")
expect(doc.css('img').first.attr('align')).to eq 'absmiddle'
end
it 'has an emoji class' do it 'has an emoji class' do
doc = filter(':cat:') doc = filter(':cat:')
expect(doc.css('img').first.attr('class')).to eq 'emoji' expect(doc.css('img').first.attr('class')).to eq 'emoji'
end end
it 'unicode has an emoji class' do
doc = filter("'🐱'")
expect(doc.css('img').first.attr('class')).to eq 'emoji'
end
it 'has height and width attributes' do it 'has height and width attributes' do
doc = filter(':dog:') doc = filter(':dog:')
img = doc.css('img').first img = doc.css('img').first
...@@ -76,12 +131,26 @@ describe Banzai::Filter::EmojiFilter, lib: true do ...@@ -76,12 +131,26 @@ describe Banzai::Filter::EmojiFilter, lib: true do
expect(img.attr('height')).to eq '20' expect(img.attr('height')).to eq '20'
end end
it 'unicode has height and width attributes' do
doc = filter("'🐶'")
img = doc.css('img').first
expect(img.attr('width')).to eq '20'
expect(img.attr('height')).to eq '20'
end
it 'keeps whitespace intact' do it 'keeps whitespace intact' do
doc = filter('This deserves a :+1:, big time.') doc = filter('This deserves a :+1:, big time.')
expect(doc.to_html).to match(/^This deserves a <img.+>, big time\.\z/) expect(doc.to_html).to match(/^This deserves a <img.+>, big time\.\z/)
end end
it 'unicode keeps whitespace intact' do
doc = filter('This deserves a 🎱, big time.')
expect(doc.to_html).to match(/^This deserves a <img.+>, big time\.\z/)
end
it 'uses a custom asset_root context' do it 'uses a custom asset_root context' do
root = Gitlab.config.gitlab.url + 'gitlab/root' root = Gitlab.config.gitlab.url + 'gitlab/root'
...@@ -95,4 +164,18 @@ describe Banzai::Filter::EmojiFilter, lib: true do ...@@ -95,4 +164,18 @@ describe Banzai::Filter::EmojiFilter, lib: true do
doc = filter(':frowning:', asset_host: 'https://this-is-ignored-i-guess?') doc = filter(':frowning:', asset_host: 'https://this-is-ignored-i-guess?')
expect(doc.css('img').first.attr('src')).to start_with('https://cdn.example.com') expect(doc.css('img').first.attr('src')).to start_with('https://cdn.example.com')
end end
it 'uses a custom asset_root context' do
root = Gitlab.config.gitlab.url + 'gitlab/root'
doc = filter("'🎱'", asset_root: root)
expect(doc.css('img').first.attr('src')).to start_with(root)
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('img').first.attr('src')).to start_with('https://cdn.example.com')
end
end end
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment