fix: improve annotations positioning

Author: cristianrdu

packages/lector/size.json

@@ -2,7 +2,7 @@
   {
     "name": "Client",
     "passed": true,
-    "size": 70348,
+    "size": 70508,
     "sizeLimit": 150000
   }
 ]

packages/lector/src/components/annotation-tooltip.tsx

@@ -1,14 +1,21 @@
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 
 import type { Annotation } from "../hooks/useAnnotations";
 import { useAnnotationTooltip } from "../hooks/useAnnotationTooltip";
 import { usePdf } from "../internal";
 
+
+export type AnnotationTooltipContentProps = {
+  annotation: Annotation;
+  onClose: () => void;
+  setPosition?: (position: 'top' | 'bottom' | undefined) => void;
+};
+
 interface AnnotationTooltipProps {
   annotation: Annotation;
   children: React.ReactNode;
-  tooltipContent: React.ReactNode;
+  renderTooltipContent: (props: AnnotationTooltipContentProps) => React.ReactNode;
   hoverTooltipContent?: React.ReactNode;
   onOpenChange?: (open: boolean) => void;
   isOpen?: boolean;
@@ -25,7 +32,7 @@ interface AnnotationTooltipProps {
 export const AnnotationTooltip = ({
   annotation,
   children,
-  tooltipContent,
+  renderTooltipContent,
   hoverTooltipContent,
   onOpenChange,
   className,
@@ -37,6 +44,7 @@ export const AnnotationTooltip = ({
   const viewportRef = usePdf((state) => state.viewportRef);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isMouseInTooltipRef = useRef(false);
+  const [triggeredPosition, setTriggeredPosition] = useState<'top' | 'bottom' | undefined>();
 
   const {
     isOpen: uncontrolledIsOpen,
@@ -48,6 +56,7 @@ export const AnnotationTooltip = ({
   } = useAnnotationTooltip({
     annotation,
     onOpenChange,
+    position: triggeredPosition,
     isOpen: controlledIsOpen,
   });
 
@@ -152,7 +161,11 @@ export const AnnotationTooltip = ({
           }}
           {...getFloatingProps()}
         >
-          {tooltipContent}
+          {renderTooltipContent({
+            annotation,
+            onClose: () => setIsOpen(false),
+            setPosition: (position: 'top' | 'bottom' | undefined) => setTriggeredPosition(position)
+          })}
         </div>,
         viewportRef.current
       )}

packages/lector/src/components/layers/annotation-highlight-layer.tsx

@@ -1,15 +1,13 @@
 import type { Annotation } from "../../hooks/useAnnotations";
 import { useAnnotations } from "../../hooks/useAnnotations";
 import { usePDFPageNumber } from "../../hooks/usePdfPageNumber";
-import { AnnotationTooltip } from "../annotation-tooltip";
+import { AnnotationTooltip, type AnnotationTooltipContentProps } from "../annotation-tooltip";
+
 
 interface AnnotationHighlightLayerProps {
   className?: string;
   style?: React.CSSProperties;
-  renderTooltipContent: (props: {
-    annotation: Annotation;
-    onClose: () => void;
-  }) => React.ReactNode;
+  renderTooltipContent: (props: AnnotationTooltipContentProps) => React.ReactNode;
   renderHoverTooltipContent: (props: {
     annotation: Annotation;
     onClose: () => void;
@@ -59,12 +57,8 @@ export const AnnotationHighlightLayer = ({
               onAnnotationClick(annotation);
             }
           }}
-          tooltipContent={(
-              renderTooltipContent({
-                annotation,
-                onClose: () => {},
-              })
-            ) 
+          renderTooltipContent={
+              renderTooltipContent
           }
           hoverTooltipContent={(
             renderHoverTooltipContent({

packages/lector/src/index.ts

@@ -1,3 +1,4 @@
+export type { AnnotationTooltipContentProps } from "./components/annotation-tooltip";
 export { AnnotationTooltip } from "./components/annotation-tooltip";
 export { AnnotationHighlightLayer } from "./components/layers/annotation-highlight-layer";
 export { AnnotationLayer } from "./components/layers/annotation-layer";
@@ -32,4 +33,4 @@ export { useAnnotations } from "./hooks/useAnnotations";
 export { LinkService } from "./hooks/usePDFLinkService";
 export { usePDFPageNumber } from "./hooks/usePdfPageNumber";
 export { useSelectionDimensions } from "./hooks/useSelectionDimensions";
-export { type ColoredHighlight, type HighlightRect, usePdf } from "./internal";
+export { type ColoredHighlight, type HighlightRect, usePdf } from "./internal";