fix(android): fix annotator on Android, closes #2927 (#2946)

apps/readest-app/src/app/reader/components/annotator/AnnotationRangeEditor.tsx

@@ -222,7 +222,7 @@ const AnnotationRangeEditor: React.FC<AnnotationRangeEditorProps> = ({
   }
 
   return (
-    <div className='pointer-events-none fixed inset-0 z-40'>
+    <div className='pointer-events-none fixed inset-0 z-50'>
       <Handle
         position={currentStart}
         isVertical={isVertical}

apps/readest-app/src/app/reader/components/annotator/Annotator.tsx

@@ -260,7 +260,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
     detail.doc?.addEventListener('pointermove', handlePointerMove.bind(null, doc, index), opts);
     detail.doc?.addEventListener('pointercancel', handlePointerCancel.bind(null, doc, index));
     detail.doc?.addEventListener('pointerup', handlePointerUp.bind(null, doc, index));
-    detail.doc?.addEventListener('selectionchange', () => handleSelectionchange(doc));
+    detail.doc?.addEventListener('selectionchange', handleSelectionchange.bind(null, doc, index));
 
     // For PDF selections, enable right-click context menu to directly open translator popup.
     if (bookData.book?.format === 'PDF') {
@@ -493,7 +493,7 @@ const Annotator: React.FC<{ bookKey: string }> = ({ bookKey }) => {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selection?.cfi, bookKey]);
+  }, [selection, bookKey]);
 
   useEffect(() => {
     if (!progress) return;

apps/readest-app/src/app/reader/hooks/useTextSelector.ts

@@ -40,7 +40,6 @@ export const useTextSelector = (
 
   const makeSelection = async (sel: Selection, index: number, rebuildRange = false) => {
     isTextSelected.current = true;
-    isUpToPopup.current = true;
     const range = sel.getRangeAt(0);
     if (rebuildRange) {
       sel.removeAllRanges();
@@ -57,7 +56,6 @@ export const useTextSelector = (
   // FIXME: extremely hacky way to dismiss system selection tools on iOS
   const makeSelectionOnIOS = async (sel: Selection, index: number) => {
     isTextSelected.current = true;
-    isUpToPopup.current = true;
     const range = sel.getRangeAt(0);
     setTimeout(() => {
       sel.removeAllRanges();
@@ -140,11 +138,11 @@ export const useTextSelector = (
     if (isValidSelection(sel)) {
       const isPointerInside = ev && isPointerInsideSelection(sel, ev);
       const isIOS = osPlatform === 'ios' || appService?.isIOSApp;
-      const isAndroid = appService?.isAndroidApp;
 
       if (isPointerInside && isIOS) {
         makeSelectionOnIOS(sel, index);
-      } else if (isPointerInside || isAndroid) {
+      } else if (isPointerInside) {
+        isUpToPopup.current = true;
         makeSelection(sel, index, true);
       }
     }
@@ -160,7 +158,7 @@ export const useTextSelector = (
   const handleTouchEnd = () => {
     isTouchStarted.current = false;
   };
-  const handleSelectionchange = (doc: Document) => {
+  const handleSelectionchange = (doc: Document, index: number) => {
     // Available on iOS, Android and Desktop, fired when the selection is changed
     if (osPlatform !== 'android' || !appService?.isAndroidApp) return;
 
@@ -169,6 +167,7 @@ export const useTextSelector = (
       if (!selectionPosition.current) {
         selectionPosition.current = view?.renderer?.start || null;
       }
+      makeSelection(sel, index, false);
     } else {
       selectionPosition.current = null;
     }