forked from potsda.mn/mobilizon
Fixed programatically inserting comments
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
5afdd80c71
commit
73ed0f5e34
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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();
|
||||
|
|
Loading…
Reference in a new issue