fix(search): also search for user mentions

Adds user mentions to results if the display name starts with search

query.

If search query starts with `@`, strip it before checking if user

mention matches.

Contributes to nextcloud/collectives#2299

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

[skip ci]

Author: mejo-

src/plugins/searchDecorations.js

@@ -91,18 +91,34 @@ export function runSearch(doc, query, options) {
 		}
 	}
 
+	const mentionQuery = query.trim().startsWith('@')
+		? query.trim().slice(1).toLowerCase()
+		: query.trim().toLowerCase()
+
 	doc.descendants((node, offset, _position) => {
-		if (!node.isText) {
+		// Add decorations for text matches
+		if (node.isText) {
+			const matches = node.text.matchAll(new RegExp(query, 'gi'))
+
+			for (const match of matches) {
+				results.push({
+					from: match.index + offset,
+					to: match.index + offset + query.length,
+				})
+			}
+
 			return
 		}
 
-		const matches = node.text.matchAll(new RegExp(query, 'gi'))
-
-		for (const match of matches) {
-			results.push({
-				from: match.index + offset,
-				to: match.index + offset + query.length,
-			})
+		// Add decorations for mention matches
+		if (node.type.name === 'mention' && mentionQuery !== '') {
+			if (node.attrs.label.toLowerCase().startsWith(mentionQuery)) {
+				results.push({
+					from: offset,
+					to: offset + node.nodeSize,
+					mention: true,
+				})
+			}
 		}
 	})
 
@@ -142,7 +158,9 @@ export function highlightResults(doc, results) {
 		decorations.push(
 			Decoration.inline(result.from, result.to, {
 				'data-text-el': 'search-decoration',
-				style: 'background-color: #ead637; color: black; border-radius: 2px;',
+				style: result.mention
+					? 'outline: 2px solid #ead637; background-color: #ead637; color: black; border-radius: 2px;'
+					: 'background-color: #ead637; color: black; border-radius: 2px;',
 			}),
 		)
 	})

src/tests/plugins/searchDecorations.spec.js

@@ -3,6 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import Mentions from '../../extensions/Mention.js'
 import { highlightResults, runSearch } from '../../plugins/searchDecorations.js'
 import createCustomEditor from '../testHelpers/createCustomEditor.ts'
 
@@ -76,6 +77,30 @@ describe('search plugin', () => {
 
 		testSearch(doc, 'cat', expected)
 	})
+
+	it('finds matches with mentions', () => {
+		const doc =
+			'<p>janes task, mention <span class="mention" data-type="user" data-id="jane.doe" data-label="Jane Doe">Jane Doe</span></p>'
+
+		const expected = {
+			results: [
+				{ from: 1, to: 5 },
+				{ from: 21, to: 22, mention: true },
+			],
+		}
+
+		testSearch(doc, 'jane', expected)
+	})
+
+	it('finds matches with mentions with @', () => {
+		const doc =
+			'<p>janes task, mention <span class="mention" data-type="user" data-id="jane.doe" data-label="Jane Doe">Jane Doe</span></p>'
+
+		const expected = {
+			results: [{ from: 21, to: 22, mention: true }],
+		}
+		testSearch(doc, '@jane', expected)
+	})
 })
 
 const testSearch = (content, query, expectedSearchResults) => {