X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/3b46b92bb9751fe684d3c3f1cae4b942ee44b36f..refs/pull/5280/head:/resources/js/components/page-comment.js

diff --git a/resources/js/components/page-comment.js b/resources/js/components/page-comment.js
index 43159b42c..fd8ad1f2e 100644
--- a/resources/js/components/page-comment.js
+++ b/resources/js/components/page-comment.js
@@ -1,5 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
+import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComment extends Component {
 
@@ -11,7 +12,12 @@ export class PageComment extends Component {
         this.deletedText = this.$opts.deletedText;
         this.updatedText = this.$opts.updatedText;
 
-        // Element References
+        // Editor reference and text options
+        this.wysiwygEditor = null;
+        this.wysiwygLanguage = this.$opts.wysiwygLanguage;
+        this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
+
+        // Element references
         this.container = this.$el;
         this.contentContainer = this.$refs.contentContainer;
         this.form = this.$refs.form;
@@ -25,14 +31,22 @@ export class PageComment extends Component {
     }
 
     setupListeners() {
-        this.replyButton.addEventListener('click', () => this.$emit('reply', {
-            id: this.commentLocalId,
-            element: this.container,
-        }));
-        this.editButton.addEventListener('click', this.startEdit.bind(this));
-        this.deleteButton.addEventListener('click', this.delete.bind(this));
-        this.form.addEventListener('submit', this.update.bind(this));
-        this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
+        if (this.replyButton) {
+            this.replyButton.addEventListener('click', () => this.$emit('reply', {
+                id: this.commentLocalId,
+                element: this.container,
+            }));
+        }
+
+        if (this.editButton) {
+            this.editButton.addEventListener('click', this.startEdit.bind(this));
+            this.form.addEventListener('submit', this.update.bind(this));
+            this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
+        }
+
+        if (this.deleteButton) {
+            this.deleteButton.addEventListener('click', this.delete.bind(this));
+        }
     }
 
     toggleEditMode(show) {
@@ -42,8 +56,25 @@ export class PageComment extends Component {
 
     startEdit() {
         this.toggleEditMode(true);
-        const lineCount = this.$refs.input.value.split('\n').length;
-        this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
+
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.focus();
+            return;
+        }
+
+        const config = buildForInput({
+            language: this.wysiwygLanguage,
+            containerElement: this.input,
+            darkMode: document.documentElement.classList.contains('dark-mode'),
+            textDirection: this.wysiwygTextDirection,
+            translations: {},
+            translationMap: window.editor_translations,
+        });
+
+        window.tinymce.init(config).then(editors => {
+            this.wysiwygEditor = editors[0];
+            setTimeout(() => this.wysiwygEditor.focus(), 50);
+        });
     }
 
     async update(event) {
@@ -52,7 +83,7 @@ export class PageComment extends Component {
         this.form.toggleAttribute('hidden', true);
 
         const reqData = {
-            text: this.input.value,
+            html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
         };
 
@@ -73,9 +104,9 @@ export class PageComment extends Component {
         this.showLoading();
 
         await window.$http.delete(`/comment/${this.commentId}`);
+        this.$emit('delete');
         this.container.closest('.comment-branch').remove();
         window.$events.success(this.deletedText);
-        this.$emit('delete');
     }
 
     showLoading() {