Merge branch 'fix-annotation-deselection' into keyboard-event-selection

# Conflicts:
#	packages/text-annotator/src/SelectionHandler.ts
#	packages/text-annotator/src/TextAnnotator.ts

packages/extension-tei/package.json

@@ -32,7 +32,7 @@
     "vite-plugin-dts": "^4.1.0"
   },
   "peerDependencies": {
-    "@annotorious/core": "^3.0.2",
+    "@annotorious/core": "^3.0.3",
     "@recogito/text-annotator": "3.0.0-rc.44"
   }
 }

packages/text-annotator-react/package.json

@@ -44,8 +44,8 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.2",
-    "@annotorious/react": "^3.0.2",
+    "@annotorious/core": "^3.0.3",
+    "@annotorious/react": "^3.0.3",
     "@floating-ui/react": "^0.26.23",
     "@recogito/text-annotator": "3.0.0-rc.44",
     "@recogito/text-annotator-tei": "3.0.0-rc.44",

packages/text-annotator-react/src/TextAnnotator.tsx

@@ -7,7 +7,7 @@ import { createTextAnnotator } from '@recogito/text-annotator';
 import '@recogito/text-annotator/dist/text-annotator.css';
 
 
-export interface TextAnnotatorProps<E extends unknown> extends Omit<TextAnnotatorOptions<E>, 'adapter'> {
+export interface TextAnnotatorProps<E extends unknown> extends Omit<TextAnnotatorOptions<TextAnnotation, E>, 'adapter'> {
 
   children?: ReactNode | JSX.Element;
 

packages/text-annotator/package.json

@@ -37,7 +37,7 @@
     "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.2",
+    "@annotorious/core": "^3.0.3",
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "hotkeys-js": "^3.13.7",

packages/text-annotator/src/SelectionHandler.ts

@@ -189,6 +189,7 @@ export const SelectionHandler = (
       }
     };
 
+    const sel = document.getSelection();
     const timeDifference = evt.timeStamp - lastDownEvent.timeStamp;
 
       /**

packages/text-annotator/src/TextAnnotator.ts

@@ -13,30 +13,30 @@ import './TextAnnotator.css';
 
 const USE_DEFAULT_RENDERER: RendererType = 'SPANS';
 
-export interface TextAnnotator<E extends unknown = TextAnnotation> extends Annotator<TextAnnotation, E> {
+export interface TextAnnotator<I extends TextAnnotation = TextAnnotation, E extends unknown = TextAnnotation> extends Annotator<TextAnnotation, E> {
 
   element: HTMLElement;
 
   setStyle(style: HighlightStyleExpression | undefined): void;
 
   // Returns true if successful (or false if the annotation is not currently rendered)
-  scrollIntoView(annotation: TextAnnotation): boolean;
+  scrollIntoView(annotation: I): boolean;
 
   state: TextAnnotatorState;
 
 }
 
 export const createTextAnnotator = <E extends unknown = TextAnnotation>(
   container: HTMLElement,
-  options: TextAnnotatorOptions<E> = {}
-): TextAnnotator<E> => {
+  options: TextAnnotatorOptions<TextAnnotation, E> = {}
+): TextAnnotator<TextAnnotation, E> => {
   // Prevent mobile browsers from triggering word selection on single click.
   cancelSingleClickEvents(container);
 
   // Make sure that the container is focusable and can receive both pointer and keyboard events
   programmaticallyFocusable(container);
 
-  const opts = fillDefaults<E>(options, {
+  const opts = fillDefaults<TextAnnotation, E>(options, {
     annotatingEnabled: true,
     user: createAnonymousGuest()
   });

packages/text-annotator/src/TextAnnotatorOptions.ts

@@ -1,11 +1,11 @@
-import type { FormatAdapter, UserSelectActionExpression, User } from '@annotorious/core';
+import type { FormatAdapter, UserSelectActionExpression, User, Annotation } from '@annotorious/core';
 import type { PresencePainterOptions } from './presence';
 import type { TextAnnotation } from './model';
 import type { HighlightStyleExpression } from './highlight';
 
-export interface TextAnnotatorOptions<T extends unknown = TextAnnotation> {
+export interface TextAnnotatorOptions<I extends TextAnnotation = TextAnnotation, E extends unknown = TextAnnotation> {
 
-  adapter?: FormatAdapter<TextAnnotation, T> | null;
+  adapter?: FormatAdapter<I, E> | null;
 
   annotatingEnabled?: boolean;
 
@@ -25,10 +25,10 @@ export interface TextAnnotatorOptions<T extends unknown = TextAnnotation> {
 
 export type RendererType = 'SPANS' | 'CANVAS' | 'CSS_HIGHLIGHTS';
 
-export const fillDefaults = <T extends unknown = TextAnnotation>(
-  opts: TextAnnotatorOptions<T>,
-  defaults: TextAnnotatorOptions<T>
-): TextAnnotatorOptions<T> => {
+export const fillDefaults = <I extends TextAnnotation = TextAnnotation, E extends unknown = TextAnnotation>(
+  opts: TextAnnotatorOptions<I, E>,
+  defaults: TextAnnotatorOptions<I, E>
+): TextAnnotatorOptions<I, E> => {
 
   return {
     ...opts,

packages/text-annotator/src/highlight/span/spansRenderer.ts

@@ -56,7 +56,29 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     if (shouldRedraw)
       highlightLayer.innerHTML = '';
 
-    highlights.forEach(highlight => {
+    /**
+     * Highlights rendering in the span highlight layer is an order-sensitive operation.
+     * The later the highlight is rendered, the higher it will be in the visual stack.
+     *
+     * By default, we should expect that the newer highlight
+     * will be rendered over the older one
+     */
+
+    /**
+     * Note that I need to disable temporarily. Turns out annotation loading WITHOUT
+     * an adapter does not yet revive dates, causing this to fail. Needs to be
+     * fixed directly in the Annotorious Annotator.
+     *
+    const highlightsByCreation = [...highlights].sort((highlightA, highlightB) => {
+      const { annotation: { target: { created: createdA } } } = highlightA;
+      const { annotation: { target: { created: createdB } } } = highlightB;
+      console.log(highlightA.annotation);
+      console.log(highlightB.annotation);
+      return createdA && createdB ? createdA.getTime() - createdB.getTime() : 0;
+    });
+    */
+
+    [...highlights]/*highlightsByCreation*/.forEach(highlight => {
       highlight.rects.map(rect => {
         const zIndex = computeZIndex(rect, highlights);
         const style = paint(highlight, viewportBounds, currentStyle, painter, zIndex);

packages/text-annotator/src/state/spatialTree.ts

@@ -2,14 +2,9 @@ import RBush from 'rbush';
 import type { Store } from '@annotorious/core';
 import type { TextAnnotation, TextAnnotationTarget } from '../model';
 import { isRevived, mergeClientRects } from '../utils';
-import { getClientRectsPonyfill } from '../utils/getClientRectsPonyfill';
 import { reviveSelector } from '../utils';
 import type { AnnotationRects } from './TextAnnotationStore';
 
-const isFirefox = false; // navigator.userAgent.match(/firefox|fxios/i);
-
-if (isFirefox) console.warn('Firefox interop enabled');
-
 interface IndexedHighlightRect {
 
   minX: number;
@@ -40,9 +35,7 @@ export const createSpatialTree = (store: Store<TextAnnotation>, container: HTMLE
   const toItems = (target: TextAnnotationTarget, offset: DOMRect): IndexedHighlightRect[] => {
     const rects = target.selector.flatMap(s => {
       const revivedRange = isRevived([s]) ? s.range : reviveSelector(s, container).range;
-      return isFirefox ?
-        getClientRectsPonyfill(revivedRange) :
-        Array.from(revivedRange.getClientRects());
+      return Array.from(revivedRange.getClientRects());
     });
 
     const merged = mergeClientRects(rects)