ZIP Imports: Added API examples, finished testing

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

diff --git a/resources/js/components/page-comment.ts b/resources/js/components/page-comment.ts
index 5a148c258856f59aa708f06daa79f883a6db3e7f..8334ebb8a092ce25bc1783d2a9930df6a215cffe 100644 (file)
--- a/resources/js/components/page-comment.ts
+++ b/resources/js/components/page-comment.ts
@@ -1,43 +1,49 @@
 import {Component} from './component';
 import {Component} from './component';

-import {findTargetNodeAndOffset, getLoading, hashElement, 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";
 
 import {el} from "../wysiwyg/utils/dom";
 

-import commentIcon from "@icons/comment.svg"
+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 {
 
 
 export class PageComment extends Component {
 

-    protected commentId: string;
-    protected commentLocalId: string;
-    protected commentContentRef: string;
-    protected deletedText: string;
-    protected updatedText: string;
-    protected viewCommentText: 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 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;
 
     setup() {
         // Options
         this.commentId = this.$opts.commentId;
         this.commentLocalId = this.$opts.commentLocalId;

-        this.commentContentRef = this.$opts.commentContentRef;

         this.deletedText = this.$opts.deletedText;
         this.updatedText = this.$opts.updatedText;
         this.deletedText = this.$opts.deletedText;
         this.updatedText = this.$opts.updatedText;

-        this.viewCommentText = this.$opts.viewCommentText;
+        this.archiveText = this.$opts.archiveText;

 
         // Editor reference and text options
 
         // Editor reference and text options

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

         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
 
         // Element references
         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
 
         // Element references


@@ -48,18 +54,19 @@ export class PageComment extends Component {
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;
         this.editButton = this.$refs.editButton;
         this.deleteButton = this.$refs.deleteButton;
         this.replyButton = this.$refs.replyButton;

+        this.archiveButton = this.$refs.archiveButton;

         this.input = this.$refs.input as HTMLInputElement;
 
         this.setupListeners();
         this.input = this.$refs.input as HTMLInputElement;
 
         this.setupListeners();

-        this.positionForReference();

     }
 
     protected setupListeners(): void {
         if (this.replyButton) {
     }
 
     protected setupListeners(): void {
         if (this.replyButton) {

-            this.replyButton.addEventListener('click', () => this.$emit('reply', {
+            const data: PageCommentReplyEventData = {

                 id: this.commentLocalId,
                 element: this.container,
                 id: this.commentLocalId,
                 element: this.container,

-            }));
+            };
+            this.replyButton.addEventListener('click', () => this.$emit('reply', data));

         }
 
         if (this.editButton) {
         }
 
         if (this.editButton) {


@@ -71,6 +78,10 @@ export class PageComment extends Component {
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }
         if (this.deleteButton) {
             this.deleteButton.addEventListener('click', this.delete.bind(this));
         }

+
+        if (this.archiveButton) {
+            this.archiveButton.addEventListener('click', this.archive.bind(this));
+        }

     }
 
     protected toggleEditMode(show: boolean) : void {
     }
 
     protected toggleEditMode(show: boolean) : void {


@@ -78,7 +89,7 @@ export class PageComment extends Component {
         this.form.toggleAttribute('hidden', !show);
     }
 
         this.form.toggleAttribute('hidden', !show);
     }
 

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

         this.toggleEditMode(true);
 
         if (this.wysiwygEditor) {
         this.toggleEditMode(true);
 
         if (this.wysiwygEditor) {


@@ -86,21 +97,20 @@ export class PageComment extends Component {
             return;
         }
 
             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'),
             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> {
     }
 
     protected async update(event: Event): Promise<void> {


@@ -109,7 +119,7 @@ export class PageComment 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() || '',

         };
 
         try {
         };
 
         try {


@@ -119,7 +129,9 @@ export class PageComment extends Component {
             window.$events.success(this.updatedText);
         } catch (err) {
             console.error(err);
             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();
         }
             this.form.toggleAttribute('hidden', false);
             loading.remove();
         }


@@ -130,112 +142,41 @@ export class PageComment extends Component {
 
         await window.$http.delete(`/comment/${this.commentId}`);
         this.$emit('delete');
 
         await window.$http.delete(`/comment/${this.commentId}`);
         this.$emit('delete');

-        this.container.closest('.comment-branch').remove();
-        window.$events.success(this.deletedText);
-    }
-
-    protected showLoading(): HTMLElement {
-        const loading = getLoading();
-        loading.classList.add('px-l');
-        this.container.append(loading);
-        return loading;
-    }
-
-    protected positionForReference() {
-        if (!this.commentContentRef) {
-            return;
-        }
-
-        const [refId, refHash, refRange] = this.commentContentRef.split(':');
-        const refEl = document.getElementById(refId);
-        if (!refEl) {
-            // TODO - Show outdated marker for comment
-            return;
-        }

 
 

-        const actualHash = hashElement(refEl);
-        if (actualHash !== refHash) {
-            // TODO - Show outdated marker for comment
-            return;
-        }
-
-        const refElBounds = refEl.getBoundingClientRect();
-        let bounds = refElBounds;
-        const [rangeStart, rangeEnd] = refRange.split('-');
-        if (rangeStart && rangeEnd) {
-            const range = new Range();
-            const relStart = findTargetNodeAndOffset(refEl, Number(rangeStart));
-            const relEnd = findTargetNodeAndOffset(refEl, Number(rangeEnd));
-            if (relStart && relEnd) {
-                range.setStart(relStart.node, relStart.offset);
-                range.setEnd(relEnd.node, relEnd.offset);
-                bounds = range.getBoundingClientRect();
+        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();

         }
 
         }
 

-        const relLeft = bounds.left - refElBounds.left;
-        const relTop = bounds.top - refElBounds.top;
-
-        const marker = el('button', {
-            type: 'button',
-            class: 'content-comment-marker',
-            title: this.viewCommentText,
-        });
-        marker.innerHTML = <string>commentIcon;
-        marker.addEventListener('click', event => {
-            this.showCommentAtMarker(marker);
-        });
-
-        const markerWrap = el('div', {
-            class: 'content-comment-highlight',
-            style: `left: ${relLeft}px; top: ${relTop}px; width: ${bounds.width}px; height: ${bounds.height}px;`
-        }, [marker]);
-
-        refEl.style.position = 'relative';
-        refEl.append(markerWrap);
+        window.$events.success(this.deletedText);

     }
 
     }
 

-    protected showCommentAtMarker(marker: HTMLElement): void {
-
-        marker.hidden = true;
-        const readClone = this.container.closest('.comment-branch').cloneNode(true) as HTMLElement;
-        const toRemove = readClone.querySelectorAll('.actions, form');
-        for (const el of toRemove) {
-            el.remove();
+    protected async archive(): Promise<void> {
+        this.showLoading();
+        const isArchived = this.archiveButton.dataset.isArchived === 'true';
+        const action = isArchived ? 'unarchive' : 'archive';
+
+        const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
+        window.$events.success(this.archiveText);
+        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();
+    }

 
 

-        const close = el('button', {type: 'button'}, ['x']);
-        const jump = el('button', {type: 'button'}, ['Jump to thread']);
-
-        const commentWindow = el('div', {
-            class: 'content-comment-window'
-        }, [
-            el('div', {
-                class: 'content-comment-window-actions',
-            }, [jump, close]),
-            el('div', {
-                class: 'content-comment-window-content',
-            }, [readClone]),
-        ]);
-
-        marker.parentElement.append(commentWindow);
-
-        const closeAction = () => {
-            commentWindow.remove();
-            marker.hidden = false;
-        };
-
-        close.addEventListener('click', closeAction.bind(this));
-
-        jump.addEventListener('click', () => {
-            closeAction();
-            this.container.scrollIntoView({behavior: 'smooth'});
-            const highlightTarget = this.container.querySelector('.header') as HTMLElement;
-            highlightTarget.classList.add('anim-highlight');
-            highlightTarget.addEventListener('animationend', () => highlightTarget.classList.remove('anim-highlight'))
-        });
-
-        // TODO - Position wrapper sensibly
-        // TODO - Movement control?
+    protected showLoading(): HTMLElement {
+        const loading = getLoading();
+        loading.classList.add('px-l');
+        this.container.append(loading);
+        return loading;

     }
 }
     }
 }