import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom.ts';
+import {getLoading, htmlToDom} from '../services/dom';
import {buildForInput} from '../wysiwyg-tinymce/config';
+import {PageCommentReference} from "./page-comment-reference";
+import {HttpError} from "../services/http";
+
+export interface PageCommentReplyEventData {
+ id: string; // ID of comment being replied to
+ element: HTMLElement; // Container for comment replied to
+}
+
+export interface PageCommentArchiveEventData {
+ new_thread_dom: HTMLElement;
+}
export class PageComment extends Component {
- protected commentId: string;
- protected commentLocalId: string;
- protected deletedText: string;
- protected updatedText: string;
- protected archiveText: string;
+ protected commentId!: string;
+ protected commentLocalId!: string;
+ protected deletedText!: string;
+ protected updatedText!: string;
+ protected archiveText!: string;
protected wysiwygEditor: any = null;
- protected wysiwygLanguage: string;
- protected wysiwygTextDirection: string;
-
- protected container: HTMLElement;
- protected contentContainer: HTMLElement;
- protected form: HTMLFormElement;
- protected formCancel: HTMLElement;
- protected editButton: HTMLElement;
- protected deleteButton: HTMLElement;
- protected replyButton: HTMLElement;
- protected archiveButton: HTMLElement;
- protected input: HTMLInputElement;
+ protected wysiwygLanguage!: string;
+ protected wysiwygTextDirection!: string;
+
+ protected container!: HTMLElement;
+ protected contentContainer!: HTMLElement;
+ protected form!: HTMLFormElement;
+ protected formCancel!: HTMLElement;
+ protected editButton!: HTMLElement;
+ protected deleteButton!: HTMLElement;
+ protected replyButton!: HTMLElement;
+ protected archiveButton!: HTMLElement;
+ protected input!: HTMLInputElement;
setup() {
// Options
this.commentId = this.$opts.commentId;
this.commentLocalId = this.$opts.commentLocalId;
this.deletedText = this.$opts.deletedText;
- this.deletedText = this.$opts.deletedText;
+ this.updatedText = this.$opts.updatedText;
this.archiveText = this.$opts.archiveText;
// Editor reference and text options
protected setupListeners(): void {
if (this.replyButton) {
- this.replyButton.addEventListener('click', () => this.$emit('reply', {
+ const data: PageCommentReplyEventData = {
id: this.commentLocalId,
element: this.container,
- }));
+ };
+ this.replyButton.addEventListener('click', () => this.$emit('reply', data));
}
if (this.editButton) {
drawioUrl: '',
pageId: 0,
translations: {},
- translationMap: (window as Record<string, Object>).editor_translations,
+ translationMap: (window as unknown as Record<string, Object>).editor_translations,
});
- (window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {
+ (window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {
this.wysiwygEditor = editors[0];
setTimeout(() => this.wysiwygEditor.focus(), 50);
});
window.$events.success(this.updatedText);
} catch (err) {
console.error(err);
- window.$events.showValidationErrors(err);
+ if (err instanceof HttpError) {
+ window.$events.showValidationErrors(err);
+ }
this.form.toggleAttribute('hidden', false);
loading.remove();
}
await window.$http.delete(`/comment/${this.commentId}`);
this.$emit('delete');
- this.container.closest('.comment-branch')?.remove();
+
+ const branch = this.container.closest('.comment-branch');
+ if (branch instanceof HTMLElement) {
+ const refs = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
+ for (const ref of refs) {
+ ref.hideMarker();
+ }
+ branch.remove();
+ }
+
window.$events.success(this.deletedText);
}
const action = isArchived ? 'unarchive' : 'archive';
const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
- this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)});
window.$events.success(this.archiveText);
- this.container.closest('.comment-branch')?.remove();
+ const eventData: PageCommentArchiveEventData = {new_thread_dom: htmlToDom(response.data as string)};
+ this.$emit(action, eventData);
+
+ const branch = this.container.closest('.comment-branch') as HTMLElement;
+ const references = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
+ for (const reference of references) {
+ reference.hideMarker();
+ }
+ branch.remove();
}
protected showLoading(): HTMLElement {