Merge branch 'main' into #133-fix-not-dismissed-annotation-on-outside…

…-click

packages/extension-tei/package.json

@@ -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",
+    "@annotorious/core": "^3.0.0",
     "@recogito/text-annotator": "3.0.0-rc.39"
   }
 }

packages/text-annotator-react/package.json

@@ -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,9 +44,9 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.31",
-    "@annotorious/react": "^3.0.0-rc.31",
-    "@floating-ui/react": "^0.26.20",
+    "@annotorious/core": "^3.0.0",
+    "@annotorious/react": "^3.0.0",
+    "@floating-ui/react": "^0.26.23",
     "@recogito/text-annotator": "3.0.0-rc.39",
     "@recogito/text-annotator-tei": "3.0.0-rc.39",
     "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;
 
@@ -26,6 +26,8 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
   const el = useRef<HTMLDivElement>(null);
 
   const { className, children, ...opts } = props;
+
+  const { style, filter, user } = opts;
 
   const { anno, setAnno } = useContext(AnnotoriousContext);
 
@@ -40,17 +42,11 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
     return () => anno.destroy();
   }, [setAnno]);
 
-  useEffect(() => {
-    if (!anno) return;
-
-    anno.setStyle(props.style);
-  }, [anno, props.style]);
+  useEffect(() => anno?.setStyle(style), [anno, style]);
 
-  useEffect(() => {
-    if (!anno) return;
+  useEffect(() => anno?.setFilter(filter), [anno, filter]);
 
-    anno.setFilter(props.filter);
-  }, [anno, props.filter]);
+  useEffect(() => anno?.setUser(user), [anno, user]);
 
   return (
     <div ref={el} className={className}>

packages/text-annotator/package.json

@@ -27,20 +27,20 @@
   },
   "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",
     "dequal": "^2.0.3",
-    "rbush": "^4.0.0",
+    "rbush": "^4.0.1",
     "uuid": "^10.0.0"
   }
 }

packages/text-annotator/src/SelectionHandler.ts

@@ -7,6 +7,7 @@ import {
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
+  trimRangeToContainer,
   NOT_ANNOTATABLE_SELECTOR
 } from './utils';
 
@@ -69,15 +70,19 @@ export const SelectionHandler = (
     }
 
     // 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 ||
@@ -165,8 +170,7 @@ export const SelectionHandler = (
 
   const destroy = () => {
     container.removeEventListener('selectstart', onSelectStart);
-    document.removeEventListener('selectionchange', onSelectionChange);
-
+    document.removeEventListener('selectionchange', onSelectionChange);    
     document.removeEventListener('pointerdown', onPointerDown);
     document.removeEventListener('pointerup', onPointerUp);
   }

packages/text-annotator/src/TextAnnotator.ts

@@ -34,10 +34,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;
 
@@ -47,7 +48,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

@@ -11,4 +11,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;
+};