Bugfix: avoids stratification when making a selection that perfectly overlaps an annotation

src/selection/SelectionHandler.js

@@ -1,4 +1,4 @@
-import { trimRange, rangeToSelection, enableTouch } from './SelectionUtils';
+import { trimRange, rangeToSelection, enableTouch, getExactOverlaps } from './SelectionUtils';
 import EventEmitter from 'tiny-emitter';
 
 const IS_TOUCH = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
@@ -62,6 +62,15 @@ export default class SelectionHandler extends EventEmitter {
 
           this._hideNativeSelection();
 
+          const exactOverlaps = getExactOverlaps(stub, spans);
+          if (exactOverlaps.length > 0) {
+            // User selected existing - reuse top-most original to avoid stratification
+            this.clearSelection();
+            this.emit('select', {
+              selection: exactOverlaps[0],
+              element: evt.target.closest('.r6o-annotation')
+            });
+          } else {
             this.emit('select', {
               selection: stub,
               element: selectedRange
@@ -70,6 +79,7 @@ export default class SelectionHandler extends EventEmitter {
         }
       }
     }
+  }
 
   _hideNativeSelection = () => {
     this.el.classList.add('hide-selection');

src/selection/SelectionUtils.js

@@ -50,6 +50,32 @@ export const rangeToSelection = (range, containerEl) => {
 
 };
 
+/**
+ * Util function that checks if the given selection is an exact overlap to any
+ * existing annotations, and returns them, if so
+ */
+export const getExactOverlaps = (newAnnotation, selectedSpans) => {
+  // All existing annotations at this point
+  const existingAnnotations = [];
+
+  selectedSpans.forEach(span => {
+    const enclosingAnnotationSpan = span.closest('.r6o-annotation');
+    const enclosingAnnotation = enclosingAnnotationSpan?.annotation;
+
+    if (enclosingAnnotation && !existingAnnotations.includes(enclosingAnnotation))
+      existingAnnotations.push(enclosingAnnotation);
+  });
+
+  if (existingAnnotations.length > 0)
+    return existingAnnotations.filter(anno => {
+      const isSameAnchor = anno.anchor == newAnnotation.anchor;
+      const isSameQuote = anno.quote == newAnnotation.quote;
+      return isSameAnchor && isSameQuote;
+    });
+  else
+    return [];
+};
+
 export const enableTouch = (element, selectHandler) => {
   let touchTimeout;
   let lastTouchEvent;