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,10 +62,20 @@ export default class SelectionHandler extends EventEmitter {
 
           this._hideNativeSelection();
 
-          this.emit('select', {
+          const exactOverlaps = getExactOverlaps(stub, spans);
-            selection: stub,
+          if (exactOverlaps.length > 0) {
-            element: selectedRange
+            // 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
+            });
+          }
         }
       }
     }

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;