Feature: useSelectionContext

[icedemon72]

I need to extract the selected text (with coordinates, text, pages etc.) and I do it like this

export function selectionToRestriction(e: MouseEvent, root: HTMLElement, zoom: number = 1): SelectionResult | null {
  const sel = window.getSelection();
  if (!sel || sel.isCollapsed) return null;

  const exactText = sel.toString().trim();
  if (!exactText) return null;

  const range = sel.getRangeAt(0);
  const clientRects = Array.from(range.getClientRects());
  if (!clientRects.length) return null;

  const pageNodes = Array.from(root.querySelectorAll<HTMLElement>('[data-rp^="page-"]')).map(node => ({
    page: Number(node.getAttribute('data-rp')!.replace('page-', '')),
    rect: node.getBoundingClientRect()
  }));

  const pageMap = new Map<number, DOMRect[]>();

  for (const r of clientRects) {
    if (r.width < 0.5 || r.height < 0.5) continue;

    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;

    const owningPage = pageNodes.find(
      p => cx >= p.rect.left && cx <= p.rect.right && cy >= p.rect.top && cy <= p.rect.bottom
    );

    if (!owningPage) continue;

    if (!pageMap.has(owningPage.page)) pageMap.set(owningPage.page, []);
    pageMap.get(owningPage.page)!.push(r);
  }

  if (!pageMap.size) return null;

  const containerRect = root.getBoundingClientRect();
  const metadataList: RestrictionMetadata[] = [];

  for (const [page, rects] of pageMap) {
    const coords = rects.map(r => ({
      xStart: (r.left - containerRect.left) / zoom,
      yStart: (r.top - containerRect.top) / zoom,
      width: r.width / zoom,
      height: r.height / zoom
    }));

    const coordsFiltered = coords.filter(r => r.width > 0.5 && r.height > 0.5);
    if (!coordsFiltered.length) continue;

    const merged = mergeOverlappingRects(mergeRectsByLine(coordsFiltered));
    const mergedFiltered = merged.filter(r => r.width > 0.5 && r.height > 0.5);

    if (!mergedFiltered.length) continue;

    const area = mergedFiltered.reduce(
      (acc, r) => {
        const right = r.xStart + r.width;
        const bottom = r.yStart + r.height;

        return {
          xStart: Math.min(acc.xStart, r.xStart),
          yStart: Math.min(acc.yStart, r.yStart),
          width: Math.max(acc.width, right - acc.xStart),
          height: Math.max(acc.height, bottom - acc.yStart)
        };
      },
      { ...mergedFiltered[0] }
    );

    metadataList.push({ page, exactText, textRows: mergedFiltered, area });
  }

  metadataList.sort((a, b) => a.page - b.page);

  return {
    text: exactText,
    popup: {
      text: exactText,
      x: (e.clientX - containerRect.left) / zoom,
      y: (e.clientY - containerRect.top) / zoom
    },
    newRestriction: {
      coordinates: metadataList
    }
  };
}

useEffect(() => {
    const root = rootRef.current;

    if (!root) return;

    const onMouseUp = (e: MouseEvent) => {
      const restriction = selectionToRestriction(e, root, currentZoom);
      if (!restriction) {
        setPopup(null);
        return;
      }
      setPopup({ ...restriction.popup });
      setNewRestriction(restriction.newRestriction);
    };

    root.addEventListener('mouseup', onMouseUp);
    return () => root.removeEventListener('mouseup', onMouseUp);
  }, [rootRef, currentZoom, setPopup, setNewRestriction]);

It would be nice if we had something similar natively

[david-reactpdf]

@icedemon72

Thanks for sharing the code, this is really helpful.

From what I can see, your logic is doing a few key things:

• Extracting selected text and associating it with the correct page(s)
• Calculating bounding boxes per line and a merged area for the selection
• Normalizing coordinates based on zoom level
• Handling multi-page selections
• Capturing mouse position to anchor a popup
• Triggering everything on mouseup via a container ref

To help us evaluate what we can support natively, could you share your specific use case and which parts of this workflow you would want React PDF to handle for you?

[icedemon72]

@david-reactpdf Thank you for answering, maybe you could try to think what would be the best option since you know more about the current state of the implementation than I do. Perhaps you can include at least some kind of a "template" of some sort so that this can be implemented without writing 100+ lines of code.

What I think would be useful is:

• Knowing what was selected (selectedText for example)
• Knowing when the selection exists (this can be derived from selectedText)
• Knowing where the selection is (by providing coordinates + scale of said selection spanning multiple pages or something like that).

A merged bounding area for multi-page selections isnt strictly required, but it would be extremely useful for building features like a document highlighter - which is something I need for the project I’m currently working on. The intended flow is:

• The user selects text in the PDF.
• They click a button to "highlight" or "save" the selection.
• The coordinates of that selection are stored in the database.
• The highlight can later be rendered at the exact same position.

This is why relying on useHighlightContext isn’t sufficient for my use case - some sentences can appear identically across multiple pages, so I need positional data rather than content-based matching.

[david-reactpdf]

@icedemon72

Thanks for the detailed explanation. We’re currently considering adding a callback that fires when a selection is made. This should help with workflows like saving and restoring highlights across sessions.

Will update you once we’ve finalized the approach or have something for you to try.