X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/154924cc0c19546599bbe1953744f9ab1162b263..refs/pull/4317/head:/resources/js/components/page-comments.js

diff --git a/resources/js/components/page-comments.js b/resources/js/components/page-comments.js
index 9dc529963..a46a5c3b3 100644
--- a/resources/js/components/page-comments.js
+++ b/resources/js/components/page-comments.js
@@ -16,6 +16,7 @@ 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;
@@ -26,6 +27,7 @@ export class PageComments extends Component {
 
         // Internal State
         this.parentId = null;
+        this.formReplyText = this.formReplyLink.textContent;
 
         this.setupListeners();
     }
@@ -41,7 +43,7 @@ export class PageComments extends Component {
         });
 
         this.elem.addEventListener('page-comment-reply', event => {
-            this.setReply(event.detail.id);
+            this.setReply(event.detail.id, event.detail.element);
         });
 
         if (this.form) {
@@ -66,15 +68,16 @@ export class PageComments extends Component {
 
         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);
-            this.resetForm();
+            this.hideForm();
             this.updateCount();
         }).catch(err => {
             this.form.toggleAttribute('hidden', false);
             window.$events.showValidationErrors(err);
         });
 
+        this.form.toggleAttribute('hidden', false);
         loading.remove();
     }
 
@@ -85,42 +88,51 @@ export class PageComments extends Component {
 
     resetForm() {
         this.formInput.value = '';
-        this.hideForm();
-        this.removeReplyTo();
+        this.parentId = null;
+        this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
     }
 
     showForm() {
         this.formContainer.toggleAttribute('hidden', false);
         this.addButtonContainer.toggleAttribute('hidden', true);
-        this.formInput.focus();
+        this.formContainer.scrollIntoView({behavior: 'smooth', block: 'nearest'});
+        setTimeout(() => {
+            this.formInput.focus();
+        }, 100);
     }
 
     hideForm() {
+        this.resetForm();
         this.formContainer.toggleAttribute('hidden', true);
         if (this.getCommentCount() > 0) {
-            this.elem.appendChild(this.addButtonContainer);
+            this.elem.append(this.addButtonContainer);
         } else {
-            this.commentCountBar.appendChild(this.addButtonContainer);
+            this.commentCountBar.append(this.addButtonContainer);
         }
         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');
+        targetFormLocation.append(this.formContainer);
         this.showForm();
         this.parentId = commentLocalId;
         this.replyToRow.toggleAttribute('hidden', false);
         const replyLink = this.replyToRow.querySelector('a');
-        replyLink.textContent = `#${this.parentId}`;
+        replyLink.textContent = this.formReplyText.replace('1234', this.parentId);
         replyLink.href = `#comment${this.parentId}`;
     }
 
     removeReplyTo() {
         this.parentId = null;
         this.replyToRow.toggleAttribute('hidden', true);
+        this.container.append(this.formContainer);
+        this.showForm();
     }
 
 }