BookStack Code Mirror - bookstack/blob - resources/js/components/page-comment.ts

   1 import {Component} from './component';
   2 import {getLoading, htmlToDom} from '../services/dom';
   3 import {PageCommentReference} from "./page-comment-reference";
   4 import {HttpError} from "../services/http";
   5 import {SimpleWysiwygEditorInterface} from "../wysiwyg";
   6 import {el} from "../wysiwyg/utils/dom";
   7
   8 export interface PageCommentReplyEventData {
   9     id: string; // ID of comment being replied to
  10     element: HTMLElement; // Container for comment replied to
  11 }
  12
  13 export interface PageCommentArchiveEventData {
  14     new_thread_dom: HTMLElement;
  15 }
  16
  17 export class PageComment extends Component {
  18
  19     protected commentId!: string;
  20     protected commentLocalId!: string;
  21     protected deletedText!: string;
  22     protected updatedText!: string;
  23     protected archiveText!: string;
  24
  25     protected wysiwygEditor: SimpleWysiwygEditorInterface|null = null;
  26     protected wysiwygTextDirection!: string;
  27
  28     protected container!: HTMLElement;
  29     protected contentContainer!: HTMLElement;
  30     protected form!: HTMLFormElement;
  31     protected formCancel!: HTMLElement;
  32     protected editButton!: HTMLElement;
  33     protected deleteButton!: HTMLElement;
  34     protected replyButton!: HTMLElement;
  35     protected archiveButton!: HTMLElement;
  36     protected input!: HTMLInputElement;
  37
  38     setup() {
  39         // Options
  40         this.commentId = this.$opts.commentId;
  41         this.commentLocalId = this.$opts.commentLocalId;
  42         this.deletedText = this.$opts.deletedText;
  43         this.updatedText = this.$opts.updatedText;
  44         this.archiveText = this.$opts.archiveText;
  45
  46         // Editor reference and text options
  47         this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
  48
  49         // Element references
  50         this.container = this.$el;
  51         this.contentContainer = this.$refs.contentContainer;
  52         this.form = this.$refs.form as HTMLFormElement;
  53         this.formCancel = this.$refs.formCancel;
  54         this.editButton = this.$refs.editButton;
  55         this.deleteButton = this.$refs.deleteButton;
  56         this.replyButton = this.$refs.replyButton;
  57         this.archiveButton = this.$refs.archiveButton;
  58         this.input = this.$refs.input as HTMLInputElement;
  59
  60         this.setupListeners();
  61     }
  62
  63     protected setupListeners(): void {
  64         if (this.replyButton) {
  65             const data: PageCommentReplyEventData = {
  66                 id: this.commentLocalId,
  67                 element: this.container,
  68             };
  69             this.replyButton.addEventListener('click', () => this.$emit('reply', data));
  70         }
  71
  72         if (this.editButton) {
  73             this.editButton.addEventListener('click', this.startEdit.bind(this));
  74             this.form.addEventListener('submit', this.update.bind(this));
  75             this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
  76         }
  77
  78         if (this.deleteButton) {
  79             this.deleteButton.addEventListener('click', this.delete.bind(this));
  80         }
  81
  82         if (this.archiveButton) {
  83             this.archiveButton.addEventListener('click', this.archive.bind(this));
  84         }
  85     }
  86
  87     protected toggleEditMode(show: boolean) : void {
  88         this.contentContainer.toggleAttribute('hidden', show);
  89         this.form.toggleAttribute('hidden', !show);
  90     }
  91
  92     protected async startEdit(): Promise<void> {
  93         this.toggleEditMode(true);
  94
  95         if (this.wysiwygEditor) {
  96             this.wysiwygEditor.focus();
  97             return;
  98         }
  99
 100         type WysiwygModule = typeof import('../wysiwyg');
 101         const wysiwygModule = (await window.importVersioned('wysiwyg')) as WysiwygModule;
 102         const editorContent = this.input.value;
 103         const container = el('div', {class: 'comment-editor-container'});
 104         this.input.parentElement?.appendChild(container);
 105         this.input.hidden = true;
 106
 107         this.wysiwygEditor = wysiwygModule.createBasicEditorInstance(container as HTMLElement, editorContent, {
 108             darkMode: document.documentElement.classList.contains('dark-mode'),
 109             textDirection: this.$opts.textDirection,
 110             translations: (window as unknown as Record<string, Object>).editor_translations,
 111         });
 112
 113         this.wysiwygEditor.focus();
 114     }
 115
 116     protected async update(event: Event): Promise<void> {
 117         event.preventDefault();
 118         const loading = this.showLoading();
 119         this.form.toggleAttribute('hidden', true);
 120
 121         const reqData = {
 122             html: await this.wysiwygEditor?.getContentAsHtml() || '',
 123         };
 124
 125         try {
 126             const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
 127             const newComment = htmlToDom(resp.data as string);
 128             this.container.replaceWith(newComment);
 129             window.$events.success(this.updatedText);
 130         } catch (err) {
 131             console.error(err);
 132             if (err instanceof HttpError) {
 133                 window.$events.showValidationErrors(err);
 134             }
 135             this.form.toggleAttribute('hidden', false);
 136             loading.remove();
 137         }
 138     }
 139
 140     protected async delete(): Promise<void> {
 141         this.showLoading();
 142
 143         await window.$http.delete(`/comment/${this.commentId}`);
 144         this.$emit('delete');
 145
 146         const branch = this.container.closest('.comment-branch');
 147         if (branch instanceof HTMLElement) {
 148             const refs = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
 149             for (const ref of refs) {
 150                 ref.hideMarker();
 151             }
 152             branch.remove();
 153         }
 154
 155         window.$events.success(this.deletedText);
 156     }
 157
 158     protected async archive(): Promise<void> {
 159         this.showLoading();
 160         const isArchived = this.archiveButton.dataset.isArchived === 'true';
 161         const action = isArchived ? 'unarchive' : 'archive';
 162
 163         const response = await window.$http.put(`/comment/${this.commentId}/${action}`);
 164         window.$events.success(this.archiveText);
 165         const eventData: PageCommentArchiveEventData = {new_thread_dom: htmlToDom(response.data as string)};
 166         this.$emit(action, eventData);
 167
 168         const branch = this.container.closest('.comment-branch') as HTMLElement;
 169         const references = window.$components.allWithinElement<PageCommentReference>(branch, 'page-comment-reference');
 170         for (const reference of references) {
 171             reference.hideMarker();
 172         }
 173         branch.remove();
 174     }
 175
 176     protected showLoading(): HTMLElement {
 177         const loading = getLoading();
 178         loading.classList.add('px-l');
 179         this.container.append(loading);
 180         return loading;
 181     }
 182 }