Merge pull request #13748 from nextcloud/backport/13740/stable29

nextcloud · Nov 9, 2024 · a0bd3a9 · a0bd3a9
2 parents 7276147 + 365c50b
commit a0bd3a9
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
@@ -27,9 +27,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,
@@ -318,7 +318,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,
@@ -468,25 +467,15 @@ export default {
 		},
 	},
 
-	mounted() {
-		EventBus.$on('highlight-message', this.highlightMessage)
-	},
-
-	beforeDestroy() {
-		EventBus.$off('highlight-message', this.highlightMessage)
-	},
-
 	methods: {
 		lastReadMessageVisibilityChanged(isVisible) {
 			if (isVisible) {
 				this.seen = true
 			}
 		},
 
-		highlightMessage(messageId) {
-			if (this.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
@@ -414,14 +414,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: {
 		handleMarkdownMouseOver(event) {
 			if (!this.containsCodeBlocks) {

diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
@@ -1110,7 +1110,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
@@ -1119,15 +1119,16 @@ export default {
 				return false // element not found
 			}
 
-			if (element.offsetParent === null) {
+			let scrollElement = element
+			if (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
 
-			element.scrollIntoView({
+			scrollElement.scrollIntoView({
 				behavior: smooth ? 'smooth' : 'auto',
 				block: 'center',
 				inline: 'nearest',
@@ -1138,8 +1139,9 @@ export default {
 				this.$refs.scroller.scrollTop += this.$refs.scroller.offsetHeight / 4
 			}
 
-			if (highlightAnimation) {
-				EventBus.$emit('highlight-message', messageId)
+			if (highlightAnimation && scrollElement === element) {
+				// element is visible, highlight it
+				element.classList.add('message--highlighted')
 			}
 			this.isFocusingMessage = false