Add optional OIDC avatar fetching from the “picture” claim

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

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index 1eaa7cfa4e2a121034dfcbd3acc6bf9125fe7e6c..8f023836b090876360c120df95e3c1f0a137bf18 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 {getLoading, htmlToDom} from '../services/dom.ts';
+import {buildForInput} from '../wysiwyg-tinymce/config';
 
 export class PageComments extends Component {
 
@@ -16,27 +17,30 @@ export class PageComments extends Component {
         this.formContainer = this.$refs.formContainer;
         this.form = this.$refs.form;
         this.formInput = this.$refs.formInput;
+        this.formReplyLink = this.$refs.formReplyLink;
         this.addCommentButton = this.$refs.addCommentButton;
         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;
 
         // Internal State
         this.parentId = null;
+        this.formReplyText = this.formReplyLink?.textContent || '';
 
         this.setupListeners();
     }
 
     setupListeners() {
-        this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
-        this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
-        this.addCommentButton.addEventListener('click', this.showForm.bind(this));
-
         this.elem.addEventListener('page-comment-delete', () => {
-            this.updateCount();
+            setTimeout(() => this.updateCount(), 1);
             this.hideForm();
         });
 
@@ -45,6 +49,9 @@ export class PageComments extends Component {
         });
 
         if (this.form) {
+            this.removeReplyToButton.addEventListener('click', this.removeReplyTo.bind(this));
+            this.hideFormButton.addEventListener('click', this.hideForm.bind(this));
+            this.addCommentButton.addEventListener('click', this.showForm.bind(this));
             this.form.addEventListener('submit', this.saveComment.bind(this));
         }
     }
@@ -58,15 +65,20 @@ export class PageComments extends Component {
         this.form.after(loading);
         this.form.toggleAttribute('hidden', true);
 
-        const text = this.formInput.value;
         const reqData = {
-            text,
+            html: this.wysiwygEditor.getContent(),
             parent_id: this.parentId || null,
         };
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);
-            this.formContainer.after(newElem);
+
+            if (reqData.parent_id) {
+                this.formContainer.after(newElem);
+            } else {
+                this.container.append(newElem);
+            }
+
             window.$events.success(this.createdText);
             this.hideForm();
             this.updateCount();
@@ -81,21 +93,23 @@ export class PageComments extends Component {
 
     updateCount() {
         const count = this.getCommentCount();
-        this.commentsTitle.textContent = window.trans_plural(this.countText, count, {count});
+        this.commentsTitle.textContent = window.$trans.choice(this.countText, count, {count});
     }
 
     resetForm() {
+        this.removeEditor();
         this.formInput.value = '';
-        this.removeReplyTo();
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
         this.container.append(this.formContainer);
     }
 
     showForm() {
+        this.removeEditor();
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
-        setTimeout(() => {
-            this.formInput.focus();
-        }, 100);
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        this.loadEditor();
     }
 
     hideForm() {
@@ -109,25 +123,53 @@ export class PageComments extends Component {
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
+    loadEditor() {
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.focus();
+            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];
+            setTimeout(() => this.wysiwygEditor.focus(), 50);
+        });
+    }
+
+    removeEditor() {
+        if (this.wysiwygEditor) {
+            this.wysiwygEditor.remove();
+            this.wysiwygEditor = null;
+        }
+    }
+
     getCommentCount() {
         return this.container.querySelectorAll('[component="page-comment"]').length;
     }
 
     setReply(commentLocalId, commentElement) {
         const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');
-        this.showForm();
         targetFormLocation.append(this.formContainer);
-        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        this.showForm();
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
-        const replyLink = this.replyToRow.querySelector('a');
-        replyLink.textContent = `#${this.parentId}`;
-        replyLink.href = `#comment${this.parentId}`;
+        this.formReplyLink.textContent = this.formReplyText.replace('1234', this.parentId);
+        this.formReplyLink.href = `#comment${this.parentId}`;
     }
 
     removeReplyTo() {
         this.parentId = null;
         this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
+        this.showForm();
     }
 
 }