Parse user mentions client side

(imported from commit b2919912792b8a02afad45f48e1c8df4783b93a9)

static/js/echo.js

@@ -15,9 +15,7 @@ var bugdown_re = [
                     /[^\s]*(?:twitter|youtube).com\/[^\s]*/,
                     // Gravatars are inlined as well
                     /!avatar\([^)]+\)/,
-                    /!gravatar\([^)]+\)/,
+                    /!gravatar\([^)]+\)/
-                    // User mentions
-                    /\s+@\*\*[^\*]+\*\*/m
                   ];
 
 exports.contains_bugdown = function contains_bugdown(content) {
@@ -227,7 +225,6 @@ function escape(html, encode) {
     .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
 }
 
@@ -243,6 +240,16 @@ function handleEmoji(emoji_name) {
     }
 }
 
+function handleUserMentions(username) {
+    if (people_by_name_dict.get(username)) {
+        var person = people_by_name_dict.get(username);
+        return '<span class="user-mention" data-user-email="' + person.email + '">' +
+                '@' + person.full_name + '</span>';
+    } else {
+        return undefined;
+    }
+}
+
 $(function () {
     function disable_markdown_regex(rules, name) {
         rules[name] = {exec: function (_) {
@@ -279,6 +286,8 @@ $(function () {
     marked.InlineLexer.rules.zulip.strong = /^\*\*([\s\S]+?)\*\*(?!\*)/;
     disable_markdown_regex(marked.InlineLexer.rules.zulip, 'em');
     disable_markdown_regex(marked.InlineLexer.rules.zulip, 'del');
+    // Disable autolink as (a) it is not used in our backend and (b) it interferes with @mentions
+    disable_markdown_regex(marked.InlineLexer.rules.zulip, 'autolink');
 
     marked.setOptions({
         gfm: true,
@@ -289,8 +298,8 @@ $(function () {
         smartLists: true,
         smartypants: false,
         zulip: true,
-        emoji: true,
         emojiHandler: handleEmoji,
+        userMentionHandler: handleUserMentions,
         renderer: r
     });
 

tools/jslint/check-all.js

@@ -47,7 +47,7 @@ var globals =
     // zulip.js
     + ' all_msg_list home_msg_list narrowed_msg_list current_msg_list get_updates_params'
     + ' add_messages'
-    + ' people_dict realm_people_dict'
+    + ' people_dict people_by_name_dict realm_people_dict'
     + ' keep_pointer_in_view unread_messages_read_in_narrow'
     + ' respond_to_message recenter_view last_viewport_movement_direction'
     + ' scroll_to_selected get_private_message_recipient'

zerver/tests/frontend/node/echo.js

@@ -1,7 +1,9 @@
+/*global Dict */
 var assert = require('assert');
 add_dependencies({
     _: 'third/underscore/underscore.js',
-    marked: 'third/marked/lib/marked.js'
+    marked: 'third/marked/lib/marked.js',
+    Dict: 'js/dict.js'
 });
 
 set_global('$', function (obj) {
@@ -18,6 +20,8 @@ set_global('emoji', {
   emojis_by_name: {emoji: 'some/url/here/emoji.png'}
 });
 
+set_global('people_by_name_dict', Dict.from({'Cordelia Lear': {full_name: 'Cordelia Lear', email: 'cordelia@zulip.com'}}));
+
 var echo = require('js/echo.js');
 
 (function test_bugdown_detection() {
@@ -34,7 +38,10 @@ var echo = require('js/echo.js');
                      "No user mention @what there",
                      "We like to code\n~~~\ndef code():\n    we = \"like to do\"\n~~~",
                      "This is a\nmultiline :emoji: here\n message",
-                     "This is an :emoji: message"
+                     "This is an :emoji: message",
+                     "User Mention @**leo**",
+                     "User Mention @**leo f**",
+                     "User Mention @**leo with some name**"
                     ];
 
     var markup = [
@@ -45,9 +52,6 @@ var echo = require('js/echo.js');
                    "https://zulip.com/image.jpg too",
                    "Contains a zulip.com/foo.jpeg file",
                    "Contains a https://zulip.com/image.png file",
-                   "User Mention @**leo**",
-                   "User Mention @**leo f**",
-                   "User Mention @**leo with some name**",
                    "twitter url https://twitter.com/jacobian/status/407886996565016579",
                    "https://twitter.com/jacobian/status/407886996565016579",
                    "then https://twitter.com/jacobian/status/407886996565016579",
@@ -81,8 +85,10 @@ var echo = require('js/echo.js');
      expected: '<p>1. an</p>\n<p>2. ordered </p>\n<p>3. list</p>'},
     {input: '\n~~~quote\nquote this for me\n~~~\nthanks\n',
      expected: '<blockquote><p>quote this for me</p></blockquote><p>thanks</p>'},
-     {input: 'This is an :emoji: message',
+    {input: 'This is a @**Cordelia Lear** mention',
-      expected: '<p>This is an <img alt=":emoji:" class="emoji" src="some/url/here/emoji.png" title=":emoji:"> message</p>'}
+     expected: '<p>This is a <span class="user-mention" data-user-email="cordelia@zulip.com">@Cordelia Lear</span> mention</p>'},
+    {input: 'This is an :emoji: message',
+     expected: '<p>This is an <img alt=":emoji:" class="emoji" src="some/url/here/emoji.png" title=":emoji:"> message</p>'}
   ];
 
   test_cases.forEach(function (test_case) {