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

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