Migrating from Foxit PDF SDK for Web

npm install @foxitsoftware/foxit-pdf-sdk-for-web-library

// webpack.config.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          // Engine modules, workers, add-ons, locales, and stamps, served at /foxit-lib.
          from: path.resolve(
            'node_modules/@foxitsoftware/foxit-pdf-sdk-for-web-library/lib'
          ),
          to: 'foxit-lib',
          force: true,
        },
      ],
    }),
  ],
  devServer: {
    headers: { 'Service-Worker-Allowed': '/' },
  },
}

import { useEffect, useRef } from 'react'
import * as UIExtension from '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.full.js'
import '@foxitsoftware/foxit-pdf-sdk-for-web-library/lib/UIExtension.css'
import { licenseKey, licenseSN } from './license-key'

function PDFViewer() {
  const elementRef = useRef(null)

  useEffect(() => {
    const pdfui = new UIExtension.PDFUI({
      viewerOptions: {
        libPath: '/foxit-lib',
        jr: { licenseSN, licenseKey },
      },
      renderTo: elementRef.current,
      appearance: UIExtension.appearances.adaptive,
      addons: UIExtension.PDFViewCtrl.DeviceInfo.isMobile
        ? '/foxit-lib/uix-addons/allInOne.mobile.js'
        : '/foxit-lib/uix-addons/allInOne.js',
    })

    return () => {
      // Asynchronous: closes the document and removes the UI's DOM.
      pdfui.destroy()
    }
  }, [])

  return <div ref={elementRef} style={{ height: '100vh' }} />
}

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

npm install @sdk-pdf/react

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

// Your app's permission, in place of customs.getDocPermissions: editing controls render
// only when it's true.
export const CanEditContext = createContext(false)

const readerTool: InteractionTool = { type: 'textSelect' }
const editorTool: 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 },
      // Applied when the viewport first mounts.
      initialInteractionTool: canEdit ? editorTool : readerTool,
      initialContentPolicy: canEdit
        ? CONTENT_POLICY_PRESET.PDF_EDITOR
        : CONTENT_POLICY_PRESET.PDF_VIEWER,
    }),
    [canEdit]
  )

  return (
    <CanEditContext.Provider value={canEdit}>
      <PdfProviders {...config}>
        <DocumentLoader url="/api/files/contract.pdf" />
      </PdfProviders>
    </CanEditContext.Provider>
  )
}

await pdfui.openPDFByFile(file, {
  fileName: file.name,
  password: enteredPassword,
})

// Large remote files, read in ranges; the server must support Range requests and CORS.
await pdfui.openPDFByHttpRangeRequest(
  {
    range: {
      url: '/api/files/contract.pdf',
      headers: { Authorization: `Bearer ${token}` },
    },
  },
  { fileName: 'contract.pdf' }
)

// A closeDocBefore callback that returns false cancels both an explicit close and opening
// another file.
await pdfui.close()

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

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

  // Like opening another file in Foxit: a new URL closes the current document. Skips the
  // first mount.
  useEffect(() => {
    if (openedUrlRef.current === url) return
    openedUrlRef.current = url
    bytesRef.current = null
    setIsAskingForPassword(false)
    setLoadError(undefined)
    resetPdf()
    // resetPdf stays out of the dependencies: only a URL change closes the document.
  }, [url])

  async function open(password?: string) {
    setLoadError(undefined)
    try {
      if (!bytesRef.current) {
        // The whole file: there is no range loading. Add your request headers here.
        const response = await fetch(url, { credentials: 'include' })
        if (!response.ok)
          throw new Error(`Download failed with status ${response.status}`)
        const bytes = new Uint8Array(await response.arrayBuffer())
        // The URL changed during the download: drop this response.
        if (openedUrlRef.current !== url) return
        bytesRef.current = bytes
      }

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

  if (loadError !== undefined)
    return <LoadErrorMessage error={loadError} onRetry={() => void open()} />
  if (isAskingForPassword)
    return <PasswordDialog onSubmit={(password: string) => void open(password)} />
  if (loadState.status === 'initial')
    return <button onClick={() => void open()}>Open</button>
  if (loadState.status === 'loading') return <p>Loading the document…</p>

  return <PdfApplication />
}

const FRAGMENT_ACTION = UIExtension.UIConsts.FRAGMENT_ACTION

const pdfui = new UIExtension.PDFUI({
  viewerOptions: { libPath: '/foxit-lib', jr: { licenseSN, licenseKey } },
  renderTo: elementRef.current,
  appearance: UIExtension.appearances.adaptive.extend({
    getDefaultFragments() {
      // Remove the Delete item from the thumbnail context menu.
      return [
        { target: 'contextmenu-item-thumbnail-delete', action: FRAGMENT_ACTION.REMOVE },
      ]
    },
  }),
  addons: '/foxit-lib/uix-addons/allInOne.js',
})

// Hide a component and keep the SDK from showing it again.
const applyRedactionItem = await pdfui.getComponentByName('fv--contextmenu-item-apply')
applyRedactionItem.hide()
applyRedactionItem.keepState()

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: {
      '--widget-overlay-background': 'rgba(37, 99, 235, 0.08)',
    } as React.CSSProperties,
  },
}

function PdfApplication() {
  // Foxit opens documents at fit width on desktop; this fits once per loaded document.
  useViewportAutoFitScale('width')

  return (
    <div style={{ display: 'grid', gridTemplateRows: 'auto 1fr', height: '100vh' }}>
      {/* Your ribbon: the navigation, zoom, tool, and history controls from this
         guide. */}
      <Toolbar />
      <div style={{ display: 'grid', gridTemplateColumns: '200px 1fr', minHeight: 0 }}>
        <ThumbnailsSidebar />
        {/* The viewport fills its parent, so the parent needs an explicit size. */}
        <div style={{ minHeight: 0 }}>
          <Viewport />
        </div>
      </div>
    </div>
  )
}

const pdfViewer = await pdfui.getPDFViewer()
const { ViewerEvents } = UIExtension.PDFViewCtrl.constants

pdfui.addViewerEventListener(ViewerEvents.openFileSuccess, (pdfDoc) => {
  pageCountLabel.textContent = pdfDoc.getPageCount()
})

pdfui.addViewerEventListener(ViewerEvents.pageNumberChange, (pageNumber) => {
  pageInput.value = pageNumber
})

pageInput.onchange = () => {
  // Page indexes start at 0.
  pdfViewer.getPDFDocRender().goToPage(Number(pageInput.value) - 1)
}

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

function PageNumberInput() {
  const pages = usePages()
  // Replaces getCurrentPageIndex() and the pageNumberChange listener.
  const currentPageId = useCurrentPageId()
  const scrollToPage = useScrollToPage()
  // What the user is typing; undefined shows the current page.
  const [draft, setDraft] = useState<string>()

  // While there is no current page yet, show the first page.
  const currentIndex = Math.max(
    0,
    pages.findIndex((page) => page.id === currentPageId)
  )

  function goToDraft() {
    const page = pages[Number(draft) - 1]
    if (page) scrollToPage(page.id, { behavior: 'smooth' })
    setDraft(undefined)
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault()
        goToDraft()
      }}
    >
      <label>
        Page
        <input
          inputMode="numeric"
          value={draft ?? String(currentIndex + 1)}
          onChange={(event) => setDraft(event.currentTarget.value)}
          onBlur={goToDraft}
        />
        of {pages.length}
      </label>
    </form>
  )
}

const pdfDoc = pdfViewer.getCurrentPDFDoc()

// An A4 page before page 1.
await pdfDoc.insertPage(0, 595, 842)
await pdfDoc.removePages([[1, 3]])
await pdfDoc.movePagesTo([[0]], 2)
// Sets the rotation; the Rotation enum runs from 0 to 3 for 0° to 270°.
await pdfDoc.rotatePages([[0, 2]], 1)

// Copying a page means extracting it and inserting the extracted PDF.
const extracted = await pdfDoc.extractPages([[0]])
await pdfDoc.insertPages({
  destIndex: 1,
  file: new Blob(extracted, { type: 'application/pdf' }),
  password: '',
  startIndex: 0,
  endIndex: 0,
})

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

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

  const page = pages.find((page) => page.id === pageId)
  // Page operations are editing: users who may not edit don't get the menu.
  if (!page || !canEdit) return null

  return (
    <div role="menu">
      {/* The rotation is absolute: add to the current angle. -90 is normalized to
         270. */}
      <button role="menuitem" onClick={() => setPageRotation(pageId, page.rotation - 90)}>
        Rotate left
      </button>
      <button role="menuitem" onClick={() => setPageRotation(pageId, page.rotation + 90)}>
        Rotate right
      </button>
      {/* A4 is roughly 595 × 842 user-space units; the new page goes after this one. */}
      <button role="menuitem" onClick={() => createPage(595, 842, pageId)}>
        Insert blank page
      </button>
      <button role="menuitem" onClick={() => void duplicatePage(pageId)}>
        Duplicate
      </button>
      {/* Without a target page, moveAfter moves the page to the end. */}
      <button role="menuitem" onClick={() => moveAfter(pageId)}>
        Move to end
      </button>
      <button
        role="menuitem"
        disabled={pages.length <= 1}
        onClick={() => deletePages(pageId)}
      >
        Delete page
      </button>
    </div>
  )
}

const pdfViewer = await pdfui.getPDFViewer()

await pdfViewer.zoomTo('fitWidth')
await pdfViewer.zoomTo(1.25)

// A number, or the active fit mode.
const scale = await pdfViewer.getPDFDocRender().getScale()

pdfui.addViewerEventListener(
  UIExtension.PDFViewCtrl.constants.ViewerEvents.zoomToSuccess,
  (newScale) => {
    saveZoomPreference(newScale)
  }
)

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

const zoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 4]

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

  // Every scale change, whatever the source: controls, gestures, or an auto fit.
  useEffect(() => saveZoomPreference(scale), [scale])

  function fitPage() {
    const { fitWidthScale, fitHeightScale } = getFitScale()
    // The smaller scale fits whole pages, like zoomTo('fitHeight').
    setScale(Math.min(fitWidthScale, fitHeightScale))
  }

  return (
    <div role="toolbar">
      <select
        value={scale}
        onChange={(event) => setScale(Number(event.currentTarget.value))}
      >
        {!zoomSteps.includes(scale) && (
          <option value={scale}>{Math.round(scale * 100)}%</option>
        )}
        {zoomSteps.map((step) => (
          <option key={step} value={step}>
            {step * 100}%
          </option>
        ))}
      </select>
      {/* 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>
  )
}

const pdfViewer = await pdfui.getPDFViewer()
const pdfDoc = pdfViewer.getCurrentPDFDoc()

// Fits the page into a 160 × 200 box and resolves with a canvas.
const canvas = await pdfDoc.loadThumbnail({
  pageIndex: 0,
  width: 160,
  height: 200,
  type: 'canvas',
})
thumbnailContainer.appendChild(canvas)

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

function ThumbnailsSidebar() {
  const canEdit = useContext(CanEditContext)
  const pages = usePages()
  const scrollToPage = useScrollToPage()
  const { moveBefore } = usePageMove()
  const [draggedPageId, setDraggedPageId] = useState<string>()

  return (
    <nav aria-label="Pages">
      {pages.map((page, index) => (
        <button
          key={page.id}
          // Reordering is editing: only users who may edit can drag.
          draggable={canEdit}
          onDragStart={(event) => {
            event.dataTransfer.setData('text/plain', page.id)
            setDraggedPageId(page.id)
          }}
          onDragOver={(event) => {
            // Accept only thumbnails from this list, not files or text.
            if (draggedPageId) event.preventDefault()
          }}
          onDrop={() => {
            // Drop a page before this one, like rearranging in the thumbnail panel.
            if (draggedPageId && draggedPageId !== page.id) {
              try {
                moveBefore(draggedPageId, page.id)
              } catch {
                // One of the pages no longer exists: InvalidInputError, and nothing
                // moved.
              }
            }
            setDraggedPageId(undefined)
          }}
          onClick={() => 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>
      ))}
    </nav>
  )
}

const pdfViewer = await pdfui.getPDFViewer()
const form = pdfViewer.getCurrentPDFDoc().getPDFForm()

const field = await form.getField('customer.name')
if (field) {
  const currentValue = await field.getValue()
  await field.setValue('Jane Doe')
}

// A date field: the rectangle is left, bottom, right, and top in PDF coordinates.
await form.createDatetime({
  pdfRect: { left: 72, bottom: 700, right: 192, top: 724 },
  pageIndex: 0,
  rotate: 0,
  timeformat: 'yyyy-mm-dd',
})

// Form data as a file: xfdf, fdf, csv, json, text, or xml.
const formData = await form.exportToFile(
  UIExtension.PDFViewCtrl.commons.FileFormat.json,
  {}
)

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

function isTextWidget(widget: Widget): widget is TextWidget {
  return widget.widgetType === 'text'
}

// The counterpart of getField(fieldName) for a text field, as a bound input.
function NamedTextField({ fieldName }: { fieldName: string }) {
  const { widgets } = useWidgets()
  const widget = widgets
    .filter(isTextWidget)
    .find((widget) => widget.fieldName === fieldName)

  return widget ? <BoundTextInput widget={widget} /> : null
}

function BoundTextInput({ widget }: { widget: TextWidget }) {
  // Replaces getValue and setValue: 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 useAddDateField() {
  const createWidgets = useWidgetsCreate()

  // Replaces form.createDatetime.
  return async (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: 120,
      height: 24,
      fieldName: 'contract.date',
      format: { type: FormatType.DateTime, format: 'yyyy-mm-dd' },
    })
    return widget
  }
}

const pdfDoc = pdfViewer.getCurrentPDFDoc()
const page = await pdfDoc.getPageByIndex(0)

const annots = await page.getAnnots()

// addAnnot may also add an associated popup, so it resolves with an array.
const [square] = await page.addAnnot({
  type: 'square',
  rect: { left: 100, bottom: 500, right: 200, top: 550 },
  color: 0xff0000,
})
await page.removeAnnotById(square.getUniqueID())

// null exports every annotation.
const annotsJson = await pdfDoc.exportAnnotsToJSON(null)

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

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

  // The selection holds no annotation with a border.
  if (!isApplicable) return null

  return (
    <div role="toolbar">
      <input
        type="color"
        value={borderColor.value ?? '#000000'}
        onChange={(event) => borderColor.set(event.currentTarget.value)}
      />
      <input
        type="number"
        min={0}
        // An empty value means the selected annotations have different widths.
        value={borderWidth.value ?? ''}
        onChange={(event) => borderWidth.set(Number(event.currentTarget.value))}
      />
    </div>
  )
}

const { STATE_HANDLER_NAMES } = UIExtension.PDFViewCtrl.constants
const stateHandlerManager = await pdfui.getStateHandlerManager()

stateHandlerManager.switchTo(STATE_HANDLER_NAMES.STATE_HANDLER_HAND)
stateHandlerManager.switchTo(STATE_HANDLER_NAMES.STATE_HANDLER_SELECT_ANNOTATION)
stateHandlerManager.switchTo(STATE_HANDLER_NAMES.STATE_HANDLER_CREATE_STAMP, {
  category: 'Static',
  name: 'Void',
})

// Read-only viewing: 0 means read-only, and the default -1 grants all permissions.
const readOnlyViewer = new UIExtension.PDFUI({
  viewerOptions: {
    libPath: '/foxit-lib',
    jr: { licenseSN, licenseKey },
    customs: { getDocPermissions: () => 0 },
  },
  renderTo: elementRef.current,
})

import { useContext } from 'react'
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 ToolGroup() {
  const canEdit = useContext(CanEditContext)
  const interactionTool = useInteractionTool()
  const setInteractionMode = useSetInteractionMode()

  async function placeImage(file: File) {
    const image = await stageImage(file)
    // The next click on a page places the image as a stamp annotation.
    // Placing images is editing, so switch the policy with the tool.
    setInteractionMode({ type: 'addImage', image }, CONTENT_POLICY_PRESET.PDF_EDITOR)
  }

  return (
    <div role="toolbar">
      {/* Like getDocPermissions returning 0, with fillable forms and links. */}
      <button
        aria-pressed={interactionTool.type === 'textSelect'}
        onClick={() =>
          setInteractionMode(textSelectTool, CONTENT_POLICY_PRESET.PDF_VIEWER)
        }
      >
        Select text
      </button>
      {/* The editing tools switch to PDF_EDITOR, so only users who may edit get them. */}
      {canEdit && (
        <>
          <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/*"
            aria-label="Add image"
            onChange={(event) => {
              const file = event.currentTarget.files?.[0]
              if (file) placeImage(file).catch(showError)
            }}
          />
        </>
      )}
    </div>
  )
}

const undoRedoAddon = await pdfui.getAddonInstance('UndoRedoAddon')

undoButton.onclick = () => undoRedoAddon.undo()
redoButton.onclick = () => undoRedoAddon.redo()
revertButton.onclick = () => undoRedoAddon.undoAll()

// Changes made through the wrapped pdfDoc enter the undo stack.
await undoRedoAddon.invoke(async (pdfDoc) => {
  const page = await pdfDoc.getPageByIndex(0)
  await page.addAnnot({
    type: 'square',
    rect: { left: 0, bottom: 500, right: 100, top: 550 },
  })
})

const hasUnsavedChanges = pdfViewer.getCurrentPDFDoc().isDocModified()

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

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

  // Foxit's Ctrl+Z, Ctrl+Y, and Delete; Mod is Cmd on macOS. The mapping must be
  // memoized.
  useHotkeys(
    useMemo(
      () => ({
        'Mod-z': undo,
        'Mod-y': redo,
        'Shift-Mod-z': redo,
        // Deleting is editing: bind Delete only for users who may edit.
        // createUnfocusedHandler keeps Delete for text while the user types in a
        // paragraph or a field.
        ...(canEdit ? { Delete: createUnfocusedHandler(deleteSelection) } : {}),
      }),
      [undo, redo, deleteSelection, canEdit]
    )
  )

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

const pdfViewer = await pdfui.getPDFViewer()
const pdfDoc = pdfViewer.getCurrentPDFDoc()

const file = await pdfDoc.getFile({ fileName: 'contract.pdf' })

const body = new FormData()
body.append('file', file, file.name)
await fetch('/api/pdf/save', { method: 'POST', body })

// A download goes through an object URL.
const url = URL.createObjectURL(file)
const link = document.createElement('a')
link.href = url
link.download = file.name
link.click()
URL.revokeObjectURL(url)

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

function DocumentActions() {
  const canEdit = useContext(CanEditContext)
  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()
  const resetPdf = useResetPdf()

  // Replaces isDocModified(); undoing back to the saved state clears it too.
  const hasUnsavedChanges = revision !== savedRevision

  async function save() {
    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()
      const bytes = await prepareDocument()

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

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

  function close() {
    // Replaces customs.closeDocBefore.
    if (hasUnsavedChanges && !window.confirm('Close without saving?')) return
    resetPdf()
  }

  return (
    <div role="toolbar">
      {canEdit && <button onClick={() => save().catch(showError)}>Save</button>}
      <button onClick={() => void downloadDocument()}>Download</button>
      <button onClick={close}>Close</button>
      {hasUnsavedChanges && <span>Unsaved changes</span>}
    </div>
  )
}

const { ViewerEvents } = UIExtension.PDFViewCtrl.constants
const passwordErrorCode = UIExtension.PDFViewCtrl.PDF.constant.Error_Code.password

pdfui.addViewerEventListener(ViewerEvents.openFileFailed, (failure) => {
  // The password dialog takes over.
  if (failure && failure.error === passwordErrorCode) return
  hideLoadingOverlay()
})

try {
  await pdfui.openPDFByFile(file, { fileName: file.name })
} catch (failure) {
  // Reported once: a password failure goes to the password dialog.
  if (!failure || failure.error !== passwordErrorCode) showError(failure)
}

// Logging: true hides the SDK's log output; setLogLevel takes a Log_Levels value.
UIExtension.PDFViewCtrl.Log.LoggerFactory.toggleLogger(true)

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

function useSdkDiagnostics() {
  // The SDK never prints to the console: subscribe, and unsubscribe on unmount.
  useEffect(() => {
    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 checking failure.error against Error_Code.password.
      if (error instanceof InvalidPasswordError) askForPassword()
      else showError(error)
    }
  }
}

useEffect(() => {
  const pdfui = new UIExtension.PDFUI({
    viewerOptions: { libPath: '/foxit-lib', jr: { licenseSN, licenseKey } },
    renderTo: elementRef.current,
  })
  const removeOpenListener = pdfui.addViewerEventListener(
    UIExtension.PDFViewCtrl.constants.ViewerEvents.openFileSuccess,
    () => setIsDocumentOpen(true)
  )

  return () => {
    removeOpenListener()
    pdfui.destroy()
  }
}, [])

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

function useDocumentText() {
  const { getAllParagraphIds, getPlainTextParagraphs } = useProgrammaticEditor()

  return async () => {
    // Loads every page in turn: prefer getParagraphsByPage(pageId) when you know the
    // page.
    const paragraphIds = await getAllParagraphIds()
    const paragraphs = await getPlainTextParagraphs(paragraphIds)
    return paragraphs.map((paragraph) => ({
      pageNumber: paragraph.pageNumber,
      text: paragraph.content,
    }))
  }
}

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

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

  return (
    <div role="search">
      <input
        value={criteria.query}
        onChange={(event) =>
          setSearchCriteria({ ...criteria, query: event.currentTarget.value })
        }
      />
      <label>
        <input
          type="checkbox"
          checked={criteria.isWholeWord}
          onChange={(event) =>
            setSearchCriteria({ ...criteria, isWholeWord: event.currentTarget.checked })
          }
        />
        Whole words
      </label>
      <span>
        {status === 'searching'
          ? 'Searching…'
          : `${activeMatchIndex + 1} of ${matches.length}`}
      </span>
      <button disabled={matches.length === 0} onClick={goToPreviousMatch}>
        Previous
      </button>
      <button disabled={matches.length === 0} onClick={goToNextMatch}>
        Next
      </button>
    </div>
  )
}