From 1e74f8390264ff12085207da0ed2b008021fc2e7 Mon Sep 17 00:00:00 2001
From: Luka Trovic <luka@nextcloud.com>
Date: Tue, 25 Nov 2025 16:08:26 +0100
Subject: [PATCH] fix(comment): improve comment form behavior in firefox

Signed-off-by: Luka Trovic <luka@nextcloud.com>

[skip ci]
---
 src/components/card/CommentForm.vue | 94 ++++++++---------------------
 1 file changed, 26 insertions(+), 68 deletions(-)

diff --git a/src/components/card/CommentForm.vue b/src/components/card/CommentForm.vue
index 5b6837b9e..779ba0fd2 100644
--- a/src/components/card/CommentForm.vue
+++ b/src/components/card/CommentForm.vue
@@ -5,40 +5,11 @@
 
 <template>
 	<div class="comment-form">
-		<form @submit.prevent="submit">
-			<At ref="at"
-				v-model="commentText"
-				:members="members"
-				name-key="displayname"
-				:tab-select="true">
-				<template #item="s">
-					<NcAvatar class="atwho-li--avatar" :user="s.item.uid" :size="24" />
-					<span class="atwho-li--name" v-text="s.item.displayname" />
-				</template>
-				<template #embeddedItem="scope">
-					<span>
-						<NcUserBubble v-if="scope.current.uid"
-							:data-mention-id="scope.current.uid"
-							:user="scope.current.uid"
-							:display-name="scope.current.displayname" />
-					</span>
-				</template>
-				<div ref="contentEditable"
-					dir="auto"
-					class="comment-form__contenteditable"
-					contenteditable
-					@keydown.enter="handleKeydown"
-					@paste="onPaste"
-					@blur="error = null"
-					@input="validate()" />
-			</At>
-			<input :title="t('deck', 'Save')"
-				class="icon-confirm"
-				type="submit"
-				value=""
-				:disabled="commentText.length === null || error">
-			<slot />
-		</form>
+		<NcRichContenteditable v-model="commentText"
+			:auto-complete="autoComplete"
+			:maxlength="1000"
+			:user-data="members"
+			@submit="submit" />
 		<p v-if="error">
 			{{ error }}
 		</p>
@@ -47,16 +18,12 @@
 
 <script>
 import { mapState } from 'vuex'
-import { NcUserBubble, NcAvatar } from '@nextcloud/vue'
-import At from 'vue-at'
-import { rawToParsed } from '../../helpers/mentions.js'
+import { NcRichContenteditable } from '@nextcloud/vue'
 
 export default {
 	name: 'CommentForm',
 	components: {
-		At,
-		NcAvatar,
-		NcUserBubble,
+		NcRichContenteditable,
 	},
 	props: {
 		value: {
@@ -75,7 +42,16 @@ export default {
 			currentBoard: state => state.currentBoard,
 		}),
 		members() {
-			return this.currentBoard.users
+			const obj = {}
+			this.currentBoard.users.forEach(user => {
+				obj[user.uid] = {
+					icon: 'icon-user',
+					id: user.uid,
+					label: user.displayname,
+					source: 'users',
+				}
+			})
+			return obj
 		},
 	},
 	watch: {
@@ -84,9 +60,12 @@ export default {
 		},
 	},
 	methods: {
+		autoComplete(search, callback) {
+			callback(Object.values(this.members))
+		},
 		validate(submit) {
 			this.error = null
-			const content = this.contentEditableToParsed()
+			const content = this.commentText
 			if (submit && content.length === 0) {
 				this.error = t('deck', 'The comment cannot be empty.')
 			}
@@ -167,33 +146,12 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
 	@import '../../css/comments';
 
-	.comment-form__contenteditable {
-		word-break: break-word;
-		border-radius: var(--border-radius-large);
-		padding: var(--default-grid-baseline);
-		max-height: 200px;
-		overflow: auto;
-	}
-
-	.atwho-wrap {
-		width: 100%;
-		& > div[contenteditable] {
-			width: 100%;
-
-			&:deep > span > div {
-				vertical-align: middle;
-			}
-		}
-	}
-
-	.comment-form:deep(.atwho-li) {
-		height: 32px;
-	}
-
-	.atwho-li--avatar {
-		margin-right: 10px;
+	[class^="_tribute-container-autocomplete_"],
+	[class*=" _tribute-container-autocomplete_"],
+	[class*="_tribute-container-autocomplete_"] {
+		z-index: 9999 !important;
 	}
 </style>