minor improvements to inputItem component

src/components/inputItem/inputController.ts

@@ -6,35 +6,76 @@
 */
 
 import { ref, watch, onUnmounted, onMounted } from "vue";
-import useKeyDownHandler from "@/modules/keyDownHandler/useKeyDownHandler";
 import useMitt from "@/modules/mitt";
 import { useIpc } from '@/modules/ipc';
+import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
+import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
+
+let textInput: HTMLInputElement | null;
 
 export default function useInputController() {
-    const isRecording = ref(false);
+
-    const isTyping = ref(false);
     const { emitter } = useMitt();
     const { post } = useIpc();
+    const isRecording = ref(false);
+    const isTyping = ref(false);
+    const input = ref("");
 
     // send message on ENTER
-    const enterCallback = (input: string) => {
+    const onEnter = () => {
 
         const message = {
             audio: 0,
-            text: input
+            text: input.value
         };
 
         // trigger send animation
         emitter.emit("animate-send");
 
         // send message to backend
-        if (input) post('message', message);
+        if (input.value) post('message', message);
     }
 
-    const { keyDownHandler, input } = useKeyDownHandler(enterCallback);
+    // update input on keydown event & listen for special commands.
+    const onKeyDown = (e: KeyboardEvent) => {
+        if (textInput) textInput.focus();
 
-    // stops stream recording on space key up
+        // keyboardCharMap is an array of arrays, with each inner
-    function keyupHandler(e: any) {
+        // array having 2 columns - un-shifted, and shifted values.
+        // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value.
+        // See the "keyboardCharMap" module for possible keys.
+        // MODIFY keyboardCharMap to suit your needs if you want
+        //    more/less/different characters to be considered "printable".
+        let iCol = 0;
+        if (e.shiftKey) {
+          iCol = 1;
+        }
+        const ch = keyboardCharMap[e.keyCode][iCol];
+
+        // Optionally do things with non-printables,
+        // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
+        // See the arrary "keyboardNameMap" module for possible keys.
+        const cmd = keyboardNameMap[e.keyCode];
+        switch (cmd) {
+          case "ENTER":
+            onEnter();
+            if (textInput) textInput.value = ''
+            input.value = " ";
+            break;
+          case "BACK_SPACE":
+            input.value = input.value.slice(0, -1);
+            break;
+          case "ESCAPE":
+            if (textInput) textInput.value = ''
+            input.value = "";
+            break;
+          default:
+            input.value += ch;
+        }
+    }
+
+    // stops stream recording on space key up event.
+    const onKeyUp = (e: KeyboardEvent) => {
         if (e.key === " " && isRecording.value) {
 
             isRecording.value = false;
@@ -43,18 +84,19 @@ export default function useInputController() {
         }
     }
 
-    onMounted(async () => {
+    onMounted(() => {
-        // add window event keyboard listeners
+        textInput = document.getElementById('textInput') as HTMLInputElement;
-        window.addEventListener("keydown", keyDownHandler);
+        // add window event keyboard listeners        
-        window.addEventListener('keyup', keyupHandler);
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener('keyup', onKeyUp);
     })
 
     onUnmounted(() => {
-        window.removeEventListener("keydown", keyDownHandler);
+        window.removeEventListener("keydown", onKeyDown);
-        window.removeEventListener("keyup", keyupHandler);
+        window.removeEventListener("keyup", onKeyUp);
     });
 
-    // determine whether to render text or audio based one the keyboard input
+    // watch keyboard input & update current state.
     watch(input, (input, prevInput) => {
         if (prevInput !== "" || prevInput.length > 0) {
             if (!isRecording.value) {

src/modules/keyDownHandler/useKeyDownHandler.ts

@@ -1,62 +0,0 @@
-import { ref, onMounted } from "vue";
-import keyboardNameMap from "./keyBoardMaps/keyboardNameMap";
-import keyboardCharMap from "./keyBoardMaps/keyboardCharMap";
-
-interface KeyDownEvent {
-  keyCode: number;
-  shiftKey: boolean;
-}
-
-// This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
-// scanner attached via USB
-export default function useKeyDownHandler(enterCallback?: (input: string) => void) {
-
-  const input = ref("");
-
-  let textInput: HTMLInputElement | null;
-
-  onMounted(() => {
-    textInput = document.getElementById('textInput') as HTMLInputElement;
-  })
-
-  function keyDownHandler(e: KeyDownEvent) {
-    // keyboardCharMap is an array of arrays, with each inner
-    // array having 2 columns - un-shifted, and shifted values.
-    // iCol = 0 is the un-shifted value, while iCol=1 is the shifted value.
-    // See the "keyboardCharMap", below, for printable characters.
-    // MODIFY keyboardCharMap to suit your needs if you want
-    //    more/less/different characters to be considered "printable".
-    if (textInput) textInput.focus()
-
-    let iCol = 0;
-    if (e.shiftKey) {
-      iCol = 1;
-    }
-    const ch = keyboardCharMap[e.keyCode][iCol];
-    // Optionally do things with non-printables,
-    // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
-    // See the arrary "keyboardNameMap", below, for possible keys.
-    const cmd = keyboardNameMap[e.keyCode];
-    switch (cmd) {
-      case "ENTER":
-        if (enterCallback) enterCallback(input.value);
-        if (textInput) textInput.value = ''
-        input.value = " ";
-        break;
-      case "BACK_SPACE":
-        input.value = input.value.slice(0, -1);
-        break;
-      case "ESCAPE":
-        if (textInput) textInput.value = ''
-        input.value = "";
-        break;
-      default:
-        input.value += ch;
-    }
-  }
-
-  return {
-    keyDownHandler,
-    input
-  };
-}