Merge branch 'main' into recogito#130-spatial-tree-events-emission

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator-monorepo",
-  "version": "3.0.0-rc.50",
+  "version": "3.0.0-rc.52",
   "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.50",
+  "version": "3.0.0-rc.52",
   "description": "Recogito Text Annotator TEI extension",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -28,11 +28,11 @@
   "devDependencies": {
     "CETEIcean": "^1.9.3",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
-    "@annotorious/core": "^3.0.11",
-    "@recogito/text-annotator": "3.0.0-rc.50"
+    "@annotorious/core": "^3.0.12",
+    "@recogito/text-annotator": "3.0.0-rc.52"
   }
 }

packages/text-annotator-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/react-text-annotator",
-  "version": "3.0.0-rc.50",
+  "version": "3.0.0-rc.52",
   "description": "Recogito Text Annotator React bindings",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -29,9 +29,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
-    "vite-tsconfig-paths": "^5.0.1"
+    "vite-tsconfig-paths": "^5.1.2"
   },
   "peerDependencies": {
     "openseadragon": "^3.0.0 || ^4.0.0 || ^5.0.0",
@@ -44,11 +44,11 @@
     }
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.11",
-    "@annotorious/react": "^3.0.11",
+    "@annotorious/core": "^3.0.12",
+    "@annotorious/react": "^3.0.12",
     "@floating-ui/react": "^0.26.27",
-    "@recogito/text-annotator": "3.0.0-rc.50",
-    "@recogito/text-annotator-tei": "3.0.0-rc.50",
+    "@recogito/text-annotator": "3.0.0-rc.52",
+    "@recogito/text-annotator-tei": "3.0.0-rc.52",
     "CETEIcean": "^1.9.3"
   }
 }

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

@@ -1,10 +1,13 @@
-import { PointerEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
+import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { useAnnotator, useSelection } from '@annotorious/react';
-import { isRevived, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
+import { isRevived, NOT_ANNOTATABLE_CLASS, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
 import { isMobile } from './isMobile';
 import {
+  arrow,
   autoUpdate,
   flip,
+  FloatingArrow,
+  FloatingArrowProps,
   FloatingFocusManager,
   FloatingPortal,
   inline,
@@ -16,12 +19,16 @@ import {
   useRole
 } from '@floating-ui/react';
 
-import './TextAnnotatorPopup.css';
+import './TextAnnotationPopup.css';
 
 interface TextAnnotationPopupProps {
 
   ariaCloseWarning?: string;
 
+  arrow?: boolean;
+
+  arrowProps?: Omit<FloatingArrowProps, 'context' | 'ref'>;
+
   popup(props: TextAnnotationPopupContentProps): ReactNode;
 
 }
@@ -32,11 +39,11 @@ export interface TextAnnotationPopupContentProps {
 
   editable?: boolean;
 
-  event?: PointerEvent;
+  event?: PointerEvent | KeyboardEvent;
 
 }
 
-export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
 
   const r = useAnnotator<TextAnnotator>();
 
@@ -46,6 +53,22 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
 
   const [isOpen, setOpen] = useState(selected?.length > 0);
 
+  const arrowRef = useRef(null);
+
+  // Conditional floating-ui middleware
+  const middleware = useMemo(() => {
+    const m = [
+      inline(),
+      offset(10),
+      flip({ crossAxis: true }),
+      shift({ crossAxis: true, padding: 10 })
+    ];
+
+    return props.arrow 
+      ? [...m, arrow({ element: arrowRef }) ] 
+      : m;
+  }, [props.arrow]);
+
   const { refs, floatingStyles, update, context } = useFloating({
     placement: isMobile() ? 'bottom' : 'top',
     open: isOpen,
@@ -55,12 +78,7 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
         r?.cancelSelected();
       }
     },
-    middleware: [
-      offset(10),
-      inline(),
-      flip(),
-      shift({ mainAxis: false, crossAxis: true, padding: 10 })
-    ],
+    middleware,
     whileElementsMounted: autoUpdate
   });
 
@@ -106,12 +124,6 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
     };
   }, [update]);
 
-  // Prevent text-annotator from handling the irrelevant events triggered from the popup
-  const getStopEventsPropagationProps = useCallback(
-    () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),
-    []
-  );
-
   // Don't shift focus to the floating element if selected via keyboard or on mobile.
   const initialFocus = useMemo(() => {
     return (event?.type === 'keyup' || event?.type === 'contextmenu' || isMobile()) ? -1 : 0;
@@ -128,17 +140,23 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
         returnFocus={false}
         initialFocus={initialFocus}>
         <div
-          className="a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable"
+          className={`a9s-popup r6o-popup annotation-popup r6o-text-popup ${NOT_ANNOTATABLE_CLASS}`}
           ref={refs.setFloating}
           style={floatingStyles}
-          {...getFloatingProps()}
-          {...getStopEventsPropagationProps()}>
+          {...getFloatingProps(getStopEventsPropagationProps())}>
           {props.popup({
             annotation: selected[0].annotation,
             editable: selected[0].editable,
             event
           })}
 
+          {props.arrow && (
+            <FloatingArrow 
+              ref={arrowRef}
+              context={context} 
+              {...(props.arrowProps || {})} />
+          )}
+
           <button className="r6o-popup-sr-only" aria-live="assertive" onClick={onClose}>
             {props.ariaCloseWarning || 'Click or leave this dialog to close it.'}
           </button>
@@ -148,3 +166,25 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   ) : null;
 
 }
+
+/**
+ * Prevent text-annotator from handling the irrelevant events
+ * triggered from the popup/toolbar/dialog
+ */
+const getStopEventsPropagationProps = <T extends HTMLElement = HTMLElement>() => ({
+  onPointerUp: (event: React.PointerEvent<T>) => event.stopPropagation(),
+  onPointerDown: (event: React.PointerEvent<T>) => event.stopPropagation(),
+  onMouseDown: (event: React.MouseEvent<T>) => event.stopPropagation(),
+  onMouseUp: (event: React.MouseEvent<T>) => event.stopPropagation()
+});
+
+/** For backwards compatibility **/
+/** @deprecated Use TextAnnotationPopup instead */
+export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
+
+  useEffect(() => {
+    console.warn('TextAnnotatorPopup is deprecated and will be removed in a future version. Please use TextAnnotationPopup instead.');
+  }, []);
+
+  return <TextAnnotationPopup {...props} />;
+};

packages/text-annotator-react/src/TextAnnotationPopup/index.ts

@@ -0,0 +1 @@
+export * from './TextAnnotationPopup';

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

@@ -1,6 +1,6 @@
 export * from './tei';
 export * from './TextAnnotator';
-export * from './TextAnnotatorPopup';
+export * from './TextAnnotationPopup';
 export * from './TextAnnotatorPlugin';
 
 // Essential re-exports from @annotorious/core

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

@@ -1,6 +1,6 @@
 import React, { FC, useCallback, useEffect } from 'react';
 import { AnnotationBody, Annotorious, useAnnotationStore, useAnnotator } from '@annotorious/react';
-import { TextAnnotationPopupContentProps, TextAnnotator, TextAnnotatorPopup } from '../src';
+import { TextAnnotationPopup, TextAnnotationPopupContentProps, TextAnnotator } from '../src';
 import { W3CTextFormat, type TextAnnotation, type TextAnnotator as RecogitoTextAnnotator } from '@recogito/text-annotator';
 
 const TestPopup: FC<TextAnnotationPopupContentProps> = (props) => {
@@ -67,7 +67,8 @@ export const App: FC = () => {
 
   return (
     <Annotorious>
-      <TextAnnotator adapter={w3cAdapter}>
+      <TextAnnotator
+        adapter={w3cAdapter}>
         <p>
           Tell me, O muse, of that ingenious hero who travelled far and wide
           after he had sacked the famous town of Troy. Many cities did he
@@ -189,7 +190,11 @@ export const App: FC = () => {
         </p>
       </TextAnnotator>
 
-      <TextAnnotatorPopup
+      <TextAnnotationPopup
+        arrow
+        arrowProps={{
+          fill: '#000000'
+        }}
         popup={
           props => (<TestPopup {...props} />)
         }

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

@@ -26,6 +26,7 @@
       p {
         font-size: 17px;
         line-height: 160%;
+        min-width: 600px;
       }
 
       .r6o-popup {

packages/text-annotator/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@recogito/text-annotator",
-  "version": "3.0.0-rc.50",
+  "version": "3.0.0-rc.52",
   "description": "A JavaScript text annotation library",
   "author": "Rainer Simon",
   "license": "BSD-3-Clause",
@@ -30,17 +30,17 @@
     "@types/rbush": "^4.0.0",
     "jsdom": "^25.0.1",
     "typescript": "5.6.3",
-    "vite": "^5.4.10",
+    "vite": "^5.4.11",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.4"
   },
   "dependencies": {
-    "@annotorious/core": "^3.0.11",
+    "@annotorious/core": "^3.0.12",
     "colord": "^2.9.3",
     "dequal": "^2.0.3",
     "hotkeys-js": "^3.13.7",
     "nanoevents": "^9.0.0",
     "rbush": "^4.0.1",
-    "uuid": "^11.0.2"
+    "uuid": "^11.0.3"
   }
-}
+}