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

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator-monorepo",
-  "version": "3.0.0-rc.39",
+  "version": "3.0.0-rc.41",
   "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.39",
+  "version": "3.0.0-rc.41",
   "description": "Recogito Text Annotator TEI extension",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -27,12 +27,12 @@
   },
   "devDependencies": {
     "CETEIcean": "^1.9.3",
-    "typescript": "5.5.3",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.9.1"
+    "typescript": "5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.0.3"
   },
   "peerDependencies": {
-    "@annotorious/core": "^3.0.0-rc.31",
-    "@recogito/text-annotator": "3.0.0-rc.39"
+    "@annotorious/core": "^3.0.0",
+    "@recogito/text-annotator": "3.0.0-rc.41"
   }
 }

packages/text-annotator-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/react-text-annotator",
-  "version": "3.0.0-rc.39",
+  "version": "3.0.0-rc.41",
   "description": "Recogito Text Annotator React bindings",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -26,13 +26,12 @@
   "devDependencies": {
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "openseadragon": "4.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "5.5.3",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.9.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "typescript": "5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.0.3",
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "peerDependencies": {
     "openseadragon": "^3.0.0 || ^4.0.0",
@@ -45,11 +44,11 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.31",
-    "@annotorious/react": "^3.0.0-rc.31",
-    "@floating-ui/react": "^0.26.20",
-    "@recogito/text-annotator": "3.0.0-rc.39",
-    "@recogito/text-annotator-tei": "3.0.0-rc.39",
+    "@annotorious/core": "^3.0.0",
+    "@annotorious/react": "^3.0.0",
+    "@floating-ui/react": "^0.26.23",
+    "@recogito/text-annotator": "3.0.0-rc.41",
+    "@recogito/text-annotator-tei": "3.0.0-rc.41",
     "CETEIcean": "^1.9.3"
   }
 }

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

@@ -7,15 +7,15 @@ 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<E>, 'adapter'> {
 
   children?: ReactNode | JSX.Element;
 
   adapter?: FormatAdapter<TextAnnotation, E> | ((container: HTMLElement) => FormatAdapter<TextAnnotation, E>) | null;
 
   filter?: Filter;
 
-  style?: HighlightStyleExpression
+  style?: HighlightStyleExpression;
 
   className?: string;
 
@@ -27,6 +27,8 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
 
   const { className, children, ...opts } = props;
 
+  const { style, filter, user, annotatingEnabled } = opts;
+
   const { anno, setAnno } = useContext(AnnotoriousContext);
 
   useEffect(() => {
@@ -40,11 +42,13 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
     return () => anno.destroy();
   }, [setAnno]);
 
-  useEffect(() => anno?.setStyle(props.style), [anno, props.style]);
+  useEffect(() => anno?.setStyle(style), [anno, style]);
+
+  useEffect(() => anno?.setFilter(filter), [anno, filter]);
 
-  useEffect(() => anno?.setFilter(props.filter), [anno, props.filter]);
+  useEffect(() => anno?.setUser(user), [anno, user]);
 
-  useEffect(() => anno?.setAnnotatingEnabled(props.annotatingEnabled), [anno, props.annotatingEnabled]);
+  useEffect(() => anno?.setAnnotatingEnabled(annotatingEnabled), [anno, annotatingEnabled]);
 
   return (
     <div ref={el} className={className}>

packages/text-annotator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator",
-  "version": "3.0.0-rc.39",
+  "version": "3.0.0-rc.41",
   "description": "A JavaScript text annotation library",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -27,21 +27,21 @@
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.7",
-    "@types/rbush": "^3.0.3",
+    "@types/rbush": "^3.0.4",
     "@types/uuid": "^10.0.0",
-    "jsdom": "^24.1.1",
-    "svelte": "^4.2.18",
-    "typescript": "5.5.3",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "^3.9.1",
-    "vitest": "^2.0.4"
+    "jsdom": "^25.0.0",
+    "svelte": "^4.2.19",
+    "typescript": "5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.0.3",
+    "vitest": "^2.0.5"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.31",
+    "@annotorious/core": "^3.0.0",
     "colord": "^2.9.3",
     "debounce": "^2.1.0",
     "dequal": "^2.0.3",
-    "rbush": "^4.0.0",
+    "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }
 }

packages/text-annotator/src/SelectionHandler.ts

@@ -8,6 +8,7 @@ import {
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
+  trimRangeToContainer,
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
@@ -84,15 +85,19 @@ export const createSelectionHandler = (
     }
 
     // Chrome/iOS does not reliably fire the 'selectstart' event!
-    if (evt.timeStamp - (lastPointerDown?.timeStamp || evt.timeStamp) < 1000 && !currentTarget)
+    const timeDifference = evt.timeStamp - (lastPointerDown?.timeStamp || evt.timeStamp);
+    if (timeDifference < 1000 && !currentTarget)
       onSelectStart(lastPointerDown);
 
     if (sel.isCollapsed || !isLeftClick || !currentTarget) return;
 
     const selectionRange = sel.getRangeAt(0);
-    if (isWhitespaceOrEmpty(selectionRange)) return;
 
-    const annotatableRanges = splitAnnotatableRanges(selectionRange.cloneRange());
+// The selection should be captured only within the annotatable container
+    const containedRange = trimRangeToContainer(selectionRange, container);
+    if (isWhitespaceOrEmpty(containedRange)) return;
+
+    const annotatableRanges = splitAnnotatableRanges(containedRange.cloneRange());
 
     const hasChanged =
       annotatableRanges.length !== currentTarget.selector.length ||
@@ -138,7 +143,7 @@ export const createSelectionHandler = (
     isLeftClick = evt.button === 0;
   }
 
-  container.addEventListener('pointerdown', onPointerDown);
+  document.addEventListener('pointerdown', onPointerDown);
 
   const onPointerUp = (evt: PointerEvent) => {
     const annotatable = !(evt.target as Node).parentElement?.closest(NOT_ANNOTATABLE_SELECTOR);
@@ -149,7 +154,11 @@ export const createSelectionHandler = (
     const clickSelect = () => {
       const { x, y } = container.getBoundingClientRect();
 
-      const hovered = store.getAt(evt.clientX - x, evt.clientY - y, currentFilter);
+      const hovered =
+        evt.target instanceof Node &&
+        container.contains(evt.target) &&
+        store.getAt(evt.clientX - x, evt.clientY - y, currentFilter);
+
       if (hovered) {
         const { selected } = selection;
 
@@ -182,7 +191,7 @@ export const createSelectionHandler = (
     container.removeEventListener('selectstart', onSelectStart);
     document.removeEventListener('selectionchange', onSelectionChange);
 
-    container.removeEventListener('pointerdown', onPointerDown);
+    document.removeEventListener('pointerdown', onPointerDown);
     document.removeEventListener('pointerup', onPointerUp);
   }
 

packages/text-annotator/src/TextAnnotator.ts

@@ -47,10 +47,11 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
   cancelSingleClickEvents(container);
 
   const opts = fillDefaults<E>(options, {
-    annotatingEnabled: true
+    annotatingEnabled: true,
+    user: createAnonymousGuest()
   });
 
-  const state: TextAnnotatorState = createTextAnnotatorState(container, opts.userAction);
+  const state: TextAnnotatorState = createTextAnnotatorState(container, opts.userSelectAction);
 
   const { selection, viewport } = state;
 
@@ -60,7 +61,7 @@ export const createTextAnnotator = <E extends unknown = TextAnnotation>(
 
   const lifecycle = createLifecycleObserver<TextAnnotation, E>(state, undoStack, opts.adapter);
 
-  let currentUser: User = createAnonymousGuest();
+  let currentUser: User = opts.user;
 
   // Use selected renderer, or fall back to default. If CSS_HIGHLIGHT is
   // requested, check if CSS Custom Highlights are supported, and fall

packages/text-annotator/src/TextAnnotatorOptions.ts

@@ -1,4 +1,4 @@
-import type { FormatAdapter, UserSelectActionExpression } from '@annotorious/core';
+import type { FormatAdapter, UserSelectActionExpression, User } from '@annotorious/core';
 import type { PresencePainterOptions } from './presence';
 import type { TextAnnotation } from './model';
 import type { HighlightStyleExpression } from './highlight';
@@ -13,24 +13,27 @@ export interface TextAnnotatorOptions<T extends unknown = TextAnnotation> {
 
   offsetReferenceSelector?: string;
 
-  userAction?: UserSelectActionExpression<TextAnnotation>,
+  userSelectAction?: UserSelectActionExpression<TextAnnotation>,
 
   presence?: PresencePainterOptions;
 
   style?: HighlightStyleExpression;
 
+  user?: User;
+
 }
 
 export type RendererType = 'SPANS' | 'CANVAS' | 'CSS_HIGHLIGHTS';
 
-export const fillDefaults = <T extends unknown = TextAnnotation>  (
+export const fillDefaults = <T extends unknown = TextAnnotation>(
   opts: TextAnnotatorOptions<T>,
   defaults: TextAnnotatorOptions<T>
 ): TextAnnotatorOptions<T> => {
 
   return {
     ...opts,
-    annotatingEnabled: opts.annotatingEnabled ?? defaults.annotatingEnabled
+    annotatingEnabled: opts.annotatingEnabled ?? defaults.annotatingEnabled,
+    user: opts.user || defaults.user
   };
 
 };

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

@@ -1,11 +1,12 @@
 .r6o-annotatable .r6o-span-highlight-layer {
-  height: 100%;
-  left: 0;
-  mix-blend-mode: multiply;
-  pointer-events: none;
   position: absolute;
   top: 0;
+  left: 0;
   width: 100%;
+  height: 100%;
+  mix-blend-mode: multiply;
+  pointer-events: none;
+  z-index: 1;
 }
 
 .r6o-annotatable .r6o-span-highlight-layer.hidden {

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

@@ -1,4 +1,4 @@
-import type { Filter, UserSelectAction, Store, ViewportState, UserSelectActionExpression } from '@annotorious/core';
+import type { Filter, Store, ViewportState, UserSelectActionExpression } from '@annotorious/core';
 import { 
   createHoverState, 
   createSelectionState, 
@@ -28,14 +28,16 @@ export interface TextAnnotatorState extends AnnotatorState<TextAnnotation> {
 
 export const createTextAnnotatorState = (
   container: HTMLElement,
-  defaultUserAction?: UserSelectActionExpression<TextAnnotation>
+  defaultUserSelectAction?: UserSelectActionExpression<TextAnnotation>
 ): TextAnnotatorState => {
 
   const store: Store<TextAnnotation> = createStore<TextAnnotation>();
 
   const tree = createSpatialTree(store, container);
 
-  const selection = createSelectionState<TextAnnotation>(store, defaultUserAction);
+  // Temporary
+  const selection = createSelectionState<TextAnnotation>(store)
+  selection.setUserSelectAction(defaultUserSelectAction);
 
   const hover = createHoverState(store);
 

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

@@ -10,4 +10,5 @@ export * from './reviveAnnotation';
 export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
+export * from './trimRangeToContainer';
 

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

@@ -0,0 +1,18 @@
+export const trimRangeToContainer = (
+  range: Range,
+  container: HTMLElement
+): Range => {
+  const trimmedRange = range.cloneRange();
+
+  // If the start is outside the container - set it to the start of the container
+  if (!container.contains(trimmedRange.startContainer)) {
+    trimmedRange.setStart(container, 0);
+  }
+
+  // If the end is outside the container - set it to the end of the container
+  if (!container.contains(trimmedRange.endContainer)) {
+    trimmedRange.setEnd(container, container.childNodes.length);
+  }
+
+  return trimmedRange;
+};