Function PdfPreview

apps/hash-frontend/src/pages/shared/pdf-preview.tsx:107–455

({
  showSearch,
  setShowSearch,
  showThumbnails,
  url: initialUrl,
}: PdfViewerProps)

};

export const PdfPreview = ({
  showSearch,
  setShowSearch,
  showThumbnails,
  url: initialUrl,
}: PdfViewerProps) => {
  const [url, setUrl] = useState("");

  useEffect(() => {
    /**
     * The API normally handles file downloads by:
     * 1. Accepting a request with a cookie
     * 2. Checking if the authenticated user can access the file
     * 3. Automatically redirecting the request to a presigned URL to fetch the file
     *
     * This doesn't work for JS fetch because the request to the redirected URL will have origin: null,
     * which the object storage's CORS headers don't permit (at least in our deployed configuration).
     * So we instead ask the API for the presigned URL only, and pass that to react-pdf.
     */
    void fetch(`${initialUrl}?urlOnly=true`, { credentials: "include" })
      .then((resp) => resp.json())
      .then((response) => {
        setUrl(response.url);
      });
  }, [initialUrl]);

  const [documentProxy, setDocumentProxy] = useState<DocumentCallback | null>(
    null,
  );
  const [scale, setScale] = useState(1);
  const [totalPages, setTotalPages] = useState<number>();
  const [selectedPageNumber, setSelectedPageNumber] = useState<number>(1);
  const [searchHits, setSearchHits] = useState<SearchHits>({
    total: 0,
    hitsByPageNumber: {},
  });
  const [selectedSearchHit, setSelectedSearchHit] = useState<SearchHit | null>(
    null,
  );

  const onDocumentLoadSuccess: OnDocumentLoadSuccess = (docProxy) => {
    setTotalPages(docProxy.numPages);
    setDocumentProxy(docProxy);
  };

  const textRenderer: CustomTextRenderer = useCallback(
    (textItem) => {
      const relevantSearchHits =
        searchHits.hitsByPageNumber[textItem.pageNumber] ?? [];

      if (!relevantSearchHits.length) {
        return textItem.str;
      }

      return highlightOccurrencesInTextItem(
        textItem.str,
        textItem.itemIndex,
        relevantSearchHits,