fix: multiple trigger support in comment component at any position 🦊

Author: CoderSerio

packages/devui-vue/devui/mention/src/mention.tsx

@@ -27,7 +27,11 @@ export default defineComponent({
     const instance = getCurrentInstance();
 
     const handleUpdate = debounce((val: string) => {
-      if (props.trigger.includes(val[0])) {
+      const wordsWithoutSpace = val.split(' ');
+      const lastWordIndex = wordsWithoutSpace.length - 1;
+      const lastWord = wordsWithoutSpace[lastWordIndex];
+      const shouldBeActive = lastWord && props.trigger.includes(lastWord[0]);
+      if (shouldBeActive) {
         showSuggestions.value = true;
         if (props.position === 'top') {
           setTimeout(() => {
@@ -38,12 +42,12 @@ export default defineComponent({
         filteredSuggestions.value = (suggestions.value as IMentionSuggestionItem[]).filter((item: IMentionSuggestionItem) =>
           String(item[props.dmValueParse.value as keyof IMentionSuggestionItem])
             .toLocaleLowerCase()
-            .includes(val.slice(1).toLocaleLowerCase())
+            .includes(lastWord.slice(1).toLocaleLowerCase())
         );
       } else {
         showSuggestions.value = false;
       }
-      emit('change', val.slice(1));
+      emit('change', lastWord.slice(1));
     }, 300);
 
     const handleBlur = (e: Event) => {
@@ -67,7 +71,12 @@ export default defineComponent({
       e.stopPropagation();
       e.preventDefault();
       showSuggestions.value = false;
-      textContext.value = textContext.value.substring(0, 1) + item[props.dmValueParse.value as keyof IMentionSuggestionItem];
+      const wordsWithoutSpace = textContext.value.split(' ');
+      const lastWordIndex = wordsWithoutSpace.length - 1;
+      const lastWord = wordsWithoutSpace[lastWordIndex];
+      const selectedWord = item[props.dmValueParse.value as keyof IMentionSuggestionItem];
+      wordsWithoutSpace[lastWordIndex] = `${lastWord[0]}${selectedWord}`;
+      textContext.value = wordsWithoutSpace.join(' ');
     };
 
     const arrowKeyDown = (e: KeyboardEvent) => {
@@ -102,9 +111,11 @@ export default defineComponent({
           e.stopPropagation();
           e.preventDefault();
           showSuggestions.value = false;
-          textContext.value =
-            textContext.value.substring(0, 1) +
-            filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
+          const wordsWithoutSpace = textContext.value.split(' ');
+          const lastWordIndex = wordsWithoutSpace.length - 1;
+          const selectedWord = filteredSuggestions.value[currentIndex.value][props.dmValueParse.value as keyof IMentionSuggestionItem];
+          wordsWithoutSpace[lastWordIndex] = `@${selectedWord}`;
+          textContext.value = wordsWithoutSpace.join(' ');
           emit('select', filteredSuggestions.value[currentIndex.value]);
         }
       }