@openstax/highlighter - npm Package Compare versions

Comparing version 1.3.1 to 1.3.2

dist/dom.d.ts

@@ -104,2 +104,4 @@ /**
     farthest(selector: any): any;
+    readonly isHtmlElement: boolean;
 };
+export declare const isHtmlElement: (thing: any) => thing is HTMLElement;

dist/dom.js

@@ -241,5 +241,13 @@ "use strict";
         },
+        get isHtmlElement() {
+            return typeof el === 'object'
+                && el !== null
+                && el.nodeType === 1
+                && el.title !== undefined
+                && typeof el.nodeName === 'string';
+        },
     };
 }
 exports.default = dom;
+exports.isHtmlElement = (thing) => dom(thing).isHtmlElement;
 //# sourceMappingURL=dom.js.map

dist/Highlighter.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const dom_1 = require("./dom");
 const Highlight_1 = require("./Highlight");
@@ -19,3 +20,3 @@ const injectHighlightWrappers_1 = require("./injectHighlightWrappers");
         };
-        this.onMouseup = () => {
+        this.onMouseup = (ev) => {
             const selection = this.document.getSelection();
@@ -26,3 +27,3 @@ if (!selection) {
             if (selection.isCollapsed) {
-                this.onClick(selection);
+                this.onClick(ev.target);
             }
@@ -75,15 +76,23 @@ else {
     }
-    onClick(selection) {
+    onClick(target) {
         const { onClick } = this.options;
-        const clickedHighlight = () => {
-            if (selection.rangeCount < 1) {
-                return;
+        if (!onClick) {
+            return;
+        }
+        if (dom_1.default(target).isHtmlElement) {
+            target = dom_1.default(target);
+            while (target.isHtmlElement) {
+                if (target.el.getAttribute(injectHighlightWrappers_1.DATA_ATTR)) {
+                    // there may be multiple highlighters active on the same document,
+                    // check if the found highlight is known to this instance
+                    const highlight = this.highlights[target.el.getAttribute(injectHighlightWrappers_1.DATA_ID_ATTR)];
+                    if (highlight) {
+                        onClick(highlight);
+                        return;
+                    }
+                }
+                target = dom_1.default(target.el.parentElement);
             }
-            const range = selection_1.getRange(selection);
-            return Object.values(this.highlights)
-                .find((other) => other.intersects(range));
-        };
-        if (onClick) {
-            onClick(clickedHighlight());
         }
+        onClick();
     }
@@ -90,0 +99,0 @@ onSelect(selection) {

dist/injectHighlightWrappers.d.ts

 import Highlight from './Highlight';
 export declare const TIMESTAMP_ATTR = "data-timestamp";
 export declare const DATA_ATTR = "data-highlighted";
+export declare const DATA_ATTR_SELECTOR: string;
+export declare const DATA_ID_ATTR = "data-highlight-id";
 interface IOptions {
@@ -5,0 +7,0 @@ id?: string;

dist/injectHighlightWrappers.js

@@ -7,2 +7,4 @@ "use strict";
 exports.DATA_ATTR = 'data-highlighted';
+exports.DATA_ATTR_SELECTOR = '[' + exports.DATA_ATTR + ']';
+exports.DATA_ID_ATTR = 'data-highlight-id';
 const NODE_TYPE = {
@@ -30,4 +32,2 @@ ELEMENT_NODE: 1,
     highlight.elements = normalizedHighlights;
-    normalizedHighlights[0].setAttribute('data-highlight-position', 'first');
-    normalizedHighlights[normalizedHighlights.length - 1].setAttribute('data-highlight-position', 'last');
 }
@@ -268,3 +268,3 @@ exports.default = injectHighlightWrappers;
     if (options.id) {
-        span.setAttribute('data-id', options.id);
+        span.setAttribute(exports.DATA_ID_ATTR, options.id);
     }
@@ -274,3 +274,3 @@ return span;
 function isHighlight(el) {
-    return el && el.nodeType === NODE_TYPE.ELEMENT_NODE && el.hasAttribute(exports.DATA_ATTR);
+    return el && el.nodeType === NODE_TYPE.ELEMENT_NODE && el.matches(exports.DATA_ATTR_SELECTOR);
 }
@@ -277,0 +277,0 @@ function sortByDepth(arr, descending) {

dist/removeHighlightWrappers.d.ts

 import Highlight from './Highlight';
-export declare const DATA_ATTR = "data-highlighted";
 /**
@@ -4,0 +3,0 @@ * Removes highlights from element. If element is a highlight itself, it is removed as well.

dist/removeHighlightWrappers.js

@@ -5,3 +5,3 @@ "use strict";
 const dom_1 = require("./dom");
-exports.DATA_ATTR = 'data-highlighted';
+const injectHighlightWrappers_1 = require("./injectHighlightWrappers");
 const NODE_TYPE = {
@@ -52,4 +52,4 @@ ELEMENT_NODE: 1,
 function getHighlights(container) {
-    const nodeList = container.querySelectorAll('[' + exports.DATA_ATTR + ']'), highlights = Array.prototype.slice.call(nodeList);
-    if (container.hasAttribute(exports.DATA_ATTR)) {
+    const nodeList = container.querySelectorAll(injectHighlightWrappers_1.DATA_ATTR_SELECTOR), highlights = Array.prototype.slice.call(nodeList);
+    if (container.matches(injectHighlightWrappers_1.DATA_ATTR_SELECTOR)) {
         highlights.push(container);
@@ -56,0 +56,0 @@ }

package.json

 {
   "name": "@openstax/highlighter",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

152537

increased by0.85%

Lines of code

1766

increased by1.15%

No dependency changes