Proper thread quote, clear message box on send, and other nice things to have (#14049)

* Add a .message-body--unstyled style for sidebar item's last message and thread quotes

* Remove broken tooltip from thread quotes

* Memoize normalizeThreadMessage helper

* Clear messageBox input on send

* Update join button in messageBox

* Add word wrap in thread

* Avoid overflow from embedded attachment

* Fix thread reply counter

* Update RoomHistoryManager.js

app/oembed/client/oembedAudioWidget.html

@@ -5,7 +5,7 @@
 				<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
 			{{else}}
 				<span class="collapse-switch icon-down-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span>
-				<blockquote class="background-transparent-darker-before">
+				<blockquote class="message-oembed background-transparent-darker-before">
 					<audio controls>
 						<source src="{{url}}" rel="noopener noreferrer" type="{{headers.contentType}}">
 						Your browser does not support the audio element.

app/oembed/client/oembedFrameWidget.html

@@ -1,6 +1,6 @@
 <template name="oembedFrameWidget">
 {{#if parsedUrl}}
-	<blockquote class="background-transparent-darker-before">
+	<blockquote class="message-oembed background-transparent-darker-before">
 		{{#if meta.oembedProviderName}}
 			{{#if meta.oembedProviderUrl}}
 				<a href="{{meta.oembedProviderUrl}}" rel="noopener noreferrer" target="_blank" style="color: #9e9ea6">{{meta.oembedProviderName}}</a>

app/oembed/client/oembedUrlWidget.html

@@ -1,6 +1,6 @@
 <template name="oembedUrlWidget">
 	{{#if show}}
-		<blockquote class="background-transparent-darker-before">
+		<blockquote class="message-oembed background-transparent-darker-before">
 			<div style="{{#if image}}min-height: 80px;{{/if}} padding: 10px 3px;">
 				{{#if image}}
 					{{#if meta.ogImageUserGenerated}}

app/oembed/client/oembedVideoWidget.html

@@ -1,6 +1,6 @@
 <template name="oembedVideoWidget">
 {{#if parsedUrl}}
-	<blockquote class="background-transparent-darker-before">
+	<blockquote class="message-oembed background-transparent-darker-before">
 		<div><a href="{{url}}" rel="noopener noreferrer" target="_blank">{{parsedUrl.host}}</a></div>
 		<span>{{title}}</span>
 		{{#if collapsed}}

app/oembed/client/oembedYoutubeWidget.html

@@ -1,6 +1,6 @@
 <template name="oembedYoutubeWidget">
 	{{#if parsedUrl}}
-		<blockquote class="background-transparent-darker-before">
+		<blockquote class="message-oembed background-transparent-darker-before">
 			<a href="{{url}}" rel="noopener noreferrer" target="_blank">{{parsedUrl.host}}</a>
 			{{#if collapsed}}
 				<span class="collapse-switch icon-right-dir" data-index="{{index}}" data-collapsed="{{collapsed}}"></span><br>

app/spotify/lib/client/oembedSpotifyWidget.html

@@ -1,6 +1,6 @@
 <template name="oembedSpotifyWidget">
 	{{#if parsedUrl}}
-		<blockquote class="background-transparent-darker-before">
+		<blockquote class="message-oembed background-transparent-darker-before">
 			<a href="https://www.spotify.com" rel="noopener noreferrer" style="color: #9e9ea6">Spotify</a><br/>
 			{{#if match meta.ogAudio "spotify:artist:\\S+"}}
 				<a rel="noopener noreferrer" href="{{url}}">{{{meta.ogTitle}}}</a>

app/theme/client/imports/components/message-box.css

@@ -262,7 +262,7 @@
 	&__join-button {
 		flex: 0;
 
-		margin: 0 0.25rem;
+		margin: -1rem 0.15rem;
 	}
 }
 

app/theme/client/imports/components/messages.css

@@ -101,6 +101,47 @@
 	}
 }
 
+.message-body {
+	&--unstyled {
+		font: inherit;
+		line-height: initial;
+
+		& .emojione,
+		& .emoji {
+			display: inline-block !important;
+
+			width: 1em !important;
+			min-width: 1em;
+			height: 1em !important;
+			min-height: 1em;
+		}
+
+		& * {
+			display: inline !important;
+
+			padding: unset !important;
+
+			white-space: unset !important;
+
+			color: inherit !important;
+
+			background-color: unset !important;
+
+			font-family: inherit !important;
+
+			font-weight: unset !important;
+		}
+
+		& a {
+			pointer-events: none;
+		}
+	}
+}
+
+.message-oembed {
+	overflow: hidden;
+}
+
 .messages-box .rc-popover__list {
 	padding: 0;
 }

app/theme/client/imports/components/sidebar/sidebar-item.css

@@ -270,36 +270,6 @@
 
 		font-size: 12px;
 		line-height: normal;
-
-		& .emojione,
-		& .emoji {
-			display: inline-block !important;
-
-			width: 13px !important;
-			min-width: 13px;
-			height: 13px !important;
-			min-height: 13px;
-		}
-
-		& * {
-			display: inline !important;
-
-			padding: unset !important;
-
-			white-space: unset !important;
-
-			color: inherit !important;
-
-			background-color: unset !important;
-
-			font-family: inherit !important;
-
-			font-weight: unset !important;
-		}
-
-		& a {
-			pointer-events: none;
-		}
 	}
 
 	&__time {

app/threads/client/threads.css

@@ -20,6 +20,8 @@
 
 .thread-list {
 	overflow: auto;
+
+	word-wrap: break-word;
 	flex-shrink: 1;
 }
 
@@ -42,10 +44,6 @@
 	cursor: pointer;
 
 	color: var(--rc-color-link-active);
-
-	font-style: normal;
-
-	line-height: initial;
 }
 
 .contextual-bar__content.thread,

app/threads/server/functions.js

@@ -1,7 +1,7 @@
 import { Messages, Subscriptions } from '../../models/server';
 
-export const reply = ({ tmid }, { rid, ts, u }, parentMessage) => {
-	if (!tmid) {
+export const reply = ({ tmid }, { rid, ts, u, editedAt }, parentMessage) => {
+	if (!tmid || editedAt) {
 		return false;
 	}
 

app/ui-message/client/message.html

@@ -67,7 +67,12 @@
 				<span>******</span>
 			{{else}}
 				{{#if and settings.showreply msg.tmid}}
-					<p class="thread-replied"> {{_ "Replied_on"}}: <q aria-label="Open_thread" class="rc-tooltip thread-quote js-open-thread">{{parentMessage}}</q> </p>
+					<p class="thread-replied">
+						{{_ "Replied_on"}}:
+						<q role="button" aria-label="{{_ "Open_thread"}}" class="thread-quote js-open-thread">
+							<span class="message-body--unstyled">{{{parentMessage}}}</span>
+						</q>
+					</p>
 					<blockquote>
 						{{{body}}}
 					</blockquote>

app/ui-message/client/messageBox.html

@@ -39,7 +39,7 @@
 								{{/if}}
 							</span>
 						{{else}}
-							<button class="js-join rc-button rc-button--primary rc-button--small rc-message-box__join-button">
+							<button class="js-join rc-button rc-button--primary rc-message-box__join-button">
 								{{_ "join"}}
 							</button>
 						{{/if}}

app/ui-message/client/messageBox.js

@@ -42,6 +42,20 @@ Template.messageBox.onCreated(function() {
 	this.replyMessageData = new ReactiveVar();
 	this.isMicrophoneDenied = new ReactiveVar(true);
 	this.sendIconDisabled = new ReactiveVar(false);
+
+	this.send = (event) => {
+		if (!this.input) {
+			return;
+		}
+
+		const { rid, tmid, onSend } = this.data;
+		const { value } = this.input;
+		this.input.value = '';
+		onSend && onSend.call(this.data, event, { rid, tmid, value }, () => {
+			this.input.updateAutogrow();
+			this.input.focus();
+		});
+	};
 });
 
 Template.messageBox.onRendered(function() {
@@ -222,7 +236,7 @@ const insertNewLine = (input) => {
 };
 
 const handleSubmit = (event, instance) => {
-	const { data: { rid, tmid, onSend }, input } = instance;
+	const { input } = instance;
 	const { which: keyCode } = event;
 
 	const isSubmitKey = keyCode === keyCodes.CARRIAGE_RETURN || keyCode === keyCodes.NEW_LINE;
@@ -238,10 +252,7 @@ const handleSubmit = (event, instance) => {
 	const isSending = (sendOnEnterActive && !withModifier) || (!sendOnEnterActive && withModifier);
 
 	if (isSending) {
-		onSend && onSend.call(this, event, { rid, tmid, value: input.value }, () => {
-			input.updateAutogrow();
-			input.focus();
-		});
+		instance.send(event);
 		return true;
 	}
 
@@ -369,12 +380,7 @@ Template.messageBox.events({
 		onValueChanged && onValueChanged.call(this, event, { rid, tmid });
 	},
 	async 'click .js-send'(event, instance) {
-		const { input } = instance;
-		const { rid, tmid, onSend } = this;
-		onSend && onSend.call(this, event, { rid, tmid, value: input.value }, () => {
-			input.updateAutogrow();
-			input.focus();
-		});
+		instance.send(event);
 	},
 	'click .js-action-menu'(event, instance) {
 		const groups = messageBox.actions.get();

app/ui-sidenav/client/sidebarItem.html

@@ -53,7 +53,9 @@
 					<div class="sidebar-item__message-bottom">
 						{{#if extended}}
 							{{#if lastMessage}}
-								<div class="sidebar-item__last-message">{{{lastMessage}}}</div>
+								<div class="sidebar-item__last-message">
+									<span class="message-body--unstyled">{{{lastMessage}}}</span>
+								</div>
 							{{/if}}
 						{{/if}}
 						{{#if unread}}

app/ui-utils/client/lib/RoomHistoryManager.js

@@ -1,28 +1,30 @@
+import mem from 'mem';
+import s from 'underscore.string';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { Blaze } from 'meteor/blaze';
-import { /* UserRoles, RoomRoles,*/ ChatMessage, ChatSubscription, ChatRoom } from '../../../models';
-// import _ from 'underscore';
+import { ChatMessage, ChatSubscription, ChatRoom } from '../../../models';
 import { RoomManager } from './RoomManager';
 import { readMessage } from './readMessages';
+import { renderMessageBody } from './renderMessageBody';
 
-export const normalizeThreadMessage = (message) => {
+export const normalizeThreadMessage = mem((message) => {
 	if (message.msg) {
-		return message.msg;
+		return renderMessageBody(message).replace(/<br\s?\\?>/g, ' ');
 	}
 
 	if (message.attachments) {
 		const attachment = message.attachments.find((attachment) => attachment.title || attachment.description);
 
 		if (attachment.description) {
-			return attachment.description;
+			return s.escapeHTML(attachment.description);
 		}
 
 		if (attachment.title) {
-			return attachment.title;
+			return s.escapeHTML(attachment.title);
 		}
 	}
-};
+}, { maxAge: 1000 });
 
 export const upsertMessage = ({ msg: { _id, ...msg }, subscription }) => {
 	const userId = msg.u && msg.u._id;

app/ui/client/lib/chatMessages.js

@@ -228,7 +228,6 @@ export class ChatMessages {
 		const cursorPosition = editingNext ? 0 : -1;
 		this.$input.setCursorPosition(cursorPosition);
 		this.input.focus();
-		return this.input;
 	}
 
 	clearEditing() {
@@ -259,6 +258,8 @@ export class ChatMessages {
 			await call('joinRoom', rid);
 		}
 
+		messageBoxState.save({ rid, tmid }, this.input);
+
 		let msg = value;
 		if (value.trim()) {
 			const mention = this.$input.data('mention-user') || false;
@@ -288,8 +289,6 @@ export class ChatMessages {
 
 			try {
 				await this.processMessageSend(message);
-				messageBoxState.set(this.input, '');
-				messageBoxState.save({ rid, tmid }, this.input);
 				this.$input.removeData('reply').trigger('dataChange');
 			} catch (error) {
 				console.error(error);