automatically resize textareas based on contents

app/static/js/scripts.js

@@ -33,6 +33,24 @@ function toggleClass(elementId, className) {
   }
 }
 
+function findOutermostParent(element, className) {
+  while (element && !element.classList.contains(className)) {
+    element = element.parentNode;
+  }
+  return element;
+}
+
+function setupAutoResize(element) {
+    const elem = document.getElementById(element);
+    elem.addEventListener("keyup", function(event) {
+        const outerWrapper = findOutermostParent(elem, 'downarea');
+        elem.style.height = 'auto'; // Reset height to auto to calculate scrollHeight accurately
+        elem.style.height = (elem.scrollHeight + 2) + 'px'; // Add 2px to avoid cutting off text
+        outerWrapper.style.height = (elem.scrollHeight + 61) + 'px';
+    });
+
+}
+
 function collapseReply(comment_id) {
     const reply = document.getElementById('comment_' + comment_id);
     let isHidden = false;

app/templates/community/add_post.html

@@ -32,6 +32,7 @@
                                 resize: DownArea.RESIZE_VERTICAL,
                                 hide: ['heading', 'bold-italic'],
                             });
+                            setupAutoResize('discussion_body');
                         });
                     </script>
                   {% endif %}

app/templates/post/add_reply.html

@@ -22,6 +22,7 @@
                             resize: DownArea.RESIZE_VERTICAL,
                             hide: ['heading', 'bold-italic'],
                         });
+                        setupAutoResize('body');
                     });
                 </script>
             {% endif %}

app/templates/post/post.html

@@ -24,6 +24,7 @@
                                                 resize: DownArea.RESIZE_VERTICAL,
                                                 hide: ['heading', 'bold-italic'],
                                             });
+                                            setupAutoResize('body');
                                         });
                                     </script>
                                 {% endif %}

app/templates/post/post_edit.html

@@ -31,6 +31,7 @@
             hide: ['heading', 'bold-italic'],
             value: {{ form.discussion_body.data | tojson | safe }}
         });
+        setupAutoResize('discussion_body');
     });
 </script>
 <div class="row">