Allow multi-line comments

app/assets/stylesheets/components/_comments.scss

@@ -24,18 +24,20 @@
   }
 
   &__input {
-    padding-right: 2.5rem;
-
     &.is-invalid {
       background-image: none;
     }
   }
 
-  &__character-count {
-    position: absolute;
-    z-index: 5;
-    right: .5rem;
-    top: .5rem;
+  &__compose-wrapper {
+    display: flex;
+  }
+
+  &__submit-wrapper {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-left: .5rem;
   }
 }
 

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -13,6 +13,6 @@ export default (): void => {
     { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },
     { type: 'compositionstart', target: '[name=ab-comment-new]', handler: commentComposeStart, global: true },
     { type: 'compositionend', target: '[name=ab-comment-new]', handler: commentComposeEnd, global: true },
-    { type: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
+    { type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
   ]);
 }

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -16,7 +16,9 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
   const counter = document.querySelector(`#ab-comment-charcount-${id}`);
   const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
 
-  if (event.which === 13) {
+  console.debug("comment create", event.ctrlKey, event.metaKey, event.which);
+
+  if ((event.ctrlKey || event.metaKey) && event.which === 13) {
     event.preventDefault();
 
     if (input.value.length > 512) {

app/views/answerbox/_comments.html.haml

@@ -25,10 +25,13 @@
                 %span.caret
               = render "actions/comment", comment: comment, answer: a
 - if user_signed_in?
-  .form-group.has-feedback.comment__input-group.input-group{
+  .comment__compose-wrapper{
     name: "ab-comment-new-group",
     data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }
   }
-    %input.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
-    %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512
-    %button.btn.btn-primary.d-none{ type: :button, name: "ab-comment-new-submit", data: { a_id: a.id, "character-count-target": "action" } }= t(".action")
+    .form-group.has-feedback.comment__input-group.input-group
+      %textarea.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
+    .comment__submit-wrapper
+      %button.btn.btn-primary{ type: :button, name: "ab-comment-new-submit", title: t(".action"), data: { a_id: a.id, "character-count-target": "action" } }
+        %i.fa.fa-paper-plane-o
+      %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512

config/locales/views.en.yml

@@ -120,6 +120,7 @@ en:
     comments:
       none: "There are no comments yet."
       placeholder: "Comment..."
+      action: "Post comment"
     smiles:
       none: "No one smiled this yet."
   application: