From d72fb64d9b13b2db0a1d44fa885b8e282381abf5 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 8 Nov 2024 14:54:02 +0100
Subject: [PATCH 1/2] fix: set listeners only to editable messages, remove
 listeners when unmount

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/MessagePart/MessageBody.vue    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
index 4e689df0c3b..2dce7185fe9 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -322,7 +322,10 @@ export default {
 	},
 
 	mounted() {
-		EventBus.on('editing-message-processing', this.setIsEditing)
+		if (this.isEditable) {
+			EventBus.on('editing-message-processing', this.setIsEditing)
+		}
+
 		if (!this.containsCodeBlocks) {
 			return
 		}
@@ -330,6 +333,10 @@ export default {
 		this.codeBlocks = Array.from(this.$refs.messageMain?.querySelectorAll('pre'))
 	},
 
+	beforeDestroy() {
+		EventBus.off('editing-message-processing', this.setIsEditing)
+	},
+
 	methods: {
 		t,
 		handleMarkdownMouseOver(event) {

From b639c955b0feb9618ba28307d9342896b2054734 Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Fri, 8 Nov 2024 16:30:29 +0100
Subject: [PATCH 2/2] fix: do not listen to highlight event, togle CSS class
 instead

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 .../MessagesGroup/Message/Message.vue         | 19 ++++---------------
 src/components/MessagesList/MessagesList.vue  | 14 ++++++++------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 0654a776cd3..69e9a71d415 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -11,9 +11,9 @@
 		:data-next-message-id="nextMessageId"
 		:data-previous-message-id="previousMessageId"
 		class="message"
-		:class="{'message--highlighted': isHighlighted, 'message--hovered': showMessageButtonsBar}"
+		:class="{'message--hovered': showMessageButtonsBar}"
 		tabindex="0"
-		@animationend="isHighlighted = false"
+		@animationend="clearHighlightedClass"
 		@mouseover="handleMouseover"
 		@mouseleave="handleMouseleave">
 		<div :class="{'normal-message-body': !isSystemMessage && !isDeletedMessage,
@@ -191,7 +191,6 @@ export default {
 		return {
 			isHovered: false,
 			isDeleting: false,
-			isHighlighted: false,
 			// whether the message was seen, only used if this was marked as last read message
 			seen: false,
 			isActionMenuOpen: false,
@@ -344,14 +343,6 @@ export default {
 		},
 	},
 
-	mounted() {
-		EventBus.on('highlight-message', this.highlightMessage)
-	},
-
-	beforeDestroy() {
-		EventBus.off('highlight-message', this.highlightMessage)
-	},
-
 	methods: {
 		t,
 		lastReadMessageVisibilityChanged([{ isIntersecting }]) {
@@ -360,10 +351,8 @@ export default {
 			}
 		},
 
-		highlightMessage(messageId) {
-			if (this.message.id === messageId) {
-				this.isHighlighted = true
-			}
+		clearHighlightedClass() {
+			this.$refs.message.classList.remove('message--highlighted')
 		},
 
 		handleMouseover() {
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index d36e61ac1f1..2797002c4b7 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -1136,7 +1136,7 @@ export default {
 		 * @return {boolean} true if element was found, false otherwise
 		 */
 		focusMessage(messageId, smooth = true, highlightAnimation = true) {
-			let element = document.getElementById(`message_${messageId}`)
+			const element = document.getElementById(`message_${messageId}`)
 			if (!element) {
 				// Message id doesn't exist
 				// TODO: in some cases might need to trigger a scroll up if this is an older message
@@ -1145,9 +1145,10 @@ export default {
 				return false // element not found
 			}
 
-			if (this.isChatVisible && element.offsetParent === null) {
+			let scrollElement = element
+			if (this.isChatVisible && scrollElement.offsetParent === null) {
 				console.debug('Message to focus is hidden, scrolling to its nearest visible parent', messageId)
-				element = element.closest('ul[style="display: none;"]').parentElement
+				scrollElement = scrollElement.closest('ul[style="display: none;"]').parentElement
 			}
 
 			console.debug('Scrolling to a focused message programmatically')
@@ -1155,7 +1156,7 @@ export default {
 
 			// TODO: doesn't work if chat is hidden. Need to store
 			// delayed 'shouldScroll' and call after chat is visible
-			element.scrollIntoView({
+			scrollElement.scrollIntoView({
 				behavior: smooth ? 'smooth' : 'auto',
 				block: 'center',
 				inline: 'nearest',
@@ -1171,8 +1172,9 @@ export default {
 				this.setChatScrolledToBottom(true)
 			}
 
-			if (highlightAnimation) {
-				EventBus.emit('highlight-message', messageId)
+			if (highlightAnimation && scrollElement === element) {
+				// element is visible, highlight it
+				element.classList.add('message--highlighted')
 			}
 			this.isFocusingMessage = false