Select

"use client";
 
import {
  Root,
  Pages,
  Page,
  CanvasLayer,
  TextLayer,
  HighlightLayer,
  useSelectionDimensions,
  usePdf,
} from "@anaralabs/lector";
 
const PdfHighlightSelect = () => (
  <Root
    source="/pdf/document.pdf"
    className="flex bg-gray-50 h-[500px]"
    loader={<div className="p-4">Loading...</div>}
  >
    <HighlightLayerContent />
  </Root>
);
 
export default PdfHighlightSelect;

const HighlightLayerContent = () => {
  const selectionDimensions = useSelectionDimensions();
  const setHighlights = usePdf((state) => state.setHighlight);
 
  const handleHighlight = () => {
    const dimension = selectionDimensions.getDimension();
    if (dimension && !dimension.isCollapsed) {
      setHighlights(dimension.highlights);
    }
  };
 
  return (
    <Pages className="p-4 w-full">
      <Page>
        {selectionDimensions && <CustomSelect onHighlight={handleHighlight} />}
        <CanvasLayer />
        <TextLayer />
        <HighlightLayer className="bg-yellow-200/70" />
      </Page>
    </Pages>
  );
};

import { SelectionTooltip } from "@anaralabs/lector";
 
export const CustomSelect = ({ onHighlight }: { onHighlight: () => void }) => {
  return (
    <SelectionTooltip>
      <button
        className="bg-white shadow-lg rounded-md px-3 py-1 hover:bg-yellow-200/70"
        onClick={onHighlight}
      >
        Highlight
      </button>
    </SelectionTooltip>
  );
};