Comments: Added input wysiwyg for creating/updating comments

[bookstack] / resources / js / components / page-comments.js

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index e2911afc6a0b649a9793cf2a5443c641f8a3c506..ebcc95f07f44467ec89fd85973f437bc6d7fd585 100644 (file)
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@ -1,5 +1,6 @@
 import {Component} from './component';
 import {getLoading, htmlToDom} from '../services/dom';
+import {buildForInput} from "../wysiwyg/config";
 
 export class PageComments extends Component {
 
@@ -21,6 +22,11 @@ export class PageComments extends Component {
         this.hideFormButton = this.$refs.hideFormButton;
         this.removeReplyToButton = this.$refs.removeReplyToButton;
 
+        // WYSIWYG options
+        this.wysiwygLanguage = this.$opts.wysiwygLanguage;
+        this.wysiwygTextDirection = this.$opts.wysiwygTextDirection;
+        this.wysiwygEditor = null;
+
         // Translations
         this.createdText = this.$opts.createdText;
         this.countText = this.$opts.countText;
@@ -96,9 +102,7 @@ export class PageComments extends Component {
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
         this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
-        setTimeout(() => {
-            this.formInput.focus();
-        }, 100);
+        this.loadEditor();
     }
 
     hideForm() {
@@ -112,6 +116,26 @@ export class PageComments extends Component {
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
+    loadEditor() {
+        if (this.wysiwygEditor) {
+            return;
+        }
+
+        const config = buildForInput({
+            language: this.wysiwygLanguage,
+            containerElement: this.formInput,
+            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];
+            this.wysiwygEditor.focus();
+        });
+    }
+
     getCommentCount() {
         return this.container.querySelectorAll('[component="page-comment"]').length;
     }