Merge pull request #134 from oleksandr-danylchenko/#132-fix-content-o…

…utside-annotatable

#132 Fixed unexpected ability to create annotations outside of the annotatable container

packages/text-annotator/src/SelectionHandler.ts

@@ -7,6 +7,7 @@ import {
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
+  trimRangeToContainer,
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
@@ -69,15 +70,19 @@ export const SelectionHandler = (
     }
 
     // Chrome/iOS does not reliably fire the 'selectstart' event!
-    if (evt.timeStamp - (lastPointerDown?.timeStamp || evt.timeStamp) < 1000 && !currentTarget)
+    const timeDifference = evt.timeStamp - (lastPointerDown?.timeStamp || evt.timeStamp);
+    if (timeDifference < 1000 && !currentTarget)
       onSelectStart(lastPointerDown);
 
     if (sel.isCollapsed || !isLeftClick || !currentTarget) return;
 
     const selectionRange = sel.getRangeAt(0);
-    if (isWhitespaceOrEmpty(selectionRange)) return;
-
-    const annotatableRanges = splitAnnotatableRanges(selectionRange.cloneRange());
+
+    // The selection should be captured only within the annotatable container
+    const containedRange = trimRangeToContainer(selectionRange, container);
+    if (isWhitespaceOrEmpty(containedRange)) return;
+
+    const annotatableRanges = splitAnnotatableRanges(containedRange.cloneRange());
 
     const hasChanged =
       annotatableRanges.length !== currentTarget.selector.length ||
@@ -162,7 +167,7 @@ export const SelectionHandler = (
   const destroy = () => {
     container.removeEventListener('selectstart', onSelectStart);
     document.removeEventListener('selectionchange', onSelectionChange);
-    
+
     container.removeEventListener('pointerdown', onPointerDown);
     document.removeEventListener('pointerup', onPointerUp);
   }

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

@@ -11,4 +11,5 @@ export * from './reviveAnnotation';
 export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
+export * from './trimRangeToContainer';
 

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

@@ -0,0 +1,18 @@
+export const trimRangeToContainer = (
+  range: Range,
+  container: HTMLElement
+): Range => {
+  const trimmedRange = range.cloneRange();
+
+  // If the start is outside the container - set it to the start of the container
+  if (!container.contains(trimmedRange.startContainer)) {
+    trimmedRange.setStart(container, 0);
+  }
+
+  // If the end is outside the container - set it to the end of the container
+  if (!container.contains(trimmedRange.endContainer)) {
+    trimmedRange.setEnd(container, container.childNodes.length);
+  }
+
+  return trimmedRange;
+};