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);