Merge pull request #6240 from nextcloud-libraries/backport/6223/next

[next] fix(NcRichContenteditable): do not break adjacent mentions

src/mixins/richEditor/index.js

@@ -73,8 +73,6 @@ export default {
 		 */
 		parseContent(content) {
 			let text = content
-			// Consecutive spaces in HTML tags should collapse
-			text = text.replace(/>\s+</g, '><')
 			// Replace break lines with new lines
 			text = text.replace(/<br>/gmi, '\n')
 			// Replace some html special characters
@@ -115,8 +113,10 @@ export default {
 					: `@"${value}"`
 			}
 
-			// Return template and make sure we strip of new lines and tabs
-			return this.renderComponentHtml(data, NcMentionBubble).replace(/[\n\t]/gmi, '')
+			// Return template and make sure we strip off new lines, tabs and consecutive whitespaces
+			return this.renderComponentHtml(data, NcMentionBubble)
+				.replace(/[\n\t]/gmi, '')
+				.replace(/>\s+</g, '><')
 		},
 
 		/**

tests/unit/mixins/richEditor.spec.js

@@ -32,6 +32,9 @@ describe('richEditor.js', () => {
 			const output = editor.vm.renderContent(input)
 
 			expect(output).toEqual('hard<br>break')
+
+			const parsedOutput = editor.vm.parseContent(output)
+			expect(parsedOutput).toEqual(input)
 		})
 
 		it('no duplicated ampersand (from Linkify)', () => {
@@ -40,6 +43,9 @@ describe('richEditor.js', () => {
 			const output = editor.vm.renderContent(input)
 
 			expect(output).toEqual('hello &amp;')
+
+			const parsedOutput = editor.vm.parseContent(output)
+			expect(parsedOutput).toEqual(input)
 		})
 
 		it('keeps mentions without user data', () => {
@@ -48,6 +54,9 @@ describe('richEditor.js', () => {
 			const output = editor.vm.renderContent(input)
 
 			expect(output).toEqual('hello @foobar')
+
+			const parsedOutput = editor.vm.parseContent(output)
+			expect(parsedOutput).toEqual(input)
 		})
 
 		it('keeps mentions with user data', () => {
@@ -63,10 +72,43 @@ describe('richEditor.js', () => {
 					},
 				},
 			})
-			const input = 'hello @jdoe'
+			const input = 'hello @jdoe!\nhow are you?'
+			const output = editor.vm.renderContent(input)
+
+			expect(output).toMatch(/^hello <span.+role="heading".+title="J. Doe".+\/span>!<br>how are you\?$/)
+			expect(output).not.toMatch(/[\n\t]/gmi)
+			expect(output).not.toMatch(/>\s+</g)
+
+			const parsedOutput = editor.vm.parseContent(output)
+			expect(parsedOutput).toEqual(input)
+		})
+
+		it('keeps adjacent mentions with user data', () => {
+			const editor = shallowMount(TestEditor, {
+				props: {
+					userData: {
+						jdoe: {
+							id: 'jdoe',
+							label: 'J. Doe',
+							source: 'users',
+							icon: 'icon-user',
+						},
+						'guest/47e0a7cf': {
+							id: 'guest/47e0a7cf',
+							label: 'J. Guest',
+							source: 'emails',
+							icon: 'icon-user',
+						},
+					},
+				},
+			})
+			const input = 'hello @jdoe @"guest/47e0a7cf"! how are you?'
 			const output = editor.vm.renderContent(input)
 
-			expect(output).toMatch(/^hello <span.+role="heading".+title="J. Doe"/)
+			expect(output).toMatch(/^hello <span.+role="heading".+title="J. Doe".+\/span> <span.+role="heading".+title="J. Guest".+\/span>! how are you\?$/)
+
+			const parsedOutput = editor.vm.parseContent(output)
+			expect(parsedOutput).toEqual(input)
 		})
 
 		it('keep mentions with special characters', () => {
@@ -95,6 +137,9 @@ describe('richEditor.js', () => {
 			for (const i in inputs) {
 				const output = editor.vm.renderContent(inputs[i])
 				expect(output).toEqual(outputs[i])
+
+				const parsedOutput = editor.vm.parseContent(output)
+				expect(parsedOutput).toEqual(inputs[i])
 			}
 		})
 	})