Fixed programatically inserting comments

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

js/src/components/Comment/Comment.vue

@@ -212,6 +212,7 @@ export default class Comment extends Vue {
   // See https://github.com/kaorun343/vue-property-decorator/issues/257
   @Ref() readonly commentEditor!: EditorComponent & {
     replyToComment: (comment: IComment) => void;
+    focus: () => void;
   };
 
   currentActor!: IPerson;
@@ -242,6 +243,11 @@ export default class Comment extends Vue {
       return;
     }
     this.replyTo = true;
+    if (this.comment.actor) {
+      this.commentEditor.replyToComment(this.comment.actor);
+      await this.$nextTick; // wait for the mention to be injected
+      this.commentEditor.focus();
+    }
   }
 
   replyToComment(): void {

js/src/components/Editor.vue

@@ -183,12 +183,11 @@ import { defaultExtensions } from "@tiptap/starter-kit";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";
 import Text from "@tiptap/extension-text";
-import { Actor, IActor, IPerson } from "../types/actor";
+import { IActor, IPerson, usernameWithDomain } from "../types/actor";
 import CustomImage from "./Editor/Image";
 import { UPLOAD_MEDIA } from "../graphql/upload";
 import { listenFileUpload } from "../utils/upload";
 import { CURRENT_ACTOR_CLIENT } from "../graphql/actor";
-import { IComment } from "../types/comment.model";
 import Mention from "@tiptap/extension-mention";
 import MentionOptions from "./Editor/Mention";
 import OrderedList from "@tiptap/extension-ordered-list";
@@ -324,15 +323,23 @@ export default class EditorComponent extends Vue {
   /**
    * We use this to programatically insert an actor mention when creating a reply to comment
    */
-  replyToComment(comment: IComment): void {
-    if (!comment.actor) return;
-    // const actorModel = new Actor(comment.actor);
+  replyToComment(actor: IActor): void {
     if (!this.editor) return;
-    // this.editor.commands.mention({
-    //   id: actorModel.id,
-    //   label: actorModel.usernameWithDomain().substring(1),
-    // });
-    this.editor.commands.focus();
+    this.editor
+      .chain()
+      .focus()
+      .insertContent({
+        type: "mention",
+        attrs: {
+          id: usernameWithDomain(actor),
+        },
+      })
+      .insertContent(" ")
+      .run();
+  }
+
+  focus(): void {
+    this.editor?.chain().focus("end");
   }
 
   beforeDestroy(): void {

js/src/components/Editor/Mention.ts

@@ -63,8 +63,9 @@ const mentionOptions: Partial<any> = {
           });
         },
         onKeyDown(props: any) {
-          const ref = component.ref as typeof MentionList;
-          return ref?.onKeyDown(props);
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          return component.ref?.onKeyDown(props);
         },
         onExit() {
           popup[0].destroy();