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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator-monorepo",
-  "version": "3.0.0-rc.41",
+  "version": "3.0.0-rc.44",
   "description": "Recogito Text Annotator monorepo",
   "author": "Rainer Simon",
   "repository": {

packages/extension-tei/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator-tei",
-  "version": "3.0.0-rc.41",
+  "version": "3.0.0-rc.44",
   "description": "Recogito Text Annotator TEI extension",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -29,10 +29,10 @@
     "CETEIcean": "^1.9.3",
     "typescript": "5.5.4",
     "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.0.3"
+    "vite-plugin-dts": "^4.1.0"
   },
   "peerDependencies": {
-    "@annotorious/core": "^3.0.0",
-    "@recogito/text-annotator": "3.0.0-rc.41"
+    "@annotorious/core": "^3.0.2",
+    "@recogito/text-annotator": "3.0.0-rc.44"
   }
 }

packages/text-annotator-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/react-text-annotator",
-  "version": "3.0.0-rc.41",
+  "version": "3.0.0-rc.44",
   "description": "Recogito Text Annotator React bindings",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -30,7 +30,7 @@
     "react-dom": "^18.3.1",
     "typescript": "5.5.4",
     "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
@@ -44,11 +44,11 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0",
-    "@annotorious/react": "^3.0.0",
+    "@annotorious/core": "^3.0.2",
+    "@annotorious/react": "^3.0.2",
     "@floating-ui/react": "^0.26.23",
-    "@recogito/text-annotator": "3.0.0-rc.41",
-    "@recogito/text-annotator-tei": "3.0.0-rc.41",
+    "@recogito/text-annotator": "3.0.0-rc.44",
+    "@recogito/text-annotator-tei": "3.0.0-rc.44",
     "CETEIcean": "^1.9.3"
   }
 }

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

@@ -15,13 +15,17 @@ import {
 
 interface TextAnnotationPopupProps {
 
-  popup(props: TextAnnotatorPopupProps): ReactNode;
+  popup(props: TextAnnotationPopupContentProps): ReactNode;
 
 }
 
-export interface TextAnnotatorPopupProps {
+interface TextAnnotationPopupContentProps {
 
-  selected: { annotation: TextAnnotation, editable?: boolean }[];
+  annotation: TextAnnotation;
+
+  editable?: boolean;
+
+  event?: PointerEvent;
 
 }
 
@@ -110,7 +114,11 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
       style={floatingStyles}
       {...getFloatingProps()}
       {...getStopEventsPropagationProps()}>
-      {props.popup({ selected })}
+      {props.popup({
+        annotation: selected[0].annotation,
+        editable: selected[0].editable,
+        event
+       })}
     </div>
   ) : null;
 

packages/text-annotator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator",
-  "version": "3.0.0-rc.41",
+  "version": "3.0.0-rc.44",
   "description": "A JavaScript text annotation library",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -33,11 +33,11 @@
     "svelte": "^4.2.19",
     "typescript": "5.5.4",
     "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.0.3",
+    "vite-plugin-dts": "^4.1.0",
     "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0",
+    "@annotorious/core": "^3.0.2",
     "colord": "^2.9.3",
     "debounce": "^2.1.0",
     "dequal": "^2.0.3",

packages/text-annotator/src/SelectionHandler.ts

@@ -68,8 +68,6 @@ export const createSelectionHandler = (
     }
   }
 
-  container.addEventListener('selectstart', onSelectStart);
-
   const onSelectionChange = debounce((evt: PointerEvent) => {
     if (!currentAnnotatingEnabled) return;
 
@@ -130,8 +128,6 @@ export const createSelectionHandler = (
     }
   });
 
-  document.addEventListener('selectionchange', onSelectionChange);
-
   // Select events don't carry information about the mouse button
   // Therefore, to prevent right-click selection, we need to listen
   // to the initial pointerdown event and remember the button
@@ -143,8 +139,6 @@ export const createSelectionHandler = (
     isLeftClick = evt.button === 0;
   }
 
-  document.addEventListener('pointerdown', onPointerDown);
-
   const onPointerUp = (evt: PointerEvent) => {
     const annotatable = !(evt.target as Node).parentElement?.closest(NOT_ANNOTATABLE_SELECTOR);
     if (!annotatable || !isLeftClick)
@@ -180,19 +174,24 @@ export const createSelectionHandler = (
     }
   }
 
+  container.addEventListener('pointerdown', onPointerDown);
   document.addEventListener('pointerup', onPointerUp);
 
+  container.addEventListener('selectstart', onSelectStart);
+  document.addEventListener('selectionchange', onSelectionChange);
+
   const destroy = () => {
     currentTarget = undefined;
     lastPointerDown = undefined;
 
     onSelectionChange.clear();
 
+    container.removeEventListener('pointerdown', onPointerDown);
+    document.removeEventListener('pointerup', onPointerUp);
+
     container.removeEventListener('selectstart', onSelectStart);
     document.removeEventListener('selectionchange', onSelectionChange);
 
-    document.removeEventListener('pointerdown', onPointerDown);
-    document.removeEventListener('pointerup', onPointerUp);
   }
 
   return {

packages/text-annotator/src/highlight/baseRenderer.ts

@@ -45,9 +45,9 @@ export interface Renderer {
 
 }
 
-export const createBaseRenderer = (
+export const createBaseRenderer = <T extends TextAnnotatorState = TextAnnotatorState> (
   container: HTMLElement, 
-  state: TextAnnotatorState,
+  state: T,
   viewport: ViewportState,
   renderer: RendererImplementation
 ): Renderer => {

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

@@ -114,8 +114,8 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
 
 }
 
-export const createSpansRenderer = (
+export const createSpansRenderer = <T extends TextAnnotatorState = TextAnnotatorState> (
   container: HTMLElement,
-  state: TextAnnotatorState,
+  state: T,
   viewport: ViewportState
 ) => createBaseRenderer(container, state, viewport, createRenderer(container));

packages/text-annotator/src/index.ts

@@ -3,6 +3,7 @@ export * from './model';
 export * from './state';
 export * from './utils';
 export * from './presence/PresencePainterOptions';
+export * from './SelectionHandler';
 export * from './TextAnnotator';
 export * from './TextAnnotatorOptions';
 
@@ -25,6 +26,7 @@ export type {
   ParseResult,
   User,
   UserSelectActionExpression,
+  ViewportState,
   W3CAnnotation,
   W3CAnnotationBody,
   W3CAnnotationTarget

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

@@ -1,29 +1,31 @@
 import type { Filter, Origin, Store } from '@annotorious/core';
 import type { TextAnnotation } from '../model';
 
-export interface TextAnnotationStore extends Omit<Store<TextAnnotation>, 'addAnnotation' | 'bulkAddAnnotation'> {
+export interface TextAnnotationStore<T extends TextAnnotation = TextAnnotation> extends Omit<Store<T>, 'addAnnotation' | 'bulkAddAnnotation'> {
 
   // Minor changes to default Annotorious store - text store returns feedback
   // on annotations that failed to render, to support lazy document loading scenarios
-  addAnnotation(annotation: TextAnnotation, origin?: Origin): boolean;
+  addAnnotation(annotation: T, origin?: Origin): boolean;
 
-  bulkAddAnnotation(annotations: TextAnnotation[], replace: boolean, origin?: Origin): TextAnnotation[];
+  bulkAddAnnotation(annotations: T[], replace: boolean, origin?: Origin): T[];
 
-  bulkUpsertAnnotations(annotations: TextAnnotation[], origin?: Origin): TextAnnotation[];
+  bulkUpsertAnnotations(annotations: T[], origin?: Origin): T[];
 
   getAnnotationBounds(id: string, hintX?: number, hintY?: number, buffer?: number): DOMRect;
 
+  getAnnotationRects(id: string): DOMRect[];
+
   getAt(x: number, y: number, filter?: Filter): TextAnnotation | undefined;
 
-  getIntersecting(minX: number, minY: number, maxX: number, maxY: number): AnnotationRects[];
+  getIntersecting(minX: number, minY: number, maxX: number, maxY: number): AnnotationRects<T>[];
 
   recalculatePositions(): void;
 
 }
 
-export interface AnnotationRects {
+export interface AnnotationRects <T extends TextAnnotation = TextAnnotation>{
 
-  annotation: TextAnnotation;
+  annotation: T;
 
   rects: Rect[];
 

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

@@ -14,9 +14,9 @@ import type { TextAnnotation, TextAnnotationTarget } from '../model';
 import type { TextAnnotationStore } from './TextAnnotationStore';
 import { isRevived, reviveAnnotation, reviveTarget } from '../utils';
 
-export interface TextAnnotatorState extends AnnotatorState<TextAnnotation> {
+export interface TextAnnotatorState<T extends TextAnnotation = TextAnnotation> extends AnnotatorState<T> {
 
-  store: TextAnnotationStore;
+  store: TextAnnotationStore<T>;
 
   selection: SelectionState<TextAnnotation>;
 
@@ -130,6 +130,8 @@ export const createTextAnnotatorState = (
     return tree.getAnnotationBounds(id);
   }
 
+  const getAnnotationRects = (id: string): DOMRect[] => tree.getAnnotationRects(id);
+
   const recalculatePositions = () => tree.recalculate();
 
   store.observe(({ changes }) => {
@@ -155,6 +157,7 @@ export const createTextAnnotatorState = (
       bulkUpdateTargets,
       bulkUpsertAnnotations,
       getAnnotationBounds,
+      getAnnotationRects,
       getAt,
       getIntersecting: tree.getIntersecting,
       recalculatePositions,

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

@@ -76,7 +76,6 @@ export const createSpatialTree = (store: Store<TextAnnotation>, container: HTMLE
 
   const insert = (target: TextAnnotationTarget) => {
     const rects = toItems(target, container.getBoundingClientRect());
-
     rects.forEach(rect => tree.insert(rect));
     index.set(target.annotation, rects);
   }

packages/text-annotator/src/utils/mergeClientRects.ts

@@ -103,3 +103,54 @@ export const mergeClientRects = (rects: DOMRect[]) => rects.reduce((merged, rect
 
   return wasMerged ? next : [ ...next, rectA ];
 }, [] as DOMRect[]);
+
+/* Pixels that rects can be apart vertically while still
+// being considered to be on the same line.
+const TOLERANCE = 3;
+
+export const mergeClientRects = (rects: DOMRect[]) => {
+  const lines: DOMRect[][] = [];
+
+  // Sort rects from the top, to make grouping simpler
+  rects.sort((a, b) => a.top - b.top);
+
+  // Group rects into lines
+  for (const rect of rects) {
+    if (lines.length === 0 || Math.abs(rect.top - lines[lines.length - 1][0].top) > TOLERANCE) {
+      // Start a new line
+      lines.push([rect]);
+    } else {
+      lines[lines.length - 1].push(rect);
+    }
+  }
+
+  // Merge lines
+  const mergedRects = lines.map(line => {
+    const top = Math.min(...line.map(r => r.top));
+    const bottom = Math.max(...line.map(r => r.bottom));
+    const left = Math.min(...line.map(r => r.left));
+    const right = Math.max(...line.map(r => r.right));
+
+    return {
+      top: top,
+      bottom: bottom,
+      left: left,
+      right: right,
+      height: bottom - top,
+      width: right - left
+    } as DOMRect;
+  }).filter(r => r.height > 0 && r.width > 0);
+
+  // Checks if the given rect contains any other rects
+  const containsOthers = (rect: DOMRect) => mergedRects.some(other => 
+    other !== rect &&
+    other.left >= rect.left &&
+    other.right <= rect.right &&
+    other.top >= rect.top &&
+    other.bottom <= rect.bottom
+  );
+
+  // Remove all rects that contain other rects (block-level elements!)
+  return mergedRects.filter(rect => !containsOthers(rect));
+}
+*/