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

This commit is contained in:
Scott Nonnenberg 2018-05-14 13:52:10 -07:00
parent 721935b0c8
commit 4e5c8965ff
15 changed files with 400 additions and 29 deletions

View file

@ -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,
},

View file

@ -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) {

View file

@ -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);
},

View file

@ -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();