Merge branch 'main' into fix-checking-null-elements-annotability

Author: oleksandr-danylchenko

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

@@ -1,6 +1,6 @@
 import { PointerEvent, ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import { useAnnotator, useSelection } from '@annotorious/react';
-import type { TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
+import { isRevived, TextAnnotation, TextAnnotator } from '@recogito/text-annotator';
 import { isMobile } from './isMobile';
 import {
   autoUpdate,
@@ -71,15 +71,10 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
   const { getFloatingProps } = useInteractions([dismiss, role]);
 
   useEffect(() => {
-    setOpen(
-      // Selected annotation exists and has a selector?
-      annotation?.target.selector && 
-      // Selector not empty? (Annotations from plugins, general defensive programming)
-      annotation.target.selector.length > 0 && 
-      // Range not collapsed? (E.g. lazy loading PDFs. Note that this will have to 
-      // change if we switch from ranges to pre-computed bounds!)
-      !annotation.target.selector[0].range.collapsed
-    );
+    const annotationSelector = annotation?.target.selector;
+    if (!annotationSelector) return;
+
+    setOpen(isRevived(annotationSelector));
   }, [annotation]);
 
   useEffect(() => {
@@ -154,4 +149,4 @@ export const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {
     </FloatingPortal>
   ) : null;
 
-}
+}

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

@@ -1,4 +1,4 @@
-import { NOT_ANNOTATABLE_SELECTOR } from './splitAnnotatableRanges';
+import { NOT_ANNOTATABLE_SELECTOR } from './isNotAnnotatable';
 
 /**
  * Calls .preventDefault() on click events in annotable areas, in order

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

@@ -1,16 +1,18 @@
 export * from './cancelSingleClickEvents';
+export * from './cloneEvents';
 export * from './device';
 export * from './programmaticallyFocusable';
 export * from './debounce';
 export * from './getQuoteContext';
-export * from './isWhitespaceOrEmpty';
+export * from './isNotAnnotatable';
 export * from './isRevived';
+export * from './isWhitespaceOrEmpty';
 export * from './mergeClientRects';
 export * from './rangeToSelector';
 export * from './reviveAnnotation';
 export * from './reviveSelector';
 export * from './reviveTarget';
 export * from './splitAnnotatableRanges';
 export * from './trimRangeToContainer';
-export * from './cloneEvents';
+
 

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

@@ -0,0 +1,15 @@
+export const NOT_ANNOTATABLE_CLASS = 'not-annotatable';
+
+export const NOT_ANNOTATABLE_SELECTOR = `.${NOT_ANNOTATABLE_CLASS}`;
+
+export const isNotAnnotatable = (node: Node): boolean => {
+  const closestNotAnnotatable = node instanceof HTMLElement
+    ? node.closest(NOT_ANNOTATABLE_SELECTOR)
+    : node.parentElement?.closest(NOT_ANNOTATABLE_SELECTOR);
+  return Boolean(closestNotAnnotatable);
+}
+
+export const isRangeAnnotatable = (range: Range): boolean => {
+  const ancestor = range.commonAncestorContainer;
+  return !isNotAnnotatable(ancestor);
+}

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

@@ -1,5 +1,5 @@
 import type { TextSelector } from '../model';
-import { NOT_ANNOTATABLE_SELECTOR } from './splitAnnotatableRanges';
+import { NOT_ANNOTATABLE_SELECTOR } from './isNotAnnotatable';
 
 /**
  * Creates a new selector object with the revived DOM range from the given text annotation position

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

@@ -1,18 +1,4 @@
-export const NOT_ANNOTATABLE_CLASS = 'not-annotatable';
-
-export const NOT_ANNOTATABLE_SELECTOR = `.${NOT_ANNOTATABLE_CLASS}`;
-
-export const isNotAnnotatable = (node: Node): boolean => {
-  const closestNotAnnotatable = node instanceof HTMLElement
-    ? node.closest(NOT_ANNOTATABLE_SELECTOR)
-    : node.parentElement?.closest(NOT_ANNOTATABLE_SELECTOR);
-  return Boolean(closestNotAnnotatable);
-}
-
-export const isRangeAnnotatable = (range: Range): boolean => {
-  const ancestor = range.commonAncestorContainer;
-  return !isNotAnnotatable(ancestor);
-}
+import { isRangeAnnotatable, NOT_ANNOTATABLE_CLASS, NOT_ANNOTATABLE_SELECTOR } from './isNotAnnotatable';
 
 const iterateNotAnnotatableElements = function*(range: Range): Generator<HTMLElement> {
   const notAnnotatableIterator = document.createNodeIterator(

packages/text-annotator/test/model/w3c/fixtures.ts

@@ -28,8 +28,8 @@ export const textAnnotation: W3CTextAnnotation = {
         },
         {
           type: 'TextPositionSelector',
-          start: 986,
-          end: 998
+          start: 958,
+          end: 970
         },
       ]
     }