fix(mentions): encode user id in mentions URLs

Whitespaces in the URL of mentions break markdown parsing, which leads
to unrendered mentions for users with a whitespace in their userId.

Fixes: #4157

Signed-off-by: Jonas <jonas@freesources.org>

src/components/Editor.vue

@@ -700,7 +700,7 @@ export default {
 		 * @param {object} editor The Tiptap editor
 		 */
 		debugContent(editor) {
-			const proseMirrorMarkdown = this.$syncService.options.serialize(editor.state.doc)
+			const proseMirrorMarkdown = this.$syncService.serialize(editor.state.doc)
 			const markdownItHtml = markdownit.render(proseMirrorMarkdown)
 
 			logger.debug('markdown, serialized from editor state by prosemirror-markdown')

src/extensions/Mention.js

@@ -10,7 +10,7 @@ export default TipTapMention.extend({
 				tag: 'span[data-type="user"]',
 				getAttrs: element => {
 					return {
-						id: element.getAttribute('data-id'),
+						id: decodeURIComponent(element.getAttribute('data-id')),
 						label: element.innerText || element.textContent || element.getAttribute('data-label'),
 					}
 				},
@@ -36,7 +36,7 @@ export default TipTapMention.extend({
 
 	toMarkdown(state, node) {
 		state.write(' ')
-		state.write(`@[${node.attrs.label}](mention://user/${node.attrs.id})`)
+		state.write(`@[${node.attrs.label}](mention://user/${encodeURIComponent(node.attrs.id)})`)
 		state.write(' ')
 	},
 })

src/tests/markdown.spec.js

@@ -221,6 +221,7 @@ describe('Markdown serializer from html', () => {
 
 	test('mentions', () => {
 		expect(markdownThroughEditorHtml('<span class="mention" data-label="username" data-type="user" data-id="id">username</span>')).toBe(' @[username](mention://user/id) ')
+		expect(markdownThroughEditorHtml('<span class="mention" data-label="whitespace user" data-type="user" data-id="whitespace user">whitespace user</span>')).toBe(' @[whitespace user](mention://user/whitespace%20user) ')
 	})
 })
 

src/tests/markdownit.spec.js

@@ -39,8 +39,15 @@ describe('markdownit', () => {
 			</ul>
 			<ul class="contains-task-list" data-bullet="*">
 			<li class="task-list-item "><input class="task-list-item-checkbox" type="checkbox" disabled="" id="task-item-1" />task</li>
-			</ul>
-`))
+			</ul>`
+		))
+	})
+
+	it('renders mentions of users with escaped whitespace', () => {
+		const rendered = markdownit.render('@[whitespace user](mention://user/whitespace%20user)')
+		expect(stripIndent(rendered)).toBe(stripIndent(`
+			<p><span class="mention" data-type="user" data-id="whitespace%20user">whitespace user</span></p>`
+		))
 	})
 
 	describe('callouts', () => {