"use client" import * as React from "react" import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area" import { createPluginRegistration } from "@embedpdf/core" import { EmbedPDF, PDFContext, useDocumentPermissions, useRegistry, } from "@embedpdf/core/react" import { PdfAnnotationSubtype, PdfErrorCode, PdfPageFlattenFlag, uuidV4, type PdfAnnotationObject, type PdfDocumentObject, type PdfEngine, type PdfLinkAnnoObject, type PdfPrintOptions, } from "@embedpdf/models" import { AnnotationLayer, AnnotationPluginPackage, getSelectedAnnotations, LockModeType, useAnnotation, useAnnotationCapability, type AnnotationEvent, type AnnotationSelectionMenuProps, type AnnotationTransferItem, type GroupSelectionMenuProps, } from "@embedpdf/plugin-annotation/react" import { AttachmentPluginPackage } from "@embedpdf/plugin-attachment/react" import { BookmarkPluginPackage } from "@embedpdf/plugin-bookmark/react" import { CapturePluginPackage, MarqueeCapture, useCapture, type CaptureAreaEvent, } from "@embedpdf/plugin-capture/react" import { DocumentManagerPluginPackage, useActiveDocument, useDocumentManagerCapability, } from "@embedpdf/plugin-document-manager/react" import { ExportPluginPackage, useExport } from "@embedpdf/plugin-export/react" import { FormPluginPackage, useFormCapability, } from "@embedpdf/plugin-form/react" import { FullscreenPluginPackage, useFullscreen, } from "@embedpdf/plugin-fullscreen/react" import { HistoryPluginPackage, useHistoryCapability, } from "@embedpdf/plugin-history/react" import { GlobalPointerProvider, InteractionManagerPluginPackage, PagePointerProvider, } from "@embedpdf/plugin-interaction-manager/react" import { PanPluginPackage, usePan } from "@embedpdf/plugin-pan/react" import { PrintPluginPackage, usePrint } from "@embedpdf/plugin-print/react" import { RedactionLayer, RedactionMode, RedactionPluginPackage, useRedaction, type RedactionSelectionMenuProps, } from "@embedpdf/plugin-redaction/react" import { RenderLayer, RenderPluginPackage } from "@embedpdf/plugin-render/react" import { Rotate, RotatePluginPackage, useRotate, } from "@embedpdf/plugin-rotate/react" import { Scroller, ScrollPluginPackage, ScrollStrategy, useScroll, useScrollCapability, type PageLayout, } from "@embedpdf/plugin-scroll/react" import { SearchLayer, SearchPluginPackage, useSearch, } from "@embedpdf/plugin-search/react" import { CopyToClipboard, SelectionLayer, SelectionPluginPackage, useSelectionCapability, type SelectionSelectionMenuProps, } from "@embedpdf/plugin-selection/react" import { deserializeEntries, serializeEntries, SignatureMode, SignaturePluginPackage, useSignatureCapability, } from "@embedpdf/plugin-signature/react" import { SpreadMode, SpreadPluginPackage, useSpread, } from "@embedpdf/plugin-spread/react" import { StampPluginPackage } from "@embedpdf/plugin-stamp/react" import { ThumbnailPluginPackage } from "@embedpdf/plugin-thumbnail/react" import { TilingLayer, TilingPluginPackage } from "@embedpdf/plugin-tiling/react" import { useIsViewportGated, useViewportCapability, useViewportElement, useViewportRef, ViewportElementContext, ViewportPluginPackage, } from "@embedpdf/plugin-viewport/react" import { MarqueeZoom, useZoom, ZoomMode, ZoomPluginPackage, } from "@embedpdf/plugin-zoom/react" import { getPdfSourceUrl, loadSharedPdfEngine } from "@/lib/pdf-thumbnail-utils" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { TooltipProvider } from "@/components/ui/tooltip" import { ColorPicker } from "@/components/extend/document-color-picker" import { useElementWidth, useInlineThumbnailSidebar, } from "@/components/extend/document-viewer-sidebar" import { PdfEditorCaptureDialog, PdfEditorConfirmDialog, PdfEditorLinkDialog, PdfEditorPasswordPrompt, PdfEditorPrintDialog, PdfEditorPropertiesDialog, PdfEditorSecurityDialog, PdfEditorShortcutsDialog, PdfEditorSignatureDialog, } from "@/components/extend/pdf-editor-dialogs" import { PdfEditorAttachmentsPanel, PdfEditorCommentsPanel, PdfEditorFormsPanel, PdfEditorOutlinePanel, PdfEditorPagesPanel, PdfEditorRedactionsPanel, PdfEditorSignaturesPanel, PdfEditorStampsPanel, PdfEditorThumbnailsPanel, } from "@/components/extend/pdf-editor-panels" import { PdfEditorPropertiesPanel } from "@/components/extend/pdf-editor-properties" import { BookOpenGlyph, CameraGlyph, ChevronLeftGlyph, ChevronRightGlyph, CloseGlyph, CommentGlyph, CommentsGlyph, CopyGlyph, CursorGlyph, downloadArrayBuffer, downloadBlob, DownloadGlyph, EditGlyph, ExitFullscreenGlyph, ExternalLinkGlyph, EyeOffGlyph, FileTextGlyph, FullscreenGlyph, getPdfFileName, GridGlyph, GroupGlyph, HandGlyph, HighlighterGlyph, InfoGlyph, isTypingTarget, KeyboardGlyph, LayersGlyph, LinkGlyph, ListTreeGlyph, LockGlyph, MarqueeZoomGlyph, MoreGlyph, noop, PaletteGlyph, PanelLeftGlyph, PanelRightGlyph, PaperclipGlyph, PDF_EDITOR_ANNOTATION_TOOL_GROUPS, PDF_EDITOR_DEFAULT_COLOR_PRESETS, PDF_EDITOR_DEFAULT_FEATURES, PDF_EDITOR_DEFAULT_SIGNATURE_FONTS_URL, PDF_EDITOR_DEFAULT_STAMP_MANIFEST_URL, PDF_EDITOR_FORM_TOOLS, PDF_EDITOR_MODE_OPTIONS, PDF_EDITOR_SELECTION_COLOR, PdfEditorContextProvider, PdfEditorScrollArea, PdfEditorScrollAreaResolverContext, PdfEditorToolbarSeparator, PdfEditorToolButton, PdfEditorTooltip, PlusGlyph, PrintGlyph, RedactAreaGlyph, RedoGlyph, resolveDefaultScrollAreaViewport, RotateGlyph, SearchGlyph, ShieldGlyph, SignatureGlyph, SlidersGlyph, StampGlyph, StrikethroughGlyph, TextFieldGlyph, TextGlyph, toNormalizedRect, TrashGlyph, UnderlineGlyph, UndoGlyph, UngroupGlyph, UnlockGlyph, UploadGlyph, usePdfEditor, ZoomInGlyph, ZoomOutGlyph, type PdfEditorContextValue, type PdfEditorDialogRequest, type PdfEditorFeatureFlags, type PdfEditorGlyph, type PdfEditorLeftPanel, type PdfEditorMode, type PdfEditorNoticeTone, type PdfEditorResolvedFeatures, type PdfEditorRightPanel, type PdfEditorScrollAreaViewportResolver, type PdfEditorSelectionAction, type PdfEditorSelectionPage, type PdfEditorSelectionPayload, } from "@/components/extend/pdf-editor-shared" import { PdfEditorWorkspace } from "@/components/extend/pdf-editor-workspace" import { ToastPrimitive, ToastProvider } from "@/components/extend/ui-toast" import { IconPlaceholder } from "@/components/icon-placeholder" export type { PdfEditorFeatureFlags, PdfEditorLeftPanel, PdfEditorMode, PdfEditorNormalizedRect, PdfEditorRightPanel, PdfEditorSelectionAction, PdfEditorSelectionPayload, } from "@/components/extend/pdf-editor-shared" /* -------------------------------------------------------------------------- */ /* Public types */ /* -------------------------------------------------------------------------- */ export type PDFEditorPageOverlayProps = { pageNumber: number pageWidth: number pageHeight: number scale: number rotation: number } export type PDFEditorZoomLevel = number | "fit-page" | "fit-width" | "automatic" export type PDFEditorToast = { message: string tone: PdfEditorNoticeTone } export type PDFEditorHandle = { /** Current PDF bytes including annotations, form values, and pending security changes. */ getDocumentBuffer: () => Promise download: (fileName?: string) => Promise print: (options?: PdfPrintOptions) => Promise exportAnnotations: () => Promise importAnnotations: (items: AnnotationTransferItem[]) => void getFormValues: () => Record setFormValues: (values: Record) => Promise /** Permanently applies every pending redaction mark. */ applyRedactions: () => Promise setMode: (mode: PdfEditorMode) => void /** Activates an EmbedPDF annotation tool id such as `highlight` or `ink`; `null` returns to selection. */ setActiveTool: (toolId: string | null) => void scrollToPage: (pageNumber: number, options?: ScrollIntoViewOptions) => void undo: () => void redo: () => void getViewportElement: () => HTMLDivElement | null } export type PDFEditorProps = { className?: string /** * A path, URL, PDF data URL, or raw base64 string. * Raw base64 is recognized by the encoded %PDF- header. * Also accepts PDF bytes as an ArrayBuffer, Uint8Array, Blob, or File. */ src?: string | ArrayBuffer | Uint8Array | Blob fileName?: string defaultZoom?: PDFEditorZoomLevel defaultMode?: PdfEditorMode /** Author written into new annotations. Defaults to "Guest". */ annotationAuthor?: string colorPresets?: string[] /** Turn individual editing capabilities off. Everything is enabled by default. */ features?: PdfEditorFeatureFlags showToolbar?: boolean showUpload?: boolean showDownload?: boolean toolbarActions?: React.ReactNode /** Extra actions for the text selection menu. Each receives normalized page coordinates. */ selectionActions?: PdfEditorSelectionAction[] /** Persist saved signatures in localStorage. Pass a string to use a custom storage key. */ persistSignatures?: boolean | string /** Additional rubber stamp manifests to load next to the built-in library. */ stampManifests?: string[] /** Stylesheet used for the typed-signature fonts. Pass `null` to skip loading web fonts. */ signatureFontsStylesheetUrl?: string | null resolveScrollAreaViewport?: PdfEditorScrollAreaViewportResolver renderPageOverlay?: (props: PDFEditorPageOverlayProps) => React.ReactNode onDocumentLoadSuccess?: (info: { numPages: number documentId: string fileName: string }) => void onDocumentLoadError?: (message: string) => void onActivePageChange?: (pageNumber: number) => void onModeChange?: (mode: PdfEditorMode) => void onAnnotationEvent?: (event: AnnotationEvent) => void /** Fires with the full annotation set after every committed change (debounced). */ onAnnotationsChange?: (items: AnnotationTransferItem[]) => void onFormValuesChange?: (values: Record) => void onRedactionsApplied?: () => void onSave?: (result: { buffer: ArrayBuffer; fileName: string }) => void onCapture?: (event: CaptureAreaEvent) => void onPdfUpload?: (file: File) => void /** Routes editor notices to a host-owned toast system instead of the built-in viewport. */ onToast?: (toast: PDFEditorToast) => void onSelectionAction?: ( actionId: string, payload: PdfEditorSelectionPayload ) => void } /* -------------------------------------------------------------------------- */ /* Constants */ /* -------------------------------------------------------------------------- */ const PAGE_GAP = 24 const THUMBNAIL_PAGE_WIDTH = 92 const THUMBNAIL_IMAGE_PADDING = 8 const THUMBNAIL_WIDTH = THUMBNAIL_PAGE_WIDTH + THUMBNAIL_IMAGE_PADDING * 2 const THUMBNAIL_LABEL_HEIGHT = 24 const THUMBNAIL_GAP = 12 const THUMBNAIL_PANE_PADDING_Y = 16 const RIGHT_PANEL_INLINE_MIN_WIDTH = 1100 const TOOLBAR_STACK_MAX_WIDTH = 640 const ZOOM_PRESETS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4] const MIN_ZOOM = 0.1 const MAX_ZOOM = 8 const PAGE_BASE_RENDER_MAX_SCALE = 1 const PAGE_BASE_RENDER_DPR = 1 const SEARCH_DEBOUNCE_MS = 300 const NOTICE_DURATION_MS = 4200 const TOOLTIP_DELAY_MS = 5 const SELECTION_MENU_OFFSET = 8 const SELECTION_MENU_HEIGHT = 36 const DEFAULT_SIGNATURE_STORAGE_KEY = "pdf-editor:signatures" const DEFAULT_ANNOTATION_AUTHOR = "Guest" const ZOOM_MODE_LABELS: Record = { [ZoomMode.FitPage]: "Fit page", [ZoomMode.FitWidth]: "Fit width", [ZoomMode.Automatic]: "Automatic", } const SPREAD_MODE_OPTIONS = [ { label: "Single page", value: SpreadMode.None }, { label: "Two pages", value: SpreadMode.Odd }, { label: "Two pages, cover", value: SpreadMode.Even }, ] const SCROLL_DIRECTION_OPTIONS = [ { label: "Scroll down", value: "vertical" }, { label: "Scroll sideways", value: "horizontal" }, ] function toZoomLevel(level: PDFEditorZoomLevel): ZoomMode | number { if (level === "fit-page") return ZoomMode.FitPage if (level === "fit-width") return ZoomMode.FitWidth if (level === "automatic") return ZoomMode.Automatic return level } function isZoomMode(value: unknown): value is ZoomMode { return ( value === ZoomMode.FitPage || value === ZoomMode.FitWidth || value === ZoomMode.Automatic ) } /* -------------------------------------------------------------------------- */ /* Engine + document source */ /* -------------------------------------------------------------------------- */ function useSharedPdfEngine() { const [engine, setEngine] = React.useState(null) const [error, setError] = React.useState(null) React.useEffect(() => { let cancelled = false loadSharedPdfEngine().then( (loadedEngine) => { if (!cancelled) setEngine(loadedEngine) }, (loadError: Error) => { if (!cancelled) setError(loadError) } ) return () => { cancelled = true } }, []) return { engine, error } } type EditorSource = | { key: string kind: "url" url: string name: string } | { key: string kind: "buffer" buffer: ArrayBuffer name: string } let sourceCounter = 0 function nextSourceKey() { sourceCounter += 1 return `pdf-editor-source-${sourceCounter}` } function bytesToArrayBuffer(bytes: Uint8Array) { const copy = new ArrayBuffer(bytes.byteLength) new Uint8Array(copy).set(bytes) return copy } function useEditorSource( src: PDFEditorProps["src"], fileName: string | undefined ) { const sourceId = React.useId() const [input, setInput] = React.useState({ src, fileName, version: 0 }) if (input.src !== src || input.fileName !== fileName) { setInput({ src, fileName, version: input.version + 1 }) } const immediateSource = React.useMemo(() => { const key = `${sourceId}-${input.version}` if (typeof input.src === "string") { const url = getPdfSourceUrl(input.src) return { key, kind: "url", url, name: getPdfFileName(input.fileName, url), } } if (input.src instanceof ArrayBuffer || input.src instanceof Uint8Array) { return { key, kind: "buffer", buffer: input.src instanceof ArrayBuffer ? input.src.slice(0) : bytesToArrayBuffer(input.src), name: getPdfFileName(input.fileName), } } return null }, [input, sourceId]) const [resolved, setResolved] = React.useState<{ input: typeof input source: EditorSource } | null>(null) React.useEffect(() => { if (!(input.src instanceof Blob)) return let cancelled = false const blobName = input.fileName ?? (input.src instanceof File ? input.src.name : undefined) input.src.arrayBuffer().then((buffer) => { if (cancelled) return setResolved({ input, source: { key: nextSourceKey(), kind: "buffer", buffer, name: getPdfFileName(blobName), }, }) }) return () => { cancelled = true } }, [input]) const replace = React.useCallback( (buffer: ArrayBuffer, name: string) => { setResolved({ input, source: { key: nextSourceKey(), kind: "buffer", buffer, name }, }) }, [input] ) const source = resolved?.input === input ? resolved.source : immediateSource return { source, loading: input.src instanceof Blob && !source, replace } } /* -------------------------------------------------------------------------- */ /* Annotation JSON serialization */ /* -------------------------------------------------------------------------- */ function arrayBufferToBase64(buffer: ArrayBuffer) { const bytes = new Uint8Array(buffer) let binary = "" for (let index = 0; index < bytes.length; index += 0x8000) { binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000)) } return btoa(binary) } function base64ToArrayBuffer(value: string) { const binary = atob(value) const bytes = new Uint8Array(binary.length) for (let index = 0; index < binary.length; index += 1) { bytes[index] = binary.charCodeAt(index) } return bytes.buffer } type SerializedAnnotationItem = { annotation: PdfAnnotationObject ctx?: { data: string mimeType?: string } } export function serializeAnnotationItems(items: AnnotationTransferItem[]) { return { format: "extend-ui/pdf-editor-annotations", version: 1, exportedAt: new Date().toISOString(), annotations: items.map((item): SerializedAnnotationItem => { const context = item.ctx as | { data?: ArrayBuffer mimeType?: string } | undefined return { annotation: item.annotation, ...(context?.data instanceof ArrayBuffer ? { ctx: { data: arrayBufferToBase64(context.data), mimeType: context.mimeType, }, } : {}), } }), } } export function deserializeAnnotationItems( payload: unknown ): AnnotationTransferItem[] { const list = Array.isArray(payload) ? payload : payload && typeof payload === "object" && Array.isArray( ( payload as { annotations?: unknown } ).annotations ) ? ( payload as { annotations: unknown[] } ).annotations : null if (!list) throw new Error("Unrecognized annotation export.") return list.map((entry) => { const item = entry as SerializedAnnotationItem if (!item || typeof item !== "object" || !item.annotation) { throw new Error("Unrecognized annotation export.") } return { annotation: item.annotation, ...(item.ctx?.data ? { ctx: { data: base64ToArrayBuffer(item.ctx.data), mimeType: item.ctx.mimeType, } as AnnotationTransferItem["ctx"], } : {}), } }) } /* -------------------------------------------------------------------------- */ /* Viewport */ /* -------------------------------------------------------------------------- */ function PdfEditorViewport({ children, className, documentId, }: { children: React.ReactNode className?: string documentId: string }) { const viewportRef = useViewportRef(documentId) const { provides: viewport } = useViewportCapability() const isGated = useIsViewportGated(documentId) const viewportGap = viewport?.getViewportGap() ?? 0 return ( {isGated ? null : children} ) } function PdfEditorViewportBridge({ viewportElementRef, }: { viewportElementRef: React.MutableRefObject }) { const elementRef = useViewportElement() React.useEffect(() => { viewportElementRef.current = elementRef?.current ?? null }) return null } /* -------------------------------------------------------------------------- */ /* Selection menus rendered inside the page layers */ /* -------------------------------------------------------------------------- */ function SelectionMenuShell({ rect, placement, menuWrapperProps, children, }: { rect: SelectionSelectionMenuProps["rect"] placement: SelectionSelectionMenuProps["placement"] menuWrapperProps: SelectionSelectionMenuProps["menuWrapperProps"] children: React.ReactNode }) { return (

event.stopPropagation()} > {children}

) } function MenuButton({ label, glyph: Glyph, onClick, disabled, destructive, }: { label: string glyph: PdfEditorGlyph onClick: () => void disabled?: boolean destructive?: boolean }) { return ( { event.stopPropagation() onClick() }} > ) } async function buildSelectionPayload( documentId: string, document: PdfDocumentObject | null, selectionScope: ReturnType< NonNullable< ReturnType["provides"] >["forDocument"] > ): Promise { const formatted = selectionScope.getFormattedSelection() if (formatted.length === 0) return null let text = "" try { const lines = await selectionScope.getSelectedText().toPromise() text = lines.join("\n") } catch { text = "" } const pages: PdfEditorSelectionPage[] = formatted.map((page) => { const pageSize = document?.pages[page.pageIndex]?.size ?? { width: 1, height: 1, } return { pageIndex: page.pageIndex, pageNumber: page.pageIndex + 1, pageSize, rect: page.rect, rects: page.segmentRects, normalizedRect: toNormalizedRect(page.rect, pageSize), normalizedRects: page.segmentRects.map((rect) => toNormalizedRect(rect, pageSize) ), } }) return { documentId, text, pages, ...pages[0] } } function PdfEditorTextSelectionMenu({ documentId, rect, placement, menuWrapperProps, }: SelectionSelectionMenuProps & { documentId: string }) { const { provides: selectionCapability } = useSelectionCapability() const { provides: annotationCapability } = useAnnotationCapability() const { provides: annotation } = useAnnotation(documentId) const { provides: redaction } = useRedaction(documentId) const editor = usePdfEditor() const selectionScope = React.useMemo( () => selectionCapability?.forDocument(documentId) ?? null, [documentId, selectionCapability] ) const canAnnotate = editor.features.annotate && editor.permissions.canModifyAnnotations const canRedact = editor.features.redact && editor.permissions.canModifyContents const createMarkup = ( toolId: string, subtype: | PdfAnnotationSubtype.HIGHLIGHT | PdfAnnotationSubtype.UNDERLINE | PdfAnnotationSubtype.STRIKEOUT, options: { select?: boolean openComments?: boolean } = {} ) => { if (!selectionScope || !annotation) return const formatted = selectionScope.getFormattedSelection() if (formatted.length === 0) return const defaults = (annotationCapability?.getTool(toolId)?.defaults ?? {}) as Record const finish = (text: string[]) => { let firstId: { pageIndex: number id: string } | null = null for (const page of formatted) { const id = uuidV4() annotation.createAnnotation(page.pageIndex, { ...defaults, id, type: subtype, pageIndex: page.pageIndex, rect: page.rect, segmentRects: page.segmentRects, author: editor.annotationAuthor, created: new Date(), modified: new Date(), flags: ["print"], custom: text.length ? { text: text.join("\n") } : undefined, } as PdfAnnotationObject) firstId ??= { pageIndex: page.pageIndex, id } } selectionScope.clear() if (options.select && firstId) { annotation.selectAnnotation(firstId.pageIndex, firstId.id) } if (options.openComments) editor.setRightPanel("comments") } selectionScope.getSelectedText().wait(finish, () => finish([])) } const runCustomAction = async (action: PdfEditorSelectionAction) => { if (!selectionScope) return const payload = await buildSelectionPayload( documentId, editor.document, selectionScope ) if (!payload) return action.onSelect?.(payload) editor.onSelectionAction?.(action.id, payload) if (!action.keepSelection) selectionScope.clear() } return ( { selectionScope?.copyToClipboard() selectionScope?.clear() }} /> {canAnnotate ? ( <> createMarkup("highlight", PdfAnnotationSubtype.HIGHLIGHT) } /> createMarkup("underline", PdfAnnotationSubtype.UNDERLINE) } /> createMarkup("strikeout", PdfAnnotationSubtype.STRIKEOUT) } /> {editor.features.comments ? ( createMarkup("highlight", PdfAnnotationSubtype.HIGHLIGHT, { select: true, openComments: true, }) } /> ) : null} editor.openDialog({ type: "link", source: "selection" }) } /> ) : null} {canRedact ? ( <> { redaction?.queueCurrentSelectionAsPending().wait( () => { selectionScope?.clear() editor.setRightPanel("redactions") }, () => editor.notify("The selection could not be marked.", "error") ) }} /> ) : null} {editor.selectionActions.length > 0 ? ( <> {editor.selectionActions.map((action) => ( ))} ) : null} ) } const STAMP_SOURCE_TYPES = new Set([ PdfAnnotationSubtype.INK, PdfAnnotationSubtype.SQUARE, PdfAnnotationSubtype.CIRCLE, PdfAnnotationSubtype.LINE, PdfAnnotationSubtype.POLYLINE, PdfAnnotationSubtype.POLYGON, PdfAnnotationSubtype.FREETEXT, PdfAnnotationSubtype.STAMP, PdfAnnotationSubtype.TEXT, ]) function PdfEditorAnnotationMenu({ documentId, selected, context, rect, placement, menuWrapperProps, }: AnnotationSelectionMenuProps & { documentId: string }) { const { provides: annotation } = useAnnotation(documentId) const { provides: redaction } = useRedaction(documentId) const editor = usePdfEditor() if (!selected || !annotation) return null const object = context.annotation.object const { pageIndex, id } = object const isRedact = object.type === PdfAnnotationSubtype.REDACT const isWidget = object.type === PdfAnnotationSubtype.WIDGET const isLink = object.type === PdfAnnotationSubtype.LINK const isLocked = (object.flags ?? []).includes("locked") const canModify = editor.permissions.canModifyAnnotations const canDelete = canModify && !context.structurallyLocked const remove = () => annotation.deleteAnnotation(pageIndex, id) if (isRedact) { return ( editor.openDialog({ type: "confirm", title: "Apply this redaction?", description: "The marked content is removed permanently.", confirmLabel: "Apply", onConfirm: () => { redaction ?.commitPending(pageIndex, id) .wait(noop, () => editor.notify( "The redaction could not be applied.", "error" ) ) }, }) } /> editor.setRightPanel("properties")} /> ) } if (isLink) { const target = (object as PdfLinkAnnoObject).target return ( { if (!target) return annotation.navigateTarget(target).wait((result) => { if (result.outcome === "uri") { window.open(result.uri, "_blank", "noopener") } }, noop) }} /> editor.openDialog({ type: "link", source: "annotation" }) } /> ) } return ( {!isWidget && editor.features.comments ? ( editor.setRightPanel("comments")} /> ) : null} editor.setRightPanel("properties")} /> {!isWidget && canModify ? ( editor.openDialog({ type: "link", source: "annotation" }) } /> ) : null} {!isWidget && editor.features.stamps && canModify && STAMP_SOURCE_TYPES.has(object.type) ? ( editor.setRightPanel("stamps")} /> ) : null} {!isWidget && canModify ? ( { const flags = object.flags ?? [] annotation.updateAnnotation(pageIndex, id, { flags: isLocked ? flags.filter((flag) => flag !== "locked") : [...flags, "locked"], }) }} /> ) : null} ) } function PdfEditorGroupMenu({ documentId, selected, context, rect, placement, menuWrapperProps, }: GroupSelectionMenuProps & { documentId: string }) { const { provides: annotation } = useAnnotation(documentId) const editor = usePdfEditor() if (!selected || !annotation) return null const groupingAction = annotation.getGroupingAction() const canModify = editor.permissions.canModifyAnnotations return ( {context.annotations.length} selected { if (groupingAction === "ungroup") { annotation.ungroupAnnotations(context.annotations[0].object.id) } else { annotation.groupAnnotations() } }} /> editor.setRightPanel("properties")} /> annotation.deleteAnnotations( context.annotations.map((item) => ({ pageIndex: item.object.pageIndex, id: item.object.id, })) ) } /> ) } function PdfEditorRedactionMenu({ documentId, selected, context, rect, placement, menuWrapperProps, }: RedactionSelectionMenuProps & { documentId: string }) { const { provides: redaction } = useRedaction(documentId) const editor = usePdfEditor() if (!selected || !redaction) return null const { page, id } = context.item return ( editor.openDialog({ type: "confirm", title: "Apply this redaction?", description: "The marked content is removed permanently.", confirmLabel: "Apply", onConfirm: () => { redaction .commitPending(page, id) .wait(noop, () => editor.notify("The redaction could not be applied.", "error") ) }, }) } /> redaction.removePending(page, id)} /> ) } /* -------------------------------------------------------------------------- */ /* Toolbar controls */ /* -------------------------------------------------------------------------- */ function PdfEditorPageControl({ activePage, numPages, disabled, onPageChange, }: { activePage: number numPages: number disabled: boolean onPageChange: (pageNumber: number) => void }) { const inputRef = React.useRef(null) const displayPage = numPages ? activePage : 1 const [isEditing, setIsEditing] = React.useState(false) const [draftPage, setDraftPage] = React.useState(() => String(displayPage)) React.useEffect(() => { if (!isEditing) return inputRef.current?.focus() inputRef.current?.select() }, [isEditing]) const applyPageDraft = React.useCallback( (value: string) => { const trimmedValue = value.trim() if (!trimmedValue) return const parsedPage = Number(trimmedValue) if (!Number.isInteger(parsedPage)) return onPageChange(Math.min(Math.max(parsedPage, 1), Math.max(numPages, 1))) }, [numPages, onPageChange] ) return (

Page {isEditing ? ( setIsEditing(false)} onChange={(event: React.ChangeEvent) => { const nextValue = event.target.value setDraftPage(nextValue) applyPageDraft(nextValue) }} onKeyDown={(event: React.KeyboardEvent) => { if (event.key === "Enter" || event.key === "Escape") { event.currentTarget.blur() } }} className={cn( "h-8 px-2.5", "mx-1 w-14 min-w-14 rounded-md [&_[data-slot=input]]:text-center" )} /> ) : ( )} of {numPages || "–"}

) } function PdfEditorZoomControl({ documentId, disabled, }: { documentId: string disabled: boolean }) { const { state, provides: zoom } = useZoom(documentId) const current = state.currentZoomLevel const selectValue = isZoomMode(state.zoomLevel) ? state.zoomLevel : String(Number(current.toFixed(2))) const presets = ZOOM_PRESETS.includes(Number(current.toFixed(2))) ? ZOOM_PRESETS : [...ZOOM_PRESETS, Number(current.toFixed(2))].sort((a, b) => a - b) return (

zoom?.zoomOut()} > = MAX_ZOOM} onClick={() => zoom?.zoomIn()} >

) } function PdfEditorSearchControl({ documentId, disabled, open, onOpenChange, }: { documentId: string disabled: boolean open: boolean onOpenChange: (open: boolean) => void }) { const { state, provides } = useSearch(documentId) const { provides: scroll } = useScroll(documentId) const [draft, setDraft] = React.useState("") const [query, setQuery] = React.useState("") const [isSearching, setIsSearching] = React.useState(false) const providesRef = React.useRef(provides) const scrollRef = React.useRef(scroll) const requestIdRef = React.useRef(0) const inputRef = React.useRef(null) React.useEffect(() => { providesRef.current = provides scrollRef.current = scroll }, [provides, scroll]) React.useEffect(() => { if (!open) return const frame = window.requestAnimationFrame(() => inputRef.current?.focus()) return () => window.cancelAnimationFrame(frame) }, [open]) const scrollToResult = React.useCallback( (index: number) => { const result = state.results[index] if (!result || !scroll) return const firstRect = result.rects[0] scroll.scrollToPage({ pageNumber: result.pageIndex + 1, ...(firstRect ? { pageCoordinates: { x: firstRect.origin.x, y: firstRect.origin.y }, alignY: 30, } : {}), behavior: "auto", }) }, [scroll, state.results] ) const runSearch = React.useCallback((rawQuery: string) => { const nextQuery = rawQuery.trim() const requestId = requestIdRef.current + 1 requestIdRef.current = requestId setQuery(nextQuery) const searchProvider = providesRef.current const scrollProvider = scrollRef.current if (!searchProvider) { setIsSearching(false) return } if (!nextQuery) { searchProvider.stopSearch() setIsSearching(false) return } setIsSearching(true) searchProvider.startSearch() searchProvider.searchAllPages(nextQuery).wait( (result) => { if (requestIdRef.current !== requestId) return const first = result.results[0] if (first && scrollProvider) { searchProvider.goToResult(0) const firstRect = first.rects[0] scrollProvider.scrollToPage({ pageNumber: first.pageIndex + 1, ...(firstRect ? { pageCoordinates: { x: firstRect.origin.x, y: firstRect.origin.y, }, alignY: 30, } : {}), behavior: "auto", }) } setIsSearching(false) }, () => { if (requestIdRef.current === requestId) setIsSearching(false) } ) }, []) React.useEffect(() => { if (!draft.trim()) return const timeout = window.setTimeout( () => runSearch(draft), SEARCH_DEBOUNCE_MS ) return () => window.clearTimeout(timeout) }, [draft, runSearch]) const clear = () => { requestIdRef.current += 1 setDraft("") setQuery("") setIsSearching(false) provides?.stopSearch() } const navigate = (direction: 1 | -1) => { if (!provides || state.total === 0) return scrollToResult( direction === 1 ? provides.nextResult() : provides.previousResult() ) } const resultLabel = isSearching ? "Searching…" : !query ? "Type to search" : state.total ? `${state.activeResultIndex + 1} / ${state.total}` : "No results" return ( } >

) => { const next = event.target.value setDraft(next) if (next.trim()) { setIsSearching(true) } else { clear() } }} onKeyDown={(event: React.KeyboardEvent) => { if (event.key !== "Enter") return event.preventDefault() if (state.total) { navigate(event.shiftKey ? -1 : 1) } else if (draft.trim()) { runSearch(draft) } }} />

{resultLabel}

) } function PdfEditorModeSwitch({ mode, features, compact = false, onModeChange, }: { mode: PdfEditorMode features: PdfEditorResolvedFeatures compact?: boolean onModeChange: (mode: PdfEditorMode) => void }) { const options = PDF_EDITOR_MODE_OPTIONS.filter( (option) => option.feature === null || features[option.feature] ) return (

{options.map((option) => { const Glyph = option.glyph const active = option.id === mode return ( ) })}

) } /* -------------------------------------------------------------------------- */ /* Side panel shells */ /* -------------------------------------------------------------------------- */ function PanelTabStrip({ tabs, value, onChange, onClose, label, disabled = false, }: { tabs: Array<{ id: T label: string glyph: PdfEditorGlyph }> value: T | null onChange: (value: T) => void onClose: () => void label: string disabled?: boolean }) { return (

{tabs.map((tab) => { const Glyph = tab.glyph return ( onChange(tab.id)} > ) })}

) } /* -------------------------------------------------------------------------- */ /* Signature persistence + engine warm-up utilities */ /* -------------------------------------------------------------------------- */ function PdfEditorSignaturePersistence({ storageKey, }: { storageKey: string | null }) { const { provides: signatureCapability } = useSignatureCapability() React.useEffect(() => { if (!signatureCapability || !storageKey) return try { const raw = window.localStorage.getItem(storageKey) if (raw && signatureCapability.getEntries().length === 0) { signatureCapability.loadEntries(deserializeEntries(JSON.parse(raw))) } } catch { // Ignore corrupt or unavailable storage. } return signatureCapability.onEntriesChange((entries) => { try { window.localStorage.setItem( storageKey, JSON.stringify(serializeEntries(entries)) ) } catch { // Storage may be unavailable (private mode, quota). } }) }, [signatureCapability, storageKey]) return null } /* -------------------------------------------------------------------------- */ /* Fallback shell (engine loading, document loading, errors, empty) */ /* -------------------------------------------------------------------------- */ function PdfEditorDocumentStatus({ state, errorMessage, onUploadFile, }: { state: "loading" | "error" | "empty" errorMessage?: string onUploadFile?: (file: File) => void }) { const inputRef = React.useRef(null) return (

{state === "loading" ? ( ) : (

{state === "error" ? (errorMessage ?? "The PDF could not be loaded.") : "Open a PDF to start editing"}

{onUploadFile ? ( <> { const file = event.target.files?.[0] if (file) onUploadFile(file) event.currentTarget.value = "" }} /> ) : null}

)}

) } const EMPTY_EDITOR_CONTEXT: React.ContextType = { registry: null, coreState: null, isInitializing: true, pluginsReady: false, activeDocumentId: null, activeDocument: null, documents: {}, documentStates: [], } /* -------------------------------------------------------------------------- */ /* Editor (per loaded document) */ /* -------------------------------------------------------------------------- */ type EditorHandleImpl = PDFEditorHandle type PdfEditorInnerProps = { documentId: string document: PdfDocumentObject | null documentState: "loading" | "ready" | "empty" | "error" | "password" unavailableContent?: React.ReactNode fileName: string className?: string defaultZoom: PDFEditorZoomLevel defaultMode: PdfEditorMode leftPanel: PdfEditorLeftPanel | null setLeftPanel: React.Dispatch> formDesignMode: boolean setFormDesignMode: React.Dispatch> annotationAuthor: string features: PdfEditorResolvedFeatures showToolbar: boolean showUpload: boolean showDownload: boolean toolbarActions?: React.ReactNode selectionActions: PdfEditorSelectionAction[] signatureFontsStylesheetUrl: string | null renderPageOverlay?: (props: PDFEditorPageOverlayProps) => React.ReactNode handleRef: React.MutableRefObject onReplaceDocument: (buffer: ArrayBuffer, fileName: string) => void onUploadFile: (file: File) => void onActivePageChange?: (pageNumber: number) => void onModeChange?: (mode: PdfEditorMode) => void onAnnotationEvent?: (event: AnnotationEvent) => void onAnnotationsChange?: (items: AnnotationTransferItem[]) => void onFormValuesChange?: (values: Record) => void onRedactionsApplied?: () => void onSave?: (result: { buffer: ArrayBuffer; fileName: string }) => void onCapture?: (event: CaptureAreaEvent) => void onToast?: (toast: PDFEditorToast) => void onSelectionAction?: ( actionId: string, payload: PdfEditorSelectionPayload ) => void } const LEFT_PANEL_TABS: Array<{ id: PdfEditorLeftPanel label: string glyph: PdfEditorGlyph feature: keyof PdfEditorFeatureFlags | null }> = [ { id: "thumbnails", label: "Thumbnails", glyph: GridGlyph, feature: null }, { id: "outline", label: "Outline", glyph: ListTreeGlyph, feature: "outline" }, { id: "attachments", label: "Attachments", glyph: PaperclipGlyph, feature: "attachments", }, { id: "pages", label: "Organize pages", glyph: LayersGlyph, feature: "pages", }, ] const RIGHT_PANEL_TABS: Array<{ id: PdfEditorRightPanel label: string glyph: PdfEditorGlyph feature: keyof PdfEditorFeatureFlags | null }> = [ { id: "properties", label: "Properties", glyph: SlidersGlyph, feature: null }, { id: "comments", label: "Comments", glyph: CommentsGlyph, feature: "comments", }, { id: "redactions", label: "Redactions", glyph: EyeOffGlyph, feature: "redact", }, { id: "stamps", label: "Stamps", glyph: StampGlyph, feature: "stamps" }, { id: "signatures", label: "Signatures", glyph: SignatureGlyph, feature: "sign", }, { id: "forms", label: "Form fields", glyph: TextFieldGlyph, feature: "forms", }, ] function PdfEditorInner({ documentId, document: pdfDocument, documentState, unavailableContent, fileName, className, defaultZoom, defaultMode, leftPanel, setLeftPanel, formDesignMode, setFormDesignMode, annotationAuthor, features, showToolbar, showUpload, showDownload, toolbarActions, selectionActions, signatureFontsStylesheetUrl, renderPageOverlay, handleRef, onReplaceDocument, onUploadFile, onActivePageChange, onModeChange, onAnnotationEvent, onAnnotationsChange, onFormValuesChange, onRedactionsApplied, onSave, onCapture, onToast, onSelectionAction, }: PdfEditorInnerProps) { const { registry } = useRegistry() const permissions = useDocumentPermissions(documentId) const { state: scrollState, provides: scroll } = useScroll(documentId) const { provides: scrollCapability } = useScrollCapability() const { state: zoomState, provides: zoom } = useZoom(documentId) const { provides: rotate } = useRotate(documentId) const { spreadMode, provides: spread } = useSpread(documentId) const { provides: pan, isPanning } = usePan(documentId) const { state: captureState, provides: capture } = useCapture(documentId) const { provides: fullscreen, state: fullscreenState } = useFullscreen() const { provides: historyCapability } = useHistoryCapability() const { provides: annotationCapability } = useAnnotationCapability() const { state: annotationState, provides: annotation } = useAnnotation(documentId) const { state: redactionState, provides: redaction } = useRedaction(documentId) const { provides: exportScope } = useExport(documentId) const { provides: print } = usePrint(documentId) const { provides: formCapability } = useFormCapability() const { provides: selectionCapability } = useSelectionCapability() const [mode, setModeState] = React.useState(defaultMode) const [rightPanel, setRightPanel] = React.useState(null) const [dialog, setDialog] = React.useState( null ) const [searchOpen, setSearchOpen] = React.useState(false) const [historyState, setHistoryState] = React.useState({ canUndo: false, canRedo: false, }) const [horizontalScroll, setHorizontalScroll] = React.useState(false) const [isDownloading, setIsDownloading] = React.useState(false) const rootRef = React.useRef(null) const [toastContainer, setToastContainer] = React.useState(null) const [editorToastManager] = React.useState(() => ToastPrimitive.createToastManager() ) const viewportElementRef = React.useRef(null) const uploadInputRef = React.useRef(null) const annotationImportInputRef = React.useRef(null) const [shellRef, shellWidth] = useElementWidth() const leftInline = useInlineThumbnailSidebar(shellWidth) const rightInline = shellWidth >= RIGHT_PANEL_INLINE_MIN_WIDTH const compactToolbar = shellWidth > 0 && shellWidth <= TOOLBAR_STACK_MAX_WIDTH const activePage = scrollState.currentPage const numPages = pdfDocument?.pageCount ?? 0 const controlsDisabled = !numPages const currentZoom = zoomState.currentZoomLevel const selectedAnnotations = React.useMemo( () => getSelectedAnnotations(annotationState), [annotationState] ) const activeToolId = annotationState.activeToolId const activeTool = React.useMemo( () => activeToolId && annotationCapability ? annotationCapability.getTool(activeToolId) : null, [activeToolId, annotationCapability] ) const historyScope = React.useMemo( () => historyCapability?.forDocument(documentId) ?? null, [documentId, historyCapability] ) const formScope = React.useMemo( () => formCapability?.forDocument(documentId) ?? null, [documentId, formCapability] ) const selectionScope = React.useMemo( () => selectionCapability?.forDocument(documentId) ?? null, [documentId, selectionCapability] ) /* ---- notices ---------------------------------------------------------- */ const notify = React.useCallback( (message: string, tone: PdfEditorNoticeTone = "info") => { if (onToast) { onToast({ message, tone }) return } editorToastManager.add({ title: message, type: tone }) }, [editorToastManager, onToast] ) const setRootElement = React.useCallback((element: HTMLDivElement | null) => { rootRef.current = element setToastContainer(element) }, []) /* ---- tool helpers ----------------------------------------------------- */ const deactivateTools = React.useCallback(() => { annotation?.setActiveTool(null) if (redactionState.isRedacting) redaction?.endRedact() if (isPanning) pan?.disablePan() if (captureState.isMarqueeCaptureActive) capture?.disableMarqueeCapture() if (zoomState.isMarqueeZoomActive) zoom?.disableMarqueeZoom() }, [ annotation, capture, captureState.isMarqueeCaptureActive, isPanning, pan, redaction, redactionState.isRedacting, zoom, zoomState.isMarqueeZoomActive, ]) const setActiveTool = React.useCallback( (toolId: string | null) => { if (!annotation) return if (isPanning) pan?.disablePan() if (captureState.isMarqueeCaptureActive) capture?.disableMarqueeCapture() if (zoomState.isMarqueeZoomActive) zoom?.disableMarqueeZoom() if (redactionState.isRedacting) redaction?.endRedact() annotation.setActiveTool( toolId !== null && annotationState.activeToolId === toolId ? null : toolId ) }, [ annotation, annotationState.activeToolId, capture, captureState.isMarqueeCaptureActive, isPanning, pan, redaction, redactionState.isRedacting, zoom, zoomState.isMarqueeZoomActive, ] ) const setMode = React.useCallback( (nextMode: PdfEditorMode) => { setModeState((previous) => { if (previous === nextMode) return previous onModeChange?.(nextMode) return nextMode }) const defaultPanel: Record = { view: null, annotate: "properties", sign: "signatures", forms: "forms", redact: "redactions", } const panel = defaultPanel[nextMode] if (panel) setRightPanel(panel) else setRightPanel(null) }, [onModeChange] ) React.useEffect(() => { deactivateTools() annotation?.deselectAnnotation() // Only react to mode changes here; tool state is otherwise managed by the toolbar. // eslint-disable-next-line react-hooks/exhaustive-deps }, [mode]) React.useEffect(() => { annotation?.setLocked( mode === "forms" && formDesignMode ? { type: LockModeType.None } : { type: LockModeType.Include, categories: ["form"] } ) }, [annotation, formDesignMode, mode]) React.useEffect(() => { if (mode !== "forms" && formDesignMode) setFormDesignMode(false) }, [formDesignMode, mode, setFormDesignMode]) /* ---- history ---------------------------------------------------------- */ React.useEffect(() => { if (!historyScope) return const sync = () => { const state = historyScope.getHistoryState() setHistoryState({ canUndo: state.global.canUndo, canRedo: state.global.canRedo, }) } sync() return historyScope.onHistoryChange(sync) }, [historyScope]) /* ---- callbacks: page, annotations, forms, redactions ------------------ */ React.useEffect(() => { if (!controlsDisabled && activePage > 0) onActivePageChange?.(activePage) }, [activePage, controlsDisabled, onActivePageChange]) const onAnnotationEventRef = React.useRef(onAnnotationEvent) const onAnnotationsChangeRef = React.useRef(onAnnotationsChange) const onFormValuesChangeRef = React.useRef(onFormValuesChange) const onRedactionsAppliedRef = React.useRef(onRedactionsApplied) React.useEffect(() => { onAnnotationEventRef.current = onAnnotationEvent onAnnotationsChangeRef.current = onAnnotationsChange onFormValuesChangeRef.current = onFormValuesChange onRedactionsAppliedRef.current = onRedactionsApplied }) React.useEffect(() => { if (!annotation) return let timeout: number | null = null const unsubscribe = annotation.onAnnotationEvent((event) => { onAnnotationEventRef.current?.(event) if (!onAnnotationsChangeRef.current) return if (event.type === "loaded" || !event.committed) return if (timeout !== null) window.clearTimeout(timeout) timeout = window.setTimeout(() => { timeout = null annotation.exportAnnotations().wait((items) => { onAnnotationsChangeRef.current?.(items) }, noop) }, 400) }) return () => { if (timeout !== null) window.clearTimeout(timeout) unsubscribe() } }, [annotation]) React.useEffect(() => { if (!formScope) return return formScope.onFieldValueChange(() => { onFormValuesChangeRef.current?.(formScope.getFormValues()) }) }, [formScope]) React.useEffect(() => { if (!redaction) return return redaction.onRedactionEvent((event) => { if (event.type !== "commit") return if (event.success) { notify( "Redactions applied. The content was removed from the document.", "success" ) onRedactionsAppliedRef.current?.() } else { notify("The redactions could not be applied.", "error") } }) }, [notify, redaction]) /* ---- initial zoom (numeric defaults never lift the viewport gate) ----- */ const initialZoomDocumentRef = React.useRef(null) React.useEffect(() => { if (!pdfDocument || !zoom) return if (initialZoomDocumentRef.current === documentId) return initialZoomDocumentRef.current = documentId zoom.requestZoom(toZoomLevel(defaultZoom)) }, [defaultZoom, documentId, pdfDocument, zoom]) /* ---- document actions ------------------------------------------------- */ const scrollToPage = React.useCallback( ( pageNumber: number, options?: | { smooth?: boolean } | ScrollIntoViewOptions ) => { const smooth = options && "smooth" in options ? options.smooth : options && "behavior" in options ? options.behavior === "smooth" : false scroll?.scrollToPage({ pageNumber, behavior: smooth ? "smooth" : "auto" }) }, [scroll] ) const scrollToAnnotation = React.useCallback( (target: PdfAnnotationObject) => { scroll?.scrollToPage({ pageNumber: target.pageIndex + 1, pageCoordinates: { x: target.rect.origin.x, y: target.rect.origin.y }, alignX: 50, alignY: 25, behavior: "smooth", }) }, [scroll] ) const getDocumentBuffer = React.useCallback(async () => { if (!exportScope) throw new Error("The document is not ready.") if (annotation && annotationState.hasPendingChanges) { try { await annotation.commit().toPromise() } catch { // Continue with whatever the engine currently holds. } } return exportScope.saveAsCopy().toPromise() }, [annotation, annotationState.hasPendingChanges, exportScope]) const downloadDocument = React.useCallback( async (name?: string) => { const targetName = getPdfFileName(name ?? fileName) setIsDownloading(true) try { const buffer = await getDocumentBuffer() downloadArrayBuffer(buffer, targetName) onSave?.({ buffer, fileName: targetName }) } catch (error) { console.error(error) notify("The document could not be saved.", "error") } finally { setIsDownloading(false) } }, [fileName, getDocumentBuffer, notify, onSave] ) const flattenDocument = React.useCallback(() => { setDialog({ type: "confirm", title: "Flatten annotations and form fields?", description: "Annotations and filled form fields become part of the page content and can no longer be edited.", confirmLabel: "Flatten", destructive: true, onConfirm: async () => { if (!registry || !pdfDocument) return try { if (annotation && annotationState.hasPendingChanges) { await annotation.commit().toPromise() } const engine = registry.getEngine() for (const page of pdfDocument.pages) { await engine .flattenPage(pdfDocument, page, { flag: PdfPageFlattenFlag.Display, }) .toPromise() } const buffer = await engine.saveAsCopy(pdfDocument).toPromise() onReplaceDocument(buffer, fileName) notify("Annotations flattened into the page content.", "success") } catch (error) { console.error(error) notify("The document could not be flattened.", "error") } }, }) }, [ annotation, annotationState.hasPendingChanges, fileName, notify, onReplaceDocument, pdfDocument, registry, ]) const exportAnnotationsJson = React.useCallback(() => { if (!annotation) return annotation.exportAnnotations().wait( (items) => { downloadBlob( new Blob([JSON.stringify(serializeAnnotationItems(items), null, 2)], { type: "application/json", }), `${fileName.replace(/\.pdf$/i, "")}-annotations.json` ) notify( `Exported ${items.length} annotation${items.length === 1 ? "" : "s"}.`, "success" ) }, () => notify("The annotations could not be exported.", "error") ) }, [annotation, fileName, notify]) const importAnnotationsFile = React.useCallback( async (file: File) => { if (!annotation) return try { const items = deserializeAnnotationItems(JSON.parse(await file.text())) annotation.importAnnotations(items) notify( `Imported ${items.length} annotation${items.length === 1 ? "" : "s"}.`, "success" ) } catch { notify("The file is not a valid annotation export.", "error") } }, [annotation, notify] ) const deleteSelectedAnnotations = React.useCallback(() => { if (!annotation || selectedAnnotations.length === 0) return const deletable = selectedAnnotations.filter( (item) => !annotation.isAnnotationStructurallyLocked(item.object) ) if (deletable.length === 0) return annotation.deleteAnnotations( deletable.map((item) => ({ pageIndex: item.object.pageIndex, id: item.object.id, })) ) }, [annotation, selectedAnnotations]) const applyAllRedactions = React.useCallback(() => { if (!redaction || redactionState.pendingCount === 0) return setDialog({ type: "confirm", title: `Apply ${redactionState.pendingCount} redaction${redactionState.pendingCount === 1 ? "" : "s"}?`, description: "Redaction permanently removes the marked content from the document. This cannot be undone.", confirmLabel: "Apply redactions", onConfirm: () => { redaction.commitAllPending().wait(noop, noop) }, }) }, [redaction, redactionState.pendingCount]) /* ---- imperative handle ------------------------------------------------ */ React.useEffect(() => { if (controlsDisabled) return handleRef.current = { getDocumentBuffer, download: downloadDocument, print: async (options) => { if (!print) throw new Error("Printing is not available.") await print.print(options).toPromise() }, exportAnnotations: async () => { if (!annotation) return [] return annotation.exportAnnotations().toPromise() }, importAnnotations: (items) => annotation?.importAnnotations(items), getFormValues: () => formScope?.getFormValues() ?? {}, setFormValues: async (values) => { if (!formScope) return await formScope.setFormValues(values).toPromise() }, applyRedactions: async () => { if (!redaction) return await redaction.commitAllPending().toPromise() }, setMode, setActiveTool: (toolId) => annotation?.setActiveTool(toolId), scrollToPage: (pageNumber, options) => scrollToPage(pageNumber, options), undo: () => historyScope?.undo(), redo: () => historyScope?.redo(), getViewportElement: () => viewportElementRef.current, } return () => { handleRef.current = null } }, [ annotation, controlsDisabled, downloadDocument, formScope, getDocumentBuffer, handleRef, historyScope, print, redaction, scrollToPage, setMode, ]) /* ---- keyboard shortcuts ----------------------------------------------- */ const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (controlsDisabled) return const key = event.key const mod = event.metaKey || event.ctrlKey if (isTypingTarget(event.target)) { if (key === "Escape") (event.target as HTMLElement).blur() return } if (key === "Escape") { deactivateTools() annotation?.deselectAnnotation() selectionScope?.clear() setSearchOpen(false) event.preventDefault() return } if ( (key === "Delete" || key === "Backspace") && selectedAnnotations.length > 0 ) { deleteSelectedAnnotations() event.preventDefault() return } if (mod && key.toLowerCase() === "z") { if (event.shiftKey) historyScope?.redo() else historyScope?.undo() event.preventDefault() return } if (mod && key.toLowerCase() === "y") { historyScope?.redo() event.preventDefault() return } if (mod && (key === "=" || key === "+")) { zoom?.zoomIn() event.preventDefault() return } if (mod && key === "-") { zoom?.zoomOut() event.preventDefault() return } if (mod && key === "0") { zoom?.requestZoom(ZoomMode.FitPage) event.preventDefault() return } if (mod && key.toLowerCase() === "p" && features.print) { setDialog({ type: "print" }) event.preventDefault() return } if (mod && key.toLowerCase() === "s" && showDownload) { void downloadDocument() event.preventDefault() return } if (mod && key.toLowerCase() === "f") { setSearchOpen(true) event.preventDefault() return } if (mod && key.toLowerCase() === "a" && annotation && mode !== "view") { const ids = annotationState.pages[Math.max(0, activePage - 1)] ?? [] if (ids.length > 0) { annotation.setSelection(ids) event.preventDefault() } return } if (!mod && !event.altKey && key.toLowerCase() === "h") { pan?.togglePan() event.preventDefault() return } if (!mod && !event.altKey && key.toLowerCase() === "v") { deactivateTools() event.preventDefault() } }, [ activePage, annotation, annotationState.pages, controlsDisabled, deactivateTools, deleteSelectedAnnotations, downloadDocument, features.print, historyScope, mode, pan, selectedAnnotations.length, selectionScope, showDownload, zoom, ] ) const handlePointerDownCapture = React.useCallback( (event: React.PointerEvent) => { const root = rootRef.current if (!root) return const active = window.document.activeElement if (active && root.contains(active) && active !== root) return if (!(event.target instanceof Node) || !root.contains(event.target)) return if (isTypingTarget(event.target)) return root.focus({ preventScroll: true }) }, [] ) /* ---- context ---------------------------------------------------------- */ const openDialog = React.useCallback( (request: PdfEditorDialogRequest) => setDialog(request), [] ) const toggleLeftPanel = React.useCallback( (panel: PdfEditorLeftPanel) => setLeftPanel((previous) => (previous === panel ? null : panel)), [setLeftPanel] ) const toggleRightPanel = React.useCallback( (panel: PdfEditorRightPanel) => setRightPanel((previous) => (previous === panel ? null : panel)), [] ) const contextValue = React.useMemo( () => ({ documentId, document: pdfDocument, fileName, mode, setMode, leftPanel, setLeftPanel, toggleLeftPanel, rightPanel, setRightPanel, toggleRightPanel, openDialog, notify, features, permissions, annotationAuthor, selectionActions, formDesignMode, setFormDesignMode, replaceDocument: (buffer, name) => onReplaceDocument(buffer, name ?? fileName), downloadDocument, getDocumentBuffer, scrollToPage, scrollToAnnotation, onCapture, onSelectionAction, signatureFontsStylesheetUrl, }), [ annotationAuthor, documentId, downloadDocument, features, fileName, formDesignMode, getDocumentBuffer, leftPanel, mode, notify, onCapture, onReplaceDocument, onSelectionAction, openDialog, pdfDocument, permissions, rightPanel, scrollToAnnotation, scrollToPage, selectionActions, setFormDesignMode, setLeftPanel, setMode, signatureFontsStylesheetUrl, toggleLeftPanel, toggleRightPanel, ] ) /* ---- page renderer ---------------------------------------------------- */ const renderPage = React.useCallback( (page: PageLayout) => (

( )} /> ( )} groupSelectionMenu={(props) => ( )} /> ( )} /> {renderPageOverlay?.({ pageNumber: page.pageNumber, pageWidth: page.width, pageHeight: page.height, scale: currentZoom, rotation: 0, })} ), [currentZoom, documentId, renderPageOverlay] ) /* ---- toolbar pieces --------------------------------------------------- */ const activeToolColorKey = React.useMemo(() => { if (!activeTool) return null const defaults = activeTool.defaults as Record if ("fontColor" in defaults) return "fontColor" if ("strokeColor" in defaults) return "strokeColor" if ("color" in defaults) return "color" return null }, [activeTool]) const activeToolColor = activeToolColorKey ? String( (activeTool?.defaults as Record)[activeToolColorKey] ?? "#111827" ) : null const visibleLeftTabs = LEFT_PANEL_TABS.filter( (tab) => tab.feature === null || features[tab.feature] ) const visibleRightTabs = RIGHT_PANEL_TABS.filter( (tab) => tab.feature === null || features[tab.feature] ) const canAnnotate = features.annotate && permissions.canModifyAnnotations const canRedact = features.redact && permissions.canModifyContents const canDesignForms = features.forms && permissions.canModifyAnnotations const selectToolButton = ( ) const renderToolButton = ( tool: { id: string label: string glyph: PdfEditorGlyph hint?: string }, disabled: boolean ) => { const Glyph = tool.glyph return ( setActiveTool(tool.id)} > ) } let ribbon: React.ReactNode = null if (mode === "view") { ribbon = ( <> {selectToolButton} pan?.togglePan()} > zoom?.toggleMarqueeZoom()} > {features.capture ? ( capture?.toggleMarqueeCapture()} > ) : null} ) } else if (mode === "annotate") { ribbon = ( <> {selectToolButton} {PDF_EDITOR_ANNOTATION_TOOL_GROUPS.map((group) => ( {group.tools.map((tool) => renderToolButton(tool, !canAnnotate))} ))} {features.stamps ? ( toggleRightPanel("stamps")} > ) : null} {activeTool && activeToolColorKey && activeToolColor ? ( <> annotationCapability?.setToolDefaults(activeTool.id, { [activeToolColorKey]: color, }) } /> ) : null}

{features.comments ? ( toggleRightPanel("comments")} > ) : null} toggleRightPanel("properties")} >

) } else if (mode === "sign") { ribbon = ( <> {selectToolButton} toggleRightPanel("signatures")} > {renderToolButton( { id: "freeText", label: "Text box", glyph: TextGlyph, hint: "Click to add text", }, !canAnnotate )} { if (!annotation) return annotationCapability?.setToolDefaults("freeText", { contents: new Date().toLocaleDateString(), }) annotation.setActiveTool("freeText", { date: true }) }} > {renderToolButton( { id: "ink", label: "Draw", glyph: EditGlyph, hint: "Sign by hand" }, !canAnnotate )} ) } else if (mode === "forms") { ribbon = ( <> {selectToolButton}

{formDesignMode ? ( <> {PDF_EDITOR_FORM_TOOLS.map((tool) => renderToolButton(tool, !canDesignForms) )} ) : null}

toggleRightPanel("forms")} > toggleRightPanel("properties")} >

) } else if (mode === "redact") { const activeType = redactionState.activeType const pendingCount = redactionState.pendingCount ribbon = ( <> {selectToolButton} { deactivateTools() if (activeType !== RedactionMode.Redact) redaction?.enableRedact() }} > { deactivateTools() if (activeType !== RedactionMode.RedactSelection) redaction?.enableRedactSelection() }} > { deactivateTools() if (activeType !== RedactionMode.MarqueeRedact) redaction?.enableMarqueeRedact() }} > 0 ? "secondary" : "outline"} className="me-1 tabular-nums" > {pendingCount} pending

toggleRightPanel("redactions")} > toggleRightPanel("properties")} >

) } let rightPanelContent: React.ReactNode = null switch (rightPanel) { case "properties": rightPanelContent = break case "comments": rightPanelContent = break case "redactions": rightPanelContent = break case "stamps": rightPanelContent = break case "signatures": rightPanelContent = break case "forms": rightPanelContent = break default: rightPanelContent = null } let leftPanelContent: React.ReactNode = null switch (leftPanel) { case "thumbnails": leftPanelContent = ( scrollToPage(pageNumber)} /> ) break case "outline": leftPanelContent = break case "attachments": leftPanelContent = break case "pages": leftPanelContent = ( ) break default: leftPanelContent = null } return (

{ const file = event.target.files?.[0] if (file) onUploadFile(file) event.currentTarget.value = "" }} /> { const file = event.target.files?.[0] if (file) void importAnnotationsFile(file) event.currentTarget.value = "" }} /> {showToolbar ? (

toggleLeftPanel("thumbnails")} > scrollToPage(pageNumber)} />

historyScope?.undo()} > historyScope?.redo()} >

rotate?.rotateBackward()} > rotate?.rotateForward()} >

toggleRightPanel("properties")} > {toolbarActions ? ( <> {toolbarActions} ) : null} {showDownload ? ( void downloadDocument()} > {isDownloading ? ( ) : ( )} ) : null} } > {fileName} {showUpload ? ( uploadInputRef.current?.click() } > Open PDF… ) : null} {showDownload ? ( void downloadDocument()} > Download ⌘S ) : null} {features.print ? ( setDialog({ type: "print" })} > Print… ⌘P ) : null} {features.capture ? ( capture?.toggleMarqueeCapture() } > Capture area as image ) : null} {features.fullscreen ? ( fullscreen?.toggleFullscreen()} > {fullscreenState.isFullscreen ? ( ) : ( )} {fullscreenState.isFullscreen ? "Exit full screen" : "Full screen"} ) : null} setDialog({ type: "properties" }) } > Document properties… {features.security ? ( setDialog({ type: "security" }) } > Security… ) : null} Flatten annotations… Export annotations (JSON) annotationImportInputRef.current?.click() } > Import annotations (JSON)… Page layout spread?.setSpreadMode( String(value) as SpreadMode ) } > Single page Two pages Two pages, cover first setDialog({ type: "shortcuts" })} > Keyboard shortcuts

{ribbon}

) : null}

setLeftPanel(null)} label="Sidebar panels" disabled={controlsDisabled} />

{controlsDisabled ? null : leftPanelContent}

) : null } right={ rightPanel !== null ? (

setRightPanel(null)} label="Detail panels" disabled={controlsDisabled} />

{controlsDisabled ? null : rightPanel === "properties" ? ( {rightPanelContent} ) : ( rightPanelContent )}

) : null } > {controlsDisabled ? ( unavailableContent ) : ( )}

{!controlsDisabled ? ( <> {features.capture ? ( ) : null} { if (!open) setDialog(null) }} /> { if (!open) setDialog(null) }} /> { if (!open) setDialog(null) }} /> { if (!open) setDialog(null) }} /> { if (!open) setDialog(null) }} /> { if (!open) setDialog(null) }} /> { if (dialog?.type === "confirm") dialog.onConfirm() }} onOpenChange={(open) => { if (!open) setDialog(null) }} /> ) : null}

) } /* -------------------------------------------------------------------------- */ /* Document loader */ /* -------------------------------------------------------------------------- */ type PdfEditorDocumentLoaderProps = Omit< PdfEditorInnerProps, | "documentId" | "document" | "documentState" | "fileName" | "leftPanel" | "setLeftPanel" | "formDesignMode" | "setFormDesignMode" | "unavailableContent" > & { source: EditorSource | null sourceLoading: boolean engineError?: string fileNameOverride?: string signatureStorageKey: string | null onDocumentLoadSuccess?: PDFEditorProps["onDocumentLoadSuccess"] onDocumentLoadError?: PDFEditorProps["onDocumentLoadError"] } function PdfEditorDocumentLoader({ source, sourceLoading, engineError, fileNameOverride, signatureStorageKey, onDocumentLoadSuccess, onDocumentLoadError, ...innerProps }: PdfEditorDocumentLoaderProps) { const registryState = useRegistry() const { provides: documentManager } = useDocumentManagerCapability() const { activeDocumentId, activeDocument } = useActiveDocument() const [loadError, setLoadError] = React.useState<{ sourceKey: string message: string } | null>(null) const [requestedDocument, setRequestedDocument] = React.useState<{ sourceKey: string documentId: string } | null>(null) const [leftPanel, setLeftPanel] = React.useState( null ) const [formDesignMode, setFormDesignMode] = React.useState(false) const openedSourceRef = React.useRef(null) const successRef = React.useRef(onDocumentLoadSuccess) const errorRef = React.useRef(onDocumentLoadError) React.useEffect(() => { successRef.current = onDocumentLoadSuccess errorRef.current = onDocumentLoadError }) React.useEffect(() => { if (!documentManager || !source) return if (openedSourceRef.current === source.key) return openedSourceRef.current = source.key setLoadError(null) const previousIds = documentManager .getOpenDocuments() .map((item) => item.id) const fail = (message: string) => { if (openedSourceRef.current !== source.key) return setLoadError({ sourceKey: source.key, message }) errorRef.current?.(message) } const task = source.kind === "url" ? documentManager.openDocumentUrl({ url: source.url, name: source.name, mode: /^(blob|data):/i.test(source.url) ? "full-fetch" : "auto", autoActivate: previousIds.length === 0, }) : documentManager.openDocumentBuffer({ buffer: source.buffer.slice(0), name: source.name, autoActivate: previousIds.length === 0, }) task.wait( (response) => { if (openedSourceRef.current !== source.key) return setRequestedDocument({ sourceKey: source.key, documentId: response.documentId, }) response.task.wait( (openedDocument) => { if (openedSourceRef.current !== source.key) return documentManager.setActiveDocument(response.documentId) successRef.current?.({ numPages: openedDocument.pageCount, documentId: response.documentId, fileName: source.name, }) previousIds.forEach((id) => { if (id !== response.documentId) { documentManager.closeDocument(id).wait(noop, noop) } }) }, (failure) => { // Password prompts are handled through the document state. if (failure?.reason?.code === PdfErrorCode.Password) { documentManager.setActiveDocument(response.documentId) return } fail(failure?.reason?.message ?? "The PDF could not be loaded.") } ) }, (failure) => fail(failure?.reason?.message ?? "The PDF could not be loaded.") ) }, [documentManager, source]) const fileName = source?.name ?? getPdfFileName(fileNameOverride) const isRequestedDocument = requestedDocument?.sourceKey === source?.key && requestedDocument?.documentId === activeDocumentId const currentError = loadError?.sourceKey === source?.key ? loadError?.message : undefined const passwordRequired = isRequestedDocument && activeDocument?.status === "error" && activeDocument.errorCode === PdfErrorCode.Password const documentFailed = currentError !== undefined || (isRequestedDocument && activeDocument?.status === "error" && !passwordRequired) const document = !sourceLoading && !documentFailed && !engineError && isRequestedDocument && activeDocument?.status === "loaded" ? activeDocument.document : null const status = engineError || documentFailed ? "error" : !source && !sourceLoading ? "empty" : "loading" return ( ) : ( ) } /> ) } /* -------------------------------------------------------------------------- */ /* Root */ /* -------------------------------------------------------------------------- */ export const PDFEditor = React.forwardRef( function PDFEditor( { className, src, fileName, defaultZoom = "fit-width", defaultMode = "view", annotationAuthor = DEFAULT_ANNOTATION_AUTHOR, colorPresets = PDF_EDITOR_DEFAULT_COLOR_PRESETS, features, showToolbar = true, showUpload = true, showDownload = true, toolbarActions, selectionActions, persistSignatures = true, stampManifests, signatureFontsStylesheetUrl = PDF_EDITOR_DEFAULT_SIGNATURE_FONTS_URL, resolveScrollAreaViewport, renderPageOverlay, onDocumentLoadSuccess, onDocumentLoadError, onActivePageChange, onModeChange, onAnnotationEvent, onAnnotationsChange, onFormValuesChange, onRedactionsApplied, onSave, onCapture, onPdfUpload, onToast, onSelectionAction, }, ref ) { const { engine, error: engineError } = useSharedPdfEngine() const { source, loading: sourceLoading, replace, } = useEditorSource(src, fileName) const handleRef = React.useRef(null) const resolvedFeatures = React.useMemo( () => ({ ...PDF_EDITOR_DEFAULT_FEATURES, ...features }), [features] ) const resolvedSelectionActions = React.useMemo( () => selectionActions ?? [], [selectionActions] ) const signatureStorageKey = persistSignatures === false ? null : typeof persistSignatures === "string" ? persistSignatures : DEFAULT_SIGNATURE_STORAGE_KEY const handleUploadFile = React.useCallback( (file: File) => { file.arrayBuffer().then((buffer) => { replace(buffer, getPdfFileName(file.name)) onPdfUpload?.(file) }) }, [onPdfUpload, replace] ) // Plugin registrations are created once per editor instance. const [plugins] = React.useState(() => [ createPluginRegistration(DocumentManagerPluginPackage), createPluginRegistration(ViewportPluginPackage, { viewportGap: PAGE_GAP, }), createPluginRegistration(ScrollPluginPackage, { defaultPageGap: PAGE_GAP, defaultBufferSize: 2, }), createPluginRegistration(RenderPluginPackage), createPluginRegistration(TilingPluginPackage, { tileSize: 768, overlapPx: 2.5, extraRings: 0, }), createPluginRegistration(InteractionManagerPluginPackage), createPluginRegistration(SelectionPluginPackage, { menuHeight: SELECTION_MENU_HEIGHT, }), createPluginRegistration(SearchPluginPackage, { showAllResults: true }), createPluginRegistration(ThumbnailPluginPackage, { width: THUMBNAIL_WIDTH, gap: THUMBNAIL_GAP, imagePadding: THUMBNAIL_IMAGE_PADDING, labelHeight: THUMBNAIL_LABEL_HEIGHT, paddingY: THUMBNAIL_PANE_PADDING_Y, buffer: 3, autoScroll: true, scrollBehavior: "auto", }), createPluginRegistration(ZoomPluginPackage, { defaultZoomLevel: toZoomLevel(defaultZoom), minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM, }), createPluginRegistration(RotatePluginPackage), createPluginRegistration(SpreadPluginPackage, { defaultSpreadMode: SpreadMode.None, }), createPluginRegistration(PanPluginPackage, { defaultMode: "never" }), createPluginRegistration(HistoryPluginPackage), createPluginRegistration(AnnotationPluginPackage, { annotationAuthor, colorPresets, autoCommit: true, selectAfterCreate: true, deactivateToolAfterCreate: false, locked: { type: LockModeType.Include, categories: ["form"] }, }), createPluginRegistration(FormPluginPackage), createPluginRegistration(RedactionPluginPackage, { drawBlackBoxes: true, useAnnotationMode: true, }), createPluginRegistration(StampPluginPackage, { defaultLibrary: { id: "custom", name: "Custom stamps", categories: ["custom", "sidebar"], }, ...(stampManifests && stampManifests.length > 0 ? { manifests: [ { url: PDF_EDITOR_DEFAULT_STAMP_MANIFEST_URL, fallbackLocale: "en", }, ...stampManifests.map((url) => ({ url })), ], } : {}), }), createPluginRegistration(SignaturePluginPackage, { mode: SignatureMode.SignatureAndInitials, defaultSize: { width: 160, height: 56 }, }), createPluginRegistration(ExportPluginPackage, { defaultFileName: "document.pdf", }), createPluginRegistration(PrintPluginPackage), createPluginRegistration(CapturePluginPackage, { scale: 2, imageType: "image/png", withAnnotations: true, }), createPluginRegistration(FullscreenPluginPackage), createPluginRegistration(BookmarkPluginPackage), createPluginRegistration(AttachmentPluginPackage), ]) React.useImperativeHandle( ref, () => ({ getDocumentBuffer: () => handleRef.current?.getDocumentBuffer() ?? Promise.reject(new Error("The document is not ready.")), download: (name) => handleRef.current?.download(name) ?? Promise.resolve(), print: (options) => handleRef.current?.print(options) ?? Promise.resolve(), exportAnnotations: () => handleRef.current?.exportAnnotations() ?? Promise.resolve([]), importAnnotations: (items) => handleRef.current?.importAnnotations(items), getFormValues: () => handleRef.current?.getFormValues() ?? {}, setFormValues: (values) => handleRef.current?.setFormValues(values) ?? Promise.resolve(), applyRedactions: () => handleRef.current?.applyRedactions() ?? Promise.resolve(), setMode: (mode) => handleRef.current?.setMode(mode), setActiveTool: (toolId) => handleRef.current?.setActiveTool(toolId), scrollToPage: (pageNumber, options) => handleRef.current?.scrollToPage(pageNumber, options), undo: () => handleRef.current?.undo(), redo: () => handleRef.current?.redo(), getViewportElement: () => handleRef.current?.getViewportElement() ?? null, }), [] ) const editor = ( ) return ( {engine ? ( {editor} ) : ( editor )} ) } ) function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const { className: viewportPropsClassName, ref: viewportPropsRef, ...resolvedViewportProps } = viewportProps ?? {} const composedViewportRef = React.useMemo( () => InlineComposeRefs(viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) if ( !viewportProps && !viewportRef && !viewportClassName && !scrollFade && !scrollbarGutter && !scrollbarOverflowOnly ) { return ( [data-orientation=vertical]]:hidden", className )} > {children} {orientation !== "vertical" ? ( ) : null} ) } return ( {children} {orientation !== "horizontal" ? ( ) : null} {orientation !== "vertical" ? ( ) : null} {orientation === "both" ? : null} ) } type InlineScrollAreaProps = ScrollAreaPrimitive.Root.Props & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: ScrollAreaPrimitive.Viewport.Props viewportRef?: React.Ref } function InlineComposeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (!ref) continue if (typeof ref === "function") ref(node) else ref.current = node } } } function InlineSpinner({ className, ...props }: InlineRegistryIconProps) { return ( ) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number }