fix(mention): custom range for usernames and error handling

src/ckeditor/smartpicker/InsertItemCommand.js

@@ -10,16 +10,17 @@ export default class InsertItemCommand extends Command {
 	 * @param {module:engine/model/writer~Writer} writer instance
 	 * @param {string} item smart picker or emoji picker
 	 * @param {string} trigger the character to replace
+	 * @param {int} loopBack the offset to set the corrrect range of the text to replace
 	 */
-	insertItem(editor, writer, item, trigger) {
+	insertItem(editor, writer, item, trigger, loopBack) {
 		const currentPosition = editor.model.document.selection.getLastPosition()
 		if (currentPosition === null) {
 			// null as current position is probably not possible
 			// @TODO Add error to handle such a situation in the callback
 			return
 		}
 		const range = editor.model.createRange(
-			currentPosition.getShiftedBy(-5),
+			currentPosition.getShiftedBy(-loopBack),
 			currentPosition,
 		)
 		// Iterate over all items in this range:
@@ -67,10 +68,11 @@ export default class InsertItemCommand extends Command {
 	/**
 	 * @param {string}  item link from smart picker or emoji from emoji picker
 	 * @param {string} trigger the character to replace
+	 * @param {int} loopBack the offset to set the corrrect range of the text to replace defaults to 5
 	 */
-	execute(item, trigger) {
+	execute(item, trigger, loopBack = 5) {
 		this.editor.model.change((writer) => {
-			this.insertItem(this.editor, writer, item, trigger)
+			this.insertItem(this.editor, writer, item, trigger, loopBack)
 		})
 	}
 

src/components/TextEditor.vue

@@ -179,6 +179,7 @@ export default {
 		return {
 			linkTribute: null,
 			emojiTribute: null,
+			contactMentionQuery: null,
 			textSmiles: [],
 			ready: false,
 			editor: DecoupledEditor,
@@ -245,8 +246,15 @@ export default {
 			if (text.length === 0) {
 				return []
 			}
-			let contactResults = await autoCompleteByName(text)
-			contactResults = contactResults.filter((result) => result.email.filter((email) => email.length > 1).length > 0)
+			this.contactMentionQuery = text
+			let contactResults
+			try {
+				contactResults = await autoCompleteByName(text)
+				contactResults = contactResults.filter((result) => result.email?.filter((email) => email.length > 0))
+			} catch (error) {
+				logger.error('could not fetch contacts to mention', { error })
+				return []
+			}
 			return contactResults
 		},
 
@@ -464,7 +472,8 @@ export default {
 						})
 				}
 				if (eventData.marker === '@') {
-					this.editorInstance.execute('insertItem', { email: item.email[0], label: item.label }, '@')
+					const lookback = this.contactMentionQuery?.length ? this.contactMentionQuery.length + 1 : 5// +1 for the '@' itself
+					this.editorInstance.execute('insertItem', { email: item.email[0], label: item.label }, '@', lookback)
 					this.$emit('mention', { email: item.email[0], label: item.label })
 				}
 				if (eventData.marker === '!') {