Customization: Added parent tag classes

[bookstack] / resources / js / components / page-comments.ts

diff --git a/resources/js/components/page-comments.ts b/resources/js/components/page-comments.ts
index 04c8125808cb8ffe00186073eb8176e0beea86d5..5c1cd014c54d8a67a7012e85a693ec0825f9c690 100644 (file)
--- a/resources/js/components/page-comments.ts
+++ b/resources/js/components/page-comments.ts
@@ -1,50 +1,39 @@
 import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom.ts';
+import {getLoading, htmlToDom} from '../services/dom';
 import {buildForInput} from '../wysiwyg-tinymce/config';
 import {Tabs} from "./tabs";
 import {PageCommentReference} from "./page-comment-reference";
 import {scrollAndHighlightElement} from "../services/util";
-
-export interface CommentReplyEvent extends Event {
-    detail: {
-        id: string; // ID of comment being replied to
-        element: HTMLElement; // Container for comment replied to
-    }
-}
-
-export interface ArchiveEvent extends Event {
-    detail: {
-        new_thread_dom: HTMLElement;
-    }
-}
+import {PageCommentArchiveEventData, PageCommentReplyEventData} from "./page-comment";
 
 export class PageComments extends Component {
 
-    private elem: HTMLElement;
-    private pageId: number;
-    private container: HTMLElement;
-    private commentCountBar: HTMLElement;
-    private activeTab: HTMLElement;
-    private archivedTab: HTMLElement;
-    private addButtonContainer: HTMLElement;
-    private archiveContainer: HTMLElement;
-    private replyToRow: HTMLElement;
-    private referenceRow: HTMLElement;
-    private formContainer: HTMLElement;
-    private form: HTMLFormElement;
-    private formInput: HTMLInputElement;
-    private formReplyLink: HTMLAnchorElement;
-    private formReferenceLink: HTMLAnchorElement;
-    private addCommentButton: HTMLElement;
-    private hideFormButton: HTMLElement;
-    private removeReplyToButton: HTMLElement;
-    private removeReferenceButton: HTMLElement;
-    private wysiwygLanguage: string;
-    private wysiwygTextDirection: string;
+    private elem!: HTMLElement;
+    private pageId!: number;
+    private container!: HTMLElement;
+    private commentCountBar!: HTMLElement;
+    private activeTab!: HTMLElement;
+    private archivedTab!: HTMLElement;
+    private addButtonContainer!: HTMLElement;
+    private archiveContainer!: HTMLElement;
+    private activeContainer!: HTMLElement;
+    private replyToRow!: HTMLElement;
+    private referenceRow!: HTMLElement;
+    private formContainer!: HTMLElement;
+    private form!: HTMLFormElement;
+    private formInput!: HTMLInputElement;
+    private formReplyLink!: HTMLAnchorElement;
+    private formReferenceLink!: HTMLAnchorElement;
+    private addCommentButton!: HTMLElement;
+    private hideFormButton!: HTMLElement;
+    private removeReplyToButton!: HTMLElement;
+    private removeReferenceButton!: HTMLElement;
+    private wysiwygLanguage!: string;
+    private wysiwygTextDirection!: string;
     private wysiwygEditor: any = null;
-    private createdText: string;
-    private countText: string;
-    private archivedCountText: string;
+    private createdText!: string;
+    private countText!: string;
+    private archivedCountText!: string;
     private parentId: number | null = null;
     private contentReference: string = '';
     private formReplyText: string = '';
@@ -60,6 +49,7 @@ export class PageComments extends Component {
         this.archivedTab = this.$refs.archivedTab;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.archiveContainer = this.$refs.archiveContainer;
+        this.activeContainer = this.$refs.activeContainer;
         this.replyToRow = this.$refs.replyToRow;
         this.referenceRow = this.$refs.referenceRow;
         this.formContainer = this.$refs.formContainer;
@@ -88,23 +78,25 @@ export class PageComments extends Component {
 
     protected setupListeners(): void {
         this.elem.addEventListener('page-comment-delete', () => {
-            setTimeout(() => this.updateCount(), 1);
-            this.hideForm();
+            setTimeout(() => {
+                this.updateCount();
+                this.hideForm();
+            }, 1);
         });
 
-        this.elem.addEventListener('page-comment-reply', (event: CommentReplyEvent) => {
+        this.elem.addEventListener('page-comment-reply', ((event: CustomEvent<PageCommentReplyEventData>) => {
             this.setReply(event.detail.id, event.detail.element);
-        });
+        }) as EventListener);
 
-        this.elem.addEventListener('page-comment-archive', (event: ArchiveEvent) => {
+        this.elem.addEventListener('page-comment-archive', ((event: CustomEvent<PageCommentArchiveEventData>) => {
             this.archiveContainer.append(event.detail.new_thread_dom);
             setTimeout(() => this.updateCount(), 1);
-        });
+        }) as EventListener);
 
-        this.elem.addEventListener('page-comment-unarchive', (event: ArchiveEvent) => {
+        this.elem.addEventListener('page-comment-unarchive', ((event: CustomEvent<PageCommentArchiveEventData>) => {
             this.container.append(event.detail.new_thread_dom);
             setTimeout(() => this.updateCount(), 1);
-        });
+        }) as EventListener);
 
         if (this.form) {
             this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
@@ -115,7 +107,7 @@ export class PageComments extends Component {
         }
     }
 
-    protected saveComment(event): void {
+    protected saveComment(event: SubmitEvent): void {
         event.preventDefault();
         event.stopPropagation();
 
@@ -166,8 +158,10 @@ export class PageComments extends Component {
     protected resetForm(): void {
         this.removeEditor();
         this.formInput.value = '';
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
         this.setContentReference('');
-        this.removeReplyTo();
     }
 
     protected showForm(): void {
@@ -177,9 +171,9 @@ export class PageComments extends Component {
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         this.loadEditor();
 
-        // Ensure the active comments tab is displaying
+        // Ensure the active comments tab is displaying if that's where we're showing the form
         const tabs = window.$components.firstOnElement(this.elem, 'tabs');
-        if (tabs instanceof Tabs) {
+        if (tabs instanceof Tabs && this.formContainer.closest('#comment-tab-panel-active')) {
             tabs.show('comment-tab-panel-active');
         }
     }
@@ -188,7 +182,7 @@ export class PageComments extends Component {
         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getActiveThreadCount() > 0) {
-            this.elem.append(this.addButtonContainer);
+            this.activeContainer.append(this.addButtonContainer);
         } else {
             this.commentCountBar.append(this.addButtonContainer);
         }
@@ -209,10 +203,10 @@ export class PageComments extends Component {
             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);
         });
@@ -233,11 +227,11 @@ export class PageComments extends Component {
         return this.archiveContainer.querySelectorAll(':scope > .comment-branch').length;
     }
 
-    protected setReply(commentLocalId, commentElement): void {
-        const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
+    protected setReply(commentLocalId: string, commentElement: HTMLElement): void {
+        const targetFormLocation = (commentElement.closest('.comment-branch') as HTMLElement).querySelector('.comment-branch-children') as HTMLElement;
         targetFormLocation.append(this.formContainer);
         this.showForm();
-        this.parentId = commentLocalId;
+        this.parentId = Number(commentLocalId);
         this.replyToRow.toggleAttribute('hidden', false);
         this.formReplyLink.textContent = this.formReplyText.replace('1234', String(this.parentId));
         this.formReplyLink.href = `#comment${this.parentId}`;
@@ -251,7 +245,8 @@ export class PageComments extends Component {
     }
 
     public startNewComment(contentReference: string): void {
-        this.removeReplyTo();
+        this.resetForm();
+        this.showForm();
         this.setContentReference(contentReference);
     }