Merge branch 'recogito#132-fix-content-outside-annotatable' into staging

# Conflicts: # packages/text-annotator/src/SelectionHandler.ts # packages/text-annotator/src/utils/index.ts
oleksandr-danylchenko · Aug 13, 2024 · 59e8437 · 59e8437
2 parents dc924d9 + a397d68
commit 59e8437
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts
@@ -11,6 +11,7 @@ import {
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
+  trimRangeToContainer,
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
@@ -78,7 +79,8 @@ export const createSelectionHandler = (
     }
 
     // Chrome/iOS does not reliably fire the 'selectstart' event!
-    if (evt.timeStamp - (lastDownEvent?.timeStamp || evt.timeStamp) < 1000 && !currentTarget) {
+    const timeDifference = evt.timeStamp - (lastDownEvent?.timeStamp || evt.timeStamp);
+    if (timeDifference < 1000 && !currentTarget) {
       onSelectStart(lastDownEvent || evt);
     }
 
@@ -87,9 +89,12 @@ export const createSelectionHandler = (
 
 
     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 ||

diff --git a/packages/text-annotator/src/utils/index.ts b/packages/text-annotator/src/utils/index.ts
@@ -12,6 +12,7 @@ export * from './reviveAnnotation';
 export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
+export * from './trimRangeToContainer';
 export * from './normalizeRects';
 export * from './cloneEvents';
 
diff --git a/packages/text-annotator/src/utils/trimRangeToContainer.ts b/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;
+};