Merge branch 'main' into recogito#127-annotating-enabled-reactive

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-react/src/TextAnnotatorPopup.tsx

@@ -19,7 +19,7 @@ interface TextAnnotationPopupProps {
 
 }
 
-interface TextAnnotationPopupContentProps {
+export interface TextAnnotationPopupContentProps {
 
   annotation: TextAnnotation;
 

packages/text-annotator-react/test/App.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef } from 'react';
 import { AnnotationBody, Annotorious, useAnnotationStore, useAnnotator } from '@annotorious/react';
-import { TextAnnotator, TextAnnotatorPopup, TextAnnotatorPopupProps } from '../src';
-import { TextAnnotation, TextAnnotator as RecogitoTextAnnotator, W3CTextFormat } from '@recogito/text-annotator';
+import { TextAnnotator, TextAnnotatorPopup, type TextAnnotationPopupContentProps } from '../src';
+import { W3CTextFormat, type TextAnnotation, type TextAnnotator as RecogitoTextAnnotator } from '@recogito/text-annotator';
 
-const TestPopup = (props: TextAnnotatorPopupProps) => {
+const TestPopup = (props: TextAnnotationPopupContentProps) => {
 
   const store = useAnnotationStore();
   const anno = useAnnotator<RecogitoTextAnnotator>();
@@ -12,7 +12,7 @@ const TestPopup = (props: TextAnnotatorPopupProps) => {
 
   const body: AnnotationBody = {
     id: `${Math.random()}`,
-    annotation: props.selected[0].annotation.id,
+    annotation: props.annotation.id,
     purpose: 'commenting',
     value: 'A Dummy Comment'
   };

packages/text-annotator-react/test/index.html

@@ -24,6 +24,10 @@
         line-height: 160%;
       }
 
+      .annotation-popup {
+        z-index: 1;
+      }
+
       .popup {
         background-color: #fff;
         border: 1px solid gray;
@@ -50,4 +54,4 @@
     <!-- div id="debug"></div -->
     <script type="module" src="./index.tsx"></script>
   </body>
-</html>
+</html>

packages/text-annotator-react/test/tei/App.tsx

@@ -3,9 +3,9 @@ import React, { useEffect, useRef, useState } from 'react';
 import { AnnotationBody, Annotorious, useAnnotationStore, useAnnotator } from '@annotorious/react';
 import { TextAnnotation, TextAnnotator as VanillaTextAnnotator } from '@recogito/text-annotator';
 
-import { TEIAnnotator, CETEIcean, TextAnnotatorPopup, TextAnnotatorPopupProps } from '../../src';
+import { TEIAnnotator, CETEIcean, TextAnnotatorPopup, type TextAnnotationPopupContentProps } from '../../src';
 
-const TestPopup = (props: TextAnnotatorPopupProps) => {
+const TestPopup = (props: TextAnnotationPopupContentProps) => {
 
   const store = useAnnotationStore();
   const anno = useAnnotator<VanillaTextAnnotator>();
@@ -14,7 +14,7 @@ const TestPopup = (props: TextAnnotatorPopupProps) => {
 
   const body: AnnotationBody = {
     id: `${Math.random()}`,
-    annotation: props.selected[0].annotation.id,
+    annotation: props.annotation.id,
     purpose: 'commenting',
     value: 'A Dummy Comment'
   };

packages/text-annotator-react/test/tei/index.html

@@ -33,6 +33,10 @@
         line-height: 160%;
       }
 
+      .annotation-popup {
+        z-index: 1;
+      }
+
       .popup {
         background-color: #fff;
         border: 1px solid gray;
@@ -44,4 +48,4 @@
     <div id="root"></div>
     <script type="module" src="./index.tsx"></script>
   </body>
-</html>
+</html>

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",
     "debounce": "^2.1.0",
     "dequal": "^2.0.3",

packages/text-annotator/src/SelectionHandler.ts

@@ -165,13 +165,26 @@ export const createSelectionHandler = (
 
     const timeDifference = evt.timeStamp - lastPointerDown.timeStamp;
 
-    // Just a click, not a selection
-    if (document.getSelection().isCollapsed && timeDifference < 300) {
-      currentTarget = undefined;
-      clickSelect();
-    } else if (currentTarget) {
-      selection.userSelect(currentTarget.annotation, evt);
-    }
+    /**
+     * We must check the `isCollapsed` within the 0-timeout
+     * to handle the annotation dismissal after a click properly.
+     *
+     * Otherwise, the `isCollapsed` will return an obsolete `false` value,
+     * click won't be processed, and the annotation will get falsely re-selected.
+     *
+     * @see https://github.com/recogito/text-annotator-js/issues/136
+     */
+    setTimeout(() => {
+      const sel = document.getSelection()
+
+      // Just a click, not a selection
+      if (sel?.isCollapsed && timeDifference < 300) {
+        currentTarget = undefined;
+        clickSelect();
+      } else if (currentTarget) {
+        selection.userSelect(currentTarget.annotation, evt);
+      }
+    });
   }
 
   container.addEventListener('pointerdown', onPointerDown);

packages/text-annotator/src/TextAnnotator.ts

@@ -24,14 +24,14 @@ 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;
 
   setAnnotatingEnabled: (enabled: boolean) => void;
 
@@ -41,12 +41,12 @@ export interface TextAnnotator<E extends unknown = TextAnnotation> extends Annot
 
 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);
 
-  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);