add text render to input item

src/components/inputItem.vue

@@ -5,24 +5,35 @@
     :style="{ top: `${elementY}px`, left: `${elementX}px` }">
     <span class="play"></span>
     <span class="pause"></span>
+    <TextInput :input="input"/>
   </div>
 </template>
 
 <script lang="ts">
 
-import { defineComponent, onMounted, onUnmounted, ref } from "vue";
+import { defineComponent, onMounted, onUnmounted, ref, watch } from "vue";
 import draggify from '@/modules/draggify';
 import useMitt from "@/modules/mitt";
+import TextInput from '@/components/taInput/textDetails/text.vue';
+import useInputController from "@/components/taInput/inputController";
 
 export default defineComponent({
   name: "InputItem",
+  components: { TextInput },
   setup() {
 
     const isRecording = ref(false);
-    
+
     const { emitter } = useMitt();
     const { elementX, elementY } = draggify({ elementId: 'inputItem'});
 
+    const {
+      input,
+      visualizeStream,
+      audioBubbleWidth,
+      paths,
+    } = useInputController();
+
     onMounted(() => {
       emitter.on('input-audio-record', (record) => isRecording.value = record);
     })
@@ -34,7 +45,8 @@ export default defineComponent({
     return {
       elementX,
       elementY,
-      isRecording
+      isRecording,
+      input
     }
   }
 
@@ -62,6 +74,8 @@ export default defineComponent({
     background-color: white;
     border: 4px solid #C3C3C3;
 
+    cursor: pointer;
+
    .play, .pause {
       z-index: 5;  
       &::before, &::after {
@@ -104,11 +118,6 @@ export default defineComponent({
          }
       }
    }
-   &:hover {
-      .play::before {
-         box-shadow: 0 0 12px rgba(195, 195, 195, 0.8);
-      }
-   }
 }
 
 .animate-audio1 {

src/components/taInput/index.vue

@@ -7,11 +7,11 @@
     :paths="paths" 
   />
 
-  <TextInput 
+<!--   <TextInput 
     v-else 
     :input="input"
   />
-
+ -->
 </template>
 
 <script lang="ts">

src/components/taInput/textDetails/text.vue

@@ -25,17 +25,15 @@ export default defineComponent({
 <style lang="scss" scoped>
 
 .inputBox {
-  position: fixed;
-
-  width: 100vw;
+  position: absolute;
 
   display: flex;
   justify-content: center;
   align-items: center;
 
-  bottom: 0;
+  // bottom: 0;
 
-  z-index: 1;
+  // z-index: 1;
 }
 
 .inputBubble {

src/modules/keyDownHandler/useKeyDownHandler.ts

@@ -9,7 +9,7 @@ interface KeyDownEvent {
 
 // 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 | null) {
+export default function useKeyDownHandler(enterCallback?: (input: string) => void) {
 
   const input = ref("");
 
@@ -31,7 +31,7 @@ export default function useKeyDownHandler(enterCallback: (input: string) => void
     const cmd = keyboardNameMap[e.keyCode];
     switch (cmd) {
       case "ENTER":
-        enterCallback(input.value);
+        if (enterCallback) enterCallback(input.value);
         break;
       case "BACK_SPACE":
         input.value = input.value.slice(0, -1);