From 73ed0f5e34449ee469e36c8e9f12a6a58735a7f0 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Sun, 2 May 2021 20:41:23 +0200
Subject: [PATCH] Fixed programatically inserting comments

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 js/src/components/Comment/Comment.vue |  6 ++++++
 js/src/components/Editor.vue          | 27 +++++++++++++++++----------
 js/src/components/Editor/Mention.ts   |  5 +++--
 3 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
index 289552a95..8d5810b8f 100644
--- a/js/src/components/Comment/Comment.vue
+++ b/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 {
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index 1ede50769..e14a7d0d1 100644
--- a/js/src/components/Editor.vue
+++ b/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 {
diff --git a/js/src/components/Editor/Mention.ts b/js/src/components/Editor/Mention.ts
index 7e237afd5..b025e49ed 100644
--- a/js/src/components/Editor/Mention.ts
+++ b/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();