Properly handle spaces in user ids (fixes #1515)

Signed-off-by: Julius Härtl <jus@bitgrid.net>

package-lock.json

@@ -5663,6 +5663,11 @@
 			"integrity": "sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==",
 			"dev": true
 		},
+		"blueimp-md5": {
+			"version": "2.12.0",
+			"resolved": "https://registry.npmjs.org/blueimp-md5/-/blueimp-md5-2.12.0.tgz",
+			"integrity": "sha512-zo+HIdIhzojv6F1siQPqPFROyVy7C50KzHv/k/Iz+BtvtVzSHXiMXOpq2wCfNkeBqdCv+V8XOV96tsEt2W/3rQ=="
+		},
 		"bn.js": {
 			"version": "4.11.8",
 			"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.8.tgz",

package.json

@@ -35,6 +35,7 @@
 		"@nextcloud/moment": "^1.1.0",
 		"@nextcloud/router": "^1.0.0",
 		"@nextcloud/vue": "^1.4.0",
+		"blueimp-md5": "^2.12.0",
 		"dompurify": "^2.0.8",
 		"nextcloud-vue-collections": "^0.7.2",
 		"url-search-params-polyfill": "^8.0.0",

src/components/card/CommentForm.vue

@@ -133,7 +133,11 @@ export default {
 				// adding it.
 				// FIXME user names can contain spaces, in that case they need to be wrapped @"user name" [a-zA-Z0-9\ _\.@\-']+
 				const mentionValue = mention.firstElementChild.attributes['data-mention-id'].value
-				mention.replaceWith(' @' + mentionValue + ' ')
+				if (mentionValue.indexOf(' ') !== -1) {
+					mention.replaceWith(' @"' + mentionValue + '" ')
+				} else {
+					mention.replaceWith(' @' + mentionValue + ' ')
+				}
 			})
 
 			return rawToParsed(node.innerHTML)

src/components/card/CommentItem.vue

@@ -34,6 +34,7 @@ import { Avatar, Actions, ActionButton, UserBubble } from '@nextcloud/vue'
 import RichText from '@juliushaertl/vue-richtext'
 import CommentForm from './CommentForm'
 import { getCurrentUser } from '@nextcloud/auth'
+import md5 from 'blueimp-md5'
 
 const AtMention = {
 	name: 'AtMention',
@@ -77,15 +78,18 @@ export default {
 		richText() {
 			let message = this.parsedMessage
 			this.comment.mentions.forEach((mention, index) => {
-				// FIXME: currently only [a-z\-_0-9] are allowed inside of placeholders
-				message = message.split('@' + mention.mentionId + '').join(`{user-${mention.mentionId}}`)
+				// Currently only [a-z\-_0-9] are allowed inside of placeholders so we use a hash of the mention id as a unique identifier
+				const hash = md5(mention.mentionId)
+				message = message.split('@' + mention.mentionId + '').join(`{user-${hash}}`)
+				message = message.split('@"' + mention.mentionId + '"').join(`{user-${hash}}`)
+
 			})
 			return message
 		},
 		richArgs() {
 			const mentions = [...this.comment.mentions]
 			const result = mentions.reduce(function(result, item, index) {
-				const itemKey = 'user-' + item.mentionId
+				const itemKey = 'user-' + md5(item.mentionId)
 				result[itemKey] = {
 					component: AtMention,
 					props: {