X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/c82fa332100fb9f423f5db6ae3de5423de0a2941..refs/pull/5676/head:/resources/js/components/page-comment.ts

diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts
index ce35cdc4a..8334ebb8a 100644
--- a/resources/js/components/page-comment.ts
+++ b/resources/js/components/page-comment.ts
@@ -1,40 +1,49 @@
 import {Component} from './component';
-import {getLoading, htmlToDom} from '../services/dom.ts';
-import {buildForInput} from '../wysiwyg-tinymce/config';
+import {getLoading, htmlToDom} from '../services/dom';
 import {PageCommentReference} from "./page-comment-reference";
+import {HttpError} from "../services/http";
+import {SimpleWysiwygEditorInterface} from "../wysiwyg";
+import {el} from "../wysiwyg/utils/dom";
+
+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 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 commentId!: string;
+    protected commentLocalId!: string;
+    protected deletedText!: string;
+    protected updatedText!: string;
+    protected archiveText!: string;
+
+    protected wysiwygEditor: SimpleWysiwygEditorInterface|null = null;
+    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
-        this.wysiwygLanguage = this.$opts.wysiwygLanguage;
         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
 
         // Element references
@@ -53,10 +62,11 @@ export class PageComment extends Component {
 
     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) {
@@ -79,7 +89,7 @@ export class PageComment extends Component {
         this.form.toggleAttribute('hidden', !show);
     }
 
-    protected startEdit() : void {
+    protected async startEdit(): Promise<void> {
         this.toggleEditMode(true);
 
         if (this.wysiwygEditor) {
@@ -87,21 +97,20 @@ export class PageComment extends Component {
             return;
         }
 
-        const config = buildForInput({
-            language: this.wysiwygLanguage,
-            containerElement: this.input,
+        type WysiwygModule = typeof import('../wysiwyg');
+        const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
+        const editorContent = this.input.value;
+        const container = el('div', {class: 'comment-editor-container'});
+        this.input.parentElement?.appendChild(container);
+        this.input.hidden = true;
+
+        this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, editorContent, {
             darkMode: document.documentElement.classList.contains('dark-mode'),
-            textDirection: this.wysiwygTextDirection,
-            drawioUrl: '',
-            pageId: 0,
-            translations: {},
-            translationMap: (window as Record<string, Object>).editor_translations,
+            textDirection: this.$opts.textDirection,
+            translations: (window as unknown as Record<string, Object>).editor_translations,
         });
 
-        (window as {tinymce: {init: (Object) => Promise<any>}}).tinymce.init(config).then(editors => {
-            this.wysiwygEditor = editors[0];
-            setTimeout(() => this.wysiwygEditor.focus(), 50);
-        });
+        this.wysiwygEditor.focus();
     }
 
     protected async update(event: Event): Promise<void> {
@@ -110,7 +119,7 @@ export class PageComment extends Component {
         this.form.toggleAttribute('hidden', true);
 
         const reqData = {
-            html: this.wysiwygEditor.getContent(),
+            html: await this.wysiwygEditor?.getContentAsHtml() || '',
         };
 
         try {
@@ -120,7 +129,9 @@ export class PageComment extends Component {
             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();
         }
@@ -151,7 +162,8 @@ export class PageComment extends Component {
 
         const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
         window.$events.success(this.archiveText);
-        this.$emit(action, {new_thread_dom: htmlToDom(response.data as string)});
+        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');