Inline a small highlighter in demo
diff --git a/demo/index.html b/demo/index.html
index 2086d04..d013b26 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -25,14 +25,14 @@
content: '📌';
font-size: 75%;
}
+ mark {
+ background-color: rgba(255, 255, 0, 0.5);
+ outline: 0.1px solid rgba(255, 100, 0, 0.8);
+ }
#parsed {
height: 15rem;
overflow: scroll;
}
- .highlighted {
- background-color: rgba(255, 255, 120, 0.5);
- outline: 0.1px solid rgba(255, 100, 0, 0.8);
- }
</style>
<main>
<h1>Selector Demonstration</h1>
diff --git a/demo/index.js b/demo/index.js
index d65e87e..c4aa48e 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -25,12 +25,62 @@
describeTextQuote,
} from '@annotator/dom';
import { makeRefinable } from '@annotator/selector';
-import highlightRange from 'dom-highlight-range';
function clear() {
corpus.innerHTML = selectable.innerHTML;
}
+function highlight(range) {
+ for (const node of textNodes(range)) {
+ const mark = document.createElement('mark');
+ const markRange = document.createRange();
+ markRange.selectNode(node);
+ markRange.surroundContents(mark);
+ }
+}
+
+function textNodes(range) {
+ const nodes = [];
+
+ if (range.collapsed) return nodes;
+
+ let startNode = range.startContainer;
+ let startOffset = range.startOffset;
+
+ if (startNode.nodeType === 3) {
+ if (startOffset > 0 && startOffset < startNode.length) {
+ startNode = startNode.splitText(startOffset);
+ startOffset = 0;
+ }
+ }
+
+ let endNode = range.endContainer;
+ let endOffset = range.endOffset;
+
+ if (endNode.nodeType === 3) {
+ if (endOffset > 0 && endOffset < endNode.length) {
+ endNode = endNode.splitText(endOffset);
+ endOffset = 0;
+ }
+ }
+
+ const walker = document.createTreeWalker(document.documentElement);
+ walker.currentNode = startNode;
+
+ while (walker.currentNode !== endNode) {
+ if (walker.currentNode.nodeType === 3) {
+ nodes.push(walker.currentNode);
+ }
+ walker.nextNode();
+ }
+
+ if (endNode.nodeType === 3 && endOffset > 0) {
+ nodes.push(endNode);
+ }
+
+ return nodes;
+}
+
const createSelector = makeRefinable(selector => {
const selectorCreator = {
TextQuoteSelector: createTextQuoteSelector,
@@ -59,7 +109,7 @@
}
for (const range of ranges) {
- highlightRange(range, 'highlighted');
+ highlight(range);
}
parsed.innerText = JSON.stringify(selector, null, 2);
diff --git a/package.json b/package.json
index 514191f..2a043dc 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,6 @@
"chai": "^4.2.0",
"core-js": "3",
"cross-env": "^5.2.0",
- "dom-highlight-range": "^1.0.1",
"eslint": "^5.16.0",
"eslint-config-prettier": "^4.1.0",
"eslint-import-resolver-babel-module": "^5.0.1",
diff --git a/yarn.lock b/yarn.lock
index ea02686..2b38e5f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3291,10 +3291,6 @@
dependencies:
esutils "^2.0.2"
-dom-highlight-range@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/dom-highlight-range/-/dom-highlight-range-1.0.1.tgz#0634cb60fcf4565c2b222e32b66c626358148747"
-
dom-node-iterator@^3.5.3:
version "3.5.3"
resolved "https://registry.yarnpkg.com/dom-node-iterator/-/dom-node-iterator-3.5.3.tgz#32b68aa440962f1734487029f544a3db704637b7"
