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/3j06ow7w40nxu.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/3j06ow7w40nxu.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:T12919,"use client" import * as React from "react" import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area" import { DocxEditorViewer, paragraphLetterheadFloatSideAtNodeIndex, useDocxBorders, useDocxComments, useDocxDocumentTheme, useDocxEditor, useDocxLineSpacing, useDocxPageLayout, useDocxParagraphStyles, useDocxTrackChanges, useDocxViewerThumbnails, type DocxBorderContext, type DocxBorderPreset, type DocxDocumentTheme, type DocxEditorController, type ParagraphStyleDefinition, } from "@extend-ai/react-docx" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, 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 { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { ColorPicker } from "@/components/extend/document-color-picker" import { PreviewCard, PreviewCardContent, PreviewCardTrigger, } from "@/components/extend/document-preview-card" 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" function ArrowExpandDiagonal01Glyph(props: InlineRegistryIconProps) { return ( ) } function ArrowExpandDiagonal02Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderAll01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderBottom01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderHorizontalGlyph(props: InlineRegistryIconProps) { return ( ) } function BorderInnerGlyph(props: InlineRegistryIconProps) { return ( ) } function BorderLeft01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderNone01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderRight01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderTop01Glyph(props: InlineRegistryIconProps) { return ( ) } function BorderVerticalGlyph(props: InlineRegistryIconProps) { return ( ) } function LineGlyph(props: InlineRegistryIconProps) { return ( ) } function Moon02Glyph(props: InlineRegistryIconProps) { return ( ) } function Sun03Glyph(props: InlineRegistryIconProps) { return ( ) } function TextColorGlyph(props: InlineRegistryIconProps) { return ( ) } const DOCX_MIME_TYPE = "application/vnd.openxmlformats-officedocument.wordprocessingml.document" const DOCX_LOADING_INDICATOR_DELAY_MS = 300 const DOCX_THUMBNAIL_WIDTH = 92 const DOCX_EDITOR_DEFAULT_ZOOM_SCALE = 100 const ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const const FONT_FAMILIES = [ "Calibri", "Arial", "Times New Roman", "Georgia", "Helvetica", "Courier New", ] as const const FONT_SIZE_OPTIONS = [ 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48, ] as const const LINE_SPACING_OPTIONS = [1, 1.15, 1.2, 1.5, 2, 2.5, 3] as const const FALLBACK_PARAGRAPH_STYLE_OPTIONS = [ { id: "Normal", name: "Body" }, { id: "Heading1", name: "Heading 1" }, { id: "Heading2", name: "Heading 2" }, { id: "Heading3", name: "Heading 3" }, ] as const const HIGHLIGHT_COLORS = [ { label: "Yellow", value: "yellow", color: "#fff59d" }, { label: "Green", value: "green", color: "#bbf7d0" }, { label: "Cyan", value: "cyan", color: "#a5f3fc" }, { label: "Magenta", value: "magenta", color: "#f5d0fe" }, { label: "Red", value: "red", color: "#fecaca" }, { label: "Blue", value: "blue", color: "#bfdbfe" }, ] as const const HIGHLIGHT_PREVIEW_COLORS: Record = { black: "#111827", white: "#ffffff", ...Object.fromEntries( HIGHLIGHT_COLORS.map((option) => [option.value, option.color]) ), } const DOCX_PADDING_WARNING_TEXT = "a style property during rerender" const DEFAULT_HEADING_PREVIEW_RUN_STYLES: Record< 1 | 2 | 3 | 4 | 5 | 6, NonNullable > = { 1: { fontFamily: "Calibri Light", fontSizePt: 16, bold: true, color: "#2f5496", }, 2: { fontFamily: "Calibri Light", fontSizePt: 13, bold: true, color: "#2f5496", }, 3: { fontFamily: "Calibri", fontSizePt: 12, bold: true, color: "#1f3763", }, 4: { fontFamily: "Calibri", fontSizePt: 11, bold: true, color: "#1f3763", }, 5: { fontFamily: "Calibri", fontSizePt: 11, bold: true, color: "#1f3763", }, 6: { fontFamily: "Calibri", fontSizePt: 11, bold: true, color: "#1f3763", }, } type UploadedDocxFile = { file: File identity: string } type BorderControlOption = { id: DocxBorderPreset label: string contexts?: DocxBorderContext[] separatorBefore?: boolean } type DocxFontToggleValue = | "bold" | "italic" | "underline" | "strike" | "superscript" | "subscript" const BORDER_CONTROL_OPTIONS: BorderControlOption[] = [ { id: "bottom", label: "Bottom Border" }, { id: "top", label: "Top Border" }, { id: "left", label: "Left Border" }, { id: "right", label: "Right Border" }, { id: "none", label: "No Border", separatorBefore: true }, { id: "all", label: "All Borders" }, { id: "outside", label: "Outside Borders" }, { id: "inside", label: "Inside Borders", contexts: ["table"] }, { id: "inside-horizontal", label: "Inside Horizontal Border", contexts: ["table"], }, { id: "inside-vertical", label: "Inside Vertical Border", contexts: ["table"], }, { id: "diagonal-down", label: "Diagonal Down Border", contexts: ["table"], separatorBefore: true, }, { id: "diagonal-up", label: "Diagonal Up Border", contexts: ["table"] }, { id: "horizontal-line", label: "Horizontal Line", separatorBefore: true }, ] function borderControlOptionIcon(optionId: DocxBorderPreset) { switch (optionId) { case "bottom": return BorderBottom01Glyph case "top": return BorderTop01Glyph case "left": return BorderLeft01Glyph case "right": return BorderRight01Glyph case "none": return BorderNone01Glyph case "inside": return BorderInnerGlyph case "inside-horizontal": return BorderHorizontalGlyph case "inside-vertical": return BorderVerticalGlyph case "diagonal-down": return ArrowExpandDiagonal01Glyph case "diagonal-up": return ArrowExpandDiagonal02Glyph case "horizontal-line": return LineGlyph default: return BorderAll01Glyph } } 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 getNextZoomScale(currentZoomScale: number, direction: 1 | -1) { const currentIndex = ZOOM_OPTIONS.indexOf( currentZoomScale as (typeof ZOOM_OPTIONS)[number] ) let fallbackIndex = -1 if (direction > 0) { fallbackIndex = ZOOM_OPTIONS.findIndex((value) => value > currentZoomScale) } else { for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) { if (ZOOM_OPTIONS[index] < currentZoomScale) { fallbackIndex = index break } } } const resolvedIndex = currentIndex >= 0 ? currentIndex : fallbackIndex if (resolvedIndex < 0) return currentZoomScale const nextIndex = Math.min( Math.max(resolvedIndex + direction, 0), ZOOM_OPTIONS.length - 1 ) return ZOOM_OPTIONS[nextIndex] ?? currentZoomScale } function normalizeDocxZoomScale(value: number | undefined): number { return typeof value === "number" && ZOOM_OPTIONS.includes(value as (typeof ZOOM_OPTIONS)[number]) ? value : DOCX_EDITOR_DEFAULT_ZOOM_SCALE } 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 normalizeHexColor(value?: string, fallback = "#111827") { if (!value) return fallback const trimmed = value.trim() const threeDigit = /^#([0-9a-f]{3})$/i.exec(trimmed) if (threeDigit?.[1]) { const [red, green, blue] = threeDigit[1].split("") return `#${red}${red}${green}${green}${blue}${blue}`.toLowerCase() } const sixDigit = /^#([0-9a-f]{6})$/i.exec(trimmed) if (sixDigit?.[1]) { return `#${sixDigit[1].toLowerCase()}` } return fallback } function inferParagraphStyleHeadingLevel(value?: string) { if (!value) return undefined const match = value.match(/(?:^|[\s_-])(?:heading|h)\s*([1-6])(?:$|[\s_-])/i) const level = match?.[1] ? Number(match[1]) : NaN return level >= 1 && level <= 6 ? (level as 1 | 2 | 3 | 4 | 5 | 6) : undefined } function resolveParagraphStyleHeadingLevel(option?: ParagraphStyleDefinition) { if ( Number.isFinite(option?.headingLevel) && option?.headingLevel && option.headingLevel >= 1 && option.headingLevel <= 6 ) { return option.headingLevel as 1 | 2 | 3 | 4 | 5 | 6 } return ( inferParagraphStyleHeadingLevel(option?.id) ?? inferParagraphStyleHeadingLevel(option?.name) ) } function resolveParagraphStyleRunPreview(option?: ParagraphStyleDefinition) { if (!option) return undefined const headingLevel = resolveParagraphStyleHeadingLevel(option) const headingRunStyle = headingLevel ? DEFAULT_HEADING_PREVIEW_RUN_STYLES[headingLevel] : undefined return headingRunStyle ? { ...headingRunStyle, ...(option.runStyle ?? {}), } : option.runStyle } function resolveHighlightPreview(value?: string) { if (!value) return undefined const normalized = value.trim().toLowerCase() if (!normalized) return undefined const hex = normalizeHexColor(normalized, "") if (hex) return hex return HIGHLIGHT_PREVIEW_COLORS[normalized] } function themedPreviewColor( color: string | undefined, documentTheme: DocxDocumentTheme ) { if (documentTheme !== "dark") return color if (!color) return "#f3f4f6" const normalized = color.trim().toLowerCase() if ( normalized === "#000" || normalized === "#000000" || normalized === "#111111" || normalized === "#111827" || normalized === "black" || normalized === "rgb(0,0,0)" || normalized === "rgb(0, 0, 0)" ) { return "#f3f4f6" } return color } function paragraphStylePreviewStyle( option: ParagraphStyleDefinition, documentTheme: DocxDocumentTheme ): React.CSSProperties { const runStyle = resolveParagraphStyleRunPreview(option) const textDecoration = [ runStyle?.underline ? "underline" : "", runStyle?.strike ? "line-through" : "", ] .filter(Boolean) .join(" ") return { textAlign: option.align ?? "left", fontFamily: runStyle?.fontFamily, fontSize: runStyle?.fontSizePt ? `${runStyle.fontSizePt}pt` : "11pt", fontWeight: runStyle?.bold !== undefined ? (runStyle.bold ? 700 : 400) : undefined, fontStyle: runStyle?.italic ? "italic" : undefined, textDecoration: textDecoration || undefined, color: runStyle?.color !== undefined ? themedPreviewColor(normalizeHexColor(runStyle.color), documentTheme) : undefined, backgroundColor: resolveHighlightPreview(runStyle?.highlight), lineHeight: 1, whiteSpace: "pre-wrap", } } function parseToolbarSectionColumns(sectionPropertiesXml?: string): | { count: number gapPx: number } | undefined { if (!sectionPropertiesXml) return undefined const columnsTag = sectionPropertiesXml.match(/]*\/?>/i)?.[0] if (!columnsTag) return undefined const countRaw = columnsTag.match(/\bw:num="(\d+)"/i)?.[1] const count = countRaw ? Number(countRaw) : 1 if (!Number.isFinite(count) || count <= 1) return undefined const gapRaw = columnsTag.match(/\bw:space="(\d+)"/i)?.[1] const gapTwips = gapRaw ? Number(gapRaw) : 720 const gapPx = Math.max(0, Math.round((gapTwips * 96) / 1440)) return { count: Math.max(2, Math.round(count)), gapPx, } } function ToolbarTooltip({ label, children, }: { label: string children: React.ReactNode }) { return ( {children}} > {label} ) } function EditorLoadingSurface({ showSpinner = true, }: { showSpinner?: boolean }) { return (

{showSpinner ? : null}

) } function ToolbarIconButton({ active, children, label, ...props }: React.ComponentProps & { active?: boolean label: string }) { return ( ) } function ToolbarSeparator() { return } 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 ParagraphStylePreviewCard({ documentTheme, option, }: { documentTheme: DocxDocumentTheme option: ParagraphStyleDefinition }) { const surfaceStyle: React.CSSProperties = documentTheme === "dark" ? { backgroundColor: "#111827", borderColor: "#374151", color: "#f3f4f6", } : { backgroundColor: "#ffffff", borderColor: "#d4d4d8", color: "#111827", } const secondaryTextColor = documentTheme === "dark" ? "#9ca3af" : "#6b7280" return (

Style Preview

{option.name}

The quick brown fox jumps over the lazy dog.

) } function DocxEditorToolbar({ activePage, controlsDisabled, editor, isReadOnly, onImageUploadClick, onIsDarkChange, onIsReadOnlyChange, onOpenLinkEditor, onToggleSidebar, onUploadClick, pageCount, setZoomScale, showNightRenderToggle, zoomScale, }: { activePage: number controlsDisabled: boolean editor: DocxEditorController isReadOnly: boolean onImageUploadClick: () => void onIsDarkChange: (checked: boolean) => void onIsReadOnlyChange: (checked: boolean) => void onOpenLinkEditor: () => void onToggleSidebar: () => void onUploadClick: () => void pageCount: number setZoomScale: React.Dispatch> showNightRenderToggle: boolean zoomScale: number }) { const { documentTheme, setDocumentTheme } = useDocxDocumentTheme(editor) const { layout: pageLayout } = useDocxPageLayout(editor) const { paragraphStyles, selectedParagraphStyleId, setParagraphStyle } = useDocxParagraphStyles(editor) const { lineSpacing, setLineSpacing } = useDocxLineSpacing(editor) const { borderContext, activeBorderPresets, applyBorderPreset } = useDocxBorders(editor) const { showTrackedChanges, setShowTrackedChanges } = useDocxTrackChanges(editor) const { showComments, setShowComments } = useDocxComments(editor) const selectedRunStyle = editor.selectedRunStyle const selectedParagraph = editor.selectedParagraph const paragraphStyleOptions: ParagraphStyleDefinition[] = paragraphStyles.length > 0 ? paragraphStyles : [...FALLBACK_PARAGRAPH_STYLE_OPTIONS] const selectedParagraphStyleValue = selectedParagraphStyleId ?? paragraphStyleOptions.find((option) => "isDefault" in option)?.id ?? paragraphStyleOptions[0]?.id ?? "Normal" const [paragraphStylePreviewId, setParagraphStylePreviewId] = React.useState< string | null >(null) const selectedLineSpacingValue = React.useMemo(() => { const current = Number.isFinite(lineSpacing.multiple) ? lineSpacing.multiple : 1 const nearest = LINE_SPACING_OPTIONS.reduce((closest, candidate) => { return Math.abs(candidate - current) < Math.abs(closest - current) ? candidate : closest }, LINE_SPACING_OPTIONS[0]) return String(nearest) }, [lineSpacing.multiple]) const textColorValue = normalizeHexColor(selectedRunStyle?.color) const highlightColor = HIGHLIGHT_COLORS.find( (option) => option.value === selectedRunStyle?.highlight )?.color ?? "#fff59d" const activeNodeIndex = editor.selection.kind === "paragraph" ? editor.selection.nodeIndex : editor.selection.tableIndex const letterheadColumns = editor.selection.kind === "paragraph" && paragraphLetterheadFloatSideAtNodeIndex( editor.model.nodes, editor.selection.nodeIndex ) ? { count: 2, gapPx: 28 } : undefined const sections = editor.model.metadata.sections ?? [] const activeSection = sections .filter((section) => section.startNodeIndex <= activeNodeIndex) .at(-1) const activeColumns = letterheadColumns ?? parseToolbarSectionColumns(activeSection?.sectionPropertiesXml) ?? parseToolbarSectionColumns(editor.model.metadata.sectionPropertiesXml) ?? pageLayout.columns const activeBorderControlOptions = BORDER_CONTROL_OPTIONS.filter( (option) => activeBorderPresets[option.id] ) const borderTriggerLabel = activeBorderControlOptions.length === 1 ? activeBorderControlOptions[0].label : "Borders" const borderTriggerIcon = React.createElement( borderControlOptionIcon( activeBorderControlOptions.length === 1 ? activeBorderControlOptions[0].id : "all" ), { className: "size-4" } ) const canEdit = !controlsDisabled && !isReadOnly const canZoomIn = zoomScale < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1] const canZoomOut = zoomScale > ZOOM_OPTIONS[0] const fontToggleValues = React.useMemo(() => { const values: DocxFontToggleValue[] = [] if (selectedRunStyle?.bold) values.push("bold") if (selectedRunStyle?.italic) values.push("italic") if (selectedRunStyle?.underline) values.push("underline") if (selectedRunStyle?.strike) values.push("strike") if (selectedRunStyle?.verticalAlign === "superscript") { values.push("superscript") } if (selectedRunStyle?.verticalAlign === "subscript") { values.push("subscript") } return values }, [selectedRunStyle]) const preserveTextSelection = React.useCallback( (event: React.MouseEvent | React.PointerEvent) => event.preventDefault(), [] ) const applyFontToggleValues = React.useCallback( (nextValues: DocxFontToggleValue[]) => { const changedValue = nextValues.find((value) => !fontToggleValues.includes(value)) ?? fontToggleValues.find((value) => !nextValues.includes(value)) if (changedValue === "bold") { editor.toggleBold() } else if (changedValue === "italic") { editor.toggleItalic() } else if (changedValue === "underline") { editor.toggleUnderline() } else if (changedValue === "strike") { editor.toggleStrike() } else if (changedValue === "superscript") { editor.toggleSuperscript() } else if (changedValue === "subscript") { editor.toggleSubscript() } }, [editor, fontToggleValues] ) return (

Page {pageCount ? activePage : 1} of {pageCount || "-"}

{showNightRenderToggle ? ( <> { const nextIsDark = documentTheme !== "dark" setDocumentTheme(nextIsDark ? "dark" : "light") onIsDarkChange(nextIsDark) }} > {documentTheme === "dark" ? ( ) : ( )} ) : null} setShowTrackedChanges(!showTrackedChanges)} > setShowComments(!showComments)} > onIsReadOnlyChange(!isReadOnly)} > {editor.isImporting ? ( ) : ( )}

applyFontToggleValues(value as DocxFontToggleValue[]) } spacing={1} >

editor.setTextColor(normalizeHexColor(color)) } /> } > {HIGHLIGHT_COLORS.map((option) => ( editor.setHighlight(option.value)} > {option.label} ))} editor.setHighlight(undefined)} > No highlight

editor.setAlignment("left")} > editor.setAlignment("center")} > editor.setAlignment("right")} > editor.setAlignment("justify")} >

editor.toggleList("unordered")} > editor.toggleList("ordered")} >

{borderTriggerIcon} {borderTriggerLabel} } > {BORDER_CONTROL_OPTIONS.map((option) => { const enabledForContext = !option.contexts || option.contexts.includes(borderContext) const BorderOptionIcon = borderControlOptionIcon(option.id) return ( {option.separatorBefore ? : null} { if (enabledForContext) { applyBorderPreset(option.id) } }} > {option.label} ) })}

{activeColumns ? `${activeColumns.count} cols` : "1 col"}

setZoomScale((currentZoomScale) => getNextZoomScale(currentZoomScale, -1) ) } > setZoomScale((currentZoomScale) => getNextZoomScale(currentZoomScale, 1) ) } >

) } export function DocxEditorPreview({ className, defaultZoomScale = DOCX_EDITOR_DEFAULT_ZOOM_SCALE, fileName, isDark, onIsDarkChange, src, }: { className?: string defaultZoomScale?: number fileName?: string isDark: boolean onIsDarkChange: (isDark: boolean) => void src?: string }) { return ( ) } function DocxEditorContent({ className, defaultZoomScale, effectiveIsDark, fileName, setIsDark, shouldRenderNightMode, url, }: { className?: string defaultZoomScale?: number effectiveIsDark: boolean fileName?: string setIsDark: (checked: boolean) => void shouldRenderNightMode: boolean url?: string }) { const fileInputRef = React.useRef(null) const imageInputRef = 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 [activePage, setActivePage] = React.useState(1) const [sidebarOpen, setSidebarOpen] = React.useState(false) const resolvedDefaultZoomScale = normalizeDocxZoomScale(defaultZoomScale) const [zoomScale, setZoomScale] = React.useState( resolvedDefaultZoomScale ) const [loadError, setLoadError] = React.useState() const [isLoadingDocument, setIsLoadingDocument] = React.useState(Boolean(url)) const [isReadOnly, setIsReadOnly] = React.useState(false) const [linkEditorOpen, setLinkEditorOpen] = React.useState(false) const [linkDraft, setLinkDraft] = React.useState("") const viewerBackgroundColor = "color-mix(in oklab, var(--muted) 40%, transparent)" const displayFileName = React.useMemo( () => uploadedDocxFile?.file.name ?? (url ? formatDocumentName(fileName, url) : (fileName ?? "document.docx")), [fileName, uploadedDocxFile?.file.name, 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 [reportedPageCount, setReportedPageCount] = React.useState(0) const thumbnailEditor = React.useMemo( () => ({ ...editor, totalPages: Math.max(editor.totalPages, reportedPageCount), }), [editor, reportedPageCount] ) const thumbnailOptions = React.useMemo( () => ({ pixelRatio: 2, resolution: { maxHeight: DOCX_THUMBNAIL_WIDTH * 1.35, maxWidth: DOCX_THUMBNAIL_WIDTH, }, }), [] ) const { thumbnails } = useDocxViewerThumbnails( thumbnailEditor, thumbnailOptions ) const shouldShowDocumentSpinner = useDelayedLoadingIndicator( isLoadingDocument, DOCX_LOADING_INDICATOR_DELAY_MS ) const loadingState = ( ) const renderTrackedChangeCard = React.useMemo( () => createDocxTrackedChangeCardRenderer(editor.documentTheme), [editor.documentTheme] ) const renderCommentCard = React.useMemo( () => createDocxCommentCardRenderer(editor.documentTheme), [editor.documentTheme] ) const hasDocument = Boolean(url || uploadedDocxFile) const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth) const pageCount = hasDocument && !isLoadingDocument && !loadError ? Math.max(1, reportedPageCount || editor.totalPages) : 0 const controlsDisabled = !hasDocument || isLoadingDocument || Boolean(loadError) const thumbnailSidebarOpen = Boolean( sidebarOpen && (pageCount || isLoadingDocument) ) 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, zoomScale: zoomScale / 100, }), [viewportElement, zoomScale] ) useSuppressDocxPaddingWarning(!isLoadingDocument && !loadError) const [previousDefaultZoom, setPreviousDefaultZoom] = React.useState( resolvedDefaultZoomScale ) if (previousDefaultZoom !== resolvedDefaultZoomScale) { setPreviousDefaultZoom(resolvedDefaultZoomScale) setZoomScale(resolvedDefaultZoomScale) setActivePage(1) } React.useEffect(() => { viewportRef.current?.scrollTo({ top: 0, left: 0 }) }, [resolvedDefaultZoomScale, url]) React.useEffect(() => { setDocumentTheme(effectiveIsDark ? "dark" : "light") }, [effectiveIsDark, setDocumentTheme]) const [previousStatus, setPreviousStatus] = React.useState(status) if (previousStatus !== status) { setPreviousStatus(status) if ( status.startsWith("Failed to load file") || status === "Only .docx files are supported" ) { setLoadError(status) setIsLoadingDocument(false) } } React.useEffect(() => { let isCurrent = true async function load() { if (!uploadedDocxFile && !url) return try { const docxFile = uploadedDocxFile?.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) } } } void load() return () => { isCurrent = false } }, [displayFileName, importDocxFile, uploadedDocxFile, 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 } }) setActivePage((currentPage) => currentPage === closestPage ? currentPage : closestPage ) }, [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) * (zoomScale / 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, zoomScale] ) async function handleUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] event.target.value = "" if (!file) return setZoomScale(resolvedDefaultZoomScale) setActivePage(1) setReportedPageCount(0) setIsLoadingDocument(true) setLoadError(undefined) setUploadedDocxFile({ file, identity: `${file.name}-${file.size}-${file.lastModified}`, }) } async function handleImageUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] event.target.value = "" if (!file) return await editor.insertImageFile(file) } function openLinkEditor() { setLinkDraft(editor.selectedLink ?? "") setLinkEditorOpen(true) } function applyLink() { editor.setLink(linkDraft.trim() || undefined) setLinkEditorOpen(false) } return (

imageInputRef.current?.click()} onIsDarkChange={setIsDark} onIsReadOnlyChange={setIsReadOnly} onOpenLinkEditor={openLinkEditor} onToggleSidebar={() => setSidebarOpen((open) => !open)} onUploadClick={() => fileInputRef.current?.click()} pageCount={pageCount} setZoomScale={setZoomScale} showNightRenderToggle={shouldRenderNightMode} zoomScale={zoomScale} />

{linkEditorOpen ? (

setLinkDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { event.preventDefault() applyLink() } if (event.key === "Escape") { setLinkEditorOpen(false) } }} placeholder="https://example.com" aria-label="Link URL" />

) : null}

{isLoadingDocument ? ( <>

) : (

{thumbnails.slice(0, pageCount || 0).map((thumbnail) => ( ))}

)}

{!url && !uploadedDocxFile ? (

Upload a DOCX to edit

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

) : loadError ? (

Unable to edit DOCX

{loadError}

) : isLoadingDocument ? ( loadingState ) : (

)}

) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number } 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 ( ) } 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","@base-ui/react@^1.4.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@^1.4.1"}]]}]}]]}],["$","$L50",null,{"namespace":"@extend","registryDependencies":["@extend/document-viewer-sidebar","@extend/file-thumbnail","utils","button","dropdown-menu","input","scroll-area","select","separator","toggle-group","tooltip","@extend/document-color-picker","@extend/document-preview-card","badge","card"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/docx-editor.tsx","content":"$52","type":"registry:ui","target":"@components/extend/docx-editor.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"}]]}]