feat: highlight current word being read

fhenrich33 · Apr 8, 2024 · 53dd51d · 53dd51d
1 parent 4439dc7
commit 53dd51d
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/components/CurrentlyReading.tsx b/src/components/CurrentlyReading.tsx
@@ -22,12 +22,25 @@ export const CurrentlyReading = ({
         currentWordRange[1]
       )
     : "";
+
   const currentSentence = sentences.length ? sentences[currentSentenceIdx] : "";
 
+  const currentContent = currentSentence
+    .split("")
+    .toSpliced(
+      currentWordRange[0],
+      currentWordRange[1],
+      `<span data-testid="current-word" style="color: red">${currentWord}</span>`
+    )
+    .join("");
+
   return (
     <div data-testid="currently-reading">
-      <span data-testid="current-word">{currentWord}</span>
-      <p data-testid="current-sentence">{currentSentence}</p>
+      <p
+        data-testid="current-sentence"
+        dangerouslySetInnerHTML={{ __html: currentContent }}
+      ></p>
+      <p>{sentences.join(" ")}</p>
     </div>
   );
 };