Split input states and split groups at edited messages

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>

src/components/MessagesList/MessagesGroup/Message/Message.vue

@@ -790,11 +790,8 @@ export default {
 		},
 
 		handleEdit() {
-			this.chatExtrasStore.setMessageIdToEdit({
-				token: this.token,
-				message: this.message,
-				id: this.id
-			})
+			this.chatExtrasStore.setMessageIdToEdit(this.token, this.id)
+			this.chatExtrasStore.setChatEditInput({ token: this.token, text: this.message })
 			EventBus.$emit('focus-chat-input')
 		},
 

src/components/MessagesList/MessagesGroup/MessagesGroup.vue

@@ -32,9 +32,7 @@
 		<ul class="messages">
 			<li class="messages__author" aria-level="4">
 				{{ actorDisplayName }}
-				<div v-if="lastEditActorDisplayName"
-					:aria-label="getLastEditor"
-					:aria-level="4">
+				<div v-if="lastEditActorDisplayName">
 					{{ getLastEditor }}
 				</div>
 			</li>

src/components/MessagesList/MessagesList.vue

@@ -272,8 +272,7 @@ export default {
 		messagesList: {
 			immediate: true,
 			handler(messages) {
-				const groups = this.prepareMessagesGroups(messages)
-				this.messagesGroupedByAuthor = this.softUpdateMessagesGroups(this.messagesGroupedByAuthor, groups)
+				this.handleMessagesUpdate()
 			},
 		},
 	},
@@ -286,6 +285,7 @@ export default {
 		EventBus.$on('scroll-chat-to-bottom-if-sticky', this.scrollToBottomIfSticky)
 		EventBus.$on('focus-message', this.focusMessage)
 		EventBus.$on('route-change', this.onRouteChange)
+		EventBus.$on('message-edited', this.handleEditMessage)
 		subscribe('networkOffline', this.handleNetworkOffline)
 		subscribe('networkOnline', this.handleNetworkOnline)
 		window.addEventListener('focus', this.onWindowFocus)
@@ -305,6 +305,7 @@ export default {
 		EventBus.$on('scroll-chat-to-bottom-if-sticky', this.scrollToBottomIfSticky)
 		EventBus.$off('focus-message', this.focusMessage)
 		EventBus.$off('route-change', this.onRouteChange)
+		EventBus.$off('message-edited', this.handleEditMessage)
 
 		this.$store.dispatch('cancelLookForNewMessages', { requestId: this.chatIdentifier })
 		this.destroying = true
@@ -358,7 +359,7 @@ export default {
 
 		areGroupsIdentical(group1, group2) {
 			if (group1.messages.length !== group2.messages.length
-				|| JSON.stringify(group1.messages) !== JSON.stringify(group2.messages)
+				|| group1.messages.length !== group2.messages.length
 				|| group1.dateSeparator !== group2.dateSeparator
 				|| group1.previousMessageId !== group2.previousMessageId
 				|| group1.nextMessageId !== group2.nextMessageId) {
@@ -399,6 +400,10 @@ export default {
 				return false // No previous message
 			}
 
+			if (!!message1.lastEditTimestamp || !!message2.lastEditTimestamp) {
+				return false // Edited messages are not grouped
+			}
+
 			if (message1.actorType === ATTENDEE.ACTOR_TYPE.BOTS // Don't group messages of commands and bots
 				&& message1.actorId !== ATTENDEE.CHANGELOG_BOT_ID) { // Apart from the changelog bot
 				return false
@@ -630,6 +635,17 @@ export default {
 			}
 		},
 
+		handleMessagesUpdate() {
+			const groups = this.prepareMessagesGroups(this.messagesList)
+			this.messagesGroupedByAuthor = this.softUpdateMessagesGroups(this.messagesGroupedByAuthor, groups)
+		},
+
+		handleEditMessage() {
+			this.$nextTick(() => {
+				this.handleMessagesUpdate()
+			})
+		},
+
 		/**
 		 * Fetches the messages of a conversation given the conversation token. Triggers
 		 * a long-polling request for new messages.

src/components/NewMessage/NewMessage.vue

@@ -435,8 +435,8 @@ export default {
 			return /Android|iPhone|iPad|iPod/i.test(navigator.userAgent)
 		},
 
-		chatInput() {
-			return this.chatExtrasStore.getChatInput(this.token)
+		chatEditInput() {
+			return this.chatExtrasStore.getChatEditInput(this.token)
 		},
 	},
 
@@ -446,34 +446,36 @@ export default {
 		},
 
 		text(newValue) {
-			this.chatExtrasStore.setChatInput({ token: this.token, text: newValue })
+			if (this.messageToEdit) {
+				this.chatExtrasStore.setChatEditInput({ token: this.token, text: newValue })
+			} else {
+				this.chatExtrasStore.setChatInput({ token: this.token, text: newValue })
+			}
 		},
 
 		messageToEdit(newValue) {
 			if (newValue) {
-				this.text = this.chatExtrasStore.getChatInput(this.token)
+				this.text = this.chatExtrasStore.getChatEditInput(this.token)
 				this.chatExtrasStore.removeParentIdToReply(this.token)
+			} else {
+				this.text = this.chatExtrasStore.getChatInput(this.token)
 			}
 		},
 
 		parentMessage(newValue) {
 			if (newValue) {
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
-				this.chatExtrasStore.removeChatInput(this.token)
-			}
-		},
-
-		chatInput(newValue) {
-			if (this.text !== newValue) {
-				this.text = newValue
+				this.chatExtrasStore.removeChatEditInput(this.token)
 			}
 		},
 
 		token: {
 			immediate: true,
 			handler(token) {
 				if (token) {
-					this.text = this.chatExtrasStore.getChatInput(token)
+					this.text = this.messageToEdit
+						? this.chatExtrasStore.getChatEditInput(token)
+						: this.chatExtrasStore.getChatInput(token)
 				} else {
 					this.text = ''
 				}
@@ -645,15 +647,17 @@ export default {
 		},
 
 		async handleEdit() {
-
-			if (this.messageToEdit.messageParameters.length !== 0) {
+			const isSimpleMessage = this.messageToEdit.messageParameters?.length === 0
+				|| this.messageToEdit.messageParameters?.some(parameter => parameter.startsWith('mention'))
+			if (!isSimpleMessage) {
 				// Captions editing is not supported yet
 				return
 			}
 
 			// Submitting an empty message will abort the edit
 			if (this.text.trim() === '') {
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
+				return
 			}
 
 			try {
@@ -662,6 +666,7 @@ export default {
 					messageId: this.messageToEdit.id,
 					updatedMessage: this.text.trim()
 				})
+				EventBus.$emit('message-edited')
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
 			} catch {
 				this.$emit('failure')

src/components/Quote.vue

@@ -260,7 +260,7 @@ export default {
 		handleAbort() {
 			if (this.editMessage) {
 				this.chatExtrasStore.removeMessageIdToEdit(this.token)
-				this.chatExtrasStore.removeChatInput(this.token)
+				this.chatExtrasStore.removeChatEditInput(this.token)
 			} else {
 				this.chatExtrasStore.removeParentIdToReply(this.token)
 			}

src/stores/chatExtras.js

@@ -49,6 +49,7 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 		parentToReply: {},
 		chatInput: {},
 		messageIdToEdit: {},
+		chatEditInput: {},
 	}),
 
 	getters: {
@@ -62,9 +63,13 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 			return state.chatInput[token] ?? ''
 		},
 
+		getChatEditInput: (state) => (token) => {
+			return state.chatEditInput[token] ?? ''
+		},
+
 		getMessageIdToEdit: (state) => (token) => {
 			return state.messageIdToEdit[token]
-		}
+		},
 	},
 
 	actions: {
@@ -142,18 +147,56 @@ export const useChatExtrasStore = defineStore('chatExtras', {
 			Vue.set(this.chatInput, token, parsedText)
 		},
 
-		setMessageIdToEdit({ token, message, id }) {
-			this.setChatInput({ token, text: message })
+		/**
+		 * Add a message text that is being edited to the store for a given conversation token
+		 *
+		 * @param {object} payload action payload
+		 * @param {string} payload.token The conversation token
+		 * @param {string} payload.text The string to store
+		 */
+		setChatEditInput({ token, text }) {
+			// FIXME upstream: https://github.com/nextcloud-libraries/nextcloud-vue/issues/4492
+			const temp = document.createElement('textarea')
+			temp.innerHTML = text.replace(/&/gmi, '&')
+			const parsedText = temp.value.replace(/&amp;/gmi, '&').replace(/&lt;/gmi, '<')
+				.replace(/&gt;/gmi, '>').replace(/&sect;/gmi, '§')
+
+			Vue.set(this.chatEditInput, token, parsedText)
+		},
+
+		/**
+		 * Add a message id that is being edited to the store
+		 *
+		 * @param {string} token The conversation token
+		 * @param {number} id The id of message
+		 */
+		setMessageIdToEdit(token, id) {
 			Vue.set(this.messageIdToEdit, token, id)
 		},
 
+		/**
+		 * Remove a message id that is being edited to the store
+		 *
+		 * @param {string} token The conversation token
+		 */
 		removeMessageIdToEdit(token) {
-			this.removeChatInput(token)
+			this.removeChatEditInput(token)
 			if (this.messageIdToEdit[token]) {
 				Vue.delete(this.messageIdToEdit, token)
 			}
 		},
 
+		/**
+		 * Remove the edited message text from the store for a given conversation token
+		 *
+		 * @param {string} token The conversation token
+		 */
+		removeChatEditInput(token) {
+			if (this.chatEditInput[token]) {
+				Vue.delete(this.chatEditInput, token)
+			}
+		},
+
 		/**
 		 * Remove a current input value from the store for a given conversation token
 		 *