So closegit diff

src/snek/static/stt.js

@@ -2,6 +2,47 @@ class STTButton extends HTMLElement {
   /** monitor target attribute so it can change on-the-fly */
   static get observedAttributes() { return ['target']; }
 
+    simulateTypingWithEvents(element, text, delay = 100) {
+  let index = 0;
+
+  function triggerEvent(type, key) {
+    const event = new KeyboardEvent(type, {
+      key: key,
+      bubbles: true,
+      cancelable: true,
+    });
+    element.dispatchEvent(event);
+  }
+
+  const interval = setInterval(() => {
+    if (index < text.length) {
+      const char = text.charAt(index);
+      
+      // Trigger keydown
+      triggerEvent('keydown', char);
+      
+      // Update the value
+      if (element.isContentEditable) {
+        // For contentEditable elements
+        document.execCommand('insertText', false, char);
+      } else {
+        // For input or textarea
+        element.value += char;
+      }
+      
+      // Trigger keypress
+      triggerEvent('keypress', char);
+      
+      // Trigger keyup
+      triggerEvent('keyup', char);
+      
+      index++;
+    } else {
+      clearInterval(interval);
+    }
+  }, delay);
+}
+
   constructor() {
     super();
     this.attachShadow({mode: 'open'});
@@ -55,20 +96,19 @@ this.recog.onresult = (e) => {
         txt.charAt(0).toUpperCase() + txt.slice(1);
 
       // 2) Ensure closing punctuation
-      const punctuated =
+      let punctuated =
         /[.!?]$/.test(sentence) ? sentence : sentence + '.';
 
       committed += punctuated + ' ';   // add to permanent text
-    } else {
-      interim += txt + ' ';            // live but volatile
-    }
-  }
-
-  /* --- paint to DOM --- */
       if (this.targetEl) {
       this.targetEl.focus()
-
-    this.targetEl.value = committed + interim
+          punctuated = punctuated.replace(/\./g, ".\n")
+          punctuated = punctuated.replace(/\?/g, "?\n")
+          punctuated = punctuated.replace(/\!/g, "!\n")
+    this.simulateTypingWithEvents(this.targetEl, punctuated,50)
+    triggerEvent('keydown', "Enter");
+    triggerEvent('keydown', "Return");
+          //this.targetEl.value = committed + interim
     
 /*this.targetElement.dispatchEvent(new ChangeEvent('change', {
   bubbles: true,
@@ -76,6 +116,13 @@ this.recog.onresult = (e) => {
 }));*/
     
   }
+
+    } else {
+      interim += txt + ' ';            // live but volatile
+    }
+  }
+
+  /* --- paint to DOM --- */
 };
 
     /*  const transcript = Array.from(e.results)