Fix actor auto-complete

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor/Mention.ts

@@ -7,6 +7,8 @@ import apolloProvider from "@/vue-apollo";
 import { IPerson } from "@/types/actor";
 import pDebounce from "p-debounce";
 import { NormalizedCacheObject } from "@apollo/client/cache/inmemory/types";
+import { MentionOptions } from "@tiptap/extension-mention";
+import { Editor } from "@tiptap/core";
 
 const client =
   apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
@@ -24,13 +26,21 @@ const fetchItems = async (query: string): Promise<IPerson[]> => {
 
 const debouncedFetchItems = pDebounce(fetchItems, 200);
 
-const mentionOptions: Partial<any> = {
+const mentionOptions: MentionOptions = {
   HTMLAttributes: {
     class: "mention",
     dir: "ltr",
   },
+  renderLabel({ options, node }) {
+    return `${options.suggestion.char}${node.attrs.label ?? node.attrs.id}`;
+  },
   suggestion: {
-    items: async (query: string): Promise<IPerson[]> => {
+    items: async ({
+      query,
+    }: {
+      query: string;
+      editor: Editor;
+    }): Promise<IPerson[]> => {
       if (query === "") {
         return [];
       }
@@ -70,8 +80,12 @@ const mentionOptions: Partial<any> = {
           return component.ref?.onKeyDown(props);
         },
         onExit() {
-          popup[0].destroy();
-          component.destroy();
+          if (popup && popup[0]) {
+            popup[0].destroy();
+          }
+          if (component) {
+            component.destroy();
+          }
         },
       };
     },

js/src/components/Editor/MentionList.vue

@@ -7,7 +7,7 @@
       :key="index"
       @click="selectItem(index)"
     >
-      <actor-card :actor="item" />
+      <actor-inline :actor="item" />
     </button>
   </div>
 </template>
@@ -16,11 +16,11 @@
 import { Vue, Component, Prop, Watch } from "vue-property-decorator";
 import { displayName, usernameWithDomain } from "@/types/actor/actor.model";
 import { IPerson } from "@/types/actor";
-import ActorCard from "../../components/Account/ActorCard.vue";
+import ActorInline from "../../components/Account/ActorInline.vue";
 
 @Component({
   components: {
-    ActorCard,
+    ActorInline,
   },
 })
 export default class MentionList extends Vue {