Migrating from Nutrient Web SDK

npm install @nutrient-sdk/viewer

import { useEffect, useRef } from 'react'
import NutrientViewer from '@nutrient-sdk/viewer'

function App() {
  const containerRef = useRef(null)

  useEffect(() => {
    const container = containerRef.current

    // Make sure only one viewer is mounted in the container.
    NutrientViewer.unload(container)

    NutrientViewer.load({
      container,
      // Or baseUrl, pointing at the self-hosted assets.
      useCDN: true,
      licenseKey: 'YOUR_LICENSE_KEY',
      document: '/files/contract.pdf',
      initialViewState: new NutrientViewer.ViewState({ readOnly: true }),
    }).then((instance) => {
      // instance.viewState, instance.setViewState(), instance.addEventListener(), ...
    })

    return () => {
      NutrientViewer.unload(container)
    }
  }, [])

  // The container needs an explicit width and height before load() runs.
  return <div ref={containerRef} style={{ height: '100vh', width: '100vw' }} />
}

@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 null in Nutrient: select text and scroll.
const textSelectTool: InteractionTool = { type: 'textSelect' }

export function App({ readOnly }: { readOnly: boolean }) {
  // The PDF application re-renders whenever a PdfProviders prop changes identity.
  const config = useMemo(
    () => ({
      // Nutrient's default viewportPadding is 20 pixels on every side.
      theme: { viewportPadding: 20 },
      initialInteractionTool: textSelectTool,
      // Applied when the viewport first mounts; switch later with useSetInteractionMode.
      initialContentPolicy: readOnly
        ? CONTENT_POLICY_PRESET.PDF_PRINTER
        : CONTENT_POLICY_PRESET.PDF_VIEWER,
    }),
    [readOnly]
  )

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

const container = document.querySelector('#viewer')
let instance

async function openDocument(arrayBuffer) {
  // Remember the page, then unload the current viewer before loading the next document.
  const lastPageIndex = instance?.viewState.currentPageIndex ?? 0
  if (instance) NutrientViewer.unload(container)

  instance = await NutrientViewer.load({
    container,
    useCDN: true,
    licenseKey: 'YOUR_LICENSE_KEY',
    // load() takes ownership of the buffer and detaches it: pass a copy to reuse the
    // bytes.
    document: arrayBuffer.slice(0),
    // Resolve with a password to try it, or with null to show the built-in prompt.
    onPasswordRequired: async () => lookUpPassword(),
  })

  // UI state is per instance: restore the page yourself, within the new page count.
  const pageIndex = Math.min(lastPageIndex, instance.totalPageCount - 1)
  instance.setViewState((viewState) => viewState.set('currentPageIndex', pageIndex))
}

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

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

  async function open(password?: string) {
    setLoadError(undefined)
    try {
      if (!bytesRef.current) {
        // Replaces document: url. Headers, credentials, and an AbortSignal go on this
        // fetch.
        const response = await fetch(url)
        if (!response.ok) throw new Error(`Request failed: ${response.status}`)
        bytesRef.current = new Uint8Array(await response.arrayBuffer())
      }

      // loadPdf reads from the buffer it receives, so keep the original for a retry and
      // pass a copy.
      await loadPdf(bytesRef.current.slice(), { password })
      setIsPasswordNeeded(false)
    } catch (error) {
      // Replaces onPasswordRequired and the built-in password prompt.
      if (error instanceof InvalidPasswordError) setIsPasswordNeeded(true)
      else setLoadError(error)
    }
  }

  if (isPasswordNeeded)
    return <PasswordPrompt onSubmit={(password) => void open(password)} />
  if (loadError) return <p role="alert">The document can't be opened.</p>
  if (loadState.status === 'initial')
    return <button onClick={() => void open()}>Open</button>
  if (loadState.status === 'loading') return <p>Loading the document…</p>

  return <PdfApplication />
}

function CloseDocumentButton() {
  const resetPdf = useResetPdf()

  // Replaces NutrientViewer.unload(container): the load state returns to 'initial'.
  return <button onClick={() => resetPdf()}>Close</button>
}

NutrientViewer.load({
  container,
  useCDN: true,
  document: '/files/contract.pdf',
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems.filter((item) => item.type !== 'print'),
    { type: 'custom', id: 'share', title: 'Share', onPress: () => openShareDialog() },
  ],
  toolbarPlacement: NutrientViewer.ToolbarPlacement.TOP,
  theme: NutrientViewer.Theme.DARK,
  // The viewer renders in a shadow root, so your page CSS has to be passed in.
  styleSheets: ['/viewer-overrides.css'],
  initialViewState: new NutrientViewer.ViewState({
    sidebarMode: NutrientViewer.SidebarMode.THUMBNAILS,
    zoom: NutrientViewer.ZoomMode.FIT_TO_WIDTH,
  }),
})

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

// A fuller theme than the one in App: pass it as PdfProviders' theme, defined outside
// components.
export const theme: Config['theme'] = {
  viewportPadding: [20, 20],
  classNames: { scrollViewport: 'viewer', page: 'viewer-page' },
  styles: {
    scrollViewport: { '--selection-color': 'rebeccapurple' } as React.CSSProperties,
  },
}

function PdfApplication() {
  // Like zoom: ZoomMode.FIT_TO_WIDTH in initialViewState, applied once per loaded
  // document.
  useViewportAutoFitScale('width')

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      {/* Your main toolbar: the pager, zoom, tool, history, and save controls from this
         guide. */}
      <MainToolbar />
      <div style={{ display: 'flex', flex: 1, minHeight: 0 }}>
        {/* Like SidebarMode.THUMBNAILS: render it conditionally to toggle it. */}
        <ThumbnailsSidebar />
        {/* The viewport fills its parent, so the parent needs an explicit size. */}
        <div style={{ flex: 1, minWidth: 0 }}>
          <Viewport />
        </div>
      </div>
    </div>
  )
}

pageCountLabel.textContent = instance.totalPageCount

instance.addEventListener('viewState.currentPageIndex.change', (pageIndex) => {
  pageInput.value = pageIndex + 1
})

nextButton.onclick = () => instance.setViewState((viewState) => viewState.goToNextPage())

// An index out of range throws a NutrientViewer.Error.
pageInput.onchange = () =>
  instance.setViewState((viewState) =>
    viewState.set('currentPageIndex', Number(pageInput.value) - 1)
  )

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

function Pager() {
  const pages = usePages()
  // Like viewState.currentPageIndex, with a page id instead of an index.
  const currentPageId = useCurrentPageId()
  const scrollToPage = useScrollToPage()

  // There is no current page until the viewport shows one, so start on the first page.
  const currentIndex = Math.max(
    0,
    pages.findIndex((page) => page.id === currentPageId)
  )

  function goToPageNumber(pageNumber: number) {
    // Clamp the number instead of throwing on an index out of range.
    const page = pages[Math.min(Math.max(pageNumber, 1), pages.length) - 1]
    if (page) scrollToPage(page.id, { behavior: 'smooth' })
  }

  return (
    <div role="toolbar">
      <button disabled={currentIndex <= 0} onClick={() => goToPageNumber(currentIndex)}>
        Previous
      </button>
      <label>
        Page
        <input
          type="number"
          min={1}
          max={pages.length}
          value={currentIndex + 1}
          onChange={(event) => goToPageNumber(event.currentTarget.valueAsNumber)}
        />
        of {pages.length}
      </label>
      <button
        disabled={currentIndex >= pages.length - 1}
        onClick={() => goToPageNumber(currentIndex + 2)}
      >
        Next
      </button>
    </div>
  )
}

await instance.applyOperations([
  {
    type: 'addPage',
    afterPageIndex: 1,
    pageWidth: 612,
    pageHeight: 792,
    rotateBy: 0,
    backgroundColor: new NutrientViewer.Color({ r: 255, g: 255, b: 255 }),
  },
  { type: 'duplicatePages', pageIndexes: [0] },
  { type: 'movePages', pageIndexes: [5], beforePageIndex: 0 },
  // Adds to the page's current rotation.
  { type: 'rotatePages', pageIndexes: [0], rotateBy: 90 },
  { type: 'removePages', pageIndexes: [4] },
])

instance.addEventListener('document.change', (operations) => {
  trackPageOperations(operations)
})

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

function PageActions({ pageId }: { pageId: string }) {
  const pages = usePages()
  const createPage = usePageCreate()
  const duplicatePage = usePageDuplicate()
  const { moveAfter } = usePageMove()
  const setPageRotation = useSetPageRotation()
  const deletePages = usePageDelete()

  // Like the document.change listener: page commands emit no events, so track them where
  // you call them.
  function deletePage() {
    deletePages(pageId)
    track('pages-deleted', 1)
  }

  const index = pages.findIndex((page) => page.id === pageId)
  const page = pages[index]
  if (!page) return null

  return (
    <div role="toolbar">
      {/* Like addPage with afterPageIndex. A4 is roughly 595 × 842 user-space units. */}
      <button onClick={() => createPage(595, 842, pageId)}>Insert page after</button>
      {/* Like duplicatePages: the copy goes right after the source page. */}
      <button onClick={() => void duplicatePage(pageId)}>Duplicate</button>
      <button
        disabled={index === pages.length - 1}
        onClick={() => moveAfter(pageId, pages[index + 1]?.id)}
      >
        Move down
      </button>
      {/* rotatePages adds to the current angle; setPageRotation sets an absolute one. */}
      <button onClick={() => setPageRotation(pageId, page.rotation + 90)}>
        Rotate clockwise
      </button>
      <button disabled={pages.length <= 1} onClick={deletePage}>
        Delete
      </button>
    </div>
  )
}

NutrientViewer.load({
  // ...
  initialViewState: new NutrientViewer.ViewState({
    zoom: NutrientViewer.ZoomMode.FIT_TO_WIDTH,
  }),
})

zoomInButton.onclick = () => instance.setViewState((viewState) => viewState.zoomIn())
fitPageButton.onclick = () =>
  instance.setViewState((viewState) =>
    viewState.set('zoom', NutrientViewer.ZoomMode.FIT_TO_VIEWPORT)
  )

// The zoom can be a mode or a configuration: persist the resulting number.
instance.addEventListener('viewState.zoom.change', () =>
  persistZoom(instance.currentZoomLevel)
)

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

// Like zoomIn() and zoomOut(), and the default ViewState#zoomStep.
const ZOOM_STEP = 1.25

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

  // Like viewState.zoom.change: every scale change, from controls, gestures, or an auto
  // fit.
  useEffect(() => persistZoom(scale), [scale])

  function fitPage() {
    // Call the getter in the handler: the result reflects the viewport size at that
    // moment.
    const { fitWidthScale, fitHeightScale } = getFitScale()
    setScale(Math.min(fitWidthScale, fitHeightScale))
  }

  return (
    <div role="toolbar">
      <button onClick={() => setScale(scale / ZOOM_STEP)}>−</button>
      <span>{Math.round(scale * 100)}%</span>
      <button onClick={() => setScale(scale * ZOOM_STEP)}>+</button>
      <button onClick={() => setScale(getFitScale().fitWidthScale)}>Fit width</button>
      <button onClick={fitPage}>Fit page</button>
    </div>
  )
}

instance.setViewState((viewState) =>
  viewState.set('sidebarMode', NutrientViewer.SidebarMode.THUMBNAILS)
)

const src = await instance.renderPageAsImageURL(
  { width: 200 * window.devicePixelRatio },
  pageIndex
)
thumbnailImage.src = src
// Later, once the image is gone:
URL.revokeObjectURL(src)

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

function ThumbnailsSidebar() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()
  const [selectedPageId, setSelectedPageId] = useState<string>()

  return (
    <nav style={{ width: 200, overflowY: 'auto' }}>
      {pages.map((page, index) => (
        <button
          key={page.id}
          aria-current={page.id === selectedPageId}
          onClick={() => {
            setSelectedPageId(page.id)
            scrollToPage(page.id)
          }}
        >
          {/* The render resolution follows the canvas CSS size: style .thumbnail to the
             width you need. */}
          <PageCanvas
            pageId={page.id}
            className="thumbnail"
            role="img"
            aria-label={`Page ${index + 1}`}
          />
        </button>
      ))}
      {selectedPageId && <PageActions pageId={selectedPageId} />}
    </nav>
  )
}

await instance.getFormFields()
const values = instance.getFormFieldValues()
// { 'customer.name': 'Jane Doe', newsletter: ['Yes'], plan: 'pro' }

await instance.setFormFieldValues({ 'customer.name': 'Jane Doe', newsletter: ['Yes'] })

instance.addEventListener('formFieldValues.update', () => {
  autosave(instance.getFormFieldValues())
})

const widget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: 'customer.name',
  // Page coordinates: the origin is the top-left corner of the page.
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 72,
    top: 72,
    width: 180,
    height: 24,
  }),
})
const formField = new NutrientViewer.FormFields.TextFormField({
  name: 'customer.name',
  annotationIds: NutrientViewer.Immutable.List([widget.id]),
})

await instance.create([widget, formField])

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

// Reads and writes one field by name, for a text field or a single checkbox.
function FieldByName({ fieldName }: { fieldName: string }) {
  const { widgets } = useWidgets()
  // Same-named widgets show and synchronize one value, so binding one of them binds the
  // field.
  const widget = widgets.find((widget) => widget.fieldName === fieldName)
  if (!widget) return null

  switch (widget.widgetType) {
    case 'text':
      return <TextInput widget={widget} />
    case 'checkbox':
      return <CheckboxInput widget={widget} />
    default:
      return null
  }
}

function TextInput({ widget }: { widget: TextWidget }) {
  // Like a useState backed by the document: filling in the main view and undo update it.
  const [value, setValue] = useWidgetValue(widget)

  return (
    <label>
      {widget.fieldName}
      <input value={value} onChange={(event) => setValue(event.currentTarget.value)} />
    </label>
  )
}

function CheckboxInput({ widget }: { widget: CheckboxWidget }) {
  // A boolean, where getFormFieldValues reports an array of export values.
  const [isChecked, setIsChecked] = useWidgetValue(widget)

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

function useAddNameField() {
  const createWidgets = useWidgetsCreate()

  return async (pageId: string, pageHeight: number) => {
    // One call creates the widget and its field: there is no separate form field record.
    const [widget] = await createWidgets({
      pageId,
      widgetType: 'text',
      // The Rect above, measured from the bottom-left corner of an unrotated page.
      x: 72,
      y: pageHeight - 72 - 24,
      width: 180,
      height: 24,
      fieldName: 'customer.name',
    })
    return widget
  }
}

// The free text annotation tool; null returns to text selection.
instance.setViewState((viewState) =>
  viewState.set('interactionMode', NutrientViewer.InteractionMode.TEXT)
)
instance.setViewState((viewState) => viewState.set('interactionMode', null))

instance.setViewState((viewState) => viewState.set('readOnly', true))

NutrientViewer.load({
  // ...
  isEditableAnnotation: (annotation) =>
    !(annotation instanceof NutrientViewer.Annotations.InkAnnotation),
})

instance.addEventListener('viewState.change', (viewState) => {
  highlightActiveTool(viewState.interactionMode)
})

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

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

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

  async function placeImage(file: File) {
    const image = await stageImage(file)
    // Like the image toolbar item: the next click places the image as a stamp annotation.
    setInteractionMode({ type: 'addImage', image }, CONTENT_POLICY_PRESET.PDF_EDITOR)
  }

  return (
    <div role="toolbar">
      {/* Like readOnly: true. PDF_VIEWER instead keeps widgets fillable. textSelect is
         used only here, so it identifies the mode. */}
      <button
        aria-pressed={interactionTool.type === 'textSelect'}
        onClick={() =>
          setInteractionMode(textSelectTool, CONTENT_POLICY_PRESET.PDF_PRINTER)
        }
      >
        Read only
      </button>
      {/* Select, move, and resize blocks, with editable text. */}
      <button
        aria-pressed={interactionTool.type === 'select'}
        onClick={() => setInteractionMode(selectTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Edit
      </button>
      <button
        aria-pressed={interactionTool.type === 'addText'}
        onClick={() => setInteractionMode(addTextTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Add text
      </button>
      <input
        type="file"
        accept="image/*"
        onChange={(event) => {
          const file = event.currentTarget.files?.[0]
          if (file) placeImage(file).catch(showError)
        }}
      />
    </div>
  )
}

// The UI session: the content editor mode.
instance.setViewState((viewState) =>
  viewState.set('interactionMode', NutrientViewer.InteractionMode.CONTENT_EDITOR)
)
// Later, from your own Done button: saves the changes and exits content editing mode.
await instance.saveContentEditingSession()

// Or, without the UI. Throws while another session is in progress.
const session = await instance.beginContentEditingSession()
const [firstBlock] = await session.getTextBlocks(0)
await session.updateTextBlocks([
  { id: firstBlock.id, text: 'Revised wording', maxWidth: 300 },
])
// Applies the staged changes and closes the session; discard() drops them.
await session.commit()

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

function useReplaceFirstParagraph() {
  const { getParagraphsByPage, getParagraphEditor } = useProgrammaticEditor()

  return async (pageId: string, text: string) => {
    // Like session.getTextBlocks(pageIndex): the page's paragraphs in content order.
    const [firstParagraph] = await getParagraphsByPage(pageId)
    // The paragraph may be gone: deleted by an undo since it was read.
    const editor = firstParagraph && getParagraphEditor(firstParagraph.id)
    if (!editor) return false

    // No staging and no commit: the edit applies at once.
    editor.selectAll()
    editor.deleteAll()
    editor.insertText(text)
    return true
  }
}

const annotation = new NutrientViewer.Annotations.RectangleAnnotation({
  pageIndex: 0,
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 200,
    top: 150,
    width: 250,
    height: 75,
  }),
})
const [created] = await instance.create(annotation)
await instance.update(created.set('noPrint', true))
await instance.delete(created.id)

instance.addEventListener('annotations.change', () => refreshAnnotationsPanel())

// A diff on top of the original PDF.
const instantJSON = await instance.exportInstantJSON()
NutrientViewer.load({ ...configuration, instantJSON })

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

function AnnotationStyleBar() {
  const { isApplicable, borderColor, borderWidth } = useSelectionAnnotationProps()

  // Nothing with a border is selected.
  if (!isApplicable) return null

  return (
    <div role="toolbar">
      {/* An empty value means the selected annotations disagree. */}
      <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>
  )
}

NutrientViewer.load({
  // ...
  enableHistory: true,
  toolbarItems: [
    ...NutrientViewer.defaultToolbarItems,
    { type: 'undo' },
    { type: 'redo' },
  ],
})

undoButton.onclick = () => {
  if (instance.history.canUndo()) instance.history.undo()
}
redoButton.onclick = () => {
  if (instance.history.canRedo()) instance.history.redo()
}

instance.addEventListener('history.undo', ({ before, after }) => trackUndo(before, after))

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

function HistoryButtons() {
  const { undo: undoChange, redo: redoChange, canUndo, canRedo } = useUndoRedo()

  // Like history.undo and history.redo listeners: undo and redo emit no events, so track
  // them where you call them.
  const { undo, redo } = useMemo(
    () => ({
      undo: () => {
        undoChange()
        trackHistory('undo')
      },
      redo: () => {
        redoChange()
        trackHistory('redo')
      },
    }),
    [undoChange, redoChange]
  )

  // Nutrient handles Ctrl/Cmd+Z itself; here you map the keys. The mapping must be
  // memoized.
  useHotkeys(useMemo(() => ({ 'Mod-z': undo, 'Shift-Mod-z': redo }), [undo, redo]))

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

NutrientViewer.load({
  ...configuration,
  autoSaveMode: NutrientViewer.AutoSaveMode.DISABLED,
})

instance.addEventListener('document.saveStateChange', ({ hasUnsavedChanges }) => {
  unsavedBadge.hidden = !hasUnsavedChanges
})

async function upload() {
  await instance.save()
  const arrayBuffer = await instance.exportPDF()

  const body = new FormData()
  body.append('file', new Blob([arrayBuffer], { type: 'application/pdf' }))
  await fetch('/upload', { method: 'POST', body })
}

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 document.saveStateChange; undoing back to the saved state clears it too.
  const hasUnsavedChanges = revision !== savedRevision

  // Warn before the tab closes with changes that aren't uploaded.
  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()
      // The bytes go to fetch, so don't hand out the loaded document's own buffer.
      const bytes = await prepareDocument({ returnOriginalIfUnchanged: false })

      const body = new FormData()
      body.append('file', new Blob([bytes as BlobPart], { type: 'application/pdf' }))
      const response = await fetch('/upload', { method: 'POST', body })
      if (!response.ok) throw new Error(`Upload failed: ${response.status}`)

      // Like a completed save(): later checks report changes relative to this revision.
      setSavedRevision(startRevision)
    } finally {
      isSavingRef.current = false
    }
  }

  return (
    <div role="toolbar">
      <button onClick={() => upload().catch(showError)}>Save</button>
      {/* Replaces the export-pdf toolbar item. */}
      <button onClick={() => void downloadDocument()}>Download</button>
      {hasUnsavedChanges && <span>Unsaved changes</span>}
    </div>
  )
}

try {
  instance = await NutrientViewer.load({
    ...configuration,
    // Tagged console logs for each initialization stage.
    logLevel: NutrientViewer.LogLevel.DEBUG,
  })
} catch (error) {
  if (error.message.includes('password')) askForPassword()
  else showError(error.message)
}

try {
  await instance.save()
} catch (error) {
  if (error instanceof NutrientViewer.SaveError) reportFailedChanges(error.reason)
}

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

function useSdkLogging() {
  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.reason, logMessage.message, logMessage.data)
      }
    })
    return () => {
      unsubscribe()
    }
  }, [])
}

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

  return async (data: Uint8Array, password?: string) => {
    try {
      // Pass a copy and keep `data` for a password retry.
      await loadPdf(data.slice(), { password })
    } catch (error) {
      // instanceof replaces matching on error.message.
      if (error instanceof InvalidPasswordError) askForPassword()
      else showError(error)
    }
  }
}

useEffect(() => {
  const container = containerRef.current
  const controller = new AbortController()
  let instance

  const handleZoom = () => persistZoom(instance.currentZoomLevel)

  NutrientViewer.load({ ...configuration, container, signal: controller.signal })
    .then((loaded) => {
      instance = loaded
      instance.addEventListener('viewState.zoom.change', handleZoom)
    })
    .catch((error) => {
      // An aborted load rejects with an AbortError.
      if (error.name !== 'AbortError') showError(error)
    })

  return () => {
    controller.abort()
    instance?.removeEventListener('viewState.zoom.change', handleZoom)
    NutrientViewer.unload(container)
  }
}, [])