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