fix: closes #11613, closes #11614

don't add input listener on every send message

public/src/client/chats.js

@@ -55,7 +55,7 @@ define('forum/chats', [
 
 		Chats.initialised = true;
 		messages.scrollToBottom($('.expanded-chat ul.chat-content'));
-
+		messages.wrapImagesInLinks($('.expanded-chat ul.chat-content'));
 		search.init();
 	};
 
@@ -69,6 +69,7 @@ define('forum/chats', [
 		Chats.addScrollHandler(ajaxify.data.roomId, ajaxify.data.uid, $('.chat-content'));
 		Chats.addScrollBottomHandler($('.chat-content'));
 		Chats.addCharactersLeftHandler($('[component="chat/main-wrapper"]'));
+		Chats.addTextareaResizeHandler($('[component="chat/main-wrapper"]'));
 		Chats.addIPHandler($('[component="chat/main-wrapper"]'));
 		Chats.createAutoComplete(ajaxify.data.roomId, $('[component="chat/input"]'));
 		Chats.addUploadHandler({
@@ -169,10 +170,8 @@ define('forum/chats', [
 				messages.parseMessage(data, function (html) {
 					const currentScrollTop = el.scrollTop();
 					const previousHeight = el[0].scrollHeight;
-					html = $(html);
 					el.prepend(html);
-					html.find('.timeago').timeago();
+					messages.onMessagesAddedToDom(html);
-					html.find('img:not(.not-responsive)').addClass('img-fluid');
 					el.scrollTop((el[0].scrollHeight - previousHeight) + currentScrollTop);
 					loading = false;
 				});
@@ -195,6 +194,19 @@ define('forum/chats', [
 		});
 	};
 
+	Chats.addTextareaResizeHandler = function (parent) {
+		// https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
+		const textarea = parent.find('[component="chat/input"]');
+		textarea.on('input', function () {
+			const isAtBottom = messages.isAtBottom(parent.find('.chat-content'));
+			textarea.css({ height: 0 });
+			textarea.css({ height: textarea.prop('scrollHeight') + 'px' });
+			if (isAtBottom) {
+				messages.scrollToBottom(parent.find('.chat-content'));
+			}
+		});
+	};
+
 	Chats.addActionHandlers = function (element, roomId) {
 		element.on('click', '[data-action]', function () {
 			const messageId = $(this).parents('[data-mid]').attr('data-mid');

public/src/client/chats/messages.js

@@ -3,8 +3,11 @@
 
 define('forum/chats/messages', [
 	'components', 'translator', 'benchpress', 'hooks',
-	'bootbox', 'alerts', 'messages', 'api',
+	'bootbox', 'alerts', 'messages', 'api', 'forum/topic/images',
-], function (components, translator, Benchpress, hooks, bootbox, alerts, messagesModule, api) {
+], function (
+	components, translator, Benchpress, hooks,
+	bootbox, alerts, messagesModule, api, images
+) {
 	const messages = {};
 
 	messages.sendMessage = async function (roomId, inputEl) {
@@ -49,18 +52,9 @@ define('forum/chats/messages', [
 	};
 
 	messages.updateTextAreaHeight = function (chatContentEl) {
-		// https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize
 		const textarea = chatContentEl.find('[component="chat/input"]');
 		const scrollHeight = textarea.prop('scrollHeight');
 		textarea.css({ height: scrollHeight + 'px' });
-		textarea.on('input', function () {
-			const isAtBottom = messages.isAtBottom(chatContentEl.find('.chat-content'));
-			textarea.css({ height: 0 });
-			textarea.css({ height: textarea.prop('scrollHeight') + 'px' });
-			if (isAtBottom) {
-				messages.scrollToBottom(chatContentEl.find('.chat-content'));
-			}
-		});
 	};
 
 	function autoresizeTextArea(textarea) {
@@ -89,8 +83,7 @@ define('forum/chats/messages', [
 		const newMessage = $(html);
 		const isAtBottom = messages.isAtBottom(chatContentEl);
 		newMessage.appendTo(chatContentEl);
-		newMessage.find('.timeago').timeago();
+		messages.onMessagesAddedToDom(newMessage);
-		newMessage.find('img:not(.not-responsive)').addClass('img-fluid');
 		if (isAtBottom) {
 			messages.scrollToBottom(chatContentEl);
 		}
@@ -100,10 +93,15 @@ define('forum/chats/messages', [
 		});
 	}
 
+	messages.onMessagesAddedToDom = function (messageEls) {
+		messageEls.find('.timeago').timeago();
+		messageEls.find('img:not(.not-responsive)').addClass('img-fluid');
+		messages.wrapImagesInLinks(messageEls.first().parent());
+	};
 
 	messages.parseMessage = function (data, callback) {
 		function done(html) {
-			translator.translate(html, callback);
+			translator.translate(html, translated => callback($(translated)));
 		}
 		const tplData = {
 			messages: data,
@@ -134,6 +132,12 @@ define('forum/chats/messages', [
 		}
 	};
 
+	messages.wrapImagesInLinks = function (containerEl) {
+		containerEl.find('[component="chat/message/body"] img:not(.emoji)').each(function () {
+			images.wrapImageInLink($(this));
+		});
+	};
+
 	messages.toggleScrollUpAlert = function (containerEl) {
 		const isAtBottom = messages.isAtBottom(containerEl, 300);
 		containerEl.parent()
@@ -225,7 +229,7 @@ define('forum/chats/messages', [
 				const body = components.get('chat/message', message.messageId);
 				if (body.length) {
 					body.replaceWith(html);
-					components.get('chat/message', message.messageId).find('.timeago').timeago();
+					messages.onMessagesAddedToDom(html);
 				}
 			});
 		});
@@ -234,13 +238,15 @@ define('forum/chats/messages', [
 	function onChatMessageDeleted(messageId) {
 		components.get('chat/message', messageId)
 			.toggleClass('deleted', true)
-			.find('[component="chat/message/body"]').translateHtml('[[modules:chat.message-deleted]]');
+			.find('[component="chat/message/body"]')
+			.translateHtml('[[modules:chat.message-deleted]]');
 	}
 
 	function onChatMessageRestored(message) {
 		components.get('chat/message', message.messageId)
 			.toggleClass('deleted', false)
-			.find('[component="chat/message/body"]').html(message.content);
+			.find('[component="chat/message/body"]')
+			.html(message.content);
 	}
 
 	messages.delete = function (messageId, roomId) {

public/src/client/topic/images.js

@@ -4,30 +4,32 @@
 define('forum/topic/images', [], function () {
 	const Images = {};
 
+	const suffixRegex = /-resized(\.[\w]+)?$/;
+
 	Images.wrapImagesInLinks = function (posts) {
 		posts.find('[component="post/content"] img:not(.emoji)').each(function () {
-			const $this = $(this);
+			Images.wrapImageInLink($(this));
-			let src = $this.attr('src') || '';
+		});
-			const alt = $this.attr('alt') || '';
+	};
-			const suffixRegex = /-resized(\.[\w]+)?$/;
 
-			if (src === 'about:blank') {
+	Images.wrapImageInLink = function (imageEl) {
-				return;
+		let src = imageEl.attr('src') || '';
-			}
+		if (src === 'about:blank') {
+			return;
+		}
 
+		if (!imageEl.parent().is('a')) {
 			if (utils.isRelativeUrl(src) && suffixRegex.test(src)) {
 				src = src.replace(suffixRegex, '$1');
 			}
+			const alt = imageEl.attr('alt') || '';
 			const srcExt = src.split('.').slice(1).pop();
 			const altFilename = alt.split('/').pop();
 			const altExt = altFilename.split('.').slice(1).pop();
-
+			imageEl.wrap('<a href="' + src + '" ' +
-			if (!$this.parent().is('a')) {
+				(!srcExt && altExt ? ' download="' + altFilename + '" ' : '') +
-				$this.wrap('<a href="' + src + '" ' +
+				' target="_blank" rel="noopener">');
-					(!srcExt && altExt ? ' download="' + altFilename + '" ' : '') +
+		}
-					' target="_blank" rel="noopener">');
-			}
-		});
 	};
 
 	return Images;

public/src/modules/chat.js

@@ -246,6 +246,7 @@ define('chat', [
 				chatModal.css('position', 'fixed');
 				chatModal.appendTo($('body'));
 				chatModal.find('.timeago').timeago();
+				ChatsMessages.wrapImagesInLinks(chatModal.find('[component="chat/messages"] .chat-content'));
 				module.center(chatModal);
 
 				app.loadJQueryUI(function () {
@@ -331,6 +332,7 @@ define('chat', [
 				Chats.addScrollBottomHandler(chatModal.find('.chat-content'));
 
 				Chats.addCharactersLeftHandler(chatModal);
+				Chats.addTextareaResizeHandler(chatModal);
 				Chats.addIPHandler(chatModal);
 
 				Chats.addUploadHandler({