{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "pptx-viewer", "title": "PowerPoint Viewer", "description": "A PowerPoint viewer with slide navigation, zoom, upload, download, custom scroll areas, and virtualized thumbnails.", "dependencies": [ "@extend-ai/react-pptx@0.2.0", "@tanstack/react-virtual@^3.13.12", "@base-ui/react@^1.4.1" ], "registryDependencies": [ "@extend/document-viewer-sidebar", "@extend/file-thumbnail", "utils", "button", "dropdown-menu", "input", "scroll-area", "select", "separator", "tooltip" ], "files": [ { "path": "components/extend/pptx-viewer.tsx", "content": "\"use client\"\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\nimport {\n ReactPptxViewer,\n usePptxViewerThumbnails,\n type ParsedPresentation,\n type PptxSlideThumbnailItem,\n type PptxSlideThumbnailRenderWindow,\n type PptxViewerController,\n type PptxViewerError,\n type PresentationSource,\n} from \"@extend-ai/react-pptx\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n ScrollArea as InlineScrollArea,\n ScrollBar,\n} from \"@/components/ui/scroll-area\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport {\n DocumentViewerThumbnailSidebar,\n useElementWidth,\n useInlineThumbnailSidebar,\n} from \"@/components/extend/document-viewer-sidebar\"\nimport { FileThumbnail } from \"@/components/extend/file-thumbnail\"\nimport { IconPlaceholder } from \"@/components/icon-placeholder\"\n\nimport \"@extend-ai/react-pptx/styles.css\"\n\nimport * as React from \"react\"\nimport { useVirtualizer } from \"@tanstack/react-virtual\"\n\nconst PPTX_MIME_TYPE =\n \"application/vnd.openxmlformats-officedocument.presentationml.presentation\"\nconst PPT_MIME_TYPE = \"application/vnd.ms-powerpoint\"\nconst DEFAULT_ZOOM = 100\nconst PPTX_LOADING_INDICATOR_DELAY_MS = 300\nconst PPTX_THUMBNAIL_WIDTH = 112\nconst PPTX_THUMBNAIL_LIST_PADDING = 12\nconst PPTX_THUMBNAIL_ROW_ESTIMATE = 112\nconst PPTX_THUMBNAIL_PREFETCH_ROWS = 0\nconst PPTX_THUMBNAIL_FOLLOW_DELAY_MS = 250\nconst PPTX_SCROLL_TOP_EPSILON_PX = 24\nconst PPTX_INSTANT_NAVIGATION_TIMEOUT_MS = 250\nconst PPTX_SMOOTH_NAVIGATION_TIMEOUT_MS = 1000\nconst ZOOM_OPTIONS = [25, 50, 75, 100, 125, 150, 175, 200, 300, 400] as const\nconst PPTX_THUMBNAIL_FOCUS_RING_CLASS =\n \"group-focus-visible/pptx-thumbnail-sidebar:ring-2 group-focus-visible/pptx-thumbnail-sidebar:ring-ring group-focus-visible/pptx-thumbnail-sidebar:ring-offset-1 group-focus-visible/pptx-thumbnail-sidebar:ring-offset-background\"\ntype UploadedPresentation = {\n file: File\n identity: string\n sourceUrl: string | undefined\n}\nfunction areNumberArraysEqual(\n left: readonly number[],\n right: readonly number[]\n) {\n return (\n left.length === right.length &&\n left.every((value, index) => value === right[index])\n )\n}\nfunction formatPresentationName(fileName: string | undefined, url: string) {\n if (fileName?.trim()) return fileName\n const pathname = url.split(\"?\")[0] ?? \"\"\n const rawName = pathname.split(\"/\").pop() ?? \"presentation.pptx\"\n try {\n return decodeURIComponent(rawName)\n } catch {\n return rawName\n }\n}\nfunction ensurePresentationExtension(fileName: string) {\n const lowerFileName = fileName.toLowerCase()\n return lowerFileName.endsWith(\".pptx\") || lowerFileName.endsWith(\".ppt\")\n ? fileName\n : `${fileName}.pptx`\n}\nfunction downloadBlob(blob: Blob, fileName: string) {\n const url = URL.createObjectURL(blob)\n const anchor = document.createElement(\"a\")\n anchor.href = url\n anchor.download = fileName\n anchor.rel = \"noopener\"\n document.body.append(anchor)\n anchor.click()\n anchor.remove()\n window.setTimeout(() => URL.revokeObjectURL(url), 0)\n}\nasync function downloadPresentation({\n file,\n fileName,\n url,\n}: {\n file?: File\n fileName: string\n url?: string\n}) {\n if (file) {\n downloadBlob(file, ensurePresentationExtension(fileName))\n return\n }\n if (!url) return\n const response = await fetch(url)\n if (!response.ok) {\n throw new Error(`Failed to download presentation (${response.status})`)\n }\n downloadBlob(await response.blob(), ensurePresentationExtension(fileName))\n}\nfunction getNextZoom(currentZoom: number, direction: 1 | -1) {\n if (direction > 0) {\n return ZOOM_OPTIONS.find((value) => value > currentZoom) ?? currentZoom\n }\n for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) {\n const value = ZOOM_OPTIONS[index]\n if (value < currentZoom) return value\n }\n return currentZoom\n}\nfunction useDelayedLoadingIndicator(isLoading: boolean, delayMs: number) {\n const [showSpinner, setShowSpinner] = React.useState(false)\n const [previousIsLoading, setPreviousIsLoading] = React.useState(isLoading)\n if (previousIsLoading !== isLoading) {\n setPreviousIsLoading(isLoading)\n setShowSpinner(false)\n }\n React.useEffect(() => {\n if (!isLoading) return\n const timeoutId = window.setTimeout(() => {\n setShowSpinner(true)\n }, delayMs)\n return () => window.clearTimeout(timeoutId)\n }, [delayMs, isLoading])\n return isLoading && showSpinner\n}\nfunction useDebouncedValue(value: TValue, delayMs: number) {\n const [debouncedValue, setDebouncedValue] = React.useState(value)\n React.useEffect(() => {\n const timeoutId = window.setTimeout(() => setDebouncedValue(value), delayMs)\n return () => window.clearTimeout(timeoutId)\n }, [delayMs, value])\n return debouncedValue\n}\nfunction ViewerLoadingSurface({\n showSpinner = true,\n}: {\n showSpinner?: boolean\n}) {\n return (\n
\n {showSpinner ? : null}\n
\n )\n}\nfunction ToolbarTooltip({\n children,\n label,\n}: {\n children: React.ReactNode\n label: string\n}) {\n return (\n \n {children}}\n >\n {label}\n \n )\n}\nfunction PptxFileActionsMenu({\n controlsDisabled,\n downloadDisabled,\n isPreparingDownload,\n onDownload,\n onUploadClick,\n showDownloadButton,\n showUploadButton,\n}: {\n controlsDisabled: boolean\n downloadDisabled: boolean\n isPreparingDownload: boolean\n onDownload: () => void\n onUploadClick: () => void\n showDownloadButton: boolean\n showUploadButton: boolean\n}) {\n if (!showDownloadButton && !showUploadButton) return null\n return (\n \n \n \n \n }\n >\n \n {showDownloadButton ? (\n \n {isPreparingDownload ? (\n \n ) : (\n \n )}\n Download\n \n ) : null}\n {showUploadButton ? (\n \n \n Upload\n \n ) : null}\n \n \n )\n}\nfunction PptxSlideNumberControl({\n activeSlideIndex,\n controlsDisabled,\n onSlideChange,\n slideCount,\n}: {\n activeSlideIndex: number\n controlsDisabled: boolean\n onSlideChange: (slideIndex: number) => void\n slideCount: number\n}) {\n const inputRef = React.useRef(null)\n const displaySlide = slideCount ? activeSlideIndex + 1 : 1\n const [isEditing, setIsEditing] = React.useState(false)\n const [draftSlide, setDraftSlide] = React.useState(() => String(displaySlide))\n React.useEffect(() => {\n if (!isEditing) return\n inputRef.current?.focus()\n inputRef.current?.select()\n }, [isEditing])\n const applySlideDraft = React.useCallback(\n (value: string) => {\n const parsedSlide = Number(value.trim())\n if (!Number.isInteger(parsedSlide)) return\n const nextSlide = Math.min(\n Math.max(parsedSlide, 1),\n Math.max(slideCount, 1)\n )\n onSlideChange(nextSlide - 1)\n },\n [onSlideChange, slideCount]\n )\n return (\n
\n Slide\n {isEditing ? (\n setIsEditing(false)}\n onChange={(event: React.ChangeEvent) => {\n setDraftSlide(event.target.value)\n applySlideDraft(event.target.value)\n }}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (event.key === \"Enter\" || event.key === \"Escape\") {\n event.currentTarget.blur()\n }\n }}\n className={cn(\n \"h-8 px-2.5\",\n \"mx-1 w-14 min-w-14 rounded-md [&_[data-slot=input]]:text-center\"\n )}\n />\n ) : (\n {\n setDraftSlide(String(displaySlide))\n setIsEditing(true)\n }}\n >\n {displaySlide}\n \n )}\n of {slideCount || \"-\"}\n
\n )\n}\nfunction PptxToolbar({\n activeSlideIndex,\n controlsDisabled,\n isPreparingDownload,\n onDownload,\n onSlideChange,\n onToggleSidebar,\n onUploadClick,\n setZoom,\n showDownloadButton,\n showUploadButton,\n slideCount,\n toolbarActions,\n zoom,\n}: {\n activeSlideIndex: number\n controlsDisabled: boolean\n isPreparingDownload: boolean\n onDownload: () => void\n onSlideChange: (slideIndex: number) => void\n onToggleSidebar: () => void\n onUploadClick: () => void\n setZoom: React.Dispatch>\n showDownloadButton: boolean\n showUploadButton: boolean\n slideCount: number\n toolbarActions?: React.ReactNode\n zoom: number\n}) {\n const canGoPrevious = !controlsDisabled && activeSlideIndex > 0\n const canGoNext =\n !controlsDisabled && slideCount > 0 && activeSlideIndex < slideCount - 1\n const canZoomOut = !controlsDisabled && zoom > ZOOM_OPTIONS[0]\n const canZoomIn =\n !controlsDisabled && zoom < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1]\n return (\n
\n \n
\n \n \n \n \n \n \n \n onSlideChange(activeSlideIndex - 1)}\n >\n \n \n \n \n \n onSlideChange(activeSlideIndex + 1)}\n >\n \n \n \n
\n
\n
\n \n \n setZoom((currentZoom) => getNextZoom(currentZoom, -1))\n }\n >\n \n \n \n setZoom(Number(value))}\n disabled={controlsDisabled}\n modal={false}\n >\n \n {Math.round(zoom)}%\n \n \n {ZOOM_OPTIONS.map((value) => (\n \n {value}%\n \n ))}\n \n \n \n \n setZoom((currentZoom) => getNextZoom(currentZoom, 1))\n }\n >\n \n \n \n
\n {toolbarActions ? (\n <>\n \n {toolbarActions}\n \n ) : null}\n {showDownloadButton || showUploadButton ? (\n \n ) : null}\n \n
\n \n
\n )\n}\nfunction PptxSidebarThumbnail({\n aspectRatio,\n containerRef,\n displayFileName,\n isActive,\n slideNumber,\n status,\n}: {\n aspectRatio: number\n containerRef: PptxSlideThumbnailItem[\"containerRef\"]\n displayFileName: string\n isActive: boolean\n slideNumber: number\n status: PptxSlideThumbnailItem[\"status\"]\n}) {\n return (\n \n }\n isLoading={status !== \"ready\" && status !== \"error\"}\n hasError={status === \"error\"}\n className={cn(\n \"w-full rounded-sm border-0 shadow-xs ring-0 transition-shadow duration-150\",\n isActive && \"shadow-sm\"\n )}\n />\n )\n}\nfunction PptxThumbnailSidebarList({\n activeSlideIndex,\n displayFileName,\n isLoading,\n onRenderWindowChange,\n onSelectSlide,\n sidebarOpen,\n slideCount,\n thumbnails,\n}: {\n activeSlideIndex: number\n displayFileName: string\n isLoading: boolean\n onRenderWindowChange: (window: PptxSlideThumbnailRenderWindow) => void\n onSelectSlide: (slideIndex: number) => void\n sidebarOpen: boolean\n slideCount: number\n thumbnails: PptxSlideThumbnailItem[]\n}) {\n const viewportRef = React.useRef(null)\n const thumbnailListboxId = React.useId()\n const visibleThumbnails = React.useMemo(\n () => thumbnails.slice(0, slideCount || 0),\n [slideCount, thumbnails]\n )\n const activeDescendantId = visibleThumbnails.length\n ? `${thumbnailListboxId}-slide-${activeSlideIndex + 1}`\n : undefined\n const virtualizer = useVirtualizer({\n count: visibleThumbnails.length,\n estimateSize: () => PPTX_THUMBNAIL_ROW_ESTIMATE,\n getItemKey: (index) => visibleThumbnails[index]?.slide.id ?? index,\n getScrollElement: () => viewportRef.current,\n overscan: 0,\n })\n const virtualItems = virtualizer.getVirtualItems()\n const renderWindowSignature = virtualItems\n .map((virtualRow) => virtualRow.index)\n .join(\",\")\n const virtualSlideIndexes = React.useMemo(\n () =>\n renderWindowSignature\n ? renderWindowSignature.split(\",\").map((index) => Number(index))\n : [],\n [renderWindowSignature]\n )\n React.useEffect(() => {\n if (!sidebarOpen || isLoading || !visibleThumbnails.length) {\n onRenderWindowChange({\n prefetchSlideIndexes: [],\n visibleSlideIndexes: [],\n })\n return\n }\n const visibleSlideIndexes = virtualSlideIndexes\n const firstVirtualIndex = virtualSlideIndexes[0] ?? 0\n const lastVirtualIndex =\n virtualSlideIndexes[virtualSlideIndexes.length - 1] ?? firstVirtualIndex\n const firstPrefetchIndex = Math.max(\n 0,\n firstVirtualIndex - PPTX_THUMBNAIL_PREFETCH_ROWS\n )\n const lastPrefetchIndex = Math.min(\n visibleThumbnails.length - 1,\n lastVirtualIndex + PPTX_THUMBNAIL_PREFETCH_ROWS\n )\n const visibleSlideIndexSet = new Set(visibleSlideIndexes)\n const prefetchSlideIndexes: number[] = []\n for (\n let index = firstPrefetchIndex;\n index <= lastPrefetchIndex;\n index += 1\n ) {\n if (!visibleSlideIndexSet.has(index)) {\n prefetchSlideIndexes.push(index)\n }\n }\n onRenderWindowChange({\n prefetchSlideIndexes,\n visibleSlideIndexes,\n })\n }, [\n isLoading,\n onRenderWindowChange,\n sidebarOpen,\n virtualSlideIndexes,\n visibleThumbnails.length,\n ])\n React.useEffect(() => {\n if (!sidebarOpen || !visibleThumbnails.length) return\n const frameId = window.requestAnimationFrame(() => {\n virtualizer.scrollToIndex(\n Math.min(activeSlideIndex, visibleThumbnails.length - 1),\n { align: \"auto\" }\n )\n })\n return () => window.cancelAnimationFrame(frameId)\n }, [activeSlideIndex, sidebarOpen, virtualizer, visibleThumbnails.length])\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (slideCount < 1) return\n let nextSlideIndex: number | null = null\n if (event.key === \"ArrowDown\") {\n nextSlideIndex = Math.min(slideCount - 1, activeSlideIndex + 1)\n } else if (event.key === \"ArrowUp\") {\n nextSlideIndex = Math.max(0, activeSlideIndex - 1)\n } else if (event.key === \"Home\") {\n nextSlideIndex = 0\n } else if (event.key === \"End\") {\n nextSlideIndex = slideCount - 1\n }\n if (nextSlideIndex === null) return\n event.preventDefault()\n onSelectSlide(nextSlideIndex)\n },\n [activeSlideIndex, onSelectSlide, slideCount]\n )\n return (\n {\n event.currentTarget.focus({ preventScroll: true })\n },\n role: \"listbox\",\n tabIndex: 0,\n }}\n viewportRef={viewportRef}\n >\n {isLoading ? (\n
\n
\n
\n
\n
\n
\n ) : visibleThumbnails.length ? (\n \n {virtualItems.map((virtualRow) => {\n const thumbnail = visibleThumbnails[virtualRow.index]\n if (!thumbnail) return null\n const isActive = thumbnail.slideIndex === activeSlideIndex\n return (\n \n onSelectSlide(thumbnail.slideIndex)}\n >\n \n {thumbnail.slideNumber}\n
\n
\n )\n })}\n \n ) : null}\n \n )\n}\nfunction PptxThumbnailSidebarContent({\n activeSlideIndex,\n controller,\n displayFileName,\n isLoading,\n onSelectSlide,\n sidebarOpen,\n slideCount,\n}: {\n activeSlideIndex: number\n controller: PptxViewerController | null\n displayFileName: string\n isLoading: boolean\n onSelectSlide: (slideIndex: number) => void\n sidebarOpen: boolean\n slideCount: number\n}) {\n const [renderWindow, setRenderWindow] =\n React.useState({\n prefetchSlideIndexes: [],\n visibleSlideIndexes: [],\n })\n const thumbnailOptions = React.useMemo(\n () => ({\n renderWindow,\n resolution: {\n maxHeight: Math.round(PPTX_THUMBNAIL_WIDTH * 0.75),\n maxWidth: PPTX_THUMBNAIL_WIDTH,\n },\n }),\n [renderWindow]\n )\n const { thumbnails } = usePptxViewerThumbnails(controller, thumbnailOptions)\n const handleRenderWindowChange = React.useCallback(\n (nextWindow: PptxSlideThumbnailRenderWindow) => {\n setRenderWindow((currentWindow) => {\n const currentVisible = currentWindow.visibleSlideIndexes ?? []\n const nextVisible = nextWindow.visibleSlideIndexes ?? []\n const currentPrefetch = currentWindow.prefetchSlideIndexes ?? []\n const nextPrefetch = nextWindow.prefetchSlideIndexes ?? []\n if (\n areNumberArraysEqual(currentVisible, nextVisible) &&\n areNumberArraysEqual(currentPrefetch, nextPrefetch)\n ) {\n return currentWindow\n }\n return nextWindow\n })\n },\n []\n )\n return (\n \n )\n}\nexport type PptxViewerPreviewProps = {\n className?: string\n defaultThumbnailSidebarOpen?: boolean\n defaultZoom?: number\n fileName?: string\n initialSlide?: number\n showDownload?: boolean\n showToolbar?: boolean\n showUpload?: boolean\n src?: string\n toolbarActions?: React.ReactNode\n}\nexport function PptxViewerPreview({\n className,\n defaultThumbnailSidebarOpen = false,\n defaultZoom = DEFAULT_ZOOM,\n fileName,\n initialSlide = 1,\n showDownload = true,\n showToolbar = true,\n showUpload = true,\n src,\n toolbarActions,\n}: PptxViewerPreviewProps) {\n const fileInputRef = React.useRef(null)\n const [viewerShellRef, viewerShellWidth] = useElementWidth()\n const requestedInitialSlideIndex = Math.max(0, Math.round(initialSlide) - 1)\n const [viewportElement, setViewportElement] =\n React.useState(null)\n const [uploadedPresentation, setUploadedPresentation] =\n React.useState(null)\n const [sidebarOpen, setSidebarOpen] = React.useState(\n defaultThumbnailSidebarOpen\n )\n const [thumbnailSidebarMounted, setThumbnailSidebarMounted] = React.useState(\n defaultThumbnailSidebarOpen\n )\n const [activeSlideIndex, setActiveSlideIndex] = React.useState(\n requestedInitialSlideIndex\n )\n const [zoom, setZoom] = React.useState(() =>\n Math.min(400, Math.max(10, Math.round(defaultZoom)))\n )\n const [slideCount, setSlideCount] = React.useState(0)\n const [isLoading, setIsLoading] = React.useState(Boolean(src))\n const [loadError, setLoadError] = React.useState()\n const [isPreparingDownload, setIsPreparingDownload] = React.useState(false)\n const [controller, setController] =\n React.useState(null)\n const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth)\n const activeUploadedPresentation =\n uploadedPresentation?.sourceUrl === src ? uploadedPresentation : null\n const source: PresentationSource | undefined =\n activeUploadedPresentation?.file ?? src\n const sourceIdentity = activeUploadedPresentation?.identity ?? src ?? \"\"\n const hasPresentation = Boolean(source)\n const displayFileName = React.useMemo(\n () =>\n activeUploadedPresentation?.file.name ??\n (src\n ? formatPresentationName(fileName, src)\n : (fileName ?? \"presentation.pptx\")),\n [activeUploadedPresentation?.file.name, fileName, src]\n )\n const thumbnailSidebarVisible = Boolean(sidebarOpen && hasPresentation)\n const sidebarActiveSlideIndex = useDebouncedValue(\n activeSlideIndex,\n PPTX_THUMBNAIL_FOLLOW_DELAY_MS\n )\n const controlsDisabled = !hasPresentation || isLoading || Boolean(loadError)\n const shouldShowLoadingSpinner = useDelayedLoadingIndicator(\n isLoading,\n PPTX_LOADING_INDICATOR_DELAY_MS\n )\n const virtualization = React.useMemo(\n () => ({\n enabled: true,\n overscanViewport: 0.75,\n scrollElement: viewportElement,\n }),\n [viewportElement]\n )\n const pendingSlideNavigationRef = React.useRef<{\n hasObservedIntermediateSlide: boolean\n targetIndex: number\n timeoutId: number\n } | null>(null)\n const cancelPendingSlideNavigation = React.useCallback(() => {\n const pendingNavigation = pendingSlideNavigationRef.current\n if (pendingNavigation) {\n window.clearTimeout(pendingNavigation.timeoutId)\n pendingSlideNavigationRef.current = null\n }\n }, [])\n if (thumbnailSidebarVisible && !thumbnailSidebarMounted) {\n setThumbnailSidebarMounted(true)\n }\n const [previousSource, setPreviousSource] = React.useState({\n sourceIdentity,\n defaultZoom,\n })\n if (\n previousSource.sourceIdentity !== sourceIdentity ||\n previousSource.defaultZoom !== defaultZoom\n ) {\n setPreviousSource({ sourceIdentity, defaultZoom })\n setSlideCount(0)\n setZoom(Math.min(400, Math.max(10, Math.round(defaultZoom))))\n setLoadError(undefined)\n setIsLoading(Boolean(sourceIdentity))\n }\n React.useEffect(() => {\n cancelPendingSlideNavigation()\n viewportElement?.scrollTo({ top: 0, left: 0 })\n }, [\n cancelPendingSlideNavigation,\n defaultZoom,\n sourceIdentity,\n viewportElement,\n ])\n React.useEffect(\n () => cancelPendingSlideNavigation,\n [cancelPendingSlideNavigation]\n )\n const [initialSlideSource, setInitialSlideSource] = React.useState({\n sourceIdentity,\n requestedInitialSlideIndex,\n })\n if (\n initialSlideSource.sourceIdentity !== sourceIdentity ||\n initialSlideSource.requestedInitialSlideIndex !== requestedInitialSlideIndex\n ) {\n setInitialSlideSource({ sourceIdentity, requestedInitialSlideIndex })\n setActiveSlideIndex(requestedInitialSlideIndex)\n }\n React.useEffect(() => {\n if (controller?.isReady()) {\n void controller.goToSlide(requestedInitialSlideIndex, {\n behavior: \"instant\",\n block: \"center\",\n })\n }\n }, [requestedInitialSlideIndex, sourceIdentity, controller])\n const navigateToSlide = React.useCallback(\n (nextSlideIndex: number, behavior: ScrollBehavior) => {\n const normalizedSlideIndex = Math.min(\n Math.max(0, Math.round(nextSlideIndex)),\n Math.max(0, slideCount - 1)\n )\n const resolvedBehavior =\n behavior === \"smooth\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n ? \"instant\"\n : behavior\n cancelPendingSlideNavigation()\n const timeoutId = window.setTimeout(\n () => {\n const pendingNavigation = pendingSlideNavigationRef.current\n if (pendingNavigation?.targetIndex !== normalizedSlideIndex) return\n pendingSlideNavigationRef.current = null\n setActiveSlideIndex(normalizedSlideIndex)\n },\n resolvedBehavior === \"smooth\"\n ? PPTX_SMOOTH_NAVIGATION_TIMEOUT_MS\n : PPTX_INSTANT_NAVIGATION_TIMEOUT_MS\n )\n pendingSlideNavigationRef.current = {\n hasObservedIntermediateSlide: false,\n targetIndex: normalizedSlideIndex,\n timeoutId,\n }\n setActiveSlideIndex(normalizedSlideIndex)\n void controller?.goToSlide(normalizedSlideIndex, {\n behavior: resolvedBehavior,\n block: \"center\",\n })\n },\n [cancelPendingSlideNavigation, slideCount, controller]\n )\n const handleSlideChange = React.useCallback(\n (nextSlideIndex: number) => navigateToSlide(nextSlideIndex, \"smooth\"),\n [navigateToSlide]\n )\n const handleThumbnailSlideChange = React.useCallback(\n (nextSlideIndex: number) => navigateToSlide(nextSlideIndex, \"instant\"),\n [navigateToSlide]\n )\n const handleViewerSlideChange = React.useCallback(\n (nextSlideIndex: number) => {\n const pendingNavigation = pendingSlideNavigationRef.current\n if (pendingNavigation) {\n if (nextSlideIndex !== pendingNavigation.targetIndex) {\n pendingNavigation.hasObservedIntermediateSlide = true\n return\n }\n // The controller reports the destination immediately, before the smooth\n // scroll starts. Keep the destination authoritative until the scroll\n // observer has crossed an intermediate slide and reports it again.\n if (!pendingNavigation.hasObservedIntermediateSlide) return\n window.clearTimeout(pendingNavigation.timeoutId)\n pendingSlideNavigationRef.current = null\n }\n React.startTransition(() => {\n setActiveSlideIndex((currentSlideIndex) =>\n currentSlideIndex === nextSlideIndex\n ? currentSlideIndex\n : nextSlideIndex\n )\n })\n },\n []\n )\n const syncFirstSlideAtViewportTop = React.useCallback(\n (viewport: HTMLDivElement) => {\n if (viewport.scrollTop > PPTX_SCROLL_TOP_EPSILON_PX) return\n setActiveSlideIndex((currentSlideIndex) =>\n currentSlideIndex === 0 ? currentSlideIndex : 0\n )\n if (!isLoading && controller && controller.getSlideIndex() !== 0) {\n void controller.goToSlide(0, {\n behavior: \"instant\",\n block: \"start\",\n })\n }\n },\n [isLoading, controller]\n )\n const handleViewerUserScrollIntent = React.useCallback(\n (event: React.SyntheticEvent) => {\n const viewport = event.currentTarget\n // Stop an in-flight native smooth scroll before manual wheel, touch,\n // pointer, or keyboard input takes ownership of the viewport.\n viewport.scrollTo({\n behavior: \"instant\",\n left: viewport.scrollLeft,\n top: viewport.scrollTop,\n })\n cancelPendingSlideNavigation()\n syncFirstSlideAtViewportTop(viewport)\n },\n [cancelPendingSlideNavigation, syncFirstSlideAtViewportTop]\n )\n const handleViewerScroll = React.useCallback(\n (event: React.UIEvent) => {\n if (pendingSlideNavigationRef.current) return\n syncFirstSlideAtViewportTop(event.currentTarget)\n },\n [syncFirstSlideAtViewportTop]\n )\n const handleViewerKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (\n event.key === \"ArrowDown\" ||\n event.key === \"ArrowUp\" ||\n event.key === \"End\" ||\n event.key === \"Home\" ||\n event.key === \"PageDown\" ||\n event.key === \"PageUp\" ||\n event.key === \" \" ||\n event.key === \"Spacebar\"\n ) {\n handleViewerUserScrollIntent(event)\n }\n },\n [handleViewerUserScrollIntent]\n )\n const handleLoad = React.useCallback((presentation: ParsedPresentation) => {\n const nextSlideCount = presentation.document.slides.length\n setSlideCount(nextSlideCount)\n setActiveSlideIndex((currentSlideIndex) =>\n Math.min(currentSlideIndex, Math.max(0, nextSlideCount - 1))\n )\n setLoadError(undefined)\n }, [])\n const handleReady = React.useCallback(() => {\n setIsLoading(false)\n }, [])\n const handleError = React.useCallback((error: PptxViewerError) => {\n setLoadError(error.message)\n setIsLoading(false)\n }, [])\n const handleDownload = React.useCallback(async () => {\n if (isPreparingDownload || !source) return\n setIsPreparingDownload(true)\n try {\n await downloadPresentation({\n file: activeUploadedPresentation?.file,\n fileName: displayFileName,\n url: activeUploadedPresentation ? undefined : src,\n })\n } catch (error) {\n console.error(error)\n } finally {\n setIsPreparingDownload(false)\n }\n }, [\n activeUploadedPresentation,\n displayFileName,\n isPreparingDownload,\n source,\n src,\n ])\n async function handleUpload(event: React.ChangeEvent) {\n const file = event.target.files?.[0]\n event.target.value = \"\"\n if (!file) return\n setUploadedPresentation({\n file,\n identity: `${file.name}-${file.size}-${file.lastModified}`,\n sourceUrl: src,\n })\n }\n return (\n \n \n {showToolbar ? (\n setSidebarOpen((open) => !open)}\n onUploadClick={() => fileInputRef.current?.click()}\n setZoom={setZoom}\n showDownloadButton={showDownload}\n showUploadButton={showUpload}\n slideCount={slideCount}\n toolbarActions={toolbarActions}\n zoom={zoom}\n />\n ) : null}\n \n \n {thumbnailSidebarMounted && hasPresentation ? (\n \n ) : null}\n \n \n {!source ? (\n
\n
\n
\n Upload a PowerPoint presentation to preview\n
\n
\n Pass a PPTX URL with the src prop or upload a\n PPTX or legacy PPT file.\n
\n fileInputRef.current?.click()}\n >\n \n Upload PowerPoint\n \n
\n
\n ) : (\n (\n \n )}\n renderError={(error) => (\n
\n
\n
\n Unable to display PowerPoint\n
\n
\n {error.message}\n
\n
\n
\n )}\n emptyState={\n
\n This presentation has no slides.\n
\n }\n onLoad={handleLoad}\n onReady={handleReady}\n onError={handleError}\n onSlideChange={handleViewerSlideChange}\n />\n )}\n \n \n \n )\n}\nfunction InlineScrollArea2({\n className,\n children,\n orientation = \"both\",\n scrollFade = false,\n scrollbarGutter = false,\n scrollbarOverflowOnly = false,\n viewportClassName,\n viewportProps,\n viewportRef,\n ...props\n}: InlineScrollAreaProps) {\n const {\n className: viewportPropsClassName,\n ref: viewportPropsRef,\n ...resolvedViewportProps\n } = viewportProps ?? {}\n const composedViewportRef = React.useMemo(\n () => InlineComposeRefs(viewportPropsRef, viewportRef),\n [viewportPropsRef, viewportRef]\n )\n\n if (\n !viewportProps &&\n !viewportRef &&\n !viewportClassName &&\n !scrollFade &&\n !scrollbarGutter &&\n !scrollbarOverflowOnly\n ) {\n return (\n [data-orientation=vertical]]:hidden\",\n className\n )}\n >\n {children}\n {orientation !== \"vertical\" ? (\n \n ) : null}\n \n )\n }\n\n return (\n \n \n {children}\n \n {orientation !== \"horizontal\" ? (\n \n ) : null}\n {orientation !== \"vertical\" ? (\n \n ) : null}\n {orientation === \"both\" ? : null}\n \n )\n}\ntype InlineScrollAreaProps = ScrollAreaPrimitive.Root.Props & {\n orientation?: \"vertical\" | \"horizontal\" | \"both\"\n scrollFade?: boolean\n scrollbarGutter?: boolean\n scrollbarOverflowOnly?: boolean\n viewportClassName?: string\n viewportProps?: ScrollAreaPrimitive.Viewport.Props\n viewportRef?: React.Ref\n}\nfunction InlineComposeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n if (!ref) continue\n if (typeof ref === \"function\") ref(node)\n else ref.current = node\n }\n }\n}\nfunction InlineSpinner({ className, ...props }: InlineRegistryIconProps) {\n return (\n \n )\n}\ntype InlineRegistryIconProps = Omit<\n React.ComponentProps<\"svg\">,\n \"children\" | \"strokeWidth\"\n> & { strokeWidth?: number }\n", "type": "registry:ui", "target": "@components/extend/pptx-viewer.tsx" } ], "categories": [ "documents" ], "type": "registry:ui" }