Move to react for newlines, emoji, and links in message body

js/signal.js

@@ -23,6 +23,7 @@ const { LightboxGallery } = require('../ts/components/LightboxGallery');
 const {
   MediaGallery,
 } = require('../ts/components/conversation/media-gallery/MediaGallery');
+const { MessageBody } = require('../ts/components/conversation/MessageBody');
 const { Quote } = require('../ts/components/conversation/Quote');
 
 // Migrations
@@ -58,6 +59,7 @@ exports.setup = (options = {}) => {
     Lightbox,
     LightboxGallery,
     MediaGallery,
+    MessageBody,
     Types: {
       Message: MediaGalleryMessage,
     },

js/views/conversation_list_item_view.js

@@ -55,12 +55,14 @@
     },
 
     render: function() {
+      const lastMessage = this.model.get('lastMessage');
+
       this.$el.html(
         Mustache.render(
           _.result(this, 'template', ''),
           {
             title: this.model.getTitle(),
-            last_message: this.model.get('lastMessage'),
+            last_message: Boolean(lastMessage),
             last_message_timestamp: this.model.get('timestamp'),
             number: this.model.getNumber(),
             avatar: this.model.getAvatar(),
@@ -74,7 +76,23 @@
       this.timeStampView.update();
 
       emoji_util.parse(this.$('.name'));
-      emoji_util.parse(this.$('.last-message'));
+
+      if (lastMessage) {
+        if (this.bodyView) {
+          this.bodyView.remove();
+          this.bodyView = null;
+        }
+        this.bodyView = new Whisper.ReactWrapperView({
+          className: 'body-wrapper',
+          Component: window.Signal.Components.MessageBody,
+          props: {
+            text: lastMessage,
+            disableJumbomoji: true,
+            disableLinks: true,
+          },
+        });
+        this.$('.last-message').append(this.bodyView.el);
+      }
 
       var unread = this.model.get('unreadCount');
       if (unread > 0) {

js/views/conversation_view.js

@@ -1293,7 +1293,7 @@
         className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
         props: Object.assign({}, props, {
-          text: props.text ? window.emoji.signalReplace(props.text) : null,
+          text: props.text,
           onClose: () => {
             this.setQuoteMessage(null);
           },

js/views/message_view.js

@@ -19,8 +19,6 @@
 
   window.Whisper = window.Whisper || {};
 
-  const URL_REGEX = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[-A-Z0-9\u00A0-\uD7FF\uE000-\uFDCF\uFDF0-\uFFFD+\u0026\u2019@#/%?=()~_|!:,.;]*[-A-Z0-9+\u0026@#/%=~()_|])/gi;
-
   const ErrorIconView = Whisper.View.extend({
     templateName: 'error-icon',
     className: 'error-icon-container',
@@ -440,7 +438,7 @@
         className: 'quote-wrapper',
         Component: window.Signal.Components.Quote,
         props: Object.assign({}, props, {
-          text: props.text ? window.emoji.signalReplace(props.text) : null,
+          text: props.text,
         }),
       });
       this.$('.inner-bubble').prepend(this.quoteView.el);
@@ -566,11 +564,13 @@
       const hasAttachments = attachments && attachments.length > 0;
       const hasBody = this.hasTextContents();
 
+      const messageBody = this.model.get('body');
+
       this.$el.html(
         Mustache.render(
           _.result(this, 'template', ''),
           {
-            message: this.model.get('body'),
+            message: Boolean(messageBody),
             hasBody,
             timestamp: this.model.get('sent_at'),
             sender: (contact && contact.getTitle()) || '',
@@ -589,17 +589,19 @@
 
       this.renderControl();
 
-      const body = this.$('.body');
-
-      emoji_util.parse(body);
-
-      if (body.length > 0) {
-        const escapedBody = body.html();
-        body.html(
-          escapedBody
-            .replace(/\n/g, '<br>')
-            .replace(URL_REGEX, "$1<a href='$2' target='_blank'>$2</a>")
-        );
+      if (messageBody) {
+        if (this.bodyView) {
+          this.bodyView.remove();
+          this.bodyView = null;
+        }
+        this.bodyView = new Whisper.ReactWrapperView({
+          className: 'body-wrapper',
+          Component: window.Signal.Components.MessageBody,
+          props: {
+            text: messageBody,
+          },
+        });
+        this.$('.body').append(this.bodyView.el);
       }
 
       this.renderSent();