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