fixed marked words getting out of sync with speech output

src/__tests__/wordMarker.tsx

@@ -101,3 +101,42 @@ it("mark third word in formatted paragraph", async () => {
     "<p>Petrificus <em>lumos</em> <mark>lacarnum</mark><strong>legilimens</strong> legilimens <strong><em>quietus</em></strong> vipera <del>arania me patronum</del> reducio.</p>"
   );
 });
+
+it("mark first word in text with link", async () => {
+  const jsx = (
+    <p>
+      Would you click <a href="#">this link</a>?
+    </p>
+  );
+  executeWordMarkerTest(
+    jsx,
+    0,
+    '<p><mark>Would</mark> you click <a href="#">this link</a>?</p>'
+  );
+});
+
+it("mark last word in text with link", async () => {
+  const jsx = (
+    <p>
+      Would you click <a href="#">this link</a>?
+    </p>
+  );
+  executeWordMarkerTest(
+    jsx,
+    4,
+    '<p>Would you click <a href="#">this <mark>link</mark></a>?</p>'
+  );
+});
+
+it("mark word after text with link to check that question mark after link is not seen as word", async () => {
+  const jsx = (
+    <p>
+      Would you click <a href="#">this link</a>?
+    </p>
+  );
+  executeWordMarkerTest(
+    jsx,
+    5,
+    '<p>Would you click <a href="#">this link</a>?</p>'
+  );
+});

src/internals/components/WordMarker.tsx

@@ -32,6 +32,13 @@ export const markChildText = (children: React.ReactNode, markedWordIndex: number
         return child;
       }
 
+      const isOnlySpecialCharacters = (child as string)
+        .trim()
+        .match(/^[!@#$%^&*(),.?"'`:{}|<>\-_]+$/);
+      if (isOnlySpecialCharacters) {
+        return child;
+      }
+
       const hasWhiteSpaceBeforeFirstWord = (child as string).match(/^\s/) !== null;
       const hasWhiteSpaceAfterLastWord = (child as string).match(/.*\s$/) !== null;
 
@@ -62,9 +69,9 @@ export const markChildText = (children: React.ReactNode, markedWordIndex: number
 
       currentIndex += words.length;
       return [
-          ...[(textBeforeHighlightedWord || hasWhiteSpaceBeforeFirstWord) && `${textBeforeHighlightedWord} `],
+        ...[`${hasWhiteSpaceBeforeFirstWord ? " " : ""}${textBeforeHighlightedWord ? `${textBeforeHighlightedWord} ` : ""}`],
         highlightedWordComponent,
-          ...[(textAfterHighlightedWord || hasWhiteSpaceAfterLastWord) && ` ${textAfterHighlightedWord}`]
+        ...[`${textAfterHighlightedWord ? ` ${textAfterHighlightedWord}` : ""}${hasWhiteSpaceAfterLastWord ? " " : ""}`],
       ];
     }
     return child;