Handle clicking the comment submit button

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

@@ -1,6 +1,6 @@
 import registerEvents from "retrospring/utilities/registerEvents";
 import { commentDestroyHandler } from "./destroy";
-import {commentComposeEnd, commentComposeStart, commentCreateHandler} from "./new";
+import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, commentCreateKeyboardHandler } from "./new";
 import { commentReportHandler } from "./report";
 import { commentSmileHandler } from "./smile";
 import { commentToggleHandler } from "./toggle";
@@ -13,6 +13,7 @@ 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: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
+    { type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateKeyboardHandler, global: true },
+    { type: 'click', target: '[name=ab-comment-new-submit]', handler: commentCreateClickHandler, global: true }
   ]);
 }

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

@@ -5,20 +5,7 @@ import { showNotification, showErrorNotification } from 'utilities/notifications
 
 let compositionJustEnded = false;
 
-export function commentCreateHandler(event: KeyboardEvent): boolean {
+function createComment(input: HTMLInputElement, id: string, counter: Element, group: Element) {
-  if (compositionJustEnded && event.which == 13) {
-    compositionJustEnded = false;
-    return;
-  }
-
-  const input = event.target as HTMLInputElement;
-  const id = input.dataset.aId;
-  const counter = document.querySelector(`#ab-comment-charcount-${id}`);
-  const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
-
-  if ((event.ctrlKey || event.metaKey) && event.which === 13) {
-    event.preventDefault();
-
   if (input.value.length > 512) {
     group.classList.add('has-error');
     return true;
@@ -59,7 +46,36 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
     .finally(() => {
       input.disabled = false;
     });
+}
+
+export function commentCreateKeyboardHandler(event: KeyboardEvent): boolean {
+  if (compositionJustEnded && event.which == 13) {
+    compositionJustEnded = false;
+    return;
   }
+
+  const input = event.target as HTMLInputElement;
+  const id = input.dataset.aId;
+  const counter = document.querySelector(`#ab-comment-charcount-${id}`);
+  const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
+
+  if ((event.ctrlKey || event.metaKey) && event.which === 13) {
+    event.preventDefault();
+
+    createComment(input, id, counter, group);
+  }
+}
+
+export function commentCreateClickHandler(event: MouseEvent): void {
+  event.preventDefault();
+
+  const button = event.target as HTMLButtonElement;
+  const id = button.dataset.aId;
+  const input = document.querySelector<HTMLInputElement>(`[name="ab-comment-new"][data-a-id="${id}"]`);
+  const counter = document.querySelector(`#ab-comment-charcount-${id}`);
+  const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
+
+  createComment(input, id, counter, group);
 }
 
 export function commentComposeStart(): boolean {