Added the ability to press Ctrl+Enter Or Command+Enter to submit comm…

…ents. (forem#885)

* Resolves forem#245
    * This is applied to root level comments as well as nested replies.
    * We are ensuring that user has commented at least once which means
      they have accepted the code of conduct before

Style changes as per suggestions in code review

.gitignore

@@ -46,3 +46,6 @@ yarn-error.log
 
 # Ignore package-lock.json because we use yarn
 package-lock.json
+
+#Jetbrains Tools
+.idea/

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

@@ -1,3 +1,5 @@
+const ENTER_KEY_CODE = 13;
+
 function initializeCommentsPage() {
   if (document.getElementById('comments-container')) {
     toggleCodeOfConduct();
@@ -270,6 +272,35 @@ function handleKeyUp(event) {
   handleSizeChange(event);
 }
 
+function handleKeyDown(event) {
+    // If Ctrl+Enter OR Command+Enter is pressed
+    if((event.ctrlKey || event.metaKey) && event.keyCode === ENTER_KEY_CODE) {
+        // Get user details and extract code of conduct & comment count
+        var user = userData();
+        if (!user) {
+            return;
+        }
+
+        var commentCount = user.number_of_comments;
+
+        // var codeOfConduct = user.checked_code_of_conduct;
+        // Code of conduct is false the first time even if the user has accepted it
+        // so we are not using it in the check below
+        // It also seems unnecessary if comment count >= 1 indicates that
+        // it was previously accepted
+
+        // Ensure that user has commented at least once
+        // and we have a non-empty comment to post
+        if (commentCount >= 1 &&
+            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} input[type="submit"].comment-action-button`);
+            submitButton.click();
+        }
+    }
+}
+
 function handleSizeChange(event) {
   var lines = event.target.value.split(/\r*\n/);
   var lineCount = lines.length;

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

@@ -19,7 +19,7 @@ function buildCommentFormHTML(commentableId, commentableType, parentId) {
             <input value="' + commentableId + '" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" />\
             <input value="' + commentableType + '" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" />\
             <input value="' + parentId + '" type="hidden" name="comment[parent_id]" id="comment_parent_id" />\
-            <textarea id="textarea-for-' + parentId + '" class="embiggened" name="comment[body_markdown]" id="comment_body_markdown" required></textarea>\
+            <textarea id="textarea-for-' + parentId + '" class="embiggened" name="comment[body_markdown]" id="comment_body_markdown" required onkeydown="handleKeyDown.bind(this)(event)"></textarea>\
             '+previewDiv+'\
                 '+codeOfConductHTML+'\
             <a href="/p/editor_guide" class="markdown-guide" target="_blank" title="Markdown Guide">\

app/views/comments/_form.html.erb

@@ -23,6 +23,7 @@
       onfocus: "handleFocus(event)",
       onblur: "handleBlur(event)",
       onkeyup: "handleKeyUp(event)",
+      onkeydown: "handleKeyDown(event)",
       id: "text-area",
       readonly: !user_signed_in?,
       autofocus: @comment.persisted?,