[stable25] Fix copy and paste of user mentions

src/components/Mention/List.vue

@@ -13,14 +13,16 @@
 					@click.native="selectItem(index)" />
 			</div>
 		</template>
-		<div v-else class="item">
-			No result
+		<div v-else class="item-empty">
+			{{ t('text', 'No user found') }}
 		</div>
 	</div>
 </template>
 
 <script>
+import { translate as t } from '@nextcloud/l10n'
 import AutoCompleteResult from './AutoCompleteResult.vue'
+
 export default {
 	components: {
 		AutoCompleteResult,
@@ -50,7 +52,13 @@ export default {
 	},
 
 	methods: {
+		t,
 		onKeyDown({ event }) {
+			// Ignore any key modifier combinations
+			if (event.ctrlKey || event.shiftKey || event.altKey || event.metaKey) {
+				return false
+			}
+
 			if (event.key === 'ArrowUp') {
 				this.upHandler()
 				return true
@@ -61,7 +69,7 @@ export default {
 				return true
 			}
 
-			if (event.key === 'Enter') {
+			if (event.key === 'Enter' || event.key === 'Tab') {
 				this.enterHandler()
 				return true
 			}
@@ -94,11 +102,17 @@ export default {
 
 <style lang="scss">
 .items {
-  position: relative;
-  border-radius: var(--border-radius);
-  background: var(--color-main-background);
-  overflow: hidden;
-  font-size: 0.9rem;
-  box-shadow: 0 1px 5px var(--color-box-shadow);
+	position: relative;
+	border-radius: var(--border-radius);
+	background: var(--color-main-background);
+	overflow: hidden;
+	font-size: 0.9rem;
+	box-shadow: 0 1px 5px var(--color-box-shadow);
+	min-width: 250px;
+}
+
+.item-empty {
+	padding: 4px 8px;
+	opacity: 0.8;
 }
 </style>

src/extensions/Mention.js

@@ -1,9 +1,9 @@
 import TipTapMention from '@tiptap/extension-mention'
 import Mention from './Mention.vue'
 import { VueNodeViewRenderer } from '@tiptap/vue-2'
+import { mergeAttributes } from '@tiptap/core'
 
 export default TipTapMention.extend({
-
 	parseHTML() {
 		return [
 			{
@@ -19,6 +19,17 @@ export default TipTapMention.extend({
 		]
 	},
 
+	renderHTML({ node, HTMLAttributes }) {
+		return [
+			'span',
+			mergeAttributes({ 'data-type': 'user' }, this.options.HTMLAttributes, HTMLAttributes),
+			this.options.renderLabel({
+				options: this.options,
+				node,
+			}),
+		]
+	},
+
 	addNodeView() {
 		return VueNodeViewRenderer(Mention)
 	},

src/tests/markdown.spec.js

@@ -234,5 +234,5 @@ describe('Trailing nodes', () => {
 		const serializer = createMarkdownSerializer(tiptap.schema)
 		const md = serializer.serialize(tiptap.state.doc)
 		expect(md).toBe(source)
-	})	
-})
+	})
+})