Added context-unaware debounce wrapper

packages/text-annotator/src/SelectionHandler.ts

@@ -1,10 +1,10 @@
 import { Filter, Origin, type User } from '@annotorious/core';
 import { v4 as uuidv4 } from 'uuid';
-import debounce from 'debounce';
 
 import type { TextAnnotatorState } from './state';
 import type { TextAnnotationTarget } from './model';
 import {
+  debounce,
   splitAnnotatableRanges,
   rangeToSelector,
   isWhitespaceOrEmpty,
@@ -128,7 +128,7 @@ export const createSelectionHandler = (
       // select events don't have offsetX/offsetY - reuse last up/down)
       selection.userSelect(currentTarget.annotation, lastPointerDown);
     }
-  }, 10).bind(undefined);
+  });
 
   document.addEventListener('selectionchange', onSelectionChange);
 

packages/text-annotator/src/highlight/baseRenderer.ts

@@ -1,11 +1,11 @@
-import debounce from 'debounce';
 import type { Filter, ViewportState } from '@annotorious/core';
 
 import type { TextAnnotatorState } from '../state';
 import { ViewportBounds, getViewportBounds, trackViewport } from './viewport';
 import type { HighlightPainter } from './HighlightPainter';
 import type { Highlight } from './Highlight';
 import type { HighlightStyleExpression } from './HighlightStyle';
+import { debounce } from '../utils';
 
 export interface RendererImplementation {
 
@@ -136,11 +136,10 @@ export const createBaseRenderer = (
   const onResize = debounce(() => {
     store.recalculatePositions();
 
-    if (currentPainter)
-      currentPainter.reset();
+    currentPainter?.reset();
 
     redraw();
-  }, 10).bind(undefined);
+  });
 
   window.addEventListener('resize', onResize);
 

packages/text-annotator/src/highlight/canvas/canvasRenderer.ts

@@ -1,4 +1,3 @@
-import debounce from 'debounce';
 import type { ViewportState } from '@annotorious/core';
 
 import type { TextAnnotatorState } from '../../state';
@@ -8,6 +7,7 @@ import { DEFAULT_SELECTED_STYLE, DEFAULT_STYLE, HighlightStyleExpression } from
 import type { HighlightPainter } from '../HighlightPainter';
 import { createBaseRenderer, type RendererImplementation } from '../baseRenderer';
 import type { Highlight } from '../Highlight';
+import { debounce } from '../../utils';
 
 import './canvasRenderer.css';
 
@@ -117,7 +117,7 @@ const createRenderer = (container: HTMLElement): RendererImplementation => {
     });
   });
 
-  const onResize = debounce(() => resetCanvas(canvas), 10).bind(undefined);
+  const onResize = debounce(() => resetCanvas(canvas));
 
   window.addEventListener('resize', onResize);
 

packages/text-annotator/src/utils/debounce.ts

@@ -0,0 +1,22 @@
+import libDebounce from 'debounce';
+
+/**
+ * Wraps the `debounce` function from the `debounce` package
+ * to make it context-agnostic.
+ * Otherwise, we won't be able to use it in multiple event listeners simultaneously,
+ * like `window.onresize` and `ResizeObserver`.
+ * @see https://github.com/sindresorhus/debounce/issues/8#issuecomment-2321341074
+ */
+export const debounce: typeof libDebounce = (function_, wait = 10, options) => {
+  const fn = libDebounce(function_, wait, options);
+
+  const boundFn = fn.bind(undefined);
+
+  Object.getOwnPropertyNames(fn).forEach(
+    prop => Object.defineProperty(boundFn, prop, Object.getOwnPropertyDescriptor(fn, prop))
+  );
+  const proto = Object.getPrototypeOf(fn);
+  Object.setPrototypeOf(boundFn, proto);
+
+  return boundFn;
+}

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

@@ -11,4 +11,5 @@ export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
 export * from './trimRangeToContainer';
+export * from './debounce';