@creativeorange/azure-text-to-speech 3.0.2 → 3.0.4

package/dist/TextToSpeech.d.ts

@@ -75,6 +75,12 @@ export declare class TextToSpeech {
     private startHighlightingInterval;
     private updateHighlightForCurrentTime;
     private highlightTextRange;
+    private getSpokenTextDomOffset;
+    private isRangeVisuallyVisible;
+    private getClippingRect;
+    private isClippingElement;
+    private isClippingOverflowValue;
+    private rectsOverlap;
     private setHighlightTargetFromNode;
     private shouldHighlight;
     private resetHighlightState;

package/dist/co-azure-tts.es.js

@@ -9188,7 +9188,8 @@ class TextToSpeech {
       segment.highlightDiv,
       segment.originalHighlightDivInnerHTML,
       relativeTextOffset,
-      wordBoundary.wordLength
+      wordBoundary.wordLength,
+      segment.text
     );
     this.previousWordBoundary = wordBoundary;
   }
@@ -9437,17 +9438,20 @@ class TextToSpeech {
       this.highlightDiv,
       this.originalHighlightDivInnerHTML,
       normalizedTextOffset,
-      wordBoundary.wordLength
+      wordBoundary.wordLength,
+      this.textToRead
     );
     this.previousWordBoundary = wordBoundary;
     this.currentWord = wordBoundary.text;
     this.wordBoundaryOffset = wordBoundary.textOffset;
   }
-  highlightTextRange(target, originalHtml, textOffset, wordLength) {
-    if (!target || wordLength <= 0) {
+  highlightTextRange(target, originalHtml, textOffset, wordLength, spokenText) {
+    if (!target || wordLength <= 0 || textOffset < 0) {
       return;
     }
     target.innerHTML = originalHtml;
+    const alignmentOffset = this.getSpokenTextDomOffset(target, spokenText);
+    const mappedOffset = textOffset + alignmentOffset;
     const walker = document.createTreeWalker(
       target,
       NodeFilter.SHOW_TEXT
@@ -9457,15 +9461,15 @@ class TextToSpeech {
     let endNode;
     let startOffset = 0;
     let endOffset = 0;
-    const requestedEnd = textOffset + wordLength;
+    const requestedEnd = mappedOffset + wordLength;
     while (walker.nextNode()) {
       const node = walker.currentNode;
       const nodeLength = node.data.length;
       const nodeStart = currentOffset;
       const nodeEnd = currentOffset + nodeLength;
-      if (!startNode && textOffset >= nodeStart && textOffset < nodeEnd) {
+      if (!startNode && mappedOffset >= nodeStart && mappedOffset < nodeEnd) {
         startNode = node;
-        startOffset = textOffset - nodeStart;
+        startOffset = mappedOffset - nodeStart;
       }
       if (requestedEnd > nodeStart && requestedEnd <= nodeEnd) {
         endNode = node;
@@ -9481,6 +9485,9 @@ class TextToSpeech {
     try {
       range.setStart(startNode, startOffset);
       range.setEnd(endNode, endOffset);
+      if (!this.isRangeVisuallyVisible(range, target)) {
+        return;
+      }
       const mark = document.createElement("mark");
       mark.className = "co-tts-highlight";
       mark.appendChild(range.extractContents());
@@ -9489,6 +9496,67 @@ class TextToSpeech {
       target.innerHTML = originalHtml;
     }
   }
+  getSpokenTextDomOffset(target, spokenText) {
+    var _a;
+    if (!spokenText) {
+      return 0;
+    }
+    const targetText = (_a = target.textContent) != null ? _a : "";
+    if (targetText === "" || targetText === spokenText) {
+      return 0;
+    }
+    const index = targetText.indexOf(spokenText);
+    return index >= 0 ? index : 0;
+  }
+  isRangeVisuallyVisible(range, target) {
+    if (typeof range.getClientRects !== "function") {
+      return true;
+    }
+    let rects;
+    try {
+      rects = Array.from(range.getClientRects()).filter(
+        (rect) => rect.width > 0 && rect.height > 0
+      );
+    } catch {
+      return true;
+    }
+    if (rects.length === 0) {
+      return true;
+    }
+    const clipRect = this.getClippingRect(target);
+    return rects.some((rect) => this.rectsOverlap(rect, clipRect));
+  }
+  getClippingRect(target) {
+    let clipElement = target;
+    while (clipElement) {
+      if (this.isClippingElement(clipElement)) {
+        return clipElement.getBoundingClientRect();
+      }
+      clipElement = clipElement.parentElement;
+    }
+    return target.getBoundingClientRect();
+  }
+  isClippingElement(element) {
+    var _a;
+    const style = (_a = globalThis.getComputedStyle) == null ? void 0 : _a.call(globalThis, element);
+    if (!style) {
+      return false;
+    }
+    const overflowX = style.overflowX || style.overflow;
+    const overflowY = style.overflowY || style.overflow;
+    const clipsOverflow = this.isClippingOverflowValue(overflowX) || this.isClippingOverflowValue(overflowY);
+    if (clipsOverflow) {
+      return true;
+    }
+    const lineClamp = style.getPropertyValue("-webkit-line-clamp").trim();
+    return lineClamp !== "" && lineClamp !== "none";
+  }
+  isClippingOverflowValue(value) {
+    return value === "hidden" || value === "auto" || value === "scroll" || value === "clip";
+  }
+  rectsOverlap(a, b) {
+    return a.right > b.left && a.left < b.right && a.bottom > b.top && a.top < b.bottom;
+  }
   setHighlightTargetFromNode(node) {
     var _a;
     const highlightDiv = this.getHighlightDivForNode(node);