[incubator-annotator] 01/04: Support empty ranges in highlighter & demo

[ge...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

gerben pushed a commit to branch improve-range-stuff
in repository https://gitbox.apache.org/repos/asf/incubator-annotator.git

commit 8800720efcc99548341ee76d33d0db6988371e66
Author: Gerben <ge...@treora.com>
AuthorDate: Thu Jun 25 22:10:56 2020 +0200

    Support empty ranges in highlighter & demo
---
 packages/dom/src/highlight-range.ts |  3 ---
 web/demo/index.js                   | 18 ++++--------------
 web/style.css                       |  2 +-
 3 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/packages/dom/src/highlight-range.ts b/packages/dom/src/highlight-range.ts
index e18a6a4..091c24f 100644
--- a/packages/dom/src/highlight-range.ts
+++ b/packages/dom/src/highlight-range.ts
@@ -55,9 +55,6 @@ export function highlightRange(
 
 // Return an array of the text nodes in the range. Split the start and end nodes if required.
 function textNodesInRange(range: Range): Text[] {
-  // If the range is empty, avoid creating and returning an empty text node.
-  if (range.collapsed) return [];
-
   // If the start or end node is a text node and only partly in the range, split it.
   if (
     isTextNode(range.startContainer) &&
diff --git a/web/demo/index.js b/web/demo/index.js
index 88b9a06..a1688b0 100644
--- a/web/demo/index.js
+++ b/web/demo/index.js
@@ -120,22 +120,12 @@ async function anchor(selector) {
   info.innerText = JSON.stringify(selector, null, 2);
 }
 
-async function describeSelection() {
+async function onSelectionChange() {
+  cleanup();
   const selection = document.getSelection();
-  if (selection.type !== 'Range') return;
-
   const range = selection.getRangeAt(0);
-  if (range.collapsed) return;
-
-  return describeTextQuote(range, source);
-}
-
-async function onSelectionChange() {
-  const selector = await describeSelection();
-  if (selector) {
-    cleanup();
-    anchor(selector);
-  }
+  const selector = await describeTextQuote(range, source);
+  anchor(selector);
 }
 
 function onSelectorExampleClick(event) {
diff --git a/web/style.css b/web/style.css
index 29fef4d..4ef867d 100644
--- a/web/style.css
+++ b/web/style.css
@@ -56,7 +56,7 @@ li {
 
 mark {
   background-color: rgba(255, 255, 0, 0.5);
-  outline: 0.1px solid rgba(255, 100, 0, 0.8);
+  outline: 1px solid rgba(255, 100, 0, 0.8);
 }
 
 .columns {