Support new server emojis format.

Fixes: #603
zulip · Jun 2, 2017 · f9e1cf9 · f9e1cf9
1 parent 5b291b1
commit f9e1cf9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 1 deletion.
diff --git a/src/html/HtmlNodeTag.js b/src/html/HtmlNodeTag.js
@@ -13,6 +13,7 @@ import HtmlTagStrong from './tags/HtmlTagStrong';
 import HtmlTagItalic from './tags/HtmlTagItalic';
 import HtmlTagDiv from './tags/HtmlTagDiv';
 import HtmlTagBr from './tags/HtmlTagBr';
+import { getEmojiUrl } from '../utils/url';
 
 // br', 'blockquote',
 
@@ -64,7 +65,12 @@ export default ({ auth, attribs, name, cascadingStyle, childrenNodes, onPress }:
     ...stylesFromClassNames(attribs.class, cascadingStyles),
   ];
 
-  const HtmlComponent = specialTags[name] || HtmlTagSpan;
+  let HtmlComponent = specialTags[name] || HtmlTagSpan;
+
+  if (attribs.class && attribs.class.startsWith('emoji emoji-')) {
+    HtmlComponent = HtmlTagImg;
+    attribs.src = getEmojiUrl(attribs.class.split('-').pop());
+  }
 
   return (
     <HtmlComponent

diff --git a/src/utils/__tests__/url-test.js b/src/utils/__tests__/url-test.js
@@ -7,6 +7,7 @@ import {
   isTopicLink,
   isGroupLink,
   isSpecialLink,
+  getEmojiUrl,
   getNarrowFromLink,
   getMessageIdFromLink,
   fixRealmUrl,
@@ -156,6 +157,13 @@ describe('isSpecialLink', () => {
   });
 });
 
+describe('getEmojiUrl', () => {
+  test('when unicode is passed, output relative link on server', () => {
+    const url = getEmojiUrl('1f680');
+    expect(url).toBe('/static/generated/emoji/images/emoji/unicode/1f680.png');
+  });
+});
+
 describe('getNarrowFromLink', () => {
   const users = [
     { email: 'abc@example.com', id: 1 },

diff --git a/src/utils/url.js b/src/utils/url.js
@@ -35,6 +35,9 @@ export const isStreamLink = (url: string, realm: string): boolean =>
 export const isSpecialLink = (url: string, realm: string): boolean =>
   isUrlInAppLink(url, realm) && url.includes('is');
 
+export const getEmojiUrl = (unicode: string): string =>
+  `/static/generated/emoji/images/emoji/unicode/${unicode}.png`;
+
 export const getNarrowFromLink = (url: string, realm: string, users: []): [] => {
   const paths = url.split(realm).pop().split('/');
   if (isGroupLink(url, realm)) {