50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Td783,"use client" import * as React from "react" import { DocxEditorViewer, useDocxComments, useDocxEditor, useDocxPageLayout, useDocxTrackChanges, useDocxViewerThumbnails, type DocxDocumentTheme, type DocxEditorController, type DocxPageThumbnailItem, type ViewerZoomLevel, type ViewerZoomState, } from "@extend-ai/react-docx" import { useVirtualizer } from "@tanstack/react-virtual" import { ScrollArea as ScrollAreaPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { DocumentViewerThumbnailSidebar, useElementWidth, useInlineThumbnailSidebar, } from "@/components/extend/document-viewer-sidebar" import { createDocxCommentCardRenderer, createDocxTrackedChangeCardRenderer, } from "@/components/extend/docx-annotation-card" import { FileThumbnail } from "@/components/extend/file-thumbnail" import { IconPlaceholder } from "@/components/icon-placeholder" const DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document" const DOCX_LOADING_INDICATOR_DELAY_MS = 300 const DOCX_THUMBNAIL_WIDTH = 92 const DOCX_THUMBNAIL_LIST_PADDING = 16 const DOCX_THUMBNAIL_ROW_ESTIMATE = 172 const DEFAULT_ZOOM = 50 const ZOOM_OPTIONS = [50, 75, 100, 125, 150, 175, 200] as const const ZOOM_MODE_LABELS = { "fit-page": "Fit page", "fit-width": "Fit width", automatic: "Automatic", } satisfies Record, string> const DOCX_PADDING_WARNING_TEXT = "a style property during rerender" const DOCX_THUMBNAIL_FOCUS_RING_CLASS = "group-focus-visible/docx-thumbnail-sidebar:ring-2 group-focus-visible/docx-thumbnail-sidebar:ring-ring group-focus-visible/docx-thumbnail-sidebar:ring-offset-1 group-focus-visible/docx-thumbnail-sidebar:ring-offset-background" const DOCX_THUMBNAIL_PREFETCH_ROWS = 4 type UploadedDocxFile = { file: File identity: string sourceUrl: string | undefined } type DocxActivePageStore = { getSnapshot: () => number setActivePage: React.Dispatch> subscribe: (listener: () => void) => () => void } type DocxThumbnailRenderWindowState = { visiblePageIndexes: number[] prefetchPageIndexes: number[] } function createDocxActivePageStore(): DocxActivePageStore { let activePage = 1 const listeners = new Set<() => void>() return { getSnapshot: () => activePage, setActivePage: (nextPage) => { const value = typeof nextPage === "function" ? nextPage(activePage) : nextPage const normalizedValue = Math.max(1, Math.round(value || 1)) if (normalizedValue === activePage) return activePage = normalizedValue listeners.forEach((listener) => listener()) }, subscribe: (listener) => { listeners.add(listener) return () => listeners.delete(listener) }, } } function useDocxActivePage(activePageStore: DocxActivePageStore) { return React.useSyncExternalStore( activePageStore.subscribe, activePageStore.getSnapshot, activePageStore.getSnapshot ) } function areNumberArraysEqual(left: number[], right: number[]) { return ( left.length === right.length && left.every((value, index) => value === right[index]) ) } async function loadDocxFile( url: string, displayFileName: string ): Promise { const response = await fetch(url) if (!response.ok) { throw new Error(`Failed to fetch DOCX (${response.status})`) } const blob = await response.blob() return new File([blob], displayFileName, { type: blob.type || DOCX_MIME_TYPE, }) } function formatDocumentName(fileName: string | undefined, url: string) { if (fileName?.trim()) return fileName const pathname = url.split("?")[0] ?? "" const rawName = pathname.split("/").pop() ?? "document.docx" try { return decodeURIComponent(rawName) } catch { return rawName } } function ensureDocxExtension(fileName: string) { return fileName.toLowerCase().endsWith(".docx") ? fileName : `${fileName}.docx` } function downloadBlob(blob: Blob, fileName: string) { const url = URL.createObjectURL(blob) const anchor = document.createElement("a") anchor.href = url anchor.download = fileName anchor.rel = "noopener" document.body.append(anchor) anchor.click() anchor.remove() window.setTimeout(() => URL.revokeObjectURL(url), 0) } async function downloadDocxFile({ file, fileName, url, }: { file?: File fileName: string url?: string }) { if (file) { downloadBlob(file, ensureDocxExtension(fileName)) return } if (!url) return const response = await fetch(url) if (!response.ok) { throw new Error(`Failed to download DOCX (${response.status})`) } downloadBlob(await response.blob(), ensureDocxExtension(fileName)) } function getNextZoomScale(currentZoomScale: number, direction: 1 | -1) { if (direction > 0) { return ( ZOOM_OPTIONS.find((value) => value > currentZoomScale) ?? currentZoomScale ) } for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) { const value = ZOOM_OPTIONS[index] if (value < currentZoomScale) return value } return currentZoomScale } function normalizeDocxZoomLevel( value: ViewerZoomLevel | undefined ): ViewerZoomLevel { return value ?? DEFAULT_ZOOM } function isZoomMode(value: string): value is Exclude { return value in ZOOM_MODE_LABELS } function useDelayedLoadingIndicator(isLoading: boolean, delayMs: number) { const [showSpinner, setShowSpinner] = React.useState(false) const [previousIsLoading, setPreviousIsLoading] = React.useState(isLoading) if (previousIsLoading !== isLoading) { setPreviousIsLoading(isLoading) setShowSpinner(false) } React.useEffect(() => { if (!isLoading) return const timeoutId = window.setTimeout(() => { setShowSpinner(true) }, delayMs) return () => window.clearTimeout(timeoutId) }, [delayMs, isLoading]) return isLoading && showSpinner } function isDocxPaddingWarning(args: unknown[]) { return ( typeof args[0] === "string" && args[0].includes(DOCX_PADDING_WARNING_TEXT) && args.some((arg) => String(arg).includes("padding")) ) } function useSuppressDocxPaddingWarning(enabled: boolean) { React.useEffect(() => { if (!enabled) return const originalConsoleError = console.error console.error = (...args: unknown[]) => { if (isDocxPaddingWarning(args)) return originalConsoleError(...args) } return () => { console.error = originalConsoleError } }, [enabled]) } function isInteractiveViewerTarget(target: EventTarget | null) { return ( target instanceof Element && Boolean( target.closest( 'a[href], button, input, select, textarea, [contenteditable="true"], [role="button"], [role="link"]' ) ) ) } function ToolbarTooltip({ label, children, }: { label: string children: React.ReactNode }) { return ( {children} {label} ) } function ViewerLoadingSurface({ showSpinner = true, }: { showSpinner?: boolean }) { return (

{showSpinner ? : null}

) } function DocxFileActionsMenu({ controlsDisabled, downloadDisabled, isPreparingDownload, isDark, onDownload, onShowCommentsChange, onShowTrackedChangesChange, onIsDarkChange, onUploadClick, showComments, showDownloadButton, showNightRenderToggle, showTrackedChanges, showUploadButton, }: { controlsDisabled: boolean downloadDisabled: boolean isPreparingDownload: boolean isDark: boolean onDownload: () => void onShowCommentsChange: (checked: boolean) => void onShowTrackedChangesChange: (checked: boolean) => void onIsDarkChange: (checked: boolean) => void onUploadClick: () => void showComments: boolean showDownloadButton: boolean showNightRenderToggle: boolean showTrackedChanges: boolean showUploadButton: boolean }) { const showFileActions = showDownloadButton || showUploadButton return ( {showNightRenderToggle ? ( <> onIsDarkChange(checked === true)} className={cn("justify-between")} > Dark mode ) : null} onShowCommentsChange(checked === true)} className={cn("justify-between")} > Comments onShowTrackedChangesChange(checked === true) } className={cn("justify-between")} > Edits {showFileActions ? : null} {showDownloadButton ? ( {isPreparingDownload ? ( ) : ( )} Download ) : null} {showUploadButton ? ( Upload ) : null} ) } function DocxPageNumberControl({ activePageStore, controlsDisabled, onPageChange, pageCount, }: { activePageStore: DocxActivePageStore controlsDisabled: boolean onPageChange: (pageNumber: number) => void pageCount: number }) { const activePage = useDocxActivePage(activePageStore) const inputRef = React.useRef(null) const displayPage = pageCount ? 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(pageCount, 1))) }, [onPageChange, pageCount] ) 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 {pageCount || "-"}

) } function DocxToolbar({ activePageStore, controlsDisabled, isDark, isPreparingDownload, onDownload, onIsDarkChange, onPageChange, onShowCommentsChange, onShowTrackedChangesChange, onToggleSidebar, onUploadClick, onZoomChange, pageCount, resolvedZoom, showComments, showDownloadButton = true, showNightRenderToggle, showTrackedChanges, showUploadButton = true, toolbarActions, zoomLevel, }: { activePageStore: DocxActivePageStore controlsDisabled: boolean isDark: boolean isPreparingDownload: boolean onDownload: () => void onIsDarkChange: (checked: boolean) => void onPageChange: (pageNumber: number) => void onShowCommentsChange: (checked: boolean) => void onShowTrackedChangesChange: (checked: boolean) => void onToggleSidebar: () => void onUploadClick: () => void onZoomChange: (zoomLevel: ViewerZoomLevel) => void pageCount: number resolvedZoom: number showComments: boolean showDownloadButton?: boolean showNightRenderToggle: boolean showTrackedChanges: boolean showUploadButton?: boolean toolbarActions?: React.ReactNode zoomLevel: ViewerZoomLevel }) { const canZoomIn = resolvedZoom < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1] const canZoomOut = resolvedZoom > ZOOM_OPTIONS[0] const selectValue = typeof zoomLevel === "number" ? zoomLevel.toString() : zoomLevel const roundedZoom = Number(resolvedZoom.toFixed(2)) const zoomOptions = ZOOM_OPTIONS.includes( roundedZoom as (typeof ZOOM_OPTIONS)[number] ) ? ZOOM_OPTIONS : [...ZOOM_OPTIONS, roundedZoom].sort((left, right) => left - right) return (

{toolbarActions ? ( <> {toolbarActions} ) : null}

) } function DocxSidebarThumbnail({ canvasRef, displayFileName, hasError, isActive, isLoading, pageNumber, pixelHeightPx, pixelWidthPx, previewAspectRatio, }: { canvasRef: React.RefCallback displayFileName: string hasError: boolean isActive: boolean isLoading: boolean pageNumber: number pixelHeightPx: number pixelWidthPx: number previewAspectRatio: number }) { return ( } isLoading={isLoading} hasError={hasError} className={cn( "w-[92px] rounded-md border-0 shadow-xs ring-0 transition-shadow duration-150", isActive && "shadow-sm" )} /> ) } function DocxThumbnailSidebarList({ activePage, displayFileName, isLoadingDocument, onSelectPage, onThumbnailRenderWindowChange, pageCount, sidebarOpen, thumbnails, }: { activePage: number displayFileName: string isLoadingDocument: boolean onSelectPage: (pageNumber: number) => void onThumbnailRenderWindowChange: ( renderWindow: DocxThumbnailRenderWindowState ) => void pageCount: number sidebarOpen: boolean thumbnails: DocxPageThumbnailItem[] }) { const viewportRef = React.useRef(null) const thumbnailListboxId = React.useId() const visibleThumbnails = React.useMemo( () => thumbnails.slice(0, pageCount || 0), [pageCount, thumbnails] ) const activeDescendantId = activePage > 0 && visibleThumbnails.length ? `${thumbnailListboxId}-page-${activePage}` : undefined const virtualizer = useVirtualizer({ count: visibleThumbnails.length, estimateSize: () => DOCX_THUMBNAIL_ROW_ESTIMATE, getItemKey: (index) => visibleThumbnails[index]?.pageIndex ?? index, getScrollElement: () => viewportRef.current, overscan: 3, }) const virtualItems = virtualizer.getVirtualItems() const renderWindowSignature = virtualItems .map((virtualRow) => virtualRow.index) .join(",") React.useEffect(() => { if (!sidebarOpen || isLoadingDocument || !visibleThumbnails.length) { onThumbnailRenderWindowChange({ prefetchPageIndexes: [], visiblePageIndexes: [], }) return } const visiblePageIndexes = virtualItems .map((virtualRow) => visibleThumbnails[virtualRow.index]?.pageIndex) .filter((pageIndex): pageIndex is number => pageIndex !== undefined) const firstVirtualIndex = virtualItems[0]?.index ?? 0 const lastVirtualIndex = virtualItems[virtualItems.length - 1]?.index ?? firstVirtualIndex const firstPrefetchIndex = Math.max( 0, firstVirtualIndex - DOCX_THUMBNAIL_PREFETCH_ROWS ) const lastPrefetchIndex = Math.min( visibleThumbnails.length - 1, lastVirtualIndex + DOCX_THUMBNAIL_PREFETCH_ROWS ) const visiblePageIndexSet = new Set(visiblePageIndexes) const prefetchPageIndexes: number[] = [] for ( let index = firstPrefetchIndex; index <= lastPrefetchIndex; index += 1 ) { const pageIndex = visibleThumbnails[index]?.pageIndex if (pageIndex !== undefined && !visiblePageIndexSet.has(pageIndex)) { prefetchPageIndexes.push(pageIndex) } } onThumbnailRenderWindowChange({ prefetchPageIndexes, visiblePageIndexes, }) }, [ isLoadingDocument, onThumbnailRenderWindowChange, renderWindowSignature, sidebarOpen, visibleThumbnails, virtualItems, ]) React.useEffect(() => { if (!sidebarOpen || activePage < 1 || !visibleThumbnails.length) return virtualizer.scrollToIndex( Math.min(activePage - 1, visibleThumbnails.length - 1), { align: "auto" } ) }, [activePage, sidebarOpen, virtualizer, visibleThumbnails.length]) const handleKeyDown = React.useCallback( (event: React.KeyboardEvent) => { if (pageCount < 1) return const currentPage = activePage > 0 ? activePage : 1 let nextPage: number | null = null if (event.key === "ArrowDown") { nextPage = Math.min(pageCount, currentPage + 1) } else if (event.key === "ArrowUp") { nextPage = Math.max(1, currentPage - 1) } else if (event.key === "Home") { nextPage = 1 } else if (event.key === "End") { nextPage = pageCount } if (nextPage === null) return event.preventDefault() onSelectPage(nextPage) }, [activePage, onSelectPage, pageCount] ) return ( { event.currentTarget.focus({ preventScroll: true }) }, role: "listbox", tabIndex: 0, }} viewportRef={viewportRef} > {isLoadingDocument ? (

) : visibleThumbnails.length ? (

{virtualItems.map((virtualRow) => { const thumbnail = visibleThumbnails[virtualRow.index] if (!thumbnail) return null return (

) })}

) : null} ) } function DocxThumbnailSidebarContent({ activePageStore, displayFileName, editor, isLoadingDocument, onSelectPage, pageCount, reportedPageCount, sidebarOpen, }: { activePageStore: DocxActivePageStore displayFileName: string editor: DocxEditorController isLoadingDocument: boolean onSelectPage: (pageNumber: number) => void pageCount: number reportedPageCount: number sidebarOpen: boolean }) { const [thumbnailRenderWindow, setThumbnailRenderWindow] = React.useState({ prefetchPageIndexes: [], visiblePageIndexes: [], }) const thumbnailEditor = React.useMemo( () => ({ ...editor, totalPages: Math.max(editor.totalPages, reportedPageCount), }), [editor, reportedPageCount] ) const thumbnailOptions = React.useMemo( () => ({ // Detached thumbnail rendering handles offscreen pages; keep the raster // queue dormant while the sidebar is closed. disabled: !sidebarOpen, pixelRatio: 2, renderWindow: thumbnailRenderWindow, resolution: { maxHeight: DOCX_THUMBNAIL_WIDTH * 1.35, maxWidth: DOCX_THUMBNAIL_WIDTH, }, }), [sidebarOpen, thumbnailRenderWindow] ) const { thumbnails } = useDocxViewerThumbnails( thumbnailEditor, thumbnailOptions ) const activePage = useDocxActivePage(activePageStore) const handleThumbnailRenderWindowChange = React.useCallback( (nextRenderWindow: DocxThumbnailRenderWindowState) => { setThumbnailRenderWindow((currentRenderWindow) => { if ( areNumberArraysEqual( currentRenderWindow.visiblePageIndexes, nextRenderWindow.visiblePageIndexes ) && areNumberArraysEqual( currentRenderWindow.prefetchPageIndexes, nextRenderWindow.prefetchPageIndexes ) ) { return currentRenderWindow } return nextRenderWindow }) }, [] ) if (!sidebarOpen) return null return ( ) } export function DocxViewerPreview({ className, defaultZoom = DEFAULT_ZOOM, fileName, isDark, onIsDarkChange, showDownload = true, showToolbar = true, showUpload = true, src, toolbarActions, }: { className?: string defaultZoom?: ViewerZoomLevel fileName?: string isDark: boolean onIsDarkChange: (isDark: boolean) => void showDownload?: boolean showToolbar?: boolean showUpload?: boolean src?: string toolbarActions?: React.ReactNode }) { return ( ) } function DocxViewerContent({ className, defaultZoom, effectiveIsDark, fileName, setNightRenderEnabled, shouldRenderNightMode, showDownload, showToolbar = true, showUpload, toolbarActions, url, }: { className?: string defaultZoom?: ViewerZoomLevel effectiveIsDark: boolean fileName?: string setNightRenderEnabled: (checked: boolean) => void shouldRenderNightMode: boolean showDownload: boolean showToolbar?: boolean showUpload: boolean toolbarActions?: React.ReactNode url?: string }) { const fileInputRef = React.useRef(null) const viewportRef = React.useRef(null) const [viewportElement, setViewportElement] = React.useState(null) const [viewerShellRef, viewerShellWidth] = useElementWidth() const [uploadedDocxFile, setUploadedDocxFile] = React.useState(null) const [sidebarOpen, setSidebarOpen] = React.useState(false) const activePageStore = React.useMemo(() => createDocxActivePageStore(), []) const resolvedDefaultZoomLevel = normalizeDocxZoomLevel(defaultZoom) const activeUploadedDocxFile = uploadedDocxFile?.sourceUrl === url ? uploadedDocxFile : null const documentKey = activeUploadedDocxFile?.identity ?? url ?? "" const setActivePage = activePageStore.setActivePage const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth) const viewerBackgroundColor = "color-mix(in oklab, var(--muted) 40%, transparent)" const displayFileName = React.useMemo( () => activeUploadedDocxFile?.file.name ?? (url ? formatDocumentName(fileName, url) : (fileName ?? "document.docx")), [activeUploadedDocxFile?.file.name, fileName, url] ) const [initialDocumentTheme] = React.useState(() => effectiveIsDark ? "dark" : "light" ) const editorOptions = React.useMemo( () => ({ initialDocumentTheme, initialFileName: displayFileName, }), [displayFileName, initialDocumentTheme] ) const editor = useDocxEditor(editorOptions) const { layout: pageLayout } = useDocxPageLayout(editor) const { importDocxFile, setDocumentTheme, status } = editor const { showComments, setShowComments } = useDocxComments(editor) const { showTrackedChanges, setShowTrackedChanges } = useDocxTrackChanges(editor) const [reportedPageCount, setReportedPageCount] = React.useState(0) const [zoomState, setZoomState] = React.useState({ documentKey: "", level: resolvedDefaultZoomLevel, resolvedZoom: typeof resolvedDefaultZoomLevel === "number" ? resolvedDefaultZoomLevel : DEFAULT_ZOOM, }) const activeZoomState = zoomState.documentKey === documentKey ? zoomState : { documentKey, level: resolvedDefaultZoomLevel, resolvedZoom: typeof resolvedDefaultZoomLevel === "number" ? resolvedDefaultZoomLevel : DEFAULT_ZOOM, } const setZoomLevel = React.useCallback( (level: ViewerZoomLevel) => { setZoomState({ documentKey, level, resolvedZoom: typeof level === "number" ? level : activeZoomState.resolvedZoom, }) }, [activeZoomState.resolvedZoom, documentKey] ) const handleZoomChange = React.useCallback( (state: ViewerZoomState) => { setZoomState({ documentKey, ...state }) }, [documentKey] ) const [loadError, setLoadError] = React.useState() const [isLoadingDocument, setIsLoadingDocument] = React.useState(true) const [isPreparingDownload, setIsPreparingDownload] = React.useState(false) const shouldShowDocumentSpinner = useDelayedLoadingIndicator( isLoadingDocument, DOCX_LOADING_INDICATOR_DELAY_MS ) const loadingState = ( ) const documentTheme = effectiveIsDark ? "dark" : "light" const renderTrackedChangeCard = React.useMemo( () => createDocxTrackedChangeCardRenderer(documentTheme), [documentTheme] ) const renderCommentCard = React.useMemo( () => createDocxCommentCardRenderer(documentTheme), [documentTheme] ) const hasDocument = Boolean(url || activeUploadedDocxFile) const pageCount = hasDocument && !isLoadingDocument && !loadError ? Math.max(1, reportedPageCount || editor.totalPages) : 0 const thumbnailSidebarVisible = Boolean( sidebarOpen && (pageCount || isLoadingDocument) ) const controlsDisabled = !hasDocument || isLoadingDocument || Boolean(loadError) const handlePageCountChange = React.useCallback((nextPageCount: number) => { setReportedPageCount(Math.max(1, Math.round(nextPageCount || 1))) }, []) const setViewportRef = React.useCallback((element: HTMLDivElement | null) => { viewportRef.current = element setViewportElement(element) }, []) const pageVirtualization = React.useMemo( () => ({ enabled: true, overscan: 1, scrollElement: viewportElement, }), [viewportElement] ) const handleDownload = React.useCallback(async () => { if (isPreparingDownload) return if (!activeUploadedDocxFile && !url) return setIsPreparingDownload(true) try { await downloadDocxFile({ file: activeUploadedDocxFile?.file, fileName: displayFileName, url, }) } catch (error) { console.error(error) } finally { setIsPreparingDownload(false) } }, [activeUploadedDocxFile, displayFileName, isPreparingDownload, url]) useSuppressDocxPaddingWarning(!isLoadingDocument && !loadError) React.useEffect(() => { setActivePage(1) viewportRef.current?.scrollTo({ top: 0, left: 0 }) }, [documentKey, setActivePage]) React.useEffect(() => { setDocumentTheme(effectiveIsDark ? "dark" : "light") }, [effectiveIsDark, setDocumentTheme]) React.useEffect(() => { if ( status.startsWith("Failed to load file") || status === "Only .docx files are supported" ) { const frame = window.requestAnimationFrame(() => { setLoadError(status) setIsLoadingDocument(false) }) return () => window.cancelAnimationFrame(frame) } }, [status]) // Imports mutate the shared editor instance; concurrent calls (effect // re-runs, StrictMode double-invoke) race inside the parser and surface as // bogus "Invalid DOCX ZIP" errors, so every import is chained through here. const importQueueRef = React.useRef>(Promise.resolve()) React.useEffect(() => { let isCurrent = true async function load() { // Superseded while queued — let the newest import run instead. if (!isCurrent) return if (!activeUploadedDocxFile && !url) { setIsLoadingDocument(false) setLoadError(undefined) setReportedPageCount(0) return } setIsLoadingDocument(true) setLoadError(undefined) setReportedPageCount(0) try { const docxFile = activeUploadedDocxFile?.file ?? (url ? await loadDocxFile(url, displayFileName) : null) if (!docxFile) return await importDocxFile(docxFile) if (isCurrent) { setIsLoadingDocument(false) setActivePage(1) viewportRef.current?.scrollTo({ top: 0, left: 0 }) } } catch (error) { if (isCurrent) { setLoadError( error instanceof Error ? error.message : "Unknown DOCX load error" ) setIsLoadingDocument(false) } } } importQueueRef.current = importQueueRef.current.then(load) return () => { isCurrent = false } }, [ activeUploadedDocxFile, displayFileName, importDocxFile, setActivePage, url, ]) const updateActivePageFromViewport = React.useCallback(() => { const viewport = viewportRef.current if (!viewport || !pageCount) return const viewportRect = viewport.getBoundingClientRect() const viewportCenter = viewportRect.top + viewportRect.height / 2 let closestPage = 1 let closestDistance = Number.POSITIVE_INFINITY viewport .querySelectorAll( '[data-docx-page-wrapper="true"][data-index]' ) .forEach((page) => { const pageIndex = Number(page.dataset.index) if (!Number.isFinite(pageIndex)) return const pageRect = page.getBoundingClientRect() const pageCenter = pageRect.top + pageRect.height / 2 const distance = Math.abs(pageCenter - viewportCenter) if (distance < closestDistance) { closestDistance = distance closestPage = pageIndex + 1 } }) activePageStore.setActivePage((currentPage) => currentPage === closestPage ? currentPage : closestPage ) }, [activePageStore, pageCount]) React.useEffect(() => { const viewport = viewportRef.current if (!viewport || !pageCount) return let frameId = 0 const handleScroll = () => { window.cancelAnimationFrame(frameId) frameId = window.requestAnimationFrame(updateActivePageFromViewport) } frameId = window.requestAnimationFrame(updateActivePageFromViewport) viewport.addEventListener("scroll", handleScroll, { passive: true }) return () => { window.cancelAnimationFrame(frameId) viewport.removeEventListener("scroll", handleScroll) } }, [pageCount, updateActivePageFromViewport]) const scrollToPage = React.useCallback( (pageNumber: number) => { const viewport = viewportRef.current const targetPageIndex = pageNumber - 1 const page = viewport?.querySelector( `[data-docx-page-wrapper="true"][data-index="${targetPageIndex}"]` ) setActivePage(pageNumber) if (!viewport) return if (!page) { const pageStridePx = (pageLayout.pageHeightPx + pageLayout.viewportDefaults.pageGapPx) * (activeZoomState.resolvedZoom / 100) viewport.scrollTo({ top: Math.max(0, targetPageIndex * pageStridePx - 24), behavior: "auto", }) return } viewport.scrollTo({ top: page.getBoundingClientRect().top - viewport.getBoundingClientRect().top + viewport.scrollTop - 24, behavior: "auto", }) }, [ pageLayout.pageHeightPx, pageLayout.viewportDefaults.pageGapPx, setActivePage, activeZoomState.resolvedZoom, ] ) async function handleUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] event.target.value = "" if (!file) return setZoomLevel(resolvedDefaultZoomLevel) setActivePage(1) setReportedPageCount(0) setUploadedDocxFile({ file, identity: `${file.name}-${file.size}-${file.lastModified}`, sourceUrl: url, }) } return (

{showToolbar ? ( setSidebarOpen((open) => !open)} onUploadClick={() => fileInputRef.current?.click()} pageCount={pageCount} onZoomChange={setZoomLevel} showComments={showComments} showDownloadButton={showDownload} showNightRenderToggle={shouldRenderNightMode} showTrackedChanges={showTrackedChanges} showUploadButton={showUpload} toolbarActions={toolbarActions} resolvedZoom={activeZoomState.resolvedZoom} zoomLevel={activeZoomState.level} /> ) : null}

{ if (isInteractiveViewerTarget(event.target)) return event.currentTarget.focus({ preventScroll: true }) }, tabIndex: 0, }} viewportRef={setViewportRef} > {!url && !activeUploadedDocxFile ? (

Upload a Word document to preview

Pass a DOCX URL with the src prop or upload a file.

Legacy .doc support is limited and experimental; convert to DOCX for best fidelity.

) : loadError ? (

Unable to display DOCX

{loadError}

) : isLoadingDocument ? ( loadingState ) : (

)}

) } function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const localViewportRef = React.useRef(null) const { className: viewportPropsClassName, ref: viewportPropsRef, style: viewportStyle, ...resolvedViewportProps } = viewportProps ?? {} const resolvedViewportStyle = { ...viewportStyle } delete resolvedViewportStyle.overflow const composedViewportRef = React.useMemo( () => InlineComposeRefs(localViewportRef, viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) React.useEffect(() => { const viewport = localViewportRef.current if (!viewport || !scrollFade) return const updateOverflow = () => { const x = Math.abs(viewport.scrollLeft) const y = Math.max(0, viewport.scrollTop) const overflow = { "x-start": x, "x-end": Math.max(0, viewport.scrollWidth - viewport.clientWidth - x), "y-start": y, "y-end": Math.max(0, viewport.scrollHeight - viewport.clientHeight - y), } for (const [edge, value] of Object.entries(overflow)) { viewport.style.setProperty( `--scroll-area-overflow-${edge}`, `${value}px` ) } } const observer = new ResizeObserver(updateOverflow) observer.observe(viewport) if (viewport.firstElementChild) observer.observe(viewport.firstElementChild) viewport.addEventListener("scroll", updateOverflow, { passive: true }) updateOverflow() return () => { observer.disconnect() viewport.removeEventListener("scroll", updateOverflow) } }, [scrollFade]) 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 = React.ComponentProps< typeof ScrollAreaPrimitive.Root > & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: React.ComponentProps 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 } 53:T128e,"use client" import * as React from "react" import type { DocxCommentCardRenderProps, DocxDocumentTheme, DocxTrackedChangeCardRenderProps, } from "@extend-ai/react-docx" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Card } from "@/components/ui/card" type AnnotationBadgeVariant = | "outline" | "secondary" | "success" | "error" | "warning" | "info" function trackedChangeBadgeVariant( kind: DocxTrackedChangeCardRenderProps["change"]["kind"] ): AnnotationBadgeVariant { switch (kind) { case "insertion": case "move-to": return "success" case "deletion": case "move-from": return "error" default: return "warning" } } function trackedChangeBadgeLabel({ change, kindLabel, }: Pick) { switch (change.kind) { case "insertion": return "Inserted" case "deletion": return "Removed" case "move-from": return "Moved from" case "move-to": return "Moved to" default: return kindLabel } } function DocxAnnotationCard({ anchorText, badge, badgeVariant = "outline", date, meta, documentTheme, snippet, style, }: { anchorText?: string badge: string badgeVariant?: AnnotationBadgeVariant date?: string documentTheme: DocxDocumentTheme meta: string snippet: string style: React.CSSProperties }) { const isDarkDocument = documentTheme === "dark" const cardStyle: React.CSSProperties = { ...style, backgroundColor: isDarkDocument ? "rgb(24 24 27 / 0.95)" : "rgb(255 255 255 / 0.95)", color: isDarkDocument ? "#f4f4f5" : "#18181b", } const mutedTextColor = isDarkDocument ? "#a1a1aa" : "#71717a" const anchorStyle: React.CSSProperties = { backgroundColor: isDarkDocument ? "rgb(63 63 70 / 0.55)" : "rgb(244 244 245 / 0.75)", color: mutedTextColor, } return (

{meta}

{date ?

{date}

: null}

{badge}

{anchorText ? (

{anchorText}

) : null}

{snippet}

) } export function createDocxTrackedChangeCardRenderer( documentTheme: DocxDocumentTheme ) { return function renderDocxTrackedChangeCard({ change, formattedDate, kindLabel, snippet, style, }: DocxTrackedChangeCardRenderProps) { return ( ) } } export function createDocxCommentCardRenderer( documentTheme: DocxDocumentTheme ) { return function renderDocxCommentCard({ comment, formattedDate, snippet, style, }: DocxCommentCardRenderProps) { const badge = comment.resolved ? "Resolved" : comment.parentId !== undefined ? "Reply" : "Comment" return ( ) } } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@extend-ai/react-docx@^0.9.2",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40extend-ai%2Freact-docx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@extend-ai/react-docx@^0.9.2"}]]}]}],["$","li","@tanstack/react-virtual@^3.13.12",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-virtual@^3.13.12"}]]}]}],["$","li","radix-ui@^1.4.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.4.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["@extend/document-viewer-sidebar","@extend/file-thumbnail","https://ui.shadcn.com/r/styles/radix-nova/utils.json","https://ui.shadcn.com/r/styles/radix-nova/button.json","https://ui.shadcn.com/r/styles/radix-nova/dropdown-menu.json","https://ui.shadcn.com/r/styles/radix-nova/input.json","https://ui.shadcn.com/r/styles/radix-nova/scroll-area.json","https://ui.shadcn.com/r/styles/radix-nova/select.json","https://ui.shadcn.com/r/styles/radix-nova/separator.json","https://ui.shadcn.com/r/styles/radix-nova/tooltip.json","@extend/docx-editor","https://ui.shadcn.com/r/styles/radix-nova/badge.json","https://ui.shadcn.com/r/styles/radix-nova/card.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/docx-viewer.tsx","content":"$52","type":"registry:ui","target":"@components/extend/docx-viewer.tsx"},{"path":"components/extend/docx-annotation-card.tsx","content":"$53","type":"registry:ui","target":"@components/extend/docx-annotation-card.tsx"}],"className":"h-[70svh] min-h-80"}]]}]