Update quotes to render emoji just like normal messages

js/views/conversation_view.js

@@ -1101,11 +1101,7 @@
       message.quotedMessage = this.quotedMessage;
       this.quoteHolder = message;
 
-      const props = Object.assign({}, message.getPropsForQuote(), {
-        onClose: () => {
-          this.setQuoteMessage(null);
-        },
-      });
+      const props = message.getPropsForQuote();
 
       this.listenTo(message, 'scroll-to-message', this.scrollToMessage);
 
@@ -1117,7 +1113,12 @@
       this.quoteView = new Whisper.ReactWrapperView({
         className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
-        props,
+        props: Object.assign({}, props, {
+          text: props.text ? window.emoji.signalReplace(props.text) : null,
+          onClose: () => {
+            this.setQuoteMessage(null);
+          },
+        }),
       });
 
       const selector = storage.get('theme-setting') === 'ios'

js/views/message_view.js

@@ -405,7 +405,9 @@
       this.quoteView = new Whisper.ReactWrapperView({
         className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
-        props,
+        props: Object.assign({}, props, {
+          text: props.text ? window.emoji.signalReplace(props.text) : null,
+        }),
       });
       this.$('.inner-bubble').prepend(this.quoteView.el);
     },

ts/components/conversation/Quote.md

@@ -34,6 +34,39 @@ const View = Whisper.MessageView;
 </util.ConversationContext>
 ```
 
+#### With emoji
+
+```jsx
+const outgoing = new Whisper.Message({
+  type: 'outgoing',
+  body: 'About 🔥six🔥',
+  sent_at: Date.now() - 18000000,
+  quote: {
+    text: 'How many 🔥ferrets🔥 do you have? ',
+    author: '+12025550011',
+    id: Date.now() - 1000,
+  },
+});
+const incoming = new Whisper.Message(Object.assign({}, outgoing.attributes, {
+  source: '+12025550011',
+  type: 'incoming',
+  quote: Object.assign({}, outgoing.attributes.quote, {
+    author: '+12025550005',
+  }),
+}));
+const View = Whisper.MessageView;
+<util.ConversationContext theme={util.theme}>
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: incoming }}
+  />
+  <util.BackboneWrapper
+    View={View}
+    options={{ model: outgoing }}
+  />
+</util.ConversationContext>
+```
+
 #### Replies to you or yourself
 
 ```jsx

ts/components/conversation/Quote.tsx

@@ -113,7 +113,7 @@ export class Quote extends React.Component<Props, {}> {
     const { i18n, text, attachments } = this.props;
 
     if (text) {
-      return <div className="text">{text}</div>;
+      return <div className="text" dangerouslySetInnerHTML={{ __html: text}} />;
     }
 
     if (!attachments || attachments.length === 0) {

ts/styleguide/StyleGuideUtil.ts

@@ -206,3 +206,11 @@ parent.textsecure.storage.user.getNumber = () => ourNumber;
 // Telling Lodash to relinquish _ for use by underscore
 // @ts-ignore
 _.noConflict();
+
+parent.emoji.signalReplace = (html: string): string => {
+  return html.replace(
+    /🔥/g,
+    '<img src="node_modules/emoji-datasource-apple/img/apple/64/1f525.png"' +
+      'class="emoji" data-codepoints="1f525" title=":fire:">'
+  );
+};