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