Merge pull request #13747 from nextcloud/backport/13740/stable30

nextcloud · Nov 9, 2024 · 8a37f29 · 8a37f29
2 parents 8b2124d + b639c95
commit 8a37f29
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git 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/MessagesGroup/Message/MessagePart/MessageBody.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/MessageBody.vue
@@ -322,14 +322,21 @@ export default {
 	},
 
 	mounted() {
-		EventBus.on('editing-message-processing', this.setIsEditing)
+		if (this.isEditable) {
+			EventBus.on('editing-message-processing', this.setIsEditing)
+		}
+
 		if (!this.containsCodeBlocks) {
 			return
 		}
 
 		this.codeBlocks = Array.from(this.$refs.messageMain?.querySelectorAll('pre'))
 	},
 
+	beforeDestroy() {
+		EventBus.off('editing-message-processing', this.setIsEditing)
+	},
+
 	methods: {
 		t,
 		handleMarkdownMouseOver(event) {

diff --git 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,17 +1145,18 @@ 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')
 			this.isFocusingMessage = true
 
 			// 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