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