@samuelbradshaw/highlight-helper-js 1.0.0 → 1.0.1

package/README.md

@@ -609,6 +609,7 @@ document.getElementById('copy-html').addEventListener('click', (event) => {
 ```css
 @media print {
   [data-hh-additions] { display: none; } /* Hide SVG highlights and custom drag handles */
+  [data-hh-wrapper] { display: none; } /* Hide wrappers */
   mark[data-hh-highlight-id] { all: unset; } /* Hide mark-element highlights */
 }
 ```
@@ -618,5 +619,4 @@ document.getElementById('copy-html').addEventListener('click', (event) => {
 ```javascript
 // After a period of inactivity with a locked screen, certain versions of iOS Safari may get into a state where system selection handles don't show when the app tries to select text programmatically (such as when a user taps an existing highlight). Sending a visibilitychange event triggers HighlightHelper.js to run code that enables programmatic text selection again.
 document.dispatchEvent(new Event('visibilitychange'));
-});
 ```

package/highlight-helper.js

@@ -409,7 +409,11 @@
         const height = Math.round(entry.contentBoxSize[0].blockSize);
         // Respond to width changes (resize window, device rotation) and height changes (lazy-loaded images, dynamically-inserted elements)
         if (width !== previousWidth || height !== previousHeight) {
-          if (options.drawingMode === 'svg') this.drawHighlights();
+          if (options.drawingMode === 'svg') {
+            this.drawHighlights();
+          } else {
+            this._updateHighlightRects();
+          }
           if (this._previousSelectionRange) this._updateSelectionState();
           previousWidth = width;
           previousHeight = height;
@@ -531,13 +535,23 @@
         startParagraphOffset = Number.parseInt(properties.startParagraphOffset ?? oldHighlightInfo?.startParagraphOffset);
         endParagraphId = properties.endParagraphId ?? oldHighlightInfo?.endParagraphId;
         endParagraphOffset = Number.parseInt(properties.endParagraphOffset ?? oldHighlightInfo?.endParagraphOffset);
+        if (!this._paragraphIds.includes(startParagraphId) || !this._paragraphIds.includes(endParagraphId)) return;
         ([ startNode, startOffset ] = this._getTextNodeAndOffset(document.getElementById(startParagraphId), startParagraphOffset, 'start'));
         ([ endNode, endOffset ] = this._getTextNodeAndOffset(document.getElementById(endParagraphId), endParagraphOffset, 'end'));
       } else if (adjustedSelectionRange) {
         startNode = adjustedSelectionRange.startContainer;
         startOffset = adjustedSelectionRange.startOffset;
+        if (this._shouldSkipTextNode(startNode)) {
+          startNode = this._getNextValidTextNode(startNode);
+          startOffset = 0;
+        }
         endNode = adjustedSelectionRange.endContainer;
         endOffset = adjustedSelectionRange.endOffset;
+        if (this._shouldSkipTextNode(endNode)) {
+          endNode = this._getPreviousValidTextNode(endNode);
+          endOffset = endNode?.length;
+        }
+        if (!startNode || !endNode) return;
         ([ startParagraphId, startParagraphOffset ] = this._getParagraphOffset(startNode, startOffset));
         ([ endParagraphId, endParagraphOffset ] = this._getParagraphOffset(endNode, endOffset));
       }
@@ -952,9 +966,9 @@
     this._additionsRect = this._additionsDiv.getBoundingClientRect();
     const x = clientX - this._additionsRect.left;
     const y = clientY - this._additionsRect.top;
-    for (const highlightId of Object.keys(this._highlightsById)) {
+    for (const [highlightId, highlightInfo] of Object.entries(this._highlightsById)) {
       if (highlightIds.has(highlightId)) continue;
-      const rangeLineRects = this._highlightsById[highlightId].rangeLineRects;
+      const rangeLineRects = highlightInfo.rangeLineRects;
       if (!rangeLineRects) continue;
       for (const rect of rangeLineRects) {
         const padding = rect.height / 8;
@@ -1131,8 +1145,12 @@
         const styleString = this._getStyleString(highlightInfo.style, 'css', false, highlightInfo.variables, highlightInfo.rangeRect);
         if (resolvedMode === 'highlight-api') {
           const colorString = this._options.colorDefs[highlightInfo.color];
-          cssText += `${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { --hh-color: ${colorString}; ${styleString} }\n`;
-          cssText += `${this._containerSelector} :is(rt, img)::highlight(${highlightInfo.escapedHighlightId}) { color: inherit; background-color: transparent; }\n`;
+          cssText += `
+            ${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
+            ${this._containerSelector} :is(${this._paragraphSelector})::highlight(${highlightInfo.escapedHighlightId}),
+            ${this._containerSelector} :is(${this._paragraphSelector}) *::highlight(${highlightInfo.escapedHighlightId}) { --hh-color: ${colorString}; ${styleString} }
+            ${this._containerSelector} :is(rt, img)::highlight(${highlightInfo.escapedHighlightId}) { color: inherit; background-color: transparent; }
+          `;
         } else {
           cssText += `mark[data-hh-highlight-id=${highlightInfo.escapedHighlightId}][data-hh-style] { ${styleString} }\n`;
         }
@@ -1250,8 +1268,10 @@
           ${this._containerSelector} ::highlight(${highlightInfo.escapedHighlightId}) { all: unset; }
           ${this._containerSelector} mark[data-hh-highlight-id="${activeHighlightId}"][data-hh-style] { all: unset; }
           ${this._containerSelector} [data-hh-wrapper][data-hh-highlight-id="${activeHighlightId}"] { visibility: hidden; }
-          ${this._containerSelector} ::selection { --hh-color: ${colorString}; ${styleString} }
-          ${this._containerSelector} rt::selection, ${this._containerSelector} img::selection { background-color: transparent; }
+          ${this._containerSelector} ::selection { background-color: transparent; }
+          ${this._containerSelector} :is(${this._paragraphSelector})::selection,
+          ${this._containerSelector} :is(${this._paragraphSelector}) *::selection { --hh-color: ${colorString}; ${styleString} }
+          ${this._containerSelector} :is(rt, img)::selection { background-color: transparent; }
         `);
 
       // No active highlight (show the regular selection UI)
@@ -1268,7 +1288,7 @@
       (options.showDragHandles.includes('touch') || pointerType === 'mouse')
       && (options.showDragHandles.includes('highlights') && activeHighlightId
         || options.showDragHandles.includes('selection') && !activeHighlightId);
-    if (selection.type === 'Range' && showDragHandles) {
+    if (selection.type === 'Range' && showDragHandles && rangeLineRects.length > 0) {
       const startNodeIsRtl = globalThis.getComputedStyle(selectionRange.startContainer.parentElement).direction === 'rtl';
       const endNodeIsRtl = globalThis.getComputedStyle(selectionRange.endContainer.parentElement).direction === 'rtl';
       for (const handle of this._dragHandles) {
@@ -1356,7 +1376,7 @@
       }
       if (skipEnd) {
         endNode = this._getPreviousValidTextNode(endNode);
-        endOffset = endNode.length;
+        endOffset = endNode?.length;
       }
       if (!startNode || !endNode || (startNode === endNode && startOffset === endOffset)) {
         return range.cloneRange().collapse(true);
@@ -1459,7 +1479,7 @@
   // Determine if text node should be skipped when snapping to word or calculating character offsets
   Highlighter.prototype._shouldSkipTextNode = function (textNode) {
     const parentParagraph = this._closestValidParagraph(textNode.parentNode);
-    const ignoreParent = textNode.parentNode.closest('[data-hh-ignore]');
+    const ignoreParent = textNode.parentNode.closest(`${this._containerSelector} [data-hh-ignore]`);
     if (!parentParagraph || ignoreParent || textNode.textContent === '') return true;
     return false;
   }
@@ -1675,7 +1695,7 @@
       range = document.caretRangeFromPoint(clientX, clientY);
     }
     if (!range) return;
-    if (range.startContainer.parentElement?.closest('[data-hh-ignore]')) return;
+    if (range.startContainer.parentElement?.closest(`${this._containerSelector} [data-hh-ignore]`)) return;
     if (checkXDistance || checkYDistance) {
       const maxDistance = 30;
       const caretClientRect = range.getBoundingClientRect();
@@ -1737,6 +1757,16 @@
     return { lines, snapTolerance, pseudoElemRects };
   }
 
+  Highlighter.prototype._updateHighlightRects = function (highlightIds = Object.keys(this._highlightsById), paragraphLineRectsCache = new Map(), columnGeometryCache = new Map()) {
+    for (const highlightId of highlightIds) {
+      const highlightInfo = this._highlightsById[highlightId];
+      const rangeParagraphs = highlightInfo.rangeParagraphIds.map(id => document.getElementById(id));
+      const [rangeRect, rangeLineRects] = this._getRangeRects(highlightInfo.rangeObj, rangeParagraphs, paragraphLineRectsCache, columnGeometryCache);
+      highlightInfo.rangeRect = rangeRect;
+      highlightInfo.rangeLineRects = rangeLineRects;
+    }
+  }
+
   // Get merged client rects from the highlight range
   Highlighter.prototype._getRangeRects = function (range, paragraphs, paragraphLineRectsCache = new Map(), columnGeometryCache = new Map()) {
     let rangeRectCoordinates = { top: Number.POSITIVE_INFINITY, bottom: Number.NEGATIVE_INFINITY, left: Number.POSITIVE_INFINITY, right: Number.NEGATIVE_INFINITY };
@@ -1752,6 +1782,7 @@
       }
       const { lines, snapTolerance, pseudoElemRects } = paragraphLineRects;
       // If the previous paragraph is below the current paragraph (such as in multi-column layouts), reset prevParagraphBottom
+      if (lines.length === 0) continue;
       if (prevParagraphBottom > lines[0].bottom) prevParagraphBottom = Number.NEGATIVE_INFINITY;
       const lineStates = lines.map((lineRect, i) => ({
         topY: i === 0 ? prevParagraphBottom : lines[i - 1].bottom,

package/package.json

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