Migrating from MuPDF.js

npm install mupdf

// mupdf.worker.js: MuPDF.js runs off the main thread.
import * as mupdf from 'mupdf'

let doc = null

// main.js
const worker = new Worker(new URL('./mupdf.worker.js', import.meta.url), {
  type: 'module',
})

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

npm install @sdk-pdf/react

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

// Defined outside the component, so their identity never changes.
const theme: Config['theme'] = { viewportPadding: 16 }
const initialInteractionTool: InteractionTool = { type: 'textSelect' }

export function App() {
  return (
    <PdfProviders
      theme={theme}
      initialInteractionTool={initialInteractionTool}
      initialContentPolicy={CONTENT_POLICY_PRESET.PDF_VIEWER}
    >
      <DocumentLoader url="/files/document.pdf" />
    </PdfProviders>
  )
}

async function openDocument(url) {
  const response = await fetch(url)
  const data = await response.arrayBuffer()
  const doc = mupdf.Document.openDocument(data, 'application/pdf')

  if (doc.needsPassword()) {
    let password = await askForPassword({ isRetry: false })
    while (doc.authenticatePassword(password) === 0) {
      password = await askForPassword({ isRetry: true })
    }
  }

  return doc
}

doc.destroy()

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 bytesUrlRef = useRef(url)
  const [isPasswordRetry, setIsPasswordRetry] = useState<boolean>()

  // A new url is a new document: drop the cached bytes and unload the old document.
  useEffect(() => {
    if (bytesUrlRef.current === url) return
    bytesUrlRef.current = url
    bytesRef.current = null
    setIsPasswordRetry(undefined)
    resetPdf()
  }, [url, resetPdf])

  async function open(password?: string) {
    try {
      if (!bytesRef.current) {
        const response = await fetch(url)
        if (!response.ok) throw new Error(`Cannot fetch the document: ${response.status}`)
        bytesRef.current = new Uint8Array(await response.arrayBuffer())
      }

      // loadPdf reads from the buffer it receives for the document's lifetime,
      // so keep the original for a retry and pass a copy.
      await loadPdf(bytesRef.current.slice(), { password })
      setIsPasswordRetry(undefined)
    } catch (error) {
      if (error instanceof InvalidPasswordError) {
        // Replaces needsPassword() and authenticatePassword(): ask, then call
        // open(password).
        setIsPasswordRetry(password !== undefined)
      } else {
        showError(error)
      }
    }
  }

  if (isPasswordRetry !== undefined)
    return <PasswordPrompt isRetry={isPasswordRetry} onSubmit={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()

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

function drawPage(pageIndex, dpi) {
  const page = doc.loadPage(pageIndex)
  const matrix = mupdf.Matrix.scale(dpi / 72, dpi / 72)
  // With alpha, the pixels are RGBA, the layout ImageData expects, and the page draws
  // on a transparent background, so give the canvases a white CSS background.
  const pixmap = page.toPixmap(matrix, mupdf.ColorSpace.DeviceRGB, true)
  const imageData = new ImageData(
    pixmap.getPixels().slice(),
    pixmap.getWidth(),
    pixmap.getHeight()
  )

  pixmap.destroy()
  page.destroy()
  return imageData
}

let zoom = 96

const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) drawCanvas(entry.target)
  }
})

async function drawCanvas(canvas) {
  const pageIndex = Number(canvas.dataset.pageIndex)
  // callWorker posts a message to the worker and resolves with its reply.
  const imageData = await callWorker('drawPage', pageIndex, zoom * devicePixelRatio)
  canvas.width = imageData.width
  canvas.height = imageData.height
  canvas.getContext('2d').putImageData(imageData, 0, 0)
}

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

function PdfApplication() {
  // Opens each document fitted to the viewport width; Zoom and fit modes maps fixed DPI
  // levels.
  useViewportAutoFitScale('width')

  return (
    // The viewport fills its parent, so give the parent an explicit size.
    <div style={{ height: '100vh' }}>
      <Viewport />
    </div>
  )
}

const pageCount = doc.countPages()

function goToPage(pageIndex) {
  pageElements[pageIndex].scrollIntoView()
}

function followLink(link) {
  if (link.isExternal()) {
    window.open(link.getURI(), '_blank')
  } else {
    goToPage(doc.resolveLink(link))
  }
}

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

function PageNavigation() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()
  // Replaces tracking the visible page with your own observer.
  const currentPageId = useCurrentPageId()

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

  function goToPage(pageIndex: number) {
    const page = pages[pageIndex]
    if (page) scrollToPage(page.id, { behavior: 'smooth' })
  }

  return (
    <div role="toolbar">
      <button disabled={currentIndex === 0} onClick={() => goToPage(currentIndex - 1)}>
        Previous
      </button>
      <span>
        Page {currentIndex + 1} of {pages.length}
      </span>
      <button
        disabled={currentIndex >= pages.length - 1}
        onClick={() => goToPage(currentIndex + 1)}
      >
        Next
      </button>
    </div>
  )
}

// Append a blank A4 page: -1 inserts at the end.
doc.insertPage(-1, doc.addPage([0, 0, 595, 842], 0, null, ''))

// Delete the first page.
doc.deletePage(0)

// The full new order: unlisted pages are removed, and a page listed twice is duplicated.
doc.rearrangePages([2, 0, 1, 1])

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

function PageActions({ pageId }: { pageId: string }) {
  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)
  if (!page) return null

  return (
    <div role="toolbar">
      {/* Like addPage([0, 0, 595, 842]): A4 in user-space units, inserted after this
         page. */}
      <button onClick={() => createPage(595, 842, pageId)}>
        Insert blank page after
      </button>
      <button disabled={pages.length <= 1} onClick={() => deletePages(pageId)}>
        Delete
      </button>
      <button onClick={() => void duplicatePage(pageId)}>Duplicate</button>
      {/* Without a target page, moveAfter moves the page to the end of the document. */}
      <button onClick={() => moveAfter(pageId)}>Move to end</button>
      {/* Rotation is absolute: add to the current angle yourself. */}
      <button onClick={() => setPageRotation(pageId, page.rotation + 90)}>
        Rotate clockwise
      </button>
    </div>
  )
}

// In the worker.
function getPageBounds(pageIndex) {
  const page = doc.loadPage(pageIndex)
  const bounds = page.getBounds()
  page.destroy()
  return bounds
}

// On the page.
let zoom = 96

function zoomTo(newZoom) {
  zoom = Math.min(Math.max(newZoom, 48), 384)
  for (const canvas of visibleCanvases) {
    resizeCanvas(canvas)
    drawCanvas(canvas)
  }
}

async function fitWidth() {
  const [x0, , x1] = await callWorker('getPageBounds', 0)
  // The CSS width of a page is its width in points * zoom / 72.
  zoomTo((viewerElement.clientWidth / (x1 - x0)) * 72)
}

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

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

  // The zoom your render loop used, in DPI: scale 1 is 72 DPI.
  const dpi = scale * 72

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

  function zoomTo(newDpi: number) {
    // Your buttons keep the limits your render loop had.
    setScale(Math.min(Math.max(newDpi, 48), 384) / 72)
  }

  function fitPage() {
    const { fitWidthScale, fitHeightScale } = getFitScale()
    setScale(Math.min(fitWidthScale, fitHeightScale))
  }

  return (
    <div role="toolbar">
      <button onClick={() => zoomTo(dpi - 12)}>−</button>
      <span>{Math.round(dpi)} DPI</span>
      <button onClick={() => zoomTo(dpi + 12)}>+</button>
      <button onClick={() => zoomTo(96)}>96 DPI</button>
      <button onClick={() => setScale(getFitScale().fitWidthScale)}>Fit width</button>
      <button onClick={fitPage}>Fit page</button>
    </div>
  )
}

// In the worker.
function drawThumbnail(pageIndex, width) {
  const page = doc.loadPage(pageIndex)
  const [x0, , x1] = page.getBounds()
  const scale = width / (x1 - x0)
  const pixmap = page.toPixmap(
    mupdf.Matrix.scale(scale, scale),
    mupdf.ColorSpace.DeviceRGB,
    false
  )
  const png = pixmap.asPNG()

  pixmap.destroy()
  page.destroy()
  return png
}

// On the page.
const png = await callWorker('drawThumbnail', pageIndex, 120 * devicePixelRatio)
image.src = URL.createObjectURL(new Blob([png], { type: 'image/png' }))

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

function ThumbnailsSidebar() {
  const pages = usePages()
  const scrollToPage = useScrollToPage()
  const currentPageId = useCurrentPageId()

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

const page = doc.loadPage(pageIndex)
const stext = page.toStructuredText('preserve-whitespace')

const text = stext.asText()
const { blocks } = JSON.parse(stext.asJSON())
const hits = page.search('total due')

stext.destroy()
page.destroy()

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

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

  // Replaces toStructuredText().asText() for one page.
  async function readPage(pageId: string) {
    const paragraphs = await getParagraphsByPage(pageId)
    return paragraphs.map((paragraph) => paragraph.content).join('\n\n')
  }

  // Loads every page in turn, which can take a long time for a large document.
  async function readDocument() {
    const paragraphs = await getPlainTextParagraphs(await getAllParagraphIds())
    return paragraphs.map((paragraph) => paragraph.content).join('\n\n')
  }

  return { readPage, readDocument }
}

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.isCaseSensitive}
          onChange={(event) =>
            setSearchCriteria({
              ...criteria,
              isCaseSensitive: event.currentTarget.checked,
            })
          }
        />
        Match case
      </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>
  )
}

// Fill a page's fields from saved values, keyed by field name.
const page = doc.loadPage(pageIndex)

for (const widget of page.getWidgets()) {
  const value = savedValues[widget.getName()]
  if (value === undefined || widget.isReadOnly()) continue

  if (widget.getFieldType() === 'text') widget.setTextValue(value)
  else if (widget.getFieldType() === 'combobox') widget.setChoiceValue(value)
}

if (page.update()) redrawPage(pageIndex)

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

function FormSidebar() {
  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} />
      ))}
    </form>
  )
}

function FormField({ widget }: { widget: Widget }) {
  // widgetType replaces getFieldType().
  switch (widget.widgetType) {
    case 'text':
      return <TextField widget={widget} />
    case 'checkbox':
      return <CheckboxField widget={widget} />
    default:
      return null
  }
}

function TextField({ widget }: { widget: TextWidget }) {
  // Replaces getValue() and setTextValue(); there is no page.update() to call.
  const [value, setValue] = useWidgetValue(widget)

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

function CheckboxField({ widget }: { widget: CheckboxWidget }) {
  // A boolean instead of toggle().
  const [isChecked, setIsChecked] = useWidgetValue(widget)

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

// A FreeText box where the user clicked.
function addNote(pageIndex, event) {
  const page = doc.loadPage(pageIndex)
  const [x0, y0] = page.getBounds()
  const x = x0 + (event.offsetX * 72) / zoom
  const y = y0 + (event.offsetY * 72) / zoom

  const annotation = page.createAnnotation('FreeText')
  annotation.setRect([x, y, x + 200, y + 50])
  annotation.setContents('Note')
  page.update()
  redrawPage(pageIndex)
}

// A highlight over the first search hit.
function highlightFirst(page, needle) {
  const [hit] = page.search(needle)
  if (!hit) return

  const highlight = page.createAnnotation('Highlight')
  highlight.setQuadPoints(hit)
  highlight.setColor([1, 1, 0])
  page.update()
}

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 EditingToolbar() {
  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">
      <button
        aria-pressed={interactionTool.type === 'textSelect'}
        onClick={() =>
          setInteractionMode(textSelectTool, CONTENT_POLICY_PRESET.PDF_VIEWER)
        }
      >
        Read
      </button>
      <button
        aria-pressed={interactionTool.type === 'select'}
        onClick={() => setInteractionMode(selectTool, CONTENT_POLICY_PRESET.PDF_EDITOR)}
      >
        Edit
      </button>
      {/* The nearest counterpart of a FreeText box: a paragraph at the click
         position. */}
      <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>
  )
}

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

function useAddTextAt() {
  const createParagraph = useParagraphCreate()
  const { getParagraphEditor } = useProgrammaticEditor()

  return async (pageId: string, x: number, y: number, text: string) => {
    // x and y are in user-space units.
    const paragraphId = await createParagraph(pageId, x, y)
    const editor = getParagraphEditor(paragraphId)
    if (!editor) return

    editor.selectAll()
    editor.insertText(text)
  }
}

doc.enableJournal()

function createNote(page, rect, text) {
  // One named undo step for the three edits.
  doc.beginOperation('Add note')
  try {
    const annotation = page.createAnnotation('FreeText')
    annotation.setRect(rect)
    annotation.setContents(text)
    doc.endOperation()
  } catch (error) {
    doc.abandonOperation()
    throw error
  }
  updateHistoryControls()
}

undoButton.onclick = () => {
  doc.undo()
  redrawVisiblePages()
  updateHistoryControls()
}

function updateHistoryControls() {
  undoButton.disabled = !doc.canUndo()
  redoButton.disabled = !doc.canRedo()
  unsavedIndicator.hidden = !doc.hasUnsavedChanges()
}

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

function HistoryControls() {
  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]))

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

// Upload, appending the changes to the original file.
const buffer = doc.saveToBuffer('incremental')
await fetch('/api/documents', { method: 'PUT', body: buffer.asUint8Array() })
buffer.destroy()

// Download.
const output = doc.saveToBuffer('garbage,compress')
const blob = new Blob([output.asUint8Array()], { type: 'application/pdf' })
output.destroy()
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = 'document.pdf'
link.click()

import { 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 hasUnsavedChanges(): undoing back to the saved state clears it too.
  const hasUnsavedChanges = revision !== savedRevision

  async function saveToServer() {
    if (!hasUnsavedChanges || 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 buffer is transferred to fetch, so don't hand out the original.
      const bytes = await prepareDocument({ returnOriginalIfUnchanged: false })
      const response = await fetch('/api/documents', {
        method: 'PUT',
        body: bytes as BodyInit,
      })
      // 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 saveToServer()}>Save</button>
      <button onClick={() => void downloadDocument()}>Download</button>
      {hasUnsavedChanges && <span>Unsaved changes</span>}
    </div>
  )
}

mupdf.setLog({
  error(message) {
    reportToMonitoring('error', message)
  },
  warning(message) {
    reportToMonitoring('warning', message)
  },
})

onmessage = (event) => {
  const [method, id, args] = event.data
  try {
    postMessage(['RESULT', id, methods[method](...args)])
  } catch (error) {
    postMessage([
      'ERROR',
      id,
      { name: error.name, message: error.message, stack: error.stack },
    ])
  }
}

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

function useSdkDiagnostics() {
  // Replaces setLog(): subscribe, and unsubscribe on unmount.
  useEffect(() => {
    const unsubscribe = logMessages.on('message', (logMessage) => {
      // The numeric levels order by severity, so a threshold is a single comparison.
      if (logMessage.level >= LogLevel.Warning)
        reportToMonitoring(logMessage.message, logMessage.data)
    })
    return () => {
      unsubscribe()
    }
  }, [])
}

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

  return async (data: Uint8Array) => {
    try {
      // Pass a copy and keep `data` for a password retry.
      await loadPdf(data.slice())
    } catch (error) {
      // The error arrives at the call, with no worker to relay it.
      if (error instanceof InvalidPasswordError) askForPassword()
      else showError(error)
    }
  }
}

// In the worker.
pixmap.destroy()
stext.destroy()
page.destroy()
doc.destroy()
mupdf.emptyStore()

// On the page.
worker.terminate()