diff --git a/packages/text-annotator-react/src/TextAnnotator.tsx b/packages/text-annotator-react/src/TextAnnotator.tsx index 23c550a4..a1d32cd6 100644 --- a/packages/text-annotator-react/src/TextAnnotator.tsx +++ b/packages/text-annotator-react/src/TextAnnotator.tsx @@ -26,7 +26,7 @@ export const TextAnnotator = (props: TextAnnotatorProps) = const el = useRef(null); const { className, children, ...opts } = props; - const { style, filter, userSelectAction, user } = opts; + const { annotatingEnabled, style, filter, userSelectAction, user } = opts; const { anno, setAnno } = useContext(AnnotoriousContext); @@ -49,6 +49,8 @@ export const TextAnnotator = (props: TextAnnotatorProps) = useEffect(() => anno?.setUser(user), [anno, user]); + useEffect(() => anno?.setAnnotatingEnabled(annotatingEnabled), [anno, annotatingEnabled]); + return (
{children} diff --git a/packages/text-annotator/src/SelectionHandler.ts b/packages/text-annotator/src/SelectionHandler.ts index b3bef73f..1475cba1 100644 --- a/packages/text-annotator/src/SelectionHandler.ts +++ b/packages/text-annotator/src/SelectionHandler.ts @@ -14,10 +14,9 @@ import { NOT_ANNOTATABLE_SELECTOR } from './utils'; -export const SelectionHandler = ( +export const createSelectionHandler = ( container: HTMLElement, state: TextAnnotatorState, - annotatingEnabled: boolean, offsetReferenceSelector?: string ) => { @@ -29,6 +28,10 @@ export const SelectionHandler = ( const setFilter = (filter?: Filter) => currentFilter = filter; + let currentAnnotatingEnabled = true; + + const setAnnotatingEnabled = (enabled: boolean) => currentAnnotatingEnabled = enabled; + const { store, selection } = state; let currentTarget: TextAnnotationTarget | undefined; @@ -38,6 +41,8 @@ export const SelectionHandler = ( let lastDownEvent: Selection['event'] | undefined; const onSelectStart = (evt: Event) => { + if (!currentAnnotatingEnabled) return; + if (isLeftClick === false) return; @@ -57,10 +62,10 @@ export const SelectionHandler = ( } : undefined; } - if (annotatingEnabled) - container.addEventListener('selectstart', onSelectStart); + container.addEventListener('selectstart', onSelectStart); const onSelectionChange = debounce((evt: Event) => { + if (!currentAnnotatingEnabled) return; const sel = document.getSelection(); // This is to handle cases where the selection is "hijacked" by another element @@ -116,8 +121,7 @@ export const SelectionHandler = ( } }) - if (annotatingEnabled) - document.addEventListener('selectionchange', onSelectionChange); + document.addEventListener('selectionchange', onSelectionChange); /** * Select events don't carry information about the mouse button @@ -219,7 +223,8 @@ export const SelectionHandler = ( return { destroy, setFilter, - setUser + setUser, + setAnnotatingEnabled } } diff --git a/packages/text-annotator/src/TextAnnotator.ts b/packages/text-annotator/src/TextAnnotator.ts index 2c65eff2..85e93b4f 100644 --- a/packages/text-annotator/src/TextAnnotator.ts +++ b/packages/text-annotator/src/TextAnnotator.ts @@ -18,7 +18,7 @@ import { TextAnnotationStore, TextAnnotatorState, createTextAnnotatorState } fro import type { TextAnnotation } from './model'; import { cancelSingleClickEvents, programmaticallyFocusable } from './utils'; import { fillDefaults, type RendererType, type TextAnnotatorOptions } from './TextAnnotatorOptions'; -import { SelectionHandler } from './SelectionHandler'; +import { createSelectionHandler } from './SelectionHandler'; import './TextAnnotator.css'; @@ -35,6 +35,8 @@ export interface TextAnnotator extends Annot // Returns true if successful (or false if the annotation is not currently rendered) scrollIntoView(annotation: TextAnnotation): boolean; + setAnnotatingEnabled: (enabled: boolean) => void; + state: TextAnnotatorState; } @@ -87,8 +89,9 @@ export const createTextAnnotator = ( if (opts.style) highlightRenderer.setStyle(opts.style); - const selectionHandler = SelectionHandler(container, state, opts.annotatingEnabled, opts.offsetReferenceSelector); + const selectionHandler = createSelectionHandler(container, state, opts.offsetReferenceSelector); selectionHandler.setUser(currentUser); + selectionHandler.setAnnotatingEnabled(opts.annotatingEnabled); /*************************/ /* External API */ @@ -99,6 +102,10 @@ export const createTextAnnotator = ( const getUser = () => currentUser; + const setAnnotatingEnabled = (enabled: boolean) => { + selectionHandler.setAnnotatingEnabled(enabled); + }; + const setFilter = (filter?: Filter) => { highlightRenderer.setFilter(filter); selectionHandler.setFilter(filter); @@ -137,6 +144,7 @@ export const createTextAnnotator = ( destroy, element: container, getUser, + setAnnotatingEnabled, setFilter, setStyle: highlightRenderer.setStyle.bind(highlightRenderer), redraw: highlightRenderer.redraw.bind(highlightRenderer),