emoji: Fix the title and alt text for unicode emojis.

Unicode emojis when rendered should display canonical short name.
Similarly, the alt text should be of the format `:<short_name>:`.
For both of these we currently display the actual unicode symbol.
As some systems don't have the fonts necessary for displaying them
properly, they are rendered as empty square blocks. This commit also
ensures that the markup generated for emoji generated by canonical
name and by an unicode emoji is same.

Fixes: #5555.
This commit is contained in:
Harshit Bansal
2017-06-20 19:22:14 +05:30
committed by Tim Abbott
parent 8c92024fae
commit 4cb8ac100a
6 changed files with 32 additions and 18 deletions

View File

@@ -221,7 +221,7 @@ var bugdown_data = JSON.parse(fs.readFileSync(path.join(__dirname, '../../zerver
{input: 'This is an :poop: message',
expected: '<p>This is an <img alt=":poop:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/1f4a9.png" title=":poop:"> message</p>'},
{input: "\ud83d\udca9",
expected: '<p><img alt="\ud83d\udca9" class="emoji" src="/static/generated/emoji/images/emoji/unicode/1f4a9.png" title="\ud83d\udca9"></p>'},
expected: '<p><img alt=":poop:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/1f4a9.png" title=":poop:"></p>'},
{input: '\u{1f937}',
expected: '<p>\u{1f937}</p>' },
{input: 'This is a realm filter #1234 with text after it',

View File

@@ -118,9 +118,10 @@ function handleUnicodeEmoji(unicode_emoji) {
var hex_value = unicode_emoji.codePointAt(0).toString(16);
if (emoji.emojis_by_unicode.hasOwnProperty(hex_value)) {
var emoji_url = emoji.emojis_by_unicode[hex_value];
return '<img alt="' + unicode_emoji + '"' +
var display_string = ':' + emoji_codes.codepoint_to_name[hex_value] + ':';
return '<img alt="' + display_string + '"' +
' class="emoji" src="' + emoji_url + '"' +
' title="' + unicode_emoji + '">';
' title="' + display_string + '">';
}
return unicode_emoji;
}

View File

@@ -1,2 +1,2 @@
ZULIP_VERSION = "1.6.0+git"
PROVISION_VERSION = '5.11'
PROVISION_VERSION = '5.12'

View File

@@ -273,55 +273,55 @@
{
"name": "unicode_emoji",
"input": "\ud83d\udca9",
"expected_output":"<p><img alt=\"\ud83d\udca9\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\"\ud83d\udca9\"><\/p>",
"expected_output":"<p><img alt=\":poop:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\":poop:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "two_unicode_emoji",
"input": "\ud83d\udca9\ud83d\udca9",
"expected_output":"<p><img alt=\"\ud83d\udca9\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\"\ud83d\udca9\"><img alt=\"\ud83d\udca9\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\"\ud83d\udca9\"><\/p>",
"expected_output":"<p><img alt=\":poop:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\":poop:\"><img alt=\":poop:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\":poop:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "two_unicode_emoji_separated_by_text",
"input": "\ud83d\udca9 word \ud83d\udca9",
"expected_output":"<p><img alt=\"\ud83d\udca9\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\"\ud83d\udca9\"> word <img alt=\"\ud83d\udca9\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\"\ud83d\udca9\"><\/p>",
"expected_output":"<p><img alt=\":poop:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\":poop:\"> word <img alt=\":poop:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f4a9.png\" title=\":poop:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "miscellaneous_symbols_and_pictographs",
"input": "Merry Christmas!!\ud83c\udf84",
"expected_output":"<p>Merry Christmas!!<img alt=\"\ud83c\udf84\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f384.png\" title=\"\ud83c\udf84\"><\/p>",
"expected_output":"<p>Merry Christmas!!<img alt=\":christmas_tree:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f384.png\" title=\":christmas_tree:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "miscellaneous_and_dingbats_emoji",
"input": "\u2693\u2797",
"expected_output":"<p><img alt=\"\u2693\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2693.png\" title=\"\u2693\"><img alt=\"\u2797\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2797.png\" title=\"\u2797\"><\/p>",
"expected_output":"<p><img alt=\":anchor:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2693.png\" title=\":anchor:\"><img alt=\":heavy_division_sign:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2797.png\" title=\":heavy_division_sign:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "supplemental_symbols_and_pictographs",
"input": "I am a robot \ud83e\udd16.",
"expected_output":"<p>I am a robot <img alt=\"\ud83e\udd16\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f916.png\" title=\"\ud83e\udd16\">.<\/p>",
"expected_output":"<p>I am a robot <img alt=\":robot_face:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f916.png\" title=\":robot_face:\">.<\/p>",
"bugdown_matches_marked": true
},
{
"name": "miscellaneous_symbols_and_arrows",
"input": "Black upward arrow \u2b06",
"expected_output":"<p>Black upward arrow <img alt=\"\u2b06\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2b06.png\" title=\"\u2b06\"><\/p>",
"expected_output":"<p>Black upward arrow <img alt=\":arrow_up:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/2b06.png\" title=\":arrow_up:\"><\/p>",
"bugdown_matches_marked": true
},
{
"name": "unicode_emoji_without_space",
"input": "Extra\ud83d\udc7dTerrestrial",
"expected_output":"<p>Extra<img alt=\"\ud83d\udc7d\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\"\ud83d\udc7d\">Terrestrial<\/p>",
"expected_output":"<p>Extra<img alt=\":alien:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\":alien:\">Terrestrial<\/p>",
"bugdown_matches_marked": true
},
{
"name": "unicode_emojis_new_line",
"input": "\ud83d\udc7d\n\ud83d\udc7d",
"expected_output":"<p><img alt=\"\ud83d\udc7d\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\"\ud83d\udc7d\"><br>\n<img alt=\"\ud83d\udc7d\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\"\ud83d\udc7d\"><\/p>",
"expected_output":"<p><img alt=\":alien:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\":alien:\"><br>\n<img alt=\":alien:\" class=\"emoji\" src=\"\/static\/generated\/emoji\/images\/emoji\/unicode\/1f47d.png\" title=\":alien:\"><\/p>",
"bugdown_matches_marked": true
},
{

View File

@@ -700,7 +700,10 @@ class Avatar(markdown.inlinepatterns.Pattern):
path_to_name_to_codepoint = os.path.join(settings.STATIC_ROOT, "generated", "emoji", "name_to_codepoint.json")
name_to_codepoint = ujson.load(open(path_to_name_to_codepoint))
unicode_emoji_list = set([name_to_codepoint[name] for name in name_to_codepoint])
path_to_codepoint_to_name = os.path.join(settings.STATIC_ROOT, "generated", "emoji", "codepoint_to_name.json")
with open(path_to_codepoint_to_name) as codepoint_to_name_file:
codepoint_to_name = ujson.load(codepoint_to_name_file)
# All of our emojis(non ZWJ sequences) belong to one of these unicode blocks:
# \U0001f100-\U0001f1ff - Enclosed Alphanumeric Supplement
@@ -780,8 +783,9 @@ class UnicodeEmoji(markdown.inlinepatterns.Pattern):
# type: (Match[Text]) -> Optional[Element]
orig_syntax = match.group('syntax')
codepoint = unicode_emoji_to_codepoint(orig_syntax)
if codepoint in unicode_emoji_list:
return make_emoji(codepoint, orig_syntax)
if codepoint in codepoint_to_name:
display_string = ':' + codepoint_to_name[codepoint] + ':'
return make_emoji(codepoint, display_string)
else:
return None

View File

@@ -528,11 +528,20 @@ class BugdownTest(ZulipTestCase):
# type: () -> None
msg = u'\u2615' # ☕
converted = bugdown_convert(msg)
self.assertEqual(converted, u'<p><img alt="\u2615" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title="\u2615"></p>')
self.assertEqual(converted, u'<p><img alt=":coffee:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title=":coffee:"></p>')
msg = u'\u2615\u2615' # ☕☕
converted = bugdown_convert(msg)
self.assertEqual(converted, u'<p><img alt="\u2615" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title="\u2615"><img alt="\u2615" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title="\u2615"></p>')
self.assertEqual(converted, u'<p><img alt=":coffee:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title=":coffee:"><img alt=":coffee:" class="emoji" src="/static/generated/emoji/images/emoji/unicode/2615.png" title=":coffee:"></p>')
def test_same_markup(self):
# type: () -> None
msg = u'\u2615' # ☕
unicode_converted = bugdown_convert(msg)
msg = u':coffee:' # ☕☕
converted = bugdown_convert(msg)
self.assertEqual(converted, unicode_converted)
def test_realm_patterns(self):
# type: () -> None