Text selection

Add TextLayer to make a text-based PDF selectable. useSelectionDimensions().getDimension() reads the current browser selection and returns the selected text and its highlight rectangles. It can return undefined, so check the result before using it.

Turn a selection into a highlight

This example uses pdf-setup.ts from installation. Select text, then activate the Highlight button in the tooltip.

"use client";
 
import {
  CanvasLayer, HighlightLayer, Page, Pages, Root, SelectionTooltip,
  TextLayer, usePdf, useSelectionDimensions,
} from "@anaralabs/lector";
import "./pdf-setup";
 
function SelectionAction() {
  const { getDimension } = useSelectionDimensions();
  const setHighlight = usePdf((state) => state.setHighlight);
 
  return (
    <SelectionTooltip>
      <button
        type="button"
        style={{ background: "white", color: "black", padding: "6px 12px", border: "1px solid" }}
        onMouseDown={(event) => event.preventDefault()}
        onClick={() => {
          const selection = getDimension();
          if (!selection || selection.isCollapsed || !selection.highlights.length) return;
          setHighlight(selection.highlights);
          window.getSelection()?.removeAllRanges();
        }}
      >
        Highlight selection
      </button>
    </SelectionTooltip>
  );
}
 
export default function SelectionViewer() {
  return (
    <Root source="/sample.pdf" style={{ height: 600 }}>
      <Pages>
        <Page>
          <CanvasLayer />
          <TextLayer />
          <HighlightLayer style={{ background: "#ffdf6080" }} />
        </Page>
      </Pages>
      <SelectionAction />
    </Root>
  );
}

Mount one selection tooltip per viewer, outside the repeated Page template. Preventing the button's mouse-down default keeps the browser from discarding the selection before the click handler reads it. The result contains text, highlights, and isCollapsed. Rectangles use scale-1 page pixels; a multi-page selection can contain multiple page numbers.

setHighlight replaces the active highlight. The example does not accumulate selections or persist them.

Saving highlights

For a built-in color picker, add ColoredHighlightLayer under Page. Its onHighlight callback receives a ColoredHighlight with uuid, text, color, pageNumber, and rectangles. Its tools use Tailwind utility classes; see styles.

Your application owns storage. Save each highlight under a document ID and revision, report save failures, and restore saved records using the store's addColoredHighlight. Restore once per document session to avoid duplicate records. deleteColoredHighlight(uuid) removes one from the current store; delete it from your persistence layer separately.

These are viewer overlays. They do not become embedded PDF annotations when downloading the original file.

Selection limits

A scanned page without embedded text cannot provide text selection; Lector does not run OCR. Selection geometry also depends on the PDF's text layout and which virtualized text layers are mounted. Test multi-column text, rotated pages, zoom, and touch selection with the PDFs your users work with.

If text is selectable but displaced, check the PDF.js stylesheet and avoid adding your own transforms to Page or TextLayer.

Live example