Migrating from Syncfusion PDF Viewer

npm install @syncfusion/ej2-react-pdfviewer @syncfusion/ej2-tailwind3-theme
# Only to host PDFium yourself instead of using the CDN.
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib \
  public/assets/ej2-pdfviewer-lib

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

import { registerLicense } from '@syncfusion/ej2-base'
import {
  Annotation,
  FormDesigner,
  FormFields,
  Inject,
  Magnification,
  Navigation,
  PageOrganizer,
  PdfViewerComponent,
  TextSelection,
  ThumbnailView,
  Toolbar,
} from '@syncfusion/ej2-react-pdfviewer'

registerLicense('YOUR_LICENSE_KEY')

// The PDFium assets must match the installed version.
export const RESOURCE_URL =
  'https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2-pdfviewer-lib'

export function App() {
  return (
    <PdfViewerComponent
      id="container"
      documentPath="https://example.com/files/contract.pdf"
      // Standalone mode; server-backed integrations set serviceUrl instead.
      resourceUrl={RESOURCE_URL}
      style={{ height: '100vh' }}
    >
      <Inject
        services={[
          Toolbar,
          Magnification,
          Navigation,
          ThumbnailView,
          TextSelection,
          Annotation,
          FormFields,
          FormDesigner,
          PageOrganizer,
        ]}
      />
    </PdfViewerComponent>
  )
}

@sdk-pdf:registry=https://registry.sdk.pdf.net
//registry.sdk.pdf.net/:_authToken=${PDF_NET_REGISTRY_TOKEN}

npm install @sdk-pdf/react

import { useMemo } from 'react'
import { CONTENT_POLICY_PRESET, InteractionTool, PdfProviders } from '@sdk-pdf/react'
import '@sdk-pdf/react/style.css'

// Like interactionMode="TextSelection": native text selection for reading and copying.
const textSelectTool: InteractionTool = { type: 'textSelect' }
// Select, move, and resize blocks.
const selectTool: InteractionTool = { type: 'select' }

export function App({ canEdit }: { canEdit: boolean }) {
  // The PDF application re-renders whenever a PdfProviders prop changes identity.
  const config = useMemo(
    () => ({
      theme: { viewportPadding: 16 },
      // Both apply when the viewport first mounts; switch later with
      // useSetInteractionMode.
      initialInteractionTool: canEdit ? selectTool : textSelectTool,
      initialContentPolicy: canEdit
        ? CONTENT_POLICY_PRESET.PDF_EDITOR
        : CONTENT_POLICY_PRESET.PDF_VIEWER,
    }),
    [canEdit]
  )

  return (
    <PdfProviders {...config}>
      <DocumentLoader url="/files/contract.pdf" />
    </PdfProviders>
  )
}

import { useRef } from 'react'
import {
  Inject,
  Navigation,
  PdfViewerComponent,
  Toolbar,
} from '@syncfusion/ej2-react-pdfviewer'

function Viewer() {
  const viewerRef = useRef(null)

  async function openFromServer() {
    const response = await fetch('/api/documents/contract.pdf', {
      headers: { Authorization: `Bearer ${token}` },
    })
    const blob = await response.blob()
    // The second argument is the password; the popup asks for it when it's missing or
    // wrong.
    viewerRef.current?.load(URL.createObjectURL(blob), null)
  }

  return (
    <>
      <button onClick={openFromServer}>Open</button>
      <button onClick={() => viewerRef.current?.unload()}>Close</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        documentLoad={(args) => showDocumentUi(args.documentName)}
        documentLoadFailed={(args) => showError(args.documentName)}
        style={{ height: '100vh' }}
      >
        <Inject services={[Toolbar, Navigation]} />
      </PdfViewerComponent>
    </>
  )
}

import { useRef, useState } from 'react'
import { InvalidPasswordError, useLoadPdf } from '@sdk-pdf/react'

function DocumentLoader({ url }: { url: string }) {
  const [loadState, loadPdf] = useLoadPdf()
  const bytesRef = useRef<Uint8Array | null>(null)
  const [needsPassword, setNeedsPassword] = useState(false)
  const [loadError, setLoadError] = useState<unknown>()

  async function open(password?: string) {
    setLoadError(undefined)

    try {
      // Replaces documentPath: fetch the file once and keep the bytes for a password
      // retry.
      if (!bytesRef.current) {
        const response = await fetch(url)
        if (!response.ok)
          throw new Error(`The document request failed with ${response.status}`)
        bytesRef.current = new Uint8Array(await response.arrayBuffer())
      }

      // loadPdf reads from the buffer it receives for the document's lifetime, so pass a
      // copy.
      await loadPdf(bytesRef.current.slice(), { password })
      setNeedsPassword(false)
    } catch (error) {
      if (error instanceof InvalidPasswordError) {
        // Replaces the built-in password popup: ask, then call open(password) again.
        setNeedsPassword(true)
      } else {
        // Replaces documentLoadFailed and the built-in error message box.
        setLoadError(error)
      }
    }
  }

  if (needsPassword)
    return <PasswordPrompt onSubmit={(password) => void open(password)} />
  if (loadError) return <LoadError error={loadError} onRetry={() => void open()} />
  if (loadState.status === 'initial')
    return <button onClick={() => void open()}>Open</button>
  if (loadState.status === 'loading') return <p>Loading the document…</p>

  return <PdfApplication />
}

import { useResetPdf } from '@sdk-pdf/react'

function CloseDocumentButton() {
  const resetPdf = useResetPdf()

  // The load state returns to 'initial', and DocumentLoader shows its Open button again.
  return <button onClick={() => resetPdf()}>Close</button>
}

<PdfViewerComponent
  ref={viewerRef}
  resourceUrl={RESOURCE_URL}
  // Only these items, in this order; a custom item is an object with an id.
  toolbarSettings={{
    toolbarItems: [
      'OpenOption',
      'PageNavigationTool',
      'MagnificationTool',
      { id: 'fit_width', text: 'Fit to width', align: 'Center' },
      'DownloadOption',
    ],
  }}
  toolbarClick={(args) => {
    if (args.item.id === 'fit_width') viewerRef.current?.magnification.fitToWidth()
  }}
  enableNavigationToolbar={false}
  style={{ height: '640px' }}
>
  <Inject services={[Toolbar, Magnification, Navigation]} />
</PdfViewerComponent>

import { Config, useViewportAutoFitScale, Viewport } from '@sdk-pdf/react'

// A fuller theme than the one in App: pass it as PdfProviders' `theme` prop.
// Defined outside components, so its identity is stable.
export const theme: Config['theme'] = {
  viewportPadding: [24, 16],
  classNames: { scrollViewport: 'pdf-viewport', page: 'pdf-page' },
  styles: { scrollViewport: { '--selection-color': '#0b5cad' } as React.CSSProperties },
}

function PdfApplication() {
  // Replaces zoomMode="FitToWidth": fits once per loaded document.
  useViewportAutoFitScale('width')

  return (
    <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr', height: '100vh' }}>
      {/* Replaces the primary toolbar: the controls from the sections below. */}
      <header style={{ display: 'flex', gap: 8 }}>
        <PageNavigation />
        <ZoomControls />
        <HistoryControls />
        <SaveControls />
      </header>
      <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', minHeight: 0 }}>
        {/* Replaces the navigation panel. */}
        <ThumbnailsSidebar />
        {/* The viewport fills its parent, so the parent needs an explicit size. */}
        <div style={{ minHeight: 0 }}>
          <Viewport />
        </div>
      </div>
    </div>
  )
}

import { useRef, useState } from 'react'
import { Inject, Navigation, PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer'

function Viewer() {
  const viewerRef = useRef(null)
  const [pageNumber, setPageNumber] = useState(1)
  const [pageCount, setPageCount] = useState(0)

  return (
    <>
      <button onClick={() => viewerRef.current?.navigation.goToPreviousPage()}>
        Previous
      </button>
      <span>
        {pageNumber} of {pageCount}
      </span>
      <button onClick={() => viewerRef.current?.navigation.goToNextPage()}>Next</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        documentLoad={() => setPageCount(viewerRef.current.pageCount)}
        pageChange={(args) => setPageNumber(args.currentPageNumber)}
        style={{ height: '640px' }}
      >
        <Inject services={[Navigation]} />
      </PdfViewerComponent>
    </>
  )
}

import { useCurrentPageId, usePages, useScrollToPage } from '@sdk-pdf/react'

function PageNavigation() {
  const pages = usePages()
  // Replaces currentPageNumber and pageChange.
  const currentPageId = useCurrentPageId()
  const scrollToPage = useScrollToPage()

  // Until there is a current page, treat the first page as current.
  const index =
    currentPageId === undefined ? 0 : pages.findIndex((page) => page.id === currentPageId)

  // Replaces navigation.goToPage(pageNumber): resolve the 1-based number to an id first.
  function scrollToPageNumber(pageNumber: number) {
    const page = pages[pageNumber - 1]
    if (page) scrollToPage(page.id, { behavior: 'smooth' })
  }

  return (
    <div role="toolbar">
      <button disabled={index <= 0} onClick={() => scrollToPageNumber(1)}>
        First
      </button>
      {/* The current page number is index + 1, so the previous one is index. */}
      <button disabled={index <= 0} onClick={() => scrollToPageNumber(index)}>
        Previous
      </button>
      <span>
        {index === -1 ? '–' : index + 1} of {pages.length}
      </span>
      <button
        disabled={index === -1 || index >= pages.length - 1}
        onClick={() => scrollToPageNumber(index + 2)}
      >
        Next
      </button>
      <button
        disabled={index === -1 || index >= pages.length - 1}
        onClick={() => scrollToPageNumber(pages.length)}
      >
        Last
      </button>
    </div>
  )
}

<PdfViewerComponent
  ref={viewerRef}
  resourceUrl={RESOURCE_URL}
  // 'Default', 'FitToWidth', or 'FitToPage'.
  zoomMode="FitToWidth"
  minZoom={50}
  maxZoom={300}
  zoomChange={(args) => persistZoom(args.zoomValue)}
  style={{ height: '640px' }}
>
  <Inject services={[Toolbar, Magnification, Navigation]} />
</PdfViewerComponent>

viewerRef.current?.magnification.zoomTo(150)
viewerRef.current?.magnification.zoomIn()
viewerRef.current?.magnification.fitToPage()
viewerRef.current?.magnification.fitToWidth()

import { useEffect } from 'react'
import { useViewportFitScale, useViewportScale } from '@sdk-pdf/react'

function ZoomControls() {
  const [scale, setScale] = useViewportScale()
  const getFitScale = useViewportFitScale()

  // Replaces zoomChange: every scale change, whatever the source.
  useEffect(() => persistZoom(scale), [scale])

  function fitPage() {
    const { fitWidthScale, fitHeightScale } = getFitScale()
    // The smaller scale fits the pages in both directions, like fitToPage().
    setScale(Math.min(fitWidthScale, fitHeightScale))
  }

  return (
    <div role="toolbar">
      <button onClick={() => setScale(scale / 1.25)}>Zoom out</button>
      {/* The scale is a factor: 1 is 100%. */}
      <span>{Math.round(scale * 100)}%</span>
      <button onClick={() => setScale(scale * 1.25)}>Zoom in</button>
      {/* Call the getter inside the handler: the result reflects the viewport size at
         that moment. */}
      <button onClick={() => setScale(getFitScale().fitWidthScale)}>Fit width</button>
      <button onClick={fitPage}>Fit page</button>
    </div>
  )
}

;<>
  <button onClick={() => viewerRef.current?.thumbnailView.openThumbnailPane()}>
    Thumbnails
  </button>
  <PdfViewerComponent
    ref={viewerRef}
    resourceUrl={RESOURCE_URL}
    isThumbnailViewOpen={true}
    thumbnailClick={(args) => trackThumbnailClick(args.pageNumber)}
    style={{ height: '640px' }}
  >
    <Inject services={[Toolbar, Navigation, ThumbnailView]} />
  </PdfViewerComponent>
</>

import { useState } from 'react'
import { PageCanvas, useCurrentPageId, usePages, useScrollToPage } from '@sdk-pdf/react'

function ThumbnailsSidebar() {
  const pages = usePages()
  const currentPageId = useCurrentPageId()
  const scrollToPage = useScrollToPage()
  // Replaces isThumbnailViewOpen, openThumbnailPane(), and closeThumbnailPane().
  const [isOpen, setIsOpen] = useState(true)

  return (
    <aside>
      <button aria-expanded={isOpen} onClick={() => setIsOpen(!isOpen)}>
        Thumbnails
      </button>
      {isOpen && (
        <nav>
          {pages.map((page, index) => (
            <button
              key={page.id}
              aria-current={page.id === currentPageId ? 'page' : undefined}
              // Replaces thumbnailClick: run your own code before or after scrolling.
              onClick={() => scrollToPage(page.id)}
            >
              <PageCanvas
                pageId={page.id}
                className="thumbnail"
                role="img"
                aria-label={`Page ${index + 1}`}
              />
            </button>
          ))}
        </nav>
      )}
    </aside>
  )
}

const pageOrganizerSettings = {
  canDelete: true,
  canInsert: true,
  canRotate: true,
  canCopy: true,
  canRearrange: true,
  canImport: false,
}

function Viewer() {
  const viewerRef = useRef(null)

  return (
    <>
      <button onClick={() => viewerRef.current?.pageOrganizer.openPageOrganizer()}>
        Organize pages
      </button>
      {/* A new PDF with pages 1 and 2, as a Uint8Array. */}
      <button onClick={() => uploadExtract(viewerRef.current?.extractPages('1,2'))}>
        Extract
      </button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        pageOrganizerSettings={pageOrganizerSettings}
        pageOrganizerSaveAs={(args) => {
          // Upload the result instead of the default Save As download.
          args.cancel = true
          uploadBase64(args.fileName, args.downloadDocument)
        }}
        style={{ height: '640px' }}
      >
        <Inject services={[Toolbar, Navigation, ThumbnailView, PageOrganizer]} />
      </PdfViewerComponent>
    </>
  )
}

import {
  PageCanvas,
  usePageCreate,
  usePageDelete,
  usePageDuplicate,
  usePageMove,
  usePages,
  useSetPageRotation,
} from '@sdk-pdf/react'

function OrganizePagesPanel() {
  const pages = usePages()
  const createPage = usePageCreate()
  const deletePages = usePageDelete()
  const duplicatePage = usePageDuplicate()
  const { moveBefore, moveAfter } = usePageMove()
  const setPageRotation = useSetPageRotation()

  return (
    <ol>
      {pages.map((page, index) => (
        <li key={page.id}>
          <PageCanvas
            pageId={page.id}
            className="organizer-thumbnail"
            role="img"
            aria-label={`Page ${index + 1}`}
          />
          {/* Rotation is absolute: add to the current angle. -90 is normalized to
             270. */}
          <button onClick={() => setPageRotation(page.id, page.rotation - 90)}>
            Rotate left
          </button>
          <button onClick={() => setPageRotation(page.id, page.rotation + 90)}>
            Rotate right
          </button>
          <button
            disabled={index === 0}
            onClick={() => moveBefore(page.id, pages[index - 1].id)}
          >
            Move up
          </button>
          <button
            disabled={index === pages.length - 1}
            onClick={() => moveAfter(page.id, pages[index + 1].id)}
          >
            Move down
          </button>
          {/* Copy pages: the duplicate goes right after the source. */}
          <button onClick={() => void duplicatePage(page.id)}>Copy</button>
          {/* A blank page the size of this one as displayed, inserted after it. */}
          <button onClick={() => createPage(page.width, page.height, page.id)}>
            Insert blank page
          </button>
          <button disabled={pages.length <= 1} onClick={() => deletePages(page.id)}>
            Delete
          </button>
        </li>
      ))}
    </ol>
  )
}

function Viewer() {
  const viewerRef = useRef(null)

  function prefill() {
    const viewer = viewerRef.current
    const field = viewer
      .retrieveFormFields()
      .find((field) => field.name === 'customer.name')
    if (field) {
      field.value = 'Jane Doe'
      viewer.updateFormFieldsValue(field)
    }
  }

  return (
    <PdfViewerComponent
      ref={viewerRef}
      resourceUrl={RESOURCE_URL}
      documentLoad={prefill}
      formFieldFocusOut={(args) => autosave(args.fieldName, args.value)}
      enableFormFieldsValidation={true}
      validateFormFields={(args) => showMissingFields(args.nonFillableFields)}
      style={{ height: '100vh' }}
    >
      <Inject services={[Toolbar, Navigation, FormFields]} />
    </PdfViewerComponent>
  )
}

import {
  CheckboxWidget,
  TextWidget,
  useWidgets,
  useWidgetValue,
  Widget,
} from '@sdk-pdf/react'

// The counterpart of formFieldCollections, re-rendered as the widgets change.
function FormPanel({ savedValues }: { savedValues: Record<string, string> }) {
  const { widgets, isLoaded } = useWidgets()

  // The list is partial until every page containing widgets has been loaded.
  if (!isLoaded) return <p>Loading the form…</p>

  return (
    <form>
      {widgets.map((widget) => (
        <FormField
          key={widget.id}
          widget={widget}
          savedValue={savedValues[widget.fieldName]}
        />
      ))}
    </form>
  )
}

function FormField({ widget, savedValue }: { widget: Widget; savedValue?: string }) {
  switch (widget.widgetType) {
    case 'text':
      return <TextField widget={widget} savedValue={savedValue} />
    case 'checkbox':
      return <CheckboxField widget={widget} />
    default:
      return null
  }
}

function TextField({ widget, savedValue }: { widget: TextWidget; savedValue?: string }) {
  // Filling in the main view and undo update this value.
  const [value, setValue] = useWidgetValue(widget)

  return (
    <label>
      {widget.fieldName}
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
      {/* Replaces setting field.value and calling updateFormFieldsValue. */}
      {savedValue !== undefined && (
        <button type="button" onClick={() => setValue(savedValue)}>
          Fill in
        </button>
      )}
    </label>
  )
}

function CheckboxField({ widget }: { widget: CheckboxWidget }) {
  // isChecked becomes the boolean value.
  const [isChecked, setIsChecked] = useWidgetValue(widget)

  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={(event) => setIsChecked(event.currentTarget.checked)}
      />
      {widget.fieldName}
    </label>
  )
}

function Designer() {
  const viewerRef = useRef(null)

  function addNameField() {
    viewerRef.current?.formDesigner.addFormField('Textbox', {
      name: 'customer.name',
      pageNumber: 1,
      bounds: { X: 100, Y: 150, Width: 200, Height: 24 },
      maxLength: 40,
      isRequired: true,
    })
  }

  function lockForm() {
    const viewer = viewerRef.current
    for (const field of viewer.retrieveFormFields()) {
      viewer.formDesigner.updateFormField(field, { isReadOnly: true })
    }
  }

  function deleteField(name) {
    const viewer = viewerRef.current
    const field = viewer.retrieveFormFields().find((field) => field.name === name)
    if (field) viewer.formDesigner.deleteFormField(field)
  }

  return (
    <>
      <button onClick={addNameField}>Add name field</button>
      {/* The next click on a page places a text box. */}
      <button onClick={() => viewerRef.current?.formDesigner.setFormFieldMode('Textbox')}>
        Place text box
      </button>
      <button onClick={lockForm}>Lock form</button>
      <button onClick={() => deleteField('customer.name')}>Delete name field</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        designerMode={true}
        formFieldAdd={(args) => trackFieldAdded(args.pageIndex)}
        style={{ height: '100vh' }}
      >
        <Inject services={[Toolbar, Navigation, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </>
  )
}

import {
  useBlockDelete,
  useSetWidgetProps,
  useWidgetsCreate,
  useWidgetsGetter,
} from '@sdk-pdf/react'

function useFormDesigner() {
  const createWidgets = useWidgetsCreate()
  const setWidgetProps = useSetWidgetProps()
  const deleteBlocks = useBlockDelete()
  const getWidgets = useWidgetsGetter()

  // Replaces formDesigner.addFormField('Textbox', { name, bounds, maxLength }).
  async function addNameField(pageId: string) {
    const [widget] = await createWidgets({
      pageId,
      widgetType: 'text',
      // User-space units: the origin is at the bottom-left corner of the page.
      x: 72,
      y: 700,
      width: 180,
      height: 24,
      fieldName: 'customer.name',
      maxLength: 40,
    })
    return widget
  }

  // Replaces updateFormField(field, { isReadOnly: true }) for every field, in one call.
  async function lockForm() {
    const widgets = await getWidgets()
    // excludeFromHistory keeps undo from unlocking the submitted form.
    // The props apply at once; the promise resolves when the widgets show them.
    await setWidgetProps(
      widgets.map((widget) => widget.id),
      { isReadOnly: true },
      { excludeFromHistory: true }
    )
  }

  // Replaces deleteFormField(field): same-named widgets act as one field, so delete them
  // together.
  async function deleteField(fieldName: string) {
    const widgets = await getWidgets()
    const widgetIds = widgets
      .filter((widget) => widget.fieldName === fieldName)
      .map((widget) => widget.id)
    if (widgetIds.length > 0) deleteBlocks(widgetIds)
  }

  return { addNameField, lockForm, deleteField }
}

function Viewer({ isReadOnly }) {
  const viewerRef = useRef(null)

  return (
    <>
      <button onClick={() => (viewerRef.current.interactionMode = 'TextSelection')}>
        Select text
      </button>
      <button onClick={() => (viewerRef.current.interactionMode = 'Pan')}>Pan</button>
      <button onClick={() => viewerRef.current?.annotation.setAnnotationMode('FreeText')}>
        Free text
      </button>
      <button onClick={() => viewerRef.current?.annotation.setAnnotationMode('None')}>
        Stop
      </button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        interactionMode="TextSelection"
        enableAnnotation={!isReadOnly}
        enableFormDesigner={!isReadOnly}
        enablePageOrganizer={!isReadOnly}
        style={{ height: '100vh' }}
      >
        <Inject
          services={[
            Toolbar,
            Navigation,
            TextSelection,
            Annotation,
            FormFields,
            FormDesigner,
            PageOrganizer,
          ]}
        />
      </PdfViewerComponent>
    </>
  )
}

import {
  CONTENT_POLICY_PRESET,
  InteractionTool,
  useInteractionTool,
  useSetInteractionMode,
} from '@sdk-pdf/react'

const textSelectTool: InteractionTool = { type: 'textSelect' }
const selectTool: InteractionTool = { type: 'select' }
const addTextTool: InteractionTool = { type: 'addText' }

function ModeSwitch() {
  const interactionTool = useInteractionTool()
  const setInteractionMode = useSetInteractionMode()

  return (
    <div role="toolbar">
      {/* Like interactionMode="TextSelection" with the editing modules off. */}
      <button
        aria-pressed={interactionTool.type === 'textSelect'}
        onClick={() =>
          setInteractionMode(textSelectTool, CONTENT_POLICY_PRESET.PDF_VIEWER)
        }
      >
        Read
      </button>
      {/* Select, move, and resize blocks; page text is editable in place. */}
      <button
        aria-pressed={interactionTool.type === 'select'}
        onClick={() => setInteractionMode(selectTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Edit
      </button>
      {/* The nearest tool to free text: a new paragraph at the click position. */}
      <button
        aria-pressed={interactionTool.type === 'addText'}
        onClick={() => setInteractionMode(addTextTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Add text
      </button>
    </div>
  )
}

function ReviewTools() {
  const viewerRef = useRef(null)

  function addHighlight() {
    viewerRef.current?.annotation.addAnnotation('Highlight', {
      bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
      pageNumber: 1,
    })
  }

  function recolorMine() {
    const viewer = viewerRef.current
    for (const annotation of viewer.annotationCollection) {
      if (annotation.author === 'Reviewer') {
        annotation.color = '#ff0000'
        viewer.annotation.editAnnotation(annotation)
      }
    }
  }

  async function storeAnnotations() {
    // Annotations are stored apart from the PDF.
    await saveAnnotations(await viewerRef.current.exportAnnotationsAsObject())
  }

  return (
    <>
      <button onClick={addHighlight}>Highlight</button>
      <button onClick={recolorMine}>Recolor mine</button>
      <button onClick={storeAnnotations}>Store annotations</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        annotationSettings={{ author: 'Reviewer' }}
        annotationAdd={(args) => trackAnnotation(args.annotationType, args.pageIndex)}
        style={{ height: '100vh' }}
      >
        <Inject services={[Toolbar, Navigation, TextSelection, Annotation]} />
      </PdfViewerComponent>
    </>
  )
}

import {
  CONTENT_POLICY_PRESET,
  stageImage,
  useSelectionAnnotationProps,
  useSetInteractionMode,
} from '@sdk-pdf/react'

function AnnotationToolbar() {
  const { isApplicable, borderColor, borderWidth } = useSelectionAnnotationProps()
  const setInteractionMode = useSetInteractionMode()

  async function placeImage(file: File) {
    // Replaces an image stamp: the next click on a page places the image as a stamp
    // annotation.
    const image = await stageImage(file)
    // Placing images is editing, so set the policy with the tool. The width is in
    // user-space units.
    setInteractionMode(
      { type: 'addImage', image, width: 150 },
      CONTENT_POLICY_PRESET.PDF_EDITOR
    )
  }

  return (
    <div role="toolbar">
      <input
        type="file"
        accept="image/*"
        onChange={(event) => {
          const file = event.currentTarget.files?.[0]
          if (file) placeImage(file).catch(showError)
        }}
      />
      {/* Like the stroke color and thickness pickers, for the selected annotations. */}
      {isApplicable && (
        <>
          <input
            type="color"
            value={borderColor.value ?? '#000000'}
            onChange={(event) => borderColor.set(event.currentTarget.value)}
          />
          <input
            type="number"
            min={0}
            value={borderWidth.value ?? ''}
            onChange={(event) => borderWidth.set(Number(event.currentTarget.value))}
          />
        </>
      )}
    </div>
  )
}

function Viewer() {
  const viewerRef = useRef(null)

  useEffect(() => {
    function warnIfEdited(event) {
      if (viewerRef.current?.isDocumentEdited) event.preventDefault()
    }
    window.addEventListener('beforeunload', warnIfEdited)
    return () => window.removeEventListener('beforeunload', warnIfEdited)
  }, [])

  return (
    <>
      <button onClick={() => viewerRef.current?.undo()}>Undo</button>
      <button onClick={() => viewerRef.current?.redo()}>Redo</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        style={{ height: '100vh' }}
      >
        <Inject services={[Toolbar, Navigation, Annotation, FormFields]} />
      </PdfViewerComponent>
    </>
  )
}

import { useMemo } from 'react'
import { useHotkeys, useUndoRedo, useViewportEvent } from '@sdk-pdf/react'

function HistoryControls() {
  // canUndo and canRedo re-render the component as the history changes.
  const { undo, redo, canUndo, canRedo } = useUndoRedo()

  // The mapping must be memoized, or the listener re-installs on every render.
  useHotkeys(useMemo(() => ({ 'Mod-z': undo, 'Shift-Mod-z': redo }), [undo, redo]))

  // Events report what the user does in the viewport, such as moving blocks by dragging.
  useViewportEvent('blocksDragEnd', ({ blockIds }) => trackMove(blockIds.length))

  return (
    <div role="toolbar">
      <button disabled={!canUndo} onClick={undo}>
        Undo
      </button>
      <button disabled={!canRedo} onClick={redo}>
        Redo
      </button>
    </div>
  )
}

function Viewer() {
  const viewerRef = useRef(null)

  async function upload() {
    const blob = await viewerRef.current.saveAsBlob()
    const body = new FormData()
    body.append('file', blob, 'contract.pdf')
    await fetch('/api/documents', { method: 'POST', body })
  }

  return (
    <>
      <button onClick={upload}>Save</button>
      <button onClick={() => viewerRef.current?.download()}>Download</button>
      <PdfViewerComponent
        ref={viewerRef}
        resourceUrl={RESOURCE_URL}
        downloadStart={(args) => {
          if (!canDownload()) args.cancel = true
        }}
        style={{ height: '100vh' }}
      >
        <Inject services={[Toolbar, Navigation, Annotation, FormFields]} />
      </PdfViewerComponent>
    </>
  )
}

import { useEffect, useRef, useState } from 'react'
import {
  useDocumentRevision,
  useDocumentRevisionGetter,
  useDocumentSaving,
} from '@sdk-pdf/react'

function SaveControls() {
  const revision = useDocumentRevision()
  const getRevision = useDocumentRevisionGetter()
  // The revision on the server: the loaded document's revision until the first save.
  const [savedRevision, setSavedRevision] = useState(revision)
  // One save at a time, so an overlapping save can't mark a failed upload as saved.
  const isSavingRef = useRef(false)
  const { prepareDocument, downloadDocument } = useDocumentSaving()

  // Replaces isDocumentEdited: undoing back to the saved state clears it too.
  const hasUnsavedChanges = revision !== savedRevision

  // Warn before leaving the page with unsaved changes.
  useEffect(() => {
    if (!hasUnsavedChanges) return
    const warn = (event: BeforeUnloadEvent) => event.preventDefault()
    window.addEventListener('beforeunload', warn)
    return () => window.removeEventListener('beforeunload', warn)
  }, [hasUnsavedChanges])

  async function upload() {
    if (isSavingRef.current) return
    isSavingRef.current = true
    try {
      // Edits made after the save starts may be missing from the saved bytes, so only
      // this revision becomes saved.
      const startRevision = getRevision()
      // Replaces saveAsBlob(). The bytes go to fetch, so don't hand out the loaded
      // document's buffer.
      const bytes = await prepareDocument({ returnOriginalIfUnchanged: false })

      const body = new FormData()
      body.append(
        'file',
        new Blob([bytes as BlobPart], { type: 'application/pdf' }),
        'contract.pdf'
      )
      const response = await fetch('/api/documents', { method: 'POST', body })
      // A failed upload keeps the unsaved-changes indicator.
      if (!response.ok) return

      setSavedRevision(startRevision)
    } finally {
      isSavingRef.current = false
    }
  }

  return (
    <div role="toolbar">
      <button onClick={() => void upload()}>Save</button>
      <button onClick={() => void downloadDocument()}>Download</button>
      {hasUnsavedChanges && <span>Unsaved changes</span>}
    </div>
  )
}

<PdfViewerComponent
  ref={viewerRef}
  resourceUrl={RESOURCE_URL}
  // Show your own error UI instead of the built-in message box.
  showNotificationDialog={false}
  documentLoadFailed={(args) => showError(`Couldn't open ${args.documentName}`)}
  style={{ height: '100vh' }}
>
  <Inject services={[Toolbar, Navigation]} />
</PdfViewerComponent>

import { useEffect } from 'react'
import { InvalidPasswordError, logMessages, LogLevel, useLoadPdf } from '@sdk-pdf/react'

function useReportSdkWarnings() {
  useEffect(() => {
    // The SDK never prints to the console: subscribe, and unsubscribe on unmount.
    const unsubscribe = logMessages.on('message', (logMessage) => {
      if (logMessage.level >= LogLevel.Warning) {
        reportToMonitoring(logMessage.message, logMessage.data)
      }
    })
    return () => {
      unsubscribe()
    }
  }, [])
}

function useOpenBytes() {
  const [, loadPdf] = useLoadPdf()

  return async (data: Uint8Array) => {
    try {
      // Pass a copy and keep `data` for a password retry.
      await loadPdf(data.slice())
    } catch (error) {
      // Replaces documentLoadFailed for this load.
      if (error instanceof InvalidPasswordError) askForPassword()
      else showError(error)
    }
  }
}

<PdfViewerComponent
  ref={viewerRef}
  resourceUrl={RESOURCE_URL}
  enableLocalStorage={true}
  documentUnload={() => clearDocumentState()}
  style={{ height: '100vh' }}
>
  <Inject services={[Toolbar, Navigation]} />
</PdfViewerComponent>

import { usePages, useProgrammaticEditor } from '@sdk-pdf/react'

function useExtractPageText() {
  const pages = usePages()
  const { getParagraphsByPage } = useProgrammaticEditor()

  // Replaces extractText(pageIndex, ExtractTextOption.TextOnly): the index is zero-based
  // in both.
  return async (pageIndex: number) => {
    const page = pages[pageIndex]
    if (!page) return ''

    const paragraphs = await getParagraphsByPage(page.id)
    return paragraphs.map((paragraph) => paragraph.content).join('\n\n')
  }
}

import { useDocumentSearch } from '@sdk-pdf/react'

function SearchBar() {
  const {
    criteria,
    matches,
    activeMatchIndex,
    status,
    setSearchCriteria,
    goToNextMatch,
    goToPreviousMatch,
  } = useDocumentSearch()

  return (
    <div role="search">
      {/* Replaces searchText(text, isMatchCase); an empty query replaces
         cancelTextSearch(). */}
      <input
        value={criteria.query}
        onChange={(event) =>
          setSearchCriteria({ ...criteria, query: event.currentTarget.value })
        }
      />
      <label>
        <input
          type="checkbox"
          checked={criteria.isCaseSensitive}
          onChange={(event) =>
            setSearchCriteria({
              ...criteria,
              isCaseSensitive: event.currentTarget.checked,
            })
          }
        />
        Match case
      </label>
      <span>
        {status === 'searching'
          ? 'Searching…'
          : `${activeMatchIndex + 1} of ${matches.length}`}
      </span>
      {/* Replace searchPrevious() and searchNext(). */}
      <button disabled={matches.length === 0} onClick={goToPreviousMatch}>
        Previous
      </button>
      <button disabled={matches.length === 0} onClick={goToNextMatch}>
        Next
      </button>
    </div>
  )
}