@samuelbradshaw/highlight-helper-js 0.7.0 → 0.7.2

package/.github/workflows/publish.yml

@@ -1,5 +1,3 @@
-# From https://docs.github.com/en/actions/tutorials/publish-packages/publish-nodejs-packages#publishing-packages-to-the-npm-registry
-
 name: Publish Package to npmjs
 on:
   release:
@@ -8,15 +6,29 @@ jobs:
   build:
     runs-on: ubuntu-latest
     permissions:
-      contents: read
+      contents: write
       id-token: write
     steps:
-      - uses: actions/checkout@v5
-      - uses: actions/setup-node@v4
+      - name: Checkout code
+        uses: actions/checkout@v5
+      - name: Get release version
+        id: get_version
+        run: echo "RELEASE_VERSION=${{ github.event.release.tag_name }}" >> $GITHUB_OUTPUT
+      - name: Update package.json
+        run: npm version "${{ steps.get_version.outputs.RELEASE_VERSION }}" --no-git-tag-version
+      - name: Commit package.json changes
+        uses: stefanzweifel/git-auto-commit-action@v6
+        with:
+          commit_message: "Update package.json version to ${{ steps.get_version.outputs.RELEASE_VERSION }}"
+          branch: main
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
-      - run: npm ci
-      - run: npm publish --provenance --access public
+      - name: Install dependencies
+        run: npm ci
+      - name: Push to npmjs
+        run: npm publish --provenance --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/README.md

@@ -15,6 +15,7 @@ An HTML demo page that shows basic functionality can be found here: [Highlight H
 ### Documentation:
 - [Known issues](#known-issues)
 - [Getting started](#getting-started)
+    - [Installation options](#installation-options)
 - [Methods, options, and custom events](#methods-options-and-custom-events)
     - [Methods](#methods)
     - [Options](#options)
@@ -42,7 +43,24 @@ In the source of demo.html, you’ll see CSS styles, followed by the HTML body,
 3. Sets up logic to call Highlight Helper methods when buttons on the demo page are tapped, and
 4. Sets up listeners to respond to custom event messages that come back from Highlight Helper.
 
-All of the available methods, options, and custom events are documented below.
+
+### <a name="installation-options"></a>Installation options
+
+You can download highlight-helper.js from GitHub and reference it from your HTML file:
+```html
+<script src="scripts/highlight-helper.js"></script>
+```
+
+Or you can load it from [jsDelivr](https://www.jsdelivr.com/package/gh/samuelbradshaw/highlight-helper-js):
+```html
+<script src="https://cdn.jsdelivr.net/gh/samuelbradshaw/highlight-helper-js@main/highlight-helper.min.js"></script>
+```
+
+Or you can install it using [npm](https://www.npmjs.com/package/@samuelbradshaw/highlight-helper-js):
+```bash
+% cd /your/project/folder
+% npm i @samuelbradshaw/highlight-helper-js
+```
 
 
 ## <a name="methods-options-and-custom-events"></a>Methods, options, and custom events

package/highlight-helper.js

@@ -3,6 +3,8 @@
  * https://github.com/samuelbradshaw/highlight-helper-js
  */
 
+'use strict';
+
 function Highlighter(options = hhDefaultOptions) {
   for (const key of Object.keys(hhDefaultOptions)) {
     options[key] = options[key] ?? hhDefaultOptions[key];
@@ -231,6 +233,7 @@ function Highlighter(options = hhDefaultOptions) {
         range.endContainer.splitText(range.endOffset);
         const textNodeIter = document.createNodeIterator(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
         const relevantTextNodes = [];
+        let node;
         while (node = textNodeIter.nextNode()) {
           if (range.intersectsNode(node) && node !== range.startContainer && node.textContent !== '' && !node.parentElement.closest('rt') && node.parentElement.closest(options.paragraphSelector)) relevantTextNodes.push(node);
           if (node === range.endContainer) break;
@@ -239,7 +242,7 @@ function Highlighter(options = hhDefaultOptions) {
         for (let tn = 0; tn < relevantTextNodes.length; tn++) {
           const textNode = relevantTextNodes[tn];
           if (textNode.parentElement.dataset.highlightId) {
-            overlappingHighlightIds.add(textNode.parentElement.dataset.highlightId)
+            overlappingHighlightIds.add(textNode.parentElement.dataset.highlightId);
           }
           const styledMark = document.createElement('mark');
           styledMark.dataset.highlightId = highlightId;
@@ -260,6 +263,7 @@ function Highlighter(options = hhDefaultOptions) {
       } else {
         // Draw highlights with Custom Highlight API
         if (options.drawingMode === 'highlight-api' && supportsHighlightApi) {
+          let highlightObj;
           if (CSS.highlights.has(highlightId)) {
             highlightObj = CSS.highlights.get(highlightId);
             highlightObj.clear();
@@ -302,6 +306,7 @@ function Highlighter(options = hhDefaultOptions) {
             template.innerHTML = htmlString;
             let htmlElement = template.content.firstChild;
             
+            let node;
             const textNodeIter = document.createNodeIterator(htmlElement, NodeFilter.SHOW_TEXT);
             while (node = textNodeIter.nextNode()) node.parentNode.removeChild(node);
             range.insertNode(htmlElement);
@@ -323,8 +328,8 @@ function Highlighter(options = hhDefaultOptions) {
   // Create a new highlight, or update an existing highlight when it changes
   this.createOrUpdateHighlight = (attributes = {}, triggeredByUserAction = true) => {
     let highlightId = attributes.highlightId ?? activeHighlightId ?? options.highlightIdFunction();
-    appearanceChanges = [];
-    boundsChanges = [];
+    const appearanceChanges = [];
+    const boundsChanges = [];
     
     let isNewHighlight, oldHighlightInfo;
     if (highlightsById.hasOwnProperty(highlightId)) {
@@ -541,7 +546,7 @@ function Highlighter(options = hhDefaultOptions) {
   // Get info for specified highlights, or all highlights on the page
   this.getHighlightInfo = (highlightIds = Object.keys(highlightsById), paragraphId = null) => {
     let filteredHighlights = []
-    for (highlightId of highlightIds) {
+    for (const highlightId of highlightIds) {
       const highlightInfo = highlightsById[highlightId];
       if (!paragraphId || paragraphId === highlightInfo.startParagraphId) {
         filteredHighlights.push(highlightInfo);
@@ -1272,6 +1277,7 @@ function Highlighter(options = hhDefaultOptions) {
       // Get line positions (bottom edge of each line)
       let linePositions = new Set();
       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', ''));
@@ -1302,8 +1308,8 @@ function Highlighter(options = hhDefaultOptions) {
               mergedRect.width = rect.width;
             }
             // Process then remove rects that apply to the current line
-            minLeft = Math.min(mergedRect.x, rect.x);
-            maxRight = Math.max(mergedRect.right, rect.right);
+            const minLeft = Math.min(mergedRect.x, rect.x);
+            const maxRight = Math.max(mergedRect.right, rect.right);
             mergedRect.width = maxRight - minLeft;
             mergedRect.x = minLeft;
             unmergedRects.splice(r, 1); r--;
@@ -1447,3 +1453,6 @@ let hhDefaultOptions = {
 }
 
 console.info('Highlighter loaded');
+
+// Make Highlighter available to ES module (highlight-helper.mjs)
+window.Highlighter = Highlighter;

package/highlight-helper.mjs

@@ -0,0 +1,3 @@
+await import('./highlight-helper.js');
+const Highlighter = window.Highlighter;
+export { Highlighter };

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@samuelbradshaw/highlight-helper-js",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "JavaScript tool that enables highlighting or underlining text in an HTML page.",
-  "main": "highlight-helper.js",
+  "type": "module",
+  "main": "highlight-helper.mjs",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/samuelbradshaw/highlight-helper-js.git"