Comments: Updated to show form in expected location

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

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index 9dc5299630baac25eebddd6d35df19ce1d8df419..1eaa7cfa4e2a121034dfcbd3acc6bf9125fe7e6c 100644 (file)
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@ -41,7 +41,7 @@ export class PageComments extends Component {
         });
 
         this.elem.addEventListener('page-comment-reply', event => {
         });
 
         this.elem.addEventListener('page-comment-reply', event => {

-            this.setReply(event.detail.id);
+            this.setReply(event.detail.id, event.detail.element);

         });
 
         if (this.form) {
         });
 
         if (this.form) {


@@ -66,15 +66,16 @@ export class PageComments extends Component {
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);
 
         window.$http.post(`/comment/${this.pageId}`, reqData).then(resp => {
             const newElem = htmlToDom(resp.data);

-            this.container.appendChild(newElem);
+            this.formContainer.after(newElem);

             window.$events.success(this.createdText);
             window.$events.success(this.createdText);

-            this.resetForm();
+            this.hideForm();

             this.updateCount();
         }).catch(err => {
             this.form.toggleAttribute('hidden', false);
             window.$events.showValidationErrors(err);
         });
 
             this.updateCount();
         }).catch(err => {
             this.form.toggleAttribute('hidden', false);
             window.$events.showValidationErrors(err);
         });
 

+        this.form.toggleAttribute('hidden', false);

         loading.remove();
     }
 
         loading.remove();
     }
 


@@ -85,32 +86,38 @@ export class PageComments extends Component {
 
     resetForm() {
         this.formInput.value = '';
 
     resetForm() {
         this.formInput.value = '';

-        this.hideForm();

         this.removeReplyTo();
         this.removeReplyTo();

+        this.container.append(this.formContainer);

     }
 
     showForm() {
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
     }
 
     showForm() {
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);

-        this.formInput.focus();
+        setTimeout(() => {
+            this.formInput.focus();
+        }, 100);

     }
 
     hideForm() {
     }
 
     hideForm() {

+        this.resetForm();

         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {

-            this.elem.appendChild(this.addButtonContainer);
+            this.elem.append(this.addButtonContainer);

         } else {
         } else {

-            this.commentCountBar.appendChild(this.addButtonContainer);
+            this.commentCountBar.append(this.addButtonContainer);

         }
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
     getCommentCount() {
         }
         this.addButtonContainer.toggleAttribute('hidden', false);
     }
 
     getCommentCount() {

-        return this.container.querySelectorAll('[compontent="page-comment"]').length;
+        return this.container.querySelectorAll('[component="page-comment"]').length;

     }
 
     }
 

-    setReply(commentLocalId) {
+    setReply(commentLocalId, commentElement) {
+        const targetFormLocation = commentElement.closest('.comment-branch').querySelector('.comment-branch-children');

         this.showForm();
         this.showForm();

+        targetFormLocation.append(this.formContainer);
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});

         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
         const replyLink = this.replyToRow.querySelector('a');
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
         const replyLink = this.replyToRow.querySelector('a');