refactor input item

src/components/UI/UIDetails/inputItem.vue

@@ -20,70 +20,16 @@
           >
         </div>
       </foreignObject>
-      <svg width="100%" xmlns="http://www.w3.org/2000/svg">
-        <foreignObject x="10" y="10" width="100%" height="100%">
-          <div xmlns="http://www.w3.org/1999/xhtml">
-            <input
-              class="inputItem"
-              v-model="input"
-              :size="input.length"
-              v-if="input.length > 0"
-              type="text"
-            >
-          </div>
-        </foreignObject>
-      </svg>
   </div>
 </template>
 
 <script>
 import useKeyDownHandler from "@/composables/useKeyDownHandler";
-import { defineComponent, ref, onUnmounted, inject } from "vue";
+import { defineComponent, onUnmounted } from "vue";
 export default defineComponent({
   name: "InputItem",
   setup() {
-    const emitter = inject('mitt');
-    const input = ref("");
-    const {keyDownHandler} = useKeyDownHandler();
-
-    // submits newSelfMessage event
-    function handleEnterKey() {
-        // does nothing if input value is empty
-        if (input.value === "") {
-            return;
-        }
-        const message = {
-            content: input.value,
-            signature: 'EnriqueH',
-            outgoing: true,
-            modifier: "sf",
-            imgURL: '/test/path',
-            id: null
-        };
-        // fire event with message payload
-        emitter.emit('newSelfMessage', message);
-    }
-
-    // handles window keydown event
-    function handleInput(e) {
-      // gets char keyCode and char value
-      const inputCode = e.keyCode;
-      const cmd = String.fromCharCode(inputCode).toLowerCase();
-
-      // handles input cases
-      switch(inputCode) {
-        // handles Enter press: 13
-        case 13:
-          handleEnterKey();
-          break;
-        // handles Delete press: 8
-        case 8:
-          input.value = input.value.slice(0, -1);
-          break;
-        default:
-          input.value += cmd;
-      }
-    }
+    const {keyDownHandler, input} = useKeyDownHandler();
 
     // add window event listener
     window.addEventListener("keydown", keyDownHandler);

src/composables/useKeyDownHandler.ts

@@ -1,9 +1,10 @@
-import { ref } from "vue";
+import { ref, inject } from "vue";
 // This catches keys from a physical keyboard, a soft keyboard on a tablet, or a
 // scanner attached via USB
 export default function useKeyDownHandler() {
+  const emitter: any = inject("mitt");
+  const input = ref("");
   function keyDownHandler(e: any) {
-    const input = ref("");
     // 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.
@@ -19,25 +20,43 @@ export default function useKeyDownHandler() {
     // like CR, ESC, Backspace, LF, Tab, Arrows, F1-F24, etc.
     // See the arrary "keyboardNameMap", below, for possible keys.
     const cmd = keyboardNameMap[e.keyCode];
-    console.log("cmd: '" + cmd + "'");
     switch (cmd) {
       case "ENTER":
+        handleEnterKey();
         console.log("Enter was hit");
         break;
-      case "DELETE":
-        console.log("DELETE WAS HIT");
+      case "BACK_SPACE":
+        input.value = input.value.slice(0, -1);
         break;
       case "ESCAPE":
         console.log("escape was clicked");
         break;
       default:
-        input.value += cmd;
-        console.log(cmd);
+        input.value += ch;
       // ...and so on...
     }
   }
+
+  // submits newSelfMessage event
+  function handleEnterKey() {
+    // does nothing if input value is empty
+    if (input.value === "") {
+      return;
+    }
+    const message = {
+      content: input.value,
+      signature: "EnriqueH",
+      outgoing: true,
+      modifier: "sf",
+      imgURL: "/test/path",
+      id: null
+    };
+    // fire event with message payload
+    emitter.emit("newSelfMessage", message);
+  }
   return {
-    keyDownHandler
+    keyDownHandler,
+    input
   };
 }