#172 Added popup hiding when the annotation's target is actively updated

packages/text-annotator-react/package.json

@@ -49,6 +49,7 @@
     "@floating-ui/react": "^0.26.27",
     "@recogito/text-annotator": "3.0.0-rc.52",
     "@recogito/text-annotator-tei": "3.0.0-rc.52",
-    "CETEIcean": "^1.9.3"
+    "CETEIcean": "^1.9.3",
+    "dequal": "^2.0.3"
   }
-}
+}

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

@@ -1,7 +1,8 @@
 import { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+
 import { useAnnotator, useSelection } from '@annotorious/react';
 import { isRevived, NOT_ANNOTATABLE_CLASS, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
-import { isMobile } from './isMobile';
+
 import {
   arrow,
   autoUpdate,
@@ -19,6 +20,8 @@ import {
   useRole
 } from '@floating-ui/react';
 
+import { useAnnotationQuoteIdling } from '../hooks';
+import { isMobile } from './isMobile';
 import './TextAnnotationPopup.css';
 
 interface TextAnnotationPopupProps {
@@ -48,9 +51,10 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
   const r = useAnnotator<TextAnnotator>();
 
   const { selected, event } = useSelection<TextAnnotation>();
-
   const annotation = selected[0]?.annotation;
 
+  const isAnnotationQuoteIdling = useAnnotationQuoteIdling(annotation?.id);
+
   const [isOpen, setOpen] = useState(selected?.length > 0);
 
   const arrowRef = useRef(null);
@@ -64,8 +68,8 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
       shift({ crossAxis: true, padding: 10 })
     ];
 
-    return props.arrow 
-      ? [...m, arrow({ element: arrowRef }) ] 
+    return props.arrow
+      ? [...m, arrow({ element: arrowRef }) ]
       : m;
   }, [props.arrow]);
 
@@ -90,8 +94,8 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
 
   useEffect(() => {
     const annotationSelector = annotation?.target.selector;
-    setOpen(annotationSelector?.length > 0 ? isRevived(annotationSelector) : false);
-  }, [annotation]);
+    setOpen(isAnnotationQuoteIdling && annotationSelector?.length > 0 ? isRevived(annotationSelector) : false);
+  }, [annotation?.target?.selector, isAnnotationQuoteIdling]);
 
   useEffect(() => {
     if (isOpen && annotation) {
@@ -151,9 +155,9 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
           })}
 
           {props.arrow && (
-            <FloatingArrow 
+            <FloatingArrow
               ref={arrowRef}
-              context={context} 
+              context={context}
               {...(props.arrowProps || {})} />
           )}
 
@@ -165,7 +169,7 @@ export const TextAnnotationPopup = (props: TextAnnotationPopupProps) => {
     </FloatingPortal>
   ) : null;
 
-}
+};
 
 /**
  * Prevent text-annotator from handling the irrelevant events

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

@@ -0,0 +1 @@
+export { useAnnotationQuoteIdling } from './useAnnotationQuoteIdling';

packages/text-annotator-react/src/hooks/useAnnotationQuoteIdling.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import { dequal } from 'dequal/lite';
+
+import { Origin, useAnnotationStore } from '@annotorious/react';
+import { Ignore, type StoreChangeEvent } from '@annotorious/core';
+import type { TextAnnotation, TextAnnotationStore, TextAnnotationTarget } from '@recogito/text-annotator';
+
+export const useAnnotationQuoteIdling = (
+  annotationId: string | undefined,
+  options: { timeout: number } = { timeout: 500 }
+) => {
+  const store = useAnnotationStore<TextAnnotationStore>();
+
+  const [isIdling, setIdling] = useState(true);
+
+  useEffect(() => {
+    if (!store || !annotationId) return;
+
+    let idlingTimeout: ReturnType<typeof setTimeout>;
+
+    const scheduleSetIdling = (event: StoreChangeEvent<TextAnnotation>) => {
+      const { changes: { updated } } = event;
+
+      const hasChanged = updated?.some((update) => {
+        const { targetUpdated } = update;
+        if (targetUpdated) {
+          const { oldTarget, newTarget } = targetUpdated;
+
+          // The generic type support in the `Update` was added in https://github.com/annotorious/annotorious/pull/476
+          // @ts-expect-error: requires generic `TextAnnotationTarget` type support
+          return hasTargetQuoteChanged(oldTarget, newTarget);
+        }
+      });
+
+      if (hasChanged) {
+        setIdling(false);
+
+        clearTimeout(idlingTimeout);
+        idlingTimeout = setTimeout(() => setIdling(true), options.timeout);
+      }
+    };
+
+    store.observe(scheduleSetIdling, {
+      annotations: annotationId,
+      ignore: Ignore.BODY_ONLY,
+      origin: Origin.LOCAL
+    });
+
+    return () => {
+      clearTimeout(idlingTimeout);
+      store.unobserve(scheduleSetIdling);
+    };
+  }, [store, annotationId, options.timeout]);
+
+  return isIdling;
+};
+
+const hasTargetQuoteChanged = (oldValue: TextAnnotationTarget, newValue: TextAnnotationTarget) => {
+  const { selector: oldSelector } = oldValue;
+  const oldQuotes = oldSelector.map(({ quote }) => quote);
+
+  const { selector: newSelector } = newValue;
+  const newQuotes = newSelector.map(({ quote }) => quote);
+
+  return !dequal(oldQuotes, newQuotes);
+};

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

@@ -1,4 +1,5 @@
 export * from './tei';
+export * from './hooks';
 export * from './TextAnnotator';
 export * from './TextAnnotationPopup';
 export * from './TextAnnotatorPlugin';

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

@@ -188,17 +188,18 @@ export const App: FC = () => {
           to pity him except Neptune, who still persecuted him without ceasing
           and would not let him get home.
         </p>
-      </TextAnnotator>
 
-      <TextAnnotationPopup
-        arrow
-        arrowProps={{
-          fill: '#000000'
-        }}
-        popup={
-          props => (<TestPopup {...props} />)
-        }
-      />
+        <TextAnnotationPopup
+          arrow
+          arrowProps={{
+            fill: '#000000'
+          }}
+          popup={
+            props => (<TestPopup {...props} />)
+          }
+        />
+
+      </TextAnnotator>
 
       <MockStorage />
     </Annotorious>

packages/text-annotator/src/SelectionHandler.ts

@@ -231,8 +231,10 @@ export const SelectionHandler = (
 
     if (sel?.isCollapsed) return;
 
-    // When selecting the initial word, Chrome Android fires `contextmenu` 
-    // before selectionChanged.
+    /**
+     * When selecting the initial word, Chrome Android
+     * fires the `contextmenu` before the `selectionchange`
+     */
     if (!currentTarget || currentTarget.selector.length === 0) {
       onSelectionChange(evt);
     }