@soomo/react-text-annotator 3.1.0-staging.2 → 3.1.0-staging.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { FC, PointerEvent, ReactNode } from 'react';
1
+ import { FC, PointerEvent, MouseEvent, ReactNode } from 'react';
2
2
  import { TextAnnotation } from '@soomo/text-annotator';
3
3
  interface TextAnnotationPopupProps {
4
4
  ariaNavigationMessage?: string;
@@ -11,5 +11,15 @@ export interface TextAnnotationPopupContentProps {
11
11
  event?: PointerEvent;
12
12
  }
13
13
  export declare const TextAnnotatorPopup: FC<TextAnnotationPopupProps>;
14
+ /**
15
+ * Prevent text-annotator from handling the irrelevant events
16
+ * triggered from the popup/toolbar/dialog
17
+ */
18
+ export declare const getStopEventsPropagationProps: <T extends HTMLElement = HTMLElement>() => {
19
+ onPointerUp: (event: PointerEvent<T>) => void;
20
+ onPointerDown: (event: PointerEvent<T>) => void;
21
+ onMouseDown: (event: MouseEvent<T>) => void;
22
+ onMouseUp: (event: MouseEvent<T>) => void;
23
+ };
14
24
  export {};
15
25
  //# sourceMappingURL=TextAnnotatorPopup.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"TextAnnotatorPopup.d.ts","sourceRoot":"","sources":["../../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAiB/F,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,0BAA0B,CAAC;AAElC,UAAU,wBAAwB;IAEhC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,KAAK,CAAC,KAAK,EAAE,+BAA+B,GAAG,SAAS,CAAC;CAE1D;AAED,MAAM,WAAW,+BAA+B;IAE9C,UAAU,EAAE,cAAc,CAAC;IAE3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,CAAC;CAEtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CA8I3D,CAAA"}
1
+ {"version":3,"file":"TextAnnotatorPopup.d.ts","sourceRoot":"","sources":["../../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAA6C,MAAM,OAAO,CAAC;AAiB3G,OAAO,EAIL,KAAK,cAAc,EAEpB,MAAM,uBAAuB,CAAC;AAG/B,OAAO,0BAA0B,CAAC;AAElC,UAAU,wBAAwB;IAEhC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,KAAK,CAAC,KAAK,EAAE,+BAA+B,GAAG,SAAS,CAAC;CAE1D;AAED,MAAM,WAAW,+BAA+B;IAE9C,UAAU,EAAE,cAAc,CAAC;IAE3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,KAAK,CAAC,EAAE,YAAY,CAAC;CAEtB;AAED,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,wBAAwB,CAuI3D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,CAAC,SAAS,WAAW;yBAC5C,YAAY,CAAC,CAAC,CAAC;2BACb,YAAY,CAAC,CAAC,CAAC;yBACjB,UAAU,CAAC,CAAC,CAAC;uBACf,UAAU,CAAC,CAAC,CAAC;CAChC,CAAC"}
@@ -2,7 +2,7 @@ import { CETEIcean } from "./react-text-annotator.es2.js";
2
2
  import { TEIAnnotator } from "./react-text-annotator.es3.js";
3
3
  import { useAnnouncePopupNavigation } from "./react-text-annotator.es4.js";
4
4
  import { TextAnnotator } from "./react-text-annotator.es5.js";
5
- import { TextAnnotatorPopup } from "./react-text-annotator.es6.js";
5
+ import { TextAnnotatorPopup, getStopEventsPropagationProps } from "./react-text-annotator.es6.js";
6
6
  import { Origin, UserSelectAction, createBody } from "@annotorious/core";
7
7
  import { AnnotoriousPlugin } from "@annotorious/react";
8
8
  import { W3CTextFormat } from "./react-text-annotator.es7.js";
@@ -16,6 +16,7 @@ export {
16
16
  UserSelectAction,
17
17
  W3CTextFormat,
18
18
  createBody,
19
+ getStopEventsPropagationProps,
19
20
  useAnnouncePopupNavigation
20
21
  };
21
22
  //# sourceMappingURL=react-text-annotator.es.js.map
@@ -1,9 +1,9 @@
1
1
  import { j as jsxRuntimeExports } from "./react-text-annotator.es8.js";
2
2
  import { useState, useEffect, useMemo, useCallback } from "react";
3
3
  import { isMobile } from "./react-text-annotator.es13.js";
4
- import { useFloating, useDismiss, useRole, useInteractions, FloatingPortal, FloatingFocusManager } from "./react-text-annotator.es14.js";
4
+ import { useFloating, useRole, useDismiss, useInteractions, FloatingPortal, FloatingFocusManager } from "./react-text-annotator.es14.js";
5
5
  import { useAnnotator, useSelection } from "@annotorious/react";
6
- import { denormalizeRectWithOffset, toDomRectList } from "@soomo/text-annotator";
6
+ import { isRevived, denormalizeRectWithOffset, toDomRectList } from "@soomo/text-annotator";
7
7
  import { useAnnouncePopupNavigation } from "./react-text-annotator.es4.js";
8
8
  /* empty css */
9
9
  import { offset, inline, flip, shift } from "./react-text-annotator.es16.js";
@@ -25,9 +25,9 @@ const TextAnnotatorPopup = (props) => {
25
25
  const { refs, floatingStyles, update, context } = useFloating({
26
26
  placement: isMobile() ? "bottom" : "top",
27
27
  open: isOpen,
28
- onOpenChange: (open, _event, reason) => {
29
- if (!open && (reason === "escape-key" || reason === "focus-out")) {
30
- setOpen(open);
28
+ onOpenChange: (open) => {
29
+ setOpen(open);
30
+ if (!open) {
31
31
  handleClose();
32
32
  }
33
33
  },
@@ -39,17 +39,13 @@ const TextAnnotatorPopup = (props) => {
39
39
  ],
40
40
  whileElementsMounted: autoUpdate
41
41
  });
42
- const dismiss = useDismiss(context);
43
42
  const role = useRole(context, { role: "dialog" });
43
+ const dismiss = useDismiss(context, { outsidePressEvent: "mousedown" });
44
44
  const { getFloatingProps } = useInteractions([dismiss, role]);
45
45
  useEffect(() => {
46
- setOpen(
47
- // Selected annotation exists and has a selector?
48
- (annotation == null ? void 0 : annotation.target.selector) && // Selector not empty? (Annotations from plugins, general defensive programming)
49
- annotation.target.selector.length > 0 && // Range not collapsed? (E.g. lazy loading PDFs. Note that this will have to
50
- // change if we switch from ranges to pre-computed bounds!)
51
- !annotation.target.selector[0].range.collapsed
52
- );
46
+ const annotationSelector = annotation == null ? void 0 : annotation.target.selector;
47
+ if (!annotationSelector) return;
48
+ setOpen(isRevived(annotationSelector));
53
49
  }, [annotation]);
54
50
  useEffect(() => {
55
51
  if (!r) return;
@@ -89,7 +85,7 @@ const TextAnnotatorPopup = (props) => {
89
85
  floatingOpen: isOpen,
90
86
  message: ariaNavigationMessage
91
87
  });
92
- const getStopEventsPropagationProps = useCallback(
88
+ const getStopEventsPropagationProps2 = useCallback(
93
89
  () => ({ onPointerUp: (event2) => event2.stopPropagation() }),
94
90
  []
95
91
  );
@@ -109,8 +105,7 @@ const TextAnnotatorPopup = (props) => {
109
105
  style: floatingStyles,
110
106
  onFocus: handleFloatingFocus,
111
107
  onBlur: handleFloatingBlur,
112
- ...getFloatingProps(),
113
- ...getStopEventsPropagationProps(),
108
+ ...getFloatingProps(getStopEventsPropagationProps2()),
114
109
  children: [
115
110
  popup({
116
111
  annotation: selected[0].annotation,
@@ -124,7 +119,14 @@ const TextAnnotatorPopup = (props) => {
124
119
  }
125
120
  ) }) : null;
126
121
  };
122
+ const getStopEventsPropagationProps = () => ({
123
+ onPointerUp: (event) => event.stopPropagation(),
124
+ onPointerDown: (event) => event.stopPropagation(),
125
+ onMouseDown: (event) => event.stopPropagation(),
126
+ onMouseUp: (event) => event.stopPropagation()
127
+ });
127
128
  export {
128
- TextAnnotatorPopup
129
+ TextAnnotatorPopup,
130
+ getStopEventsPropagationProps
129
131
  };
130
132
  //# sourceMappingURL=react-text-annotator.es6.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"react-text-annotator.es6.js","sources":["../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx"],"sourcesContent":["import { FC, PointerEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport { isMobile } from './isMobile';\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n inline,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole\n} from '@floating-ui/react';\n\nimport { useAnnotator, useSelection } from '@annotorious/react';\nimport {\n denormalizeRectWithOffset,\n toDomRectList,\n type TextAnnotation,\n type TextAnnotator,\n} from '@soomo/text-annotator';\n\nimport { useAnnouncePopupNavigation } from '../hooks';\nimport './TextAnnotatorPopup.css';\n\ninterface TextAnnotationPopupProps {\n\n ariaNavigationMessage?: string;\n\n ariaCloseWarning?: string;\n\n popup(props: TextAnnotationPopupContentProps): ReactNode;\n\n}\n\nexport interface TextAnnotationPopupContentProps {\n\n annotation: TextAnnotation;\n\n editable?: boolean;\n\n event?: PointerEvent;\n\n}\n\nexport const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {\n\n const { popup, ariaNavigationMessage } = props;\n\n const r = useAnnotator<TextAnnotator>();\n\n const { selected, event } = useSelection<TextAnnotation>();\n\n const annotation = selected[0]?.annotation;\n\n const [isOpen, setOpen] = useState(selected?.length > 0);\n const handleClose = () => r?.cancelSelected();\n\n const [isFloatingFocused, setFloatingFocused] = useState(false);\n const handleFloatingFocus = () => setFloatingFocused(true);\n const handleFloatingBlur = () => setFloatingFocused(false);\n useEffect(() => {\n if (!isOpen) handleFloatingBlur();\n }, [isOpen, handleFloatingBlur]);\n\n const { refs, floatingStyles, update, context } = useFloating({\n placement: isMobile() ? 'bottom' : 'top',\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n if (!open && (reason === 'escape-key' || reason === 'focus-out')) {\n setOpen(open);\n handleClose();\n }\n },\n middleware: [\n offset(10),\n inline(),\n flip(),\n shift({ mainAxis: false, crossAxis: true, padding: 10 })\n ],\n whileElementsMounted: autoUpdate\n });\n\n const dismiss = useDismiss(context);\n\n const role = useRole(context, { role: 'dialog' });\n\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n useEffect(() => {\n setOpen(\n // Selected annotation exists and has a selector?\n annotation?.target.selector &&\n // Selector not empty? (Annotations from plugins, general defensive programming)\n annotation.target.selector.length > 0 &&\n // Range not collapsed? (E.g. lazy loading PDFs. Note that this will have to\n // change if we switch from ranges to pre-computed bounds!)\n !annotation.target.selector[0].range.collapsed\n );\n }, [annotation]);\n\n useEffect(() => {\n if (!r) return;\n\n if (isOpen && annotation?.id) {\n refs.setPositionReference({\n getBoundingClientRect: () => denormalizeRectWithOffset(\n r.state.store.getAnnotationBounds(annotation.id),\n r.element.getBoundingClientRect()\n ),\n getClientRects: () => {\n const rects = r.state.store.getAnnotationRects(annotation.id);\n const denormalizedRects = rects.map(\n rect => denormalizeRectWithOffset(rect, r.element.getBoundingClientRect())\n );\n return toDomRectList(denormalizedRects);\n }\n });\n } else {\n refs.setPositionReference(null);\n }\n }, [isOpen, annotation?.id, annotation?.target, r]);\n\n useEffect(() => {\n const config: MutationObserverInit = { attributes: true, childList: true, subtree: true };\n\n const mutationObserver = new MutationObserver(() => update());\n mutationObserver.observe(document.body, config);\n\n window.document.addEventListener('scroll', update, true);\n\n return () => {\n mutationObserver.disconnect();\n window.document.removeEventListener('scroll', update, true);\n };\n }, [update]);\n\n // Don't shift focus to the floating element if selected via keyboard or on mobile.\n const initialFocus = useMemo(() => {\n return (event?.type === 'keyup' || event?.type === 'contextmenu' || isMobile()) ? -1 : 0;\n }, [event]);\n\n /**\n * Announce the navigation hint only on the keyboard selection,\n * because the focus isn't shifted to the popup automatically then\n */\n useAnnouncePopupNavigation({\n disabled: isFloatingFocused,\n floatingOpen: isOpen,\n message: ariaNavigationMessage,\n });\n\n // Prevent text-annotator from handling the irrelevant events triggered from the popup\n const getStopEventsPropagationProps = useCallback(\n () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),\n []\n );\n\n return isOpen && annotation ? (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n closeOnFocusOut={true}\n returnFocus={false}\n initialFocus={initialFocus}>\n <div\n className=\"a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable\"\n ref={refs.setFloating}\n style={floatingStyles}\n onFocus={handleFloatingFocus}\n onBlur={handleFloatingBlur}\n {...getFloatingProps()}\n {...getStopEventsPropagationProps()}>\n {popup({\n annotation: selected[0].annotation,\n editable: selected[0].editable,\n event\n })}\n <button className=\"r6o-popup-sr-only\" aria-live=\"assertive\" onClick={handleClose}>\n {props.ariaCloseWarning || 'Click or leave this dialog to close it.'}\n </button>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n ) : null;\n\n}\n"],"names":["event","jsx","jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"react-text-annotator.es6.js","sources":["../src/TextAnnotatorPopup/TextAnnotatorPopup.tsx"],"sourcesContent":["import { FC, PointerEvent, MouseEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';\nimport { isMobile } from './isMobile';\nimport {\n autoUpdate,\n flip,\n FloatingFocusManager,\n FloatingPortal,\n inline,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole\n} from '@floating-ui/react';\n\nimport { useAnnotator, useSelection } from '@annotorious/react';\nimport {\n isRevived,\n denormalizeRectWithOffset,\n toDomRectList,\n type TextAnnotation,\n type TextAnnotator\n} from '@soomo/text-annotator';\n\nimport { useAnnouncePopupNavigation } from '../hooks';\nimport './TextAnnotatorPopup.css';\n\ninterface TextAnnotationPopupProps {\n\n ariaNavigationMessage?: string;\n\n ariaCloseWarning?: string;\n\n popup(props: TextAnnotationPopupContentProps): ReactNode;\n\n}\n\nexport interface TextAnnotationPopupContentProps {\n\n annotation: TextAnnotation;\n\n editable?: boolean;\n\n event?: PointerEvent;\n\n}\n\nexport const TextAnnotatorPopup: FC<TextAnnotationPopupProps> = (props) => {\n\n const { popup, ariaNavigationMessage } = props;\n\n const r = useAnnotator<TextAnnotator>();\n\n const { selected, event } = useSelection<TextAnnotation>();\n\n const annotation = selected[0]?.annotation;\n\n const [isOpen, setOpen] = useState(selected?.length > 0);\n const handleClose = () => r?.cancelSelected();\n\n const [isFloatingFocused, setFloatingFocused] = useState(false);\n const handleFloatingFocus = () => setFloatingFocused(true);\n const handleFloatingBlur = () => setFloatingFocused(false);\n useEffect(() => {\n if (!isOpen) handleFloatingBlur();\n }, [isOpen, handleFloatingBlur]);\n\n const { refs, floatingStyles, update, context } = useFloating({\n placement: isMobile() ? 'bottom' : 'top',\n open: isOpen,\n onOpenChange: (open) => {\n setOpen(open);\n\n if (!open) {\n handleClose();\n }\n },\n middleware: [\n offset(10),\n inline(),\n flip(),\n shift({ mainAxis: false, crossAxis: true, padding: 10 })\n ],\n whileElementsMounted: autoUpdate\n });\n\n const role = useRole(context, { role: 'dialog' });\n const dismiss = useDismiss(context, { outsidePressEvent: 'mousedown' });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n useEffect(() => {\n const annotationSelector = annotation?.target.selector;\n if (!annotationSelector) return;\n\n setOpen(isRevived(annotationSelector));\n }, [annotation]);\n\n useEffect(() => {\n if (!r) return;\n\n if (isOpen && annotation?.id) {\n refs.setPositionReference({\n getBoundingClientRect: () => denormalizeRectWithOffset(\n r.state.store.getAnnotationBounds(annotation.id),\n r.element.getBoundingClientRect()\n ),\n getClientRects: () => {\n const rects = r.state.store.getAnnotationRects(annotation.id);\n const denormalizedRects = rects.map(\n rect => denormalizeRectWithOffset(rect, r.element.getBoundingClientRect())\n );\n return toDomRectList(denormalizedRects);\n }\n });\n } else {\n refs.setPositionReference(null);\n }\n }, [isOpen, annotation?.id, annotation?.target, r]);\n\n useEffect(() => {\n const config: MutationObserverInit = { attributes: true, childList: true, subtree: true };\n\n const mutationObserver = new MutationObserver(() => update());\n mutationObserver.observe(document.body, config);\n\n window.document.addEventListener('scroll', update, true);\n\n return () => {\n mutationObserver.disconnect();\n window.document.removeEventListener('scroll', update, true);\n };\n }, [update]);\n\n // Don't shift focus to the floating element if selected via keyboard or on mobile.\n const initialFocus = useMemo(() => {\n return (event?.type === 'keyup' || event?.type === 'contextmenu' || isMobile()) ? -1 : 0;\n }, [event]);\n\n /**\n * Announce the navigation hint only on the keyboard selection,\n * because the focus isn't shifted to the popup automatically then\n */\n useAnnouncePopupNavigation({\n disabled: isFloatingFocused,\n floatingOpen: isOpen,\n message: ariaNavigationMessage,\n });\n\n // Prevent text-annotator from handling the irrelevant events triggered from the popup\n const getStopEventsPropagationProps = useCallback(\n () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),\n []\n );\n\n return isOpen && annotation ? (\n <FloatingPortal>\n <FloatingFocusManager\n context={context}\n modal={false}\n closeOnFocusOut={true}\n returnFocus={false}\n initialFocus={initialFocus}>\n <div\n className=\"a9s-popup r6o-popup annotation-popup r6o-text-popup not-annotatable\"\n ref={refs.setFloating}\n style={floatingStyles}\n onFocus={handleFloatingFocus}\n onBlur={handleFloatingBlur}\n {...getFloatingProps(getStopEventsPropagationProps())}>\n {popup({\n annotation: selected[0].annotation,\n editable: selected[0].editable,\n event\n })}\n <button className=\"r6o-popup-sr-only\" aria-live=\"assertive\" onClick={handleClose}>\n {props.ariaCloseWarning || 'Click or leave this dialog to close it.'}\n </button>\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n ) : null;\n\n}\n\n/**\n * Prevent text-annotator from handling the irrelevant events\n * triggered from the popup/toolbar/dialog\n */\nexport const getStopEventsPropagationProps = <T extends HTMLElement = HTMLElement>() => ({\n onPointerUp: (event: PointerEvent<T>) => event.stopPropagation(),\n onPointerDown: (event: PointerEvent<T>) => event.stopPropagation(),\n onMouseDown: (event: MouseEvent<T>) => event.stopPropagation(),\n onMouseUp: (event: MouseEvent<T>) => event.stopPropagation()\n});\n"],"names":["getStopEventsPropagationProps","event","jsx","jsxs"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soomo/react-text-annotator",
3
- "version": "3.1.0-staging.2",
3
+ "version": "3.1.0-staging.4",
4
4
  "description": "Recogito Text Annotator React bindings",
5
5
  "author": "Rainer Simon",
6
6
  "license": "BSD-3-Clause",
@@ -48,7 +48,7 @@
48
48
  "@annotorious/react": "^3.0.9",
49
49
  "@floating-ui/react": "^0.26.24",
50
50
  "@react-aria/live-announcer": "^3.3.4",
51
- "@soomo/text-annotator": "3.1.0-staging.2",
51
+ "@soomo/text-annotator": "3.1.0-staging.4",
52
52
  "@recogito/text-annotator-tei": "3.0.0-rc.49",
53
53
  "CETEIcean": "^1.9.3",
54
54
  "unique-random": "^4.0.0"