@samuelbradshaw/highlight-helper-js 0.7.3 → 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.
@@ -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;
         }
       }
     }

package/package.json

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