From 21713cbce798650d03b88ec87338826c7acbb916 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@signal.org>
Date: Fri, 20 Apr 2018 15:17:08 -0700
Subject: [PATCH] Update quotes to render emoji just like normal messages

---
 js/views/conversation_view.js        | 13 ++++++-----
 js/views/message_view.js             |  4 +++-
 ts/components/conversation/Quote.md  | 33 ++++++++++++++++++++++++++++
 ts/components/conversation/Quote.tsx |  2 +-
 ts/styleguide/StyleGuideUtil.ts      |  8 +++++++
 5 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index dd6b15d14..e3b203971 100644
--- a/js/views/conversation_view.js
+++ b/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'
diff --git a/js/views/message_view.js b/js/views/message_view.js
index 1d1864597..12b278f2f 100644
--- a/js/views/message_view.js
+++ b/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);
     },
diff --git a/ts/components/conversation/Quote.md b/ts/components/conversation/Quote.md
index e97482679..3caefe9fa 100644
--- a/ts/components/conversation/Quote.md
+++ b/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
diff --git a/ts/components/conversation/Quote.tsx b/ts/components/conversation/Quote.tsx
index 22342665b..316546804 100644
--- a/ts/components/conversation/Quote.tsx
+++ b/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) {
diff --git a/ts/styleguide/StyleGuideUtil.ts b/ts/styleguide/StyleGuideUtil.ts
index f49cf62cd..83ad6c7b7 100644
--- a/ts/styleguide/StyleGuideUtil.ts
+++ b/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:">'
+  );
+};