ZIP Imports: Added API examples, finished testing

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

diff --git a/resources/js/components/page-comments.ts b/resources/js/components/page-comments.ts
index 94f5ab3bb8e73ead67de167cb1381623e14fa260..a1eeda1f9d9c28ec7e5f0cf00553b3ff5300cde8 100644 (file)
--- a/resources/js/components/page-comments.ts
+++ b/resources/js/components/page-comments.ts
@@ -1,10 +1,11 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
 import {Component} from './component';
 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";
 import {PageCommentArchiveEventData, PageCommentReplyEventData} from "./page-comment";
 import {Tabs} from "./tabs";
 import {PageCommentReference} from "./page-comment-reference";
 import {scrollAndHighlightElement} from "../services/util";
 import {PageCommentArchiveEventData, PageCommentReplyEventData} from "./page-comment";

+import {el} from "../wysiwyg/utils/dom";
+import {SimpleWysiwygEditorInterface} from "../wysiwyg";

 
 export class PageComments extends Component {
 
 
 export class PageComments extends Component {
 


@@ -16,6 +17,7 @@ export class PageComments extends Component {
     private archivedTab!: HTMLElement;
     private addButtonContainer!: HTMLElement;
     private archiveContainer!: HTMLElement;
     private archivedTab!: HTMLElement;
     private addButtonContainer!: HTMLElement;
     private archiveContainer!: HTMLElement;

+    private activeContainer!: HTMLElement;

     private replyToRow!: HTMLElement;
     private referenceRow!: HTMLElement;
     private formContainer!: HTMLElement;
     private replyToRow!: HTMLElement;
     private referenceRow!: HTMLElement;
     private formContainer!: HTMLElement;


@@ -27,9 +29,8 @@ export class PageComments extends Component {
     private hideFormButton!: HTMLElement;
     private removeReplyToButton!: HTMLElement;
     private removeReferenceButton!: HTMLElement;
     private hideFormButton!: HTMLElement;
     private removeReplyToButton!: HTMLElement;
     private removeReferenceButton!: HTMLElement;

-    private wysiwygLanguage!: string;

     private wysiwygTextDirection!: string;
     private wysiwygTextDirection!: string;

-    private wysiwygEditor: any = null;
+    private wysiwygEditor: SimpleWysiwygEditorInterface|null = null;

     private createdText!: string;
     private countText!: string;
     private archivedCountText!: string;
     private createdText!: string;
     private countText!: string;
     private archivedCountText!: string;


@@ -48,6 +49,7 @@ export class PageComments extends Component {
         this.archivedTab = this.$refs.archivedTab;
         this.addButtonContainer = this.$refs.addButtonContainer;
         this.archiveContainer = this.$refs.archiveContainer;
         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;
         this.replyToRow = this.$refs.replyToRow;
         this.referenceRow = this.$refs.referenceRow;
         this.formContainer = this.$refs.formContainer;


@@ -61,7 +63,6 @@ export class PageComments extends Component {
         this.removeReferenceButton = this.$refs.removeReferenceButton;
 
         // WYSIWYG options
         this.removeReferenceButton = this.$refs.removeReferenceButton;
 
         // WYSIWYG options

-        this.wysiwygLanguage = this.$opts.wysiwygLanguage;

         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
 
         // Translations
         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
 
         // Translations


@@ -76,8 +77,10 @@ export class PageComments extends Component {
 
     protected setupListeners(): void {
         this.elem.addEventListener('page-comment-delete', () => {
 
     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: CustomEvent<PageCommentReplyEventData>) => {
         });
 
         this.elem.addEventListener('page-comment-reply', ((event: CustomEvent<PageCommentReplyEventData>) => {


@@ -103,7 +106,7 @@ export class PageComments extends Component {
         }
     }
 
         }
     }
 

-    protected saveComment(event: SubmitEvent): void {
+    protected async saveComment(event: SubmitEvent): Promise<void> {

         event.preventDefault();
         event.stopPropagation();
 
         event.preventDefault();
         event.stopPropagation();
 


@@ -113,7 +116,7 @@ export class PageComments extends Component {
         this.form.toggleAttribute('hidden', true);
 
         const reqData = {
         this.form.toggleAttribute('hidden', true);
 
         const reqData = {

-            html: this.wysiwygEditor.getContent(),
+            html: (await this.wysiwygEditor?.getContentAsHtml()) || '',

             parent_id: this.parentId || null,
             content_ref: this.contentReference,
         };
             parent_id: this.parentId || null,
             content_ref: this.contentReference,
         };


@@ -154,8 +157,10 @@ export class PageComments extends Component {
     protected resetForm(): void {
         this.removeEditor();
         this.formInput.value = '';
     protected resetForm(): void {
         this.removeEditor();
         this.formInput.value = '';

+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);

         this.setContentReference('');
         this.setContentReference('');

-        this.removeReplyTo();

     }
 
     protected showForm(): void {
     }
 
     protected showForm(): void {


@@ -165,9 +170,9 @@ export class PageComments extends Component {
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
         this.loadEditor();
 
         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');
         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');
         }
     }
             tabs.show('comment-tab-panel-active');
         }
     }


@@ -176,34 +181,32 @@ export class PageComments extends Component {
         this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getActiveThreadCount() > 0) {
         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);
         }
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
         } else {
             this.commentCountBar.append(this.addButtonContainer);
         }
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 

-    protected loadEditor(): void {
+    protected async loadEditor(): Promise<void> {

         if (this.wysiwygEditor) {
             this.wysiwygEditor.focus();
             return;
         }
 
         if (this.wysiwygEditor) {
             this.wysiwygEditor.focus();
             return;
         }
 

-        const config = buildForInput({
-            language: this.wysiwygLanguage,
-            containerElement: this.formInput,
+        type WysiwygModule = typeof import('../wysiwyg');
+        const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
+        const container = el('div', {class: 'comment-editor-container'});
+        this.formInput.parentElement?.appendChild(container);
+        this.formInput.hidden = true;
+
+        this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, '<p></p>', {

             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,
             darkMode: document.documentElement.classList.contains('dark-mode'),
             textDirection: this.wysiwygTextDirection,

-            drawioUrl: '',
-            pageId: 0,
-            translations: {},
-            translationMap: (window as unknown as Record<string, Object>).editor_translations,
+            translations: (window as unknown as Record<string, Object>).editor_translations,

         });
 
         });
 

-        (window as unknown as {tinymce: {init: (arg0: Object) => Promise<any>}}).tinymce.init(config).then(editors => {
-            this.wysiwygEditor = editors[0];
-            setTimeout(() => this.wysiwygEditor.focus(), 50);
-        });
+        this.wysiwygEditor.focus();

     }
 
     protected removeEditor(): void {
     }
 
     protected removeEditor(): void {


@@ -239,7 +242,8 @@ export class PageComments extends Component {
     }
 
     public startNewComment(contentReference: string): void {
     }
 
     public startNewComment(contentReference: string): void {

-        this.removeReplyTo();
+        this.resetForm();
+        this.showForm();

         this.setContentReference(contentReference);
     }
 
         this.setContentReference(contentReference);
     }