Merge pull request #83 from LiquidGalaxyLAB/add-manual

add: highlighting of uttered word

Author: Anishka2006

js/components/read-aloud.mjs

@@ -256,6 +256,7 @@ class ReadAloudComponent extends HTMLElement {
         !this.isPaused
       ) {
         utterance.text = this.words[this.currentWordIndex];
+        console.log("highlighting word:");
         this.highlightCurrentWord(
           this.paragraphElement,
           this.words,

js/components/voice.mjs

@@ -114,6 +114,11 @@ export class LGVoice extends HTMLElement {
           flex: 1;
         }
 
+        .highlighted-read-out {
+          text-decoration: underline;
+          color: var(--md-sys-color-primary);
+        }
+
         .ripple::after {
           position: absolute;
           inset-inline-start: 50%;