Autoresize on comment textarea + comment submit on CMD/CTRL+Return (#11115)

* .

* whoops

* revert typo

* Handle glitches and edge cases.

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>

app/assets/javascripts/initializers/initializeCommentsPage.js.erb

@@ -126,6 +126,7 @@ function initializeCommentsPage() {
               commentWrapper = event.target.closest('.inner-comment');
               commentWrapper.classList.add("replying");
               commentWrapper.innerHTML += buildCommentFormHTML(commentableId, commentableType, parentId);
+              initializeCommentsPage();
               
               setTimeout(function () {
                 commentWrapper.getElementsByTagName('textarea')[0].focus();
@@ -178,6 +179,11 @@ function handleCommentSubmit(event) {
   event.preventDefault();
   var form = event.target;
   form.classList.add('submitting');
+  var textarea = form.getElementsByClassName('comment-textarea')[0];
+  if (textarea) {
+    textarea.style.height = null;
+    textarea.blur();
+  }
   var parentComment = document.getElementById("comment-node-" + event.target.dataset.commentId);
 
   var body = JSON.stringify({
@@ -221,8 +227,7 @@ function handleCommentSubmit(event) {
           else if (mainCommentsForm) {
             var mainCommentsForm = document.getElementById("new_comment");
             mainCommentsForm.classList.remove("submitting");
-            const textArea = document.getElementById("text-area");
-            textArea.classList.remove('embiggened-max', 'embiggened-more', 'embiggened');
+            const textArea = form.querySelector(".comment-textarea");
             textArea.closest('.comment-form').classList.remove('comment-form--initiated');
             textArea.value = newComment.comment_template || "";
             var preview = document.getElementById("preview-div");
@@ -275,15 +280,6 @@ function handleFocus(event) {
   }
 }
 
-function handleBlur(event) {
-  setTimeout(function () {
-    var el = document.getElementById('text-area');
-    if (el.value.length == 0) {
-      el.classList.remove('embiggened-max', 'embiggened-more', 'embiggened');
-    }
-  }, 100);
-}
-
 function handleKeyUp(event) {
   handleSizeChange(event);
   handleButtonsActivation(event);
@@ -299,10 +295,7 @@ function handleSubmit(event) {
 
   var codeOfConduct = user.checked_code_of_conduct;
   if (codeOfConduct && event.target.value.trim() !== '') {
-    // get a reference to the submit button for the text area (first level comment vs. reply comment)
-    var parentFormId = event.target.parentElement.parentElement.id || event.target.parentElement.id;
-    var submitButton = document.querySelector('#' + parentFormId + ' button[type="submit"].comment-action-button');
-    submitButton.click();
+    event.target.closest('form').querySelector('button[type="submit"]').click();
   }
 }
 
@@ -403,19 +396,9 @@ function handleFormClose(event) {
 }
 
 function handleSizeChange(event) {
-  var lines = event.target.value.split(/\r*\n/);
   var textarea = event.target;
-  var lineCount = lines.length;
-  if (lineCount > 10) {
-    textarea.classList.add('embiggened-max');
-    textarea.classList.remove('embiggened-more', 'embiggened');
-  } else if (lineCount > 3) {
-    textarea.classList.add('embiggened-more');
-    textarea.classList.remove('embiggened-max', 'embiggened');
-  } else {
-    textarea.classList.add('embiggened');
-    textarea.classList.remove('embiggened-more', 'embiggened-max');
-  }
+  var oldHeight = parseInt(textarea.style.height.replace('px',''));
+  textarea.style.height = textarea.scrollHeight + (textarea.scrollHeight > oldHeight ? 15 : 0) + "px";
 }
 
 function handleButtonsActivation(event) {
@@ -431,8 +414,9 @@ function handleButtonsActivation(event) {
 }
 
 function validateField(event) {
-  if (document.getElementById('text-area')) {
-    var commentField = document.getElementById('text-area').value;
+  var textarea = event.target.closest('.comment-form').querySelector('.comment-textarea');
+  if (textarea) {
+    var commentField = textarea.value;
     if (commentField == '') {
       event.preventDefault();
     }

app/assets/javascripts/utilities/buildCommentFormHTML.js.erb

@@ -18,7 +18,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) {
       <input value="${parentId}" type="hidden" name="comment[parent_id]" id="comment_parent_id" />
       <div class="comment-form__inner">
         <div class="comment-form__field">
-          <textarea id="textarea-for-${parentId}" class="crayons-textfield crayons-textfield--ghost comment-textarea" name="comment[body_markdown]" id="comment_body_markdown" placeholder="Reply..." required onkeydown="handleKeyDown.bind(this)(event)" onfocus="handleFocus.bind(this)(event)" oninput="handleChange.bind(this)(event)"></textarea>
+          <textarea id="textarea-for-${parentId}" class="crayons-textfield crayons-textfield--ghost comment-textarea" name="comment[body_markdown]" placeholder="Reply..." required="required" onkeydown="handleKeyDown(event)" onfocus="handleFocus(event)" oninput="handleChange(event)" onkeykup="handleKeyUp(event)"></textarea>
           <div class="comment-form__toolbar">
             <div class="editor-image-upload">
               <input type="file" id="image-upload-${randomIdNumber}"  name="file" accept="image/*" style="display:none">

app/assets/stylesheets/views/comments.scss

@@ -30,16 +30,7 @@
   .comment-textarea {
     resize: vertical;
     padding: 0.5em;
-
-    &.embiggened {
-      height: 96px;
-    }
-    &.embiggened-more {
-      height: 256px;
-    }
-    &.embiggened-max {
-      height: 384px;
-    }
+    max-height: 40vh;
   }
 
   &__toolbar,
@@ -49,7 +40,7 @@
 
   &--initiated {
     .comment-textarea {
-      height: 96px;
+      height: 128px;
     }
   }
 

app/views/comments/_form.html.erb

@@ -36,12 +36,10 @@
       <%= f.text_area :body_markdown,
                       placeholder: "Add to the discussion",
                       onfocus: "handleFocus(event)",
-                      onblur: "handleBlur(event)",
                       onkeyup: "handleKeyUp(event)",
                       onkeydown: "handleKeyDown(event)",
                       oninput: "handleChange(event)",
                       id: "text-area",
-                      # autofocus: @comment.persisted?,
                       required: true,
                       class: "crayons-textfield comment-textarea crayons-textfield--ghost",
                       'aria-label': "Add a comment to the discussion" %>