From ac39a0d92cdbde4dbd6fda68405339fa3a527c39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Fri, 31 Jan 2020 14:46:56 +0100
Subject: [PATCH] Keep mentions when editing a comment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 src/components/card/CommentForm.vue |  5 +++--
 src/components/card/CommentItem.vue | 31 +++++++++++++++++++++++------
 src/components/cards/CardBadges.vue |  1 -
 src/store/comment.js                |  4 ++--
 4 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index fdc56c753..7a1b909f8 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -125,7 +125,8 @@ export default {
 			if (!this.$refs.contentEditable) {
 				return
 			}
-			const mentions = this.$refs.contentEditable.querySelectorAll('span[data-at-embedded]')
+			const node = this.$refs.contentEditable.cloneNode(true)
+			const mentions = node.querySelectorAll('span[data-at-embedded]')
 			mentions.forEach(mention => {
 				// FIXME Adding a space after the mention should be improved to
 				// do it or not based on the next element instead of always
@@ -133,7 +134,7 @@ export default {
 				mention.replaceWith(' @' + mention.firstElementChild.attributes['data-mention-id'].value + ' ')
 			})
 
-			return rawToParsed(this.$refs.contentEditable.innerHTML)
+			return rawToParsed(node.innerHTML)
 		},
 
 		/**
diff --git a/src/components/card/CommentItem.vue b/src/components/card/CommentItem.vue
index 11efc52b3..2793623b7 100644
--- a/src/components/card/CommentItem.vue
+++ b/src/components/card/CommentItem.vue
@@ -6,7 +6,7 @@
 				<span class="has-tooltip username">
 					{{ comment.actorDisplayName }}
 				</span>
-				<Actions v-if="!edit" @click.stop.prevent>
+				<Actions v-show="canEdit && !edit">
 					<ActionButton icon="icon-rename" @click="showUpdateForm()">
 						{{ t('deck', 'Update') }}
 					</ActionButton>
@@ -14,16 +14,17 @@
 						{{ t('deck', 'Delete') }}
 					</ActionButton>
 				</Actions>
-				<Actions v-else @click.stop.prevent>
+				<Actions v-if="edit">
 					<ActionButton icon="icon-close" @click="hideUpdateForm" />
 				</Actions>
 			</div>
-			<RichText v-if="!edit"
+			<RichText v-show="!edit"
+				ref="richTextElement"
 				class="comment--content"
 				:text="richText"
 				:arguments="richArgs"
 				:autolink="true" />
-			<CommentForm v-else v-model="commentMsg" @submit="updateComment" />
+			<CommentForm v-if="edit" v-model="commentMsg" @submit="updateComment" />
 		</template>
 	</li>
 </template>
@@ -32,6 +33,21 @@
 import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
 import CommentForm from './CommentForm'
+import { getCurrentUser } from '@nextcloud/auth'
+
+const AtMention = {
+	name: 'AtMention',
+	functional: true,
+	render(createElement, context) {
+		const { user, displayName } = context.props
+		return createElement(
+			'span',
+			{ attrs: { 'data-at-embedded': true, 'contenteditable': false } },
+			[createElement(UserBubble, { props: { user, displayName }, attrs: { 'data-mention-id': user } })]
+		)
+	},
+}
+
 export default {
 	name: 'CommentItem',
 	components: {
@@ -55,6 +71,9 @@ export default {
 	},
 
 	computed: {
+		canEdit() {
+			return this.comment.actorId === getCurrentUser().uid
+		},
 		richText() {
 			let message = this.parsedMessage
 			this.comment.mentions.forEach((mention, index) => {
@@ -68,7 +87,7 @@ export default {
 			const result = mentions.reduce(function(result, item, index) {
 				const itemKey = 'user-' + item.mentionId
 				result[itemKey] = {
-					component: UserBubble,
+					component: AtMention,
 					props: {
 						user: item.mentionId,
 						displayName: item.mentionDisplayName,
@@ -88,7 +107,7 @@ export default {
 	methods: {
 
 		showUpdateForm() {
-			this.commentMsg = this.comment.message
+			this.commentMsg = this.$refs.richTextElement.$el.innerHTML
 			this.edit = true
 		},
 		hideUpdateForm() {
diff --git a/src/components/cards/CardBadges.vue b/src/components/cards/CardBadges.vue
index 4f5abe70c..4514ce832 100644
--- a/src/components/cards/CardBadges.vue
+++ b/src/components/cards/CardBadges.vue
@@ -26,7 +26,6 @@
 
 		<div v-if="card.commentsUnread > 0" class="icon icon-comment" />
 
-
 		<div v-if="card.duedate" :class="dueIcon">
 			<span>{{ dueTime }}</span>
 		</div>
diff --git a/src/store/comment.js b/src/store/comment.js
index 8b90c5978..276885e9a 100644
--- a/src/store/comment.js
+++ b/src/store/comment.js
@@ -77,7 +77,7 @@ export default {
 			state.comments[cardId].comments.forEach(_comment => {
 				Vue.set(_comment, 'isUnread', false)
 			})
-		}
+		},
 	},
 	actions: {
 		async fetchComments({ commit }, { cardId, offset }) {
@@ -119,6 +119,6 @@ export default {
 		async markCommentsAsRead({ commit }, cardId) {
 			await apiClient.markCommentsAsRead(cardId)
 			await commit('markCommentsAsRead', cardId)
-		}
+		},
 	},
 }