From 6677f6d8820682e5a3459dfe2f67c9e1900ba7dd Mon Sep 17 00:00:00 2001
From: Nikolai Lopin <code@lopin.me>
Date: Wed, 3 Jul 2024 10:12:52 +0200
Subject: [PATCH] fix: place reply form as sibling to comments (#1225)

---
 frontend/html/posts/show/battle.html                   |  7 ++-----
 frontend/html/posts/show/layout.html                   |  8 ++------
 .../components/{ReplyContainer.vue => ReplyForm.vue}   | 10 +++++-----
 frontend/static/js/main.js                             |  2 +-
 4 files changed, 10 insertions(+), 17 deletions(-)
 rename frontend/static/js/components/{ReplyContainer.vue => ReplyForm.vue} (94%)

diff --git a/frontend/html/posts/show/battle.html b/frontend/html/posts/show/battle.html
index 443f8f126..058603408 100644
--- a/frontend/html/posts/show/battle.html
+++ b/frontend/html/posts/show/battle.html
@@ -108,20 +108,17 @@
 
         {% if comments %}
             {% if post.is_commentable and me %}
-                <reply-container
+                <reply-form
                     :reply-to="replyTo"
                     comment-order="{{ comment_order }}"
                     avatar-url="{{ me.get_avatar }}"
                     username="{{ me.full_name }}"
                     create-comment-url="{% url "create_comment" post.slug %}"
-                >
+                ></reply-form>
             {% endif %}
             <div class="post-comments-list">
                 {% include "comments/list.html" with comments=comments reply_form=reply_form type="battle" %}
             </div>
-            {% if post.is_commentable and me %}
-                </reply-container>
-            {% endif %}
         {% endif %}
 
         {% if me and me.is_active_membership and post.is_commentable and post.is_visible or me.is_moderator %}
diff --git a/frontend/html/posts/show/layout.html b/frontend/html/posts/show/layout.html
index 56c88d7ac..740a682ca 100644
--- a/frontend/html/posts/show/layout.html
+++ b/frontend/html/posts/show/layout.html
@@ -77,22 +77,18 @@
 
                 {% if comments %}
                     {% if post.is_commentable and me %}
-                        <reply-container
+                        <reply-form
                             :reply-to="replyTo"
                             comment-order="{{ comment_order }}"
                             avatar-url="{{ me.get_avatar }}"
                             username="{{ me.full_name }}"
                             create-comment-url="{% url "create_comment" post.slug %}"
-                        >
+                        ></reply-form>
                     {% endif %}
 
                     <div class="post-comments-list">
                         {% include "comments/list.html" with comments=comments reply_form=reply_form type="normal" muted_user_ids=muted_user_ids %}
                     </div>
-
-                    {% if post.is_commentable and me %}
-                        </reply-container>
-                    {% endif %}
                 {% endif %}
 
                 {% if me and me.is_active_membership and post.is_commentable and post.is_visible or me.is_moderator %}
diff --git a/frontend/static/js/components/ReplyContainer.vue b/frontend/static/js/components/ReplyForm.vue
similarity index 94%
rename from frontend/static/js/components/ReplyContainer.vue
rename to frontend/static/js/components/ReplyForm.vue
index 3a5b7465f..f31c4c100 100644
--- a/frontend/static/js/components/ReplyContainer.vue
+++ b/frontend/static/js/components/ReplyForm.vue
@@ -28,7 +28,7 @@
 
 <script>
 export default {
-    name: 'ReplyContainer',
+    name: 'ReplyForm',
     props: {
         // type { commentId: string, username: string, draftKey?: string }
         replyTo: {
@@ -82,8 +82,8 @@ export default {
     updated: function() {
         if (this.replyTo !== null && this.getEditor()) {
             // move the reply form under the comment
-            const replyForm = this.$el.querySelector("#comment-reply-form")
-            const newCommentEl = this.$el.querySelector(`#comment-${this.replyTo.commentId}`)
+            const replyForm = document.getElementById("comment-reply-form")
+            const newCommentEl = document.getElementById(`comment-${this.replyTo.commentId}`)
             newCommentEl.after(replyForm)
             const editor = this.getEditor()
             const draftKey = getDraftKey(this.replyTo)
@@ -110,7 +110,7 @@ export default {
     },
     methods: {
         appendMarkdownTextareaValue: function(value) {
-            const textarea = this.$el.querySelector("#comment-reply-form textarea")
+            const textarea = document.querySelector("#comment-reply-form textarea")
             textarea.focus(); // on mobile
             textarea.value = textarea.value + value;
 
@@ -128,7 +128,7 @@ export default {
         },
         getEditor: function() {
             if (!this.editor) {
-                const textarea = this.$el.querySelector("#comment-reply-form textarea")
+                const textarea = document.querySelector("#comment-reply-form textarea")
 
                 textarea.focus(); // on mobile
                 if (!textarea.nextElementSibling) {
diff --git a/frontend/static/js/main.js b/frontend/static/js/main.js
index 48ea94fae..19f062bbf 100644
--- a/frontend/static/js/main.js
+++ b/frontend/static/js/main.js
@@ -27,7 +27,7 @@ Vue.component("comment-markdown-editor", () => import("./components/CommentMarkd
 Vue.component("v-select", vSelect);
 Vue.component("tag-select", () => import("./components/TagSelect.vue"));
 Vue.component("simple-select", () => import("./components/SimpleSelect.vue"));
-Vue.component("reply-container", () => import("./components/ReplyContainer.vue"));
+Vue.component("reply-form", () => import("./components/ReplyForm.vue"));
 
 // Since our pages have user-generated content, any fool can insert "{{" on the page and break it.
 // We have no other choice but to completely turn off template matching and leave it on only for components.