Added empty text node content check before processing

Author: oleksandr-danylchenko

packages/text-annotator/src/SelectionHandler.ts

@@ -13,7 +13,7 @@ import {
   splitAnnotatableRanges,
   rangeToSelector,
   isMac,
-  isWhitespaceOrEmpty,
+  isRangeWhitespaceOrEmpty,
   trimRangeToContainer,
   isNotAnnotatable
 } from './utils';
@@ -150,7 +150,7 @@ export const SelectionHandler = (
       selectionRanges.map(r => trimRangeToContainer(r, container));
 
     // The selection should be captured only within the annotatable container
-    if (containedRanges.every(r => isWhitespaceOrEmpty(r))) return;
+    if (containedRanges.every(r => isRangeWhitespaceOrEmpty(r))) return;
 
     const annotatableRanges = containedRanges.flatMap(r => splitAnnotatableRanges(container, r.cloneRange()));
 

packages/text-annotator/src/utils/getHighlightClientRects.ts

@@ -1,23 +1,29 @@
+import { isNodeWhitespaceOrEmpty } from './isWhitespaceOrEmpty';
+
 export const getHighlightClientRects = (range: Range) => {
   const textNodes: Text[] = [];
 
   // Get all text nodes inside the range's commonAncestorContainer
   const it = document.createNodeIterator(range.commonAncestorContainer, NodeFilter.SHOW_TEXT);
 
-  // Filter text nodes that intersect the range. Note that we could
-  // also include this filter into the node iterator directly. But
-  // The while loop is faster (!) - possibly due to function call overhead.
+  /*
+   Filter text nodes that intersect the range. Note that we could
+   also include this filter in the node iterator directly.
+   But the while loop is faster (!) - possibly due to a function call overhead.
+  */
   let currentNode: Text | undefined;
 
   while ((currentNode = it.nextNode() as Text)) {
-    if (range.intersectsNode(currentNode))
+    if (range.intersectsNode(currentNode) && !isNodeWhitespaceOrEmpty(currentNode)) {
       textNodes.push(currentNode);
+    }
   }
 
   if (textNodes.length < 2) {
-    // Trivial case: selection inside a single text 
-    // node, or empty (shouldn't happen!) - no need 
-    // to create our own ranges.
+    /*
+     Trivial case: selection is inside a single text node
+     or empty (shouldn't happen!) - no need to create our own ranges.
+    */
     return Array.from(range.getClientRects());
   } else {
     const first = textNodes[0];
@@ -50,4 +56,4 @@ export const getHighlightClientRects = (range: Range) => {
       ...Array.from(lastRange.getClientRects())
     ];
   }
-}
+}

packages/text-annotator/src/utils/isWhitespaceOrEmpty.ts

@@ -1,3 +1,5 @@
 export const whitespaceOrEmptyRegex = /^\s*$/;
 
-export const isWhitespaceOrEmpty = (range: Range): boolean => whitespaceOrEmptyRegex.test(range.toString())
+export const isRangeWhitespaceOrEmpty = (range: Range): boolean => whitespaceOrEmptyRegex.test(range.toString())
+
+export const isNodeWhitespaceOrEmpty = (node: Node): boolean => whitespaceOrEmptyRegex.test(node.textContent || '')