@samuelbradshaw/highlight-helper-js 0.7.2 → 0.7.4

package/highlight-helper.js

@@ -453,11 +453,12 @@ function Highlighter(options = hhDefaultOptions) {
       changes: appearanceChanges.concat(boundsChanges),
     }
     
-    if (highlightId !== activeHighlightId) this.drawHighlights([highlightId]);    
-    if (highlightId === activeHighlightId && appearanceChanges.length > 0) {
-      updateSelectionUi('appearance');
-    } else if (triggeredByUserAction && highlightId !== activeHighlightId) {
+    if (triggeredByUserAction && !activeHighlightId) {
       this.activateHighlight(highlightId);
+    } else if (activeHighlightId && highlightId === activeHighlightId && appearanceChanges.length > 0) {
+      updateSelectionUi('appearance');
+    } else {
+      this.drawHighlights([highlightId]);
     }
     
     if (isNewHighlight) {
@@ -480,6 +481,7 @@ function Highlighter(options = hhDefaultOptions) {
     const highlightRange = highlightToActivate.rangeObj.cloneRange();
     activeHighlightId = highlightId;
     updateSelectionUi('appearance');
+    updateSelectionUi('bounds');
     
     // Update the selection range if needed
     // In Android Chrome, sometimes selection handles don't show when a selection is updated programmatically, so it's best to only update the selection if needed.
@@ -702,7 +704,7 @@ function Highlighter(options = hhDefaultOptions) {
   
   // Long press in annotatable container (triggered by setTimeout() in pointerdown event)
   const respondToLongPress = (event) => {
-    respondToPointerUp(event, isLongPress = true);
+    respondToPointerUp(event, true);
     tapResult = null;
   }
   
@@ -914,8 +916,10 @@ function Highlighter(options = hhDefaultOptions) {
       
       // Bring active highlight to the front
       const svgHighlight = svgBackground.querySelector(`g[data-highlight-id="${activeHighlightId}"]`);
-      svgBackground.appendChild(svgHighlight);
-      svgBackground.appendChild(svgActiveOverlay);
+      if (svgHighlight) {
+        svgBackground.appendChild(svgHighlight);
+        svgBackground.appendChild(svgActiveOverlay);
+      }
     }
     
     if (changeType === 'appearance') {
@@ -1010,7 +1014,7 @@ function Highlighter(options = hhDefaultOptions) {
     
     // Prevent the range from starting or ending in an element that doesn't match the paragraph selector
     if (this.annotatableContainer.contains(range.commonAncestorContainer) && (!startNode.parentElement.closest(options.paragraphSelector) || !endNode.parentElement.closest(options.paragraphSelector))) {
-      annotatableParagraphsInRange = Array.from(this.annotatableParagraphs).filter((paragraph) => {
+      let annotatableParagraphsInRange = Array.from(this.annotatableParagraphs).filter((paragraph) => {
         const relativeStartPosition = startNode.compareDocumentPosition(paragraph);
         const relativeEndPosition = endNode.compareDocumentPosition(paragraph);
         return (relativeStartPosition & Node.DOCUMENT_POSITION_FOLLOWING || relativeStartPosition & Node.DOCUMENT_POSITION_CONTAINS) && (relativeEndPosition & Node.DOCUMENT_POSITION_PRECEDING || relativeEndPosition & Node.DOCUMENT_POSITION_CONTAINS);
@@ -1263,6 +1267,7 @@ function Highlighter(options = hhDefaultOptions) {
         const elementRect = element.getBoundingClientRect();
         if (Math.round(elementRect.width) === Math.round(rect.width) && Math.round(elementRect.height) === Math.round(rect.height) && Math.round(elementRect.top) === Math.round(rect.top) && Math.round(elementRect.left) === Math.round(rect.left)) {
           unmergedRects.splice(ur, 1);
+          break;
         }
       }
     }
@@ -1271,7 +1276,6 @@ function Highlighter(options = hhDefaultOptions) {
     for (const paragraph of paragraphs) {
       const paragraphRect = paragraph.getBoundingClientRect();
       const computedParagraphStyle = window.getComputedStyle(paragraph);
-      const paragraphLineHeight = parseInt((computedParagraphStyle.lineHeight === 'normal' ? computedParagraphStyle.fontSize : computedParagraphStyle.lineHeight).replace('px', ''));
       const paragraphTopPadding = parseInt(computedParagraphStyle.getPropertyValue('padding-top').replace('px', ''));
       
       // Get line positions (bottom edge of each line)
@@ -1279,13 +1283,11 @@ function Highlighter(options = hhDefaultOptions) {
       let lineWalker = document.createTreeWalker(paragraph, NodeFilter.SHOW_TEXT);
       let textNode;
       while (textNode = lineWalker.nextNode()) {
-        const computedStyle = window.getComputedStyle(textNode.parentElement);
-        const lineHeight = parseInt((computedStyle.lineHeight === 'normal' ? computedStyle.fontSize : computedStyle.lineHeight).replace('px', ''));
-        if (lineHeight >= paragraphLineHeight) {
-          const referenceRange = document.createRange();
-          referenceRange.selectNode(textNode);
-          for (const rangeRect of referenceRange.getClientRects()) linePositions.add(rangeRect.bottom);
-        }
+        // Skip text nodes in elements that are higher or lower than surrounding text
+        if (textNode.parentElement.closest('sup, sub, rt')) continue;
+        const referenceRange = document.createRange();
+        referenceRange.selectNode(textNode);
+        for (const rangeRect of referenceRange.getClientRects()) linePositions.add(rangeRect.bottom);
       }
       linePositions = Array.from(linePositions);
       

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@samuelbradshaw/highlight-helper-js",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "JavaScript tool that enables highlighting or underlining text in an HTML page.",
   "type": "module",
   "main": "highlight-helper.mjs",