fix the mixin to allow @ within userids

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/NcRichContenteditable/NcRichContenteditable.vue

@@ -86,9 +86,9 @@ export default {
 					},
 					subline: 'Visiting London',
 				},
-				'Test 03': {
+				'Test@User': {
 					icon: 'icon-user',
-					id: 'Test 03',
+					id: 'Test@User',
 					label: 'Test 03',
 					source: 'users',
 					status: {
@@ -148,7 +148,7 @@ export default {
 					component: 'NcUserBubble',
 					props: {
 						displayName: 'Test 03',
-						user: 'Test 03',
+						user: 'Test@User',
 					},
 				},
 				'user-4': {
@@ -173,7 +173,7 @@ export default {
 			return this.message
 					.replace('@Test01', '{user-1}')
 					.replace('@Test02', '{user-2}')
-					.replace('@Test 03', '{user-3}')
+					.replace('@Test@User', '{user-3}')
 					.replace('@"Test Offline"', '{user-4}')
 					.replace('@"Test DND"', '{user-5}')
 		},

src/components/NcRichText/NcRichText.vue

@@ -130,9 +130,9 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 						},
 						subline: 'Visiting London',
 					},
-					'Test 03': {
+					'Test@User': {
 						icon: 'icon-user',
-						id: 'Test 03',
+						id: 'Test@User',
 						label: 'Test 03',
 						source: 'users',
 						status: {
@@ -190,7 +190,7 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 						component: 'NcUserBubble',
 						props: {
 							displayName: 'Test 03',
-							user: 'Test 03',
+							user: 'Test@User',
 						},
 					},
 					'user-4': {
@@ -215,7 +215,7 @@ See [NcRichContenteditable](#/Components/NcRichContenteditable) documentation fo
 				return this.message
 						.replace('@Test01', '{user-1}')
 						.replace('@Test02', '{user-2}')
-						.replace('@Test 03', '{user-3}')
+						.replace('@Test@User', '{user-3}')
 						.replace('@"Test Offline"', '{user-4}')
 						.replace('@"Test DND"', '{user-5}')
 			},

src/mixins/richEditor/index.js

@@ -66,8 +66,8 @@ export default {
 						return Linkify(part)
 					}
 
-					// Extracting the id, nuking the " and @
-					const id = part.replace(/@|"/gi, '')
+					// Extracting the id, nuking the leading @ and all "
+					const id = part.slice(1).replace(/"/gi, '')
 					// Compiling template and prepend with the space we removed during the split
 					return ' ' + this.genSelectTemplate(id)
 				})

tests/unit/mixins/richEditor.spec.js

@@ -0,0 +1,94 @@
+/**
+ * @copyright Copyright (c) 2023 Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @author Ferdinand Thiessen <opensource@fthiessen.de>
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { shallowMount } from '@vue/test-utils'
+import richEditor from '../../../src/mixins/richEditor/index.js'
+
+const TestEditor = {
+	mixins: [richEditor],
+	render: (h) => h('div'),
+}
+
+describe('richEditor.js', () => {
+	'use strict'
+
+	describe('renderContent', () => {
+		it('sanitizes the input', () => {
+			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const input = 'Some <table>html</table>'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toEqual('Some &lt;table&gt;html&lt;/table&gt;')
+		})
+
+		it('converts newline to hard line breaks', () => {
+			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const input = 'hard\nbreak'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toEqual('hard<br>break')
+		})
+
+		it('no duplicated ampersand (from Linkify)', () => {
+			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const input = 'hello &'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toEqual('hello &amp;')
+		})
+
+		it('keeps mentions without user data', () => {
+			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const input = 'hello @foobar'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toEqual('hello @foobar')
+		})
+
+		it('keeps mentions with user data', () => {
+			const editor = shallowMount(TestEditor, {
+				propsData: {
+					userData: {
+						jdoe: {
+							id: 'jdoe',
+							label: 'J. Doe',
+							source: 'users',
+							icon: 'icon-user',
+						},
+					},
+				},
+			})
+			const input = 'hello @jdoe'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toMatch(/^hello <span.+role="heading" title="J. Doe"/)
+		})
+
+		it('keep mentions with special characters', () => {
+			const editor = shallowMount(TestEditor, { propsData: { userData: {} } })
+			const input = 'hello @foo@bar - hello @"bar @ foo"'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toEqual('hello @foo@bar - hello @"bar @ foo"')
+		})
+	})
+})