Fixed programatically inserting comments

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-05-02 20:41:23 +02:00
parent 5afdd80c71
commit 73ed0f5e34
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 26 additions and 12 deletions

View file

@ -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 {

View file

@ -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 {

View file

@ -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();