Add support for !avatar syntax in echo.js.

frontend_tests/node_tests/echo.js

@@ -62,7 +62,8 @@ var bugdown_data = JSON.parse(fs.readFileSync(path.join(__dirname, '../../zerver
                      "This is an :emoji: message",
                      "User Mention @**leo**",
                      "User Mention @**leo f**",
-                     "User Mention @**leo with some name**"
+                     "User Mention @**leo with some name**",
+                     "And an avatar !avatar(leo@zulip.com) is here"
                     ];
 
     var markup = [
@@ -78,8 +79,7 @@ var bugdown_data = JSON.parse(fs.readFileSync(path.join(__dirname, '../../zerver
                    "then https://twitter.com/jacobian/status/407886996565016579",
                    "twitter url http://twitter.com/jacobian/status/407886996565016579",
                    "youtube url https://www.youtube.com/watch?v=HHZ8iqswiCw&feature=youtu.be&a",
-                   "This contains !gravatar(leo@zulip.com)",
-                   "And an avatar !avatar(leo@zulip.com) is here"
+                   "This contains !gravatar(leo@zulip.com)"
                  ];
 
     no_markup.forEach(function (content) {
@@ -131,7 +131,9 @@ var bugdown_data = JSON.parse(fs.readFileSync(path.join(__dirname, '../../zerver
     {input: 'This is a realm filter #1234 with text after it',
      expected: '<p>This is a realm filter <a href="https://trac.zulip.net/ticket/1234" target="_blank" title="https://trac.zulip.net/ticket/1234">#1234</a> with text after it</p>'},
     {input: 'This is a realm filter with ZGROUP_123:45 groups',
-     expected: '<p>This is a realm filter with <a href="https://zone_45.zulip.net/ticket/123" target="_blank" title="https://zone_45.zulip.net/ticket/123">ZGROUP_123:45</a> groups</p>'}
+     expected: '<p>This is a realm filter with <a href="https://zone_45.zulip.net/ticket/123" target="_blank" title="https://zone_45.zulip.net/ticket/123">ZGROUP_123:45</a> groups</p>'},
+    {input: 'This is an !avatar(cordelia@zulip.com) of Cordelia Lear',
+     expected: '<p>This is an <img alt="cordelia@zulip.com" class="message_body_gravatar" src="/avatar/cordelia@zulip.com?s=30" title="cordelia@zulip.com"> of Cordelia Lear</p>'}
   ];
 
   test_cases.forEach(function (test_case) {

static/js/echo.js

@@ -20,7 +20,6 @@ var bugdown_re = [
                     // Twitter and youtube links are given previews
                     /[^\s]*(?:twitter|youtube).com\/[^\s]*/,
                     // Gravatars are inlined as well
-                    /!avatar\([^)]+\)/,
                     /!gravatar\([^)]+\)/
                   ];
 
@@ -324,6 +323,12 @@ function handleEmoji(emoji_name) {
     }
 }
 
+function handleAvatar(email) {
+    return '<img alt="' + email + '"' +
+           ' class="message_body_gravatar" src="/avatar/' + email + '?s=30"' +
+           ' title="' + email + '">';
+}
+
 function handleUserMentions(username) {
     var person = people.get_by_name(username);
     if (person !== undefined) {
@@ -482,6 +487,7 @@ $(function () {
         smartypants: false,
         zulip: true,
         emojiHandler: handleEmoji,
+        avatarHandler: handleAvatar,
         unicodeEmojiHandler: handleUnicodeEmoji,
         userMentionHandler: handleUserMentions,
         realmFilterHandler: handleRealmFilter,

static/third/marked/lib/marked.js

@@ -470,6 +470,7 @@ var inline = {
   emoji: noop,
   unicodeemoji: noop,
   usermention: noop,
+  avatar: noop,
   realm_filters: [],
   text: /^[\s\S]+?(?=[\\<!\[_*`]| {2,}\n|$)/
 };
@@ -528,6 +529,7 @@ inline.zulip = merge({}, inline.breaks, {
   emoji: /^:([A-Za-z0-9_\-\+]+?):/,
   unicodeemoji: /^(\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff])/,
   usermention: /^(@\*\*([^\*]+)?\*\*)/m,
+  avatar: /^!avatar\(([^)]+)\)/,
   realm_filters: [],
   text: replace(inline.breaks.text)
     ('|', '|(\ud83c[\udf00-\udfff]|\ud83d[\udc00-\ude4f]|\ud83d[\ude80-\udeff])|')
@@ -752,6 +754,13 @@ InlineLexer.prototype.output = function(src) {
       continue;
     }
 
+    // user avatar
+    if (cap = this.rules.avatar.exec(src)) {
+      src = src.substring(cap[0].length);
+      out += this.userAvatar(cap[1]);
+      continue;
+    }
+
     // text
     if (cap = this.rules.text.exec(src)) {
       src = src.substring(cap[0].length);
@@ -796,6 +805,13 @@ InlineLexer.prototype.unicodeEmoji = function (name) {
   return this.options.unicodeEmojiHandler(name);
 };
 
+InlineLexer.prototype.userAvatar = function (email) {
+  if (typeof this.options.avatarHandler !== 'function')
+    return '!avatar(' + email + ')';
+  return this.options.avatarHandler(email);
+};
+
+
 InlineLexer.prototype.realm_filter = function (filter, matches, orig) {
   if (typeof this.options.realmFilterHandler !== 'function')
     return;
@@ -1369,6 +1385,7 @@ marked.defaults = {
   gfm: true,
   emoji: false,
   unicodeemoji: false,
+  avatar: false,
   tables: true,
   breaks: false,
   pedantic: false,

zerver/fixtures/bugdown-data.json

@@ -250,7 +250,7 @@
       "name": "avatar",
       "input": "!avatar(username@example.com)",
       "expected_output": "<p><img alt=\"username@example.com\" class=\"message_body_gravatar\" src=\"/avatar/username@example.com?s=30\" title=\"username@example.com\"></p>",
-      "bugdown_matches_marked": false
+      "bugdown_matches_marked": true
     },
     {
       "name": "gravatar",