react-pdf text layer: Selection, search, and redaction

import "react-pdf/dist/Page/TextLayer.css";

<Page pageNumber={1} renderTextLayer={true} />  {/* default */}

<Page pageNumber={1} renderTextLayer={false} />

<Page
  pageNumber={1}
  onGetTextSuccess={({ items, styles }) => {
    // `items` is an array of text items.
    items.forEach((item) => {
      console.log(item.str);      // The text string.
      console.log(item.dir);      // Text direction ("ltr" or "rtl").
      console.log(item.width);    // Width in PDF points.
      console.log(item.height);   // Height in PDF points.
      console.log(item.transform); // Position/rotation matrix.
      console.log(item.hasEOL);   // Followed by line break?
    });

    // `styles` contains font information keyed by font name.
    console.log(styles);
  }}
/>

<Page
  pageNumber={1}
  customTextRenderer={({ str, itemIndex }) => {
    // `str`: the text string for this item.
    // `itemIndex`: index of the item in the text content array.
    return str;
  }}
/>

function HighlightedPage({ pageNumber, searchText }) {
  const customTextRenderer = useCallback(
    ({ str }) => {
      const escaped = escapeHtml(str);
      if (!searchText) return escaped;

      const regex = new RegExp(`(${escapeRegex(searchText)})`, "gi");
      // `$1` is the matched substring from `escaped`, so it's already HTML-safe.
      return escaped.replace(regex, '<mark class="highlight">$1</mark>');
    },
    [searchText],
  );

  return (
    <Page
      pageNumber={pageNumber}
      customTextRenderer={customTextRenderer}
    />
  );
}

function escapeHtml(s) {
  return s.replace(/[&<>"']/g, (c) => ({
    "&": "&amp;",
    "<": "&lt;",
    ">": "&gt;",
    '"': "&quot;",
    "'": "&#39;",
  })[c]);
}

function escapeRegex(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

.highlight {
  background-color: yellow;
  color: black;
  border-radius: 2px;
  padding: 0 1px;
}

function MaskedPage({ pageNumber, maskPatterns }) {
  const customTextRenderer = useCallback(
    ({ str }) => {
      let result = escapeHtml(str);
      for (const pattern of maskPatterns) {
        // Recreate the pattern with the same flags so it operates on the
        // HTML-escaped string. Patterns should target characters that
        // can't be affected by HTML escaping (digits, letters, etc.).
        result = result.replace(pattern, (match) =>
          `<span class="redacted">${"\u2588".repeat(match.length)}</span>`,
        );
      }
      return result;
    },
    [maskPatterns],
  );

  return (
    <Page
      pageNumber={pageNumber}
      customTextRenderer={customTextRenderer}
    />
  );
}

const customTextRenderer = ({ str }) => {
  // Escape first, then wrap. The capture group `$1` is safe because the
  // email regex only matches characters that survive HTML escaping unchanged.
  return escapeHtml(str).replace(
    /(\S+@\S+\.\S+)/g,
    '<span title="Click to email" class="email-link">$1</span>',
  );
};

function TextExtractor({ file }) {
  const [allText, setAllText] = useState([]);

  const handleTextSuccess = useCallback(
    (pageNumber) =>
      ({ items }) => {
        const pageText = items.map((item) => item.str).join(" ");
        setAllText((prev) => {
          const updated = [...prev];
          updated[pageNumber - 1] = pageText;
          return updated;
        });
      },
    [],
  );

  return (
    <Document file={file} onLoadSuccess={({ numPages }) => setAllText(new Array(numPages).fill(""))}>
      {allText.map((_, i) => (
        <Page
          key={i}
          pageNumber={i + 1}
          onGetTextSuccess={handleTextSuccess(i + 1)}
          renderMode="none"      // Don't render canvas.
          renderTextLayer={false} // Don't render text layer DOM.
        />
      ))}
    </Document>
  );
}

<Page
  pageNumber={1}
  onGetTextSuccess={({ items, styles }) => {
    // Text content extracted from page.
  }}
  onGetTextError={(error) => {
    // Failed to extract text.
  }}
  onRenderTextLayerSuccess={() => {
    // Text layer DOM rendered.
  }}
  onRenderTextLayerError={(error) => {
    // Failed to render text layer.
  }}
/>

// Built-in text selection + full-featured search.
const results = await instance.search("search term");
instance.setSearchState((state) => state.set("results", results));

// Text extraction via API.
const pageText = await instance.textLinesForPageIndex(0);