Updates according to latest Annotorious API changes, plumbing for annotation filters

Author: rsimon

package-lock.json

@@ -31,6 +31,6 @@
     "vite-plugin-dts": "^2.3.0"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.1"
+    "@annotorious/core": "^3.0.0-rc.2"
   }
 }

packages/extension-tei/package.json

@@ -78,9 +78,7 @@ export const TEIPlugin = (anno: TextAnnotator): RecogitoTEIAnnotator => {
       ...anno.state,
       // @ts-ignore
       store
-    },
-    get style() { return anno.style },
-    set style(s: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle) | undefined) { anno.style = s }
+    }
   }
 
 }

packages/extension-tei/src/TEIPlugin.ts

@@ -34,7 +34,7 @@
     "vite-tsconfig-paths": "^4.2.0"
   },
   "peerDependencies": {
-    "@annotorious/react": "^3.0.0-rc.1",
+    "@annotorious/react": "^3.0.0-rc.2",
     "react": "16.8.0 || >=17.x || >=18.x",
     "react-dom": "16.8.0 || >=17.x || >=18.x"
   },

packages/text-annotator-react/package.json

@@ -1,14 +1,16 @@
 import { ReactNode, useContext, useEffect, useRef } from 'react';
 import { AnnotoriousContext, DrawingStyle } from '@annotorious/react';
-import { TextAnnotator as RecogitoTextAnnotator } from '@recogito/text-annotator';
-import { TextAnnotation, TextAnnotatorOptions, createTextAnnotator } from '@recogito/text-annotator';
+import { createTextAnnotator } from '@recogito/text-annotator';
+import type { Filter, TextAnnotation, TextAnnotatorOptions } from '@recogito/text-annotator';
 
 import '@recogito/text-annotator/dist/text-annotator.css';
 
 export type TextAnnotatorProps<E extends unknown> = TextAnnotatorOptions<E> & {
 
   children?: ReactNode | JSX.Element; 
 
+  filter?: Filter;
+
   style?: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle);
 
 }
@@ -24,7 +26,7 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
   useEffect(() => {  
     if (setAnno) {
       const anno = createTextAnnotator(el.current, opts);
-      anno.style = props.style;
+      anno.setStyle(props.style);
       setAnno(anno);
     }
   }, [setAnno]);
@@ -33,9 +35,16 @@ export const TextAnnotator = <E extends unknown>(props: TextAnnotatorProps<E>) =
     if (!anno)
       return;
 
-    (anno as unknown as RecogitoTextAnnotator<TextAnnotation>).style = props.style;
+    anno.setStyle(props.style);
   }, [props.style]);
 
+  useEffect(() => {
+    if (!anno)
+      return;
+    
+    anno.setFilter(props.filter);
+  }, [props.filter]);
+
   return (
     <div ref={el}>
       {children}

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

@@ -1,14 +1,17 @@
 import { Children, ReactElement, ReactNode, cloneElement, useContext, useEffect } from 'react';
 import { AnnotoriousContext, DrawingStyle } from '@annotorious/react';
-import { TextAnnotatorOptions, createTextAnnotator, TextAnnotation } from '@recogito/text-annotator';
-import { RecogitoTEIAnnotator, TEIPlugin } from '@recogito/text-annotator-tei';
+import { TEIPlugin } from '@recogito/text-annotator-tei';
+import { createTextAnnotator } from '@recogito/text-annotator';
+import type { Filter, TextAnnotatorOptions, TextAnnotation } from '@recogito/text-annotator';
 
 import '@recogito/text-annotator/dist/text-annotator.css';
 
 export type TEIAnnotatorProps = TextAnnotatorOptions & {
 
   children?: ReactNode | JSX.Element;
 
+  filter?: Filter;
+
   style?: DrawingStyle | ((annotation: TextAnnotation) => DrawingStyle);
 
 }
@@ -19,17 +22,24 @@ export const TEIAnnotator = (props: TEIAnnotatorProps) => {
 
   const onLoad = (element: HTMLElement) => {
     const anno = TEIPlugin(createTextAnnotator(element));
-    anno.style = props.style;
+    anno.setStyle(props.style);
     setAnno(anno);
   }
 
   useEffect(() => {
     if (!anno)
       return;
 
-    (anno as RecogitoTEIAnnotator).style = props.style;
+    anno.setStyle(props.style);
   }, [props.style]);
 
+  useEffect(() => {
+    if (!anno)
+      return;
+    
+    anno.setFilter(props.filter);
+  }, [props.filter]);
+
   return props.children ? 
     Children.toArray(props.children).map(child => 
       cloneElement(child as ReactElement, { onLoad })) : null;

packages/text-annotator-react/src/tei/TEIAnnotator.tsx

@@ -33,7 +33,7 @@
     "vite-plugin-dts": "^2.3.0"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.0-rc.1",
+    "@annotorious/core": "^3.0.0-rc.2",
     "rbush": "^3.0.1",
     "uuid": "^9.0.0"
   }