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

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