{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "docx-editor", "title": "DOCX Editor", "description": "An experimental DOCX editor with a Word-style toolbar, page thumbnails, import, export, and live document mutation.", "dependencies": [ "@extend-ai/react-docx@^0.9.1", "@base-ui/react@^1.4.1" ], "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" ], "files": [ { "path": "components/extend/docx-editor.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\nimport {\n DocxEditorViewer,\n paragraphLetterheadFloatSideAtNodeIndex,\n useDocxBorders,\n useDocxComments,\n useDocxDocumentTheme,\n useDocxEditor,\n useDocxLineSpacing,\n useDocxPageLayout,\n useDocxParagraphStyles,\n useDocxTrackChanges,\n useDocxViewerThumbnails,\n type DocxBorderContext,\n type DocxBorderPreset,\n type DocxDocumentTheme,\n type DocxEditorController,\n type ParagraphStyleDefinition,\n} from \"@extend-ai/react-docx\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuSeparator,\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 { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\nimport { ColorPicker } from \"@/components/extend/document-color-picker\"\nimport {\n PreviewCard,\n PreviewCardContent,\n PreviewCardTrigger,\n} from \"@/components/extend/document-preview-card\"\nimport {\n DocumentViewerThumbnailSidebar,\n useElementWidth,\n useInlineThumbnailSidebar,\n} from \"@/components/extend/document-viewer-sidebar\"\nimport {\n createDocxCommentCardRenderer,\n createDocxTrackedChangeCardRenderer,\n} from \"@/components/extend/docx-annotation-card\"\nimport { FileThumbnail } from \"@/components/extend/file-thumbnail\"\nimport { IconPlaceholder } from \"@/components/icon-placeholder\"\n\nfunction ArrowExpandDiagonal01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction ArrowExpandDiagonal02Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderAll01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderBottom01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderHorizontalGlyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderInnerGlyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderLeft01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderNone01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderRight01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderTop01Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction BorderVerticalGlyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction LineGlyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction Moon02Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction Sun03Glyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nfunction TextColorGlyph(props: InlineRegistryIconProps) {\n return (\n \n )\n}\nconst DOCX_MIME_TYPE =\n \"application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\nconst DOCX_LOADING_INDICATOR_DELAY_MS = 300\nconst DOCX_THUMBNAIL_WIDTH = 92\nconst DOCX_EDITOR_DEFAULT_ZOOM_SCALE = 100\nconst ZOOM_OPTIONS = [50, 75, 90, 100, 110, 125, 150, 175, 200] as const\nconst FONT_FAMILIES = [\n \"Calibri\",\n \"Arial\",\n \"Times New Roman\",\n \"Georgia\",\n \"Helvetica\",\n \"Courier New\",\n] as const\nconst FONT_SIZE_OPTIONS = [\n 8, 9, 10, 11, 12, 14, 16, 18, 20, 24, 28, 32, 36, 48,\n] as const\nconst LINE_SPACING_OPTIONS = [1, 1.15, 1.2, 1.5, 2, 2.5, 3] as const\nconst FALLBACK_PARAGRAPH_STYLE_OPTIONS = [\n { id: \"Normal\", name: \"Body\" },\n { id: \"Heading1\", name: \"Heading 1\" },\n { id: \"Heading2\", name: \"Heading 2\" },\n { id: \"Heading3\", name: \"Heading 3\" },\n] as const\nconst HIGHLIGHT_COLORS = [\n { label: \"Yellow\", value: \"yellow\", color: \"#fff59d\" },\n { label: \"Green\", value: \"green\", color: \"#bbf7d0\" },\n { label: \"Cyan\", value: \"cyan\", color: \"#a5f3fc\" },\n { label: \"Magenta\", value: \"magenta\", color: \"#f5d0fe\" },\n { label: \"Red\", value: \"red\", color: \"#fecaca\" },\n { label: \"Blue\", value: \"blue\", color: \"#bfdbfe\" },\n] as const\nconst HIGHLIGHT_PREVIEW_COLORS: Record = {\n black: \"#111827\",\n white: \"#ffffff\",\n ...Object.fromEntries(\n HIGHLIGHT_COLORS.map((option) => [option.value, option.color])\n ),\n}\nconst DOCX_PADDING_WARNING_TEXT = \"a style property during rerender\"\nconst DEFAULT_HEADING_PREVIEW_RUN_STYLES: Record<\n 1 | 2 | 3 | 4 | 5 | 6,\n NonNullable\n> = {\n 1: {\n fontFamily: \"Calibri Light\",\n fontSizePt: 16,\n bold: true,\n color: \"#2f5496\",\n },\n 2: {\n fontFamily: \"Calibri Light\",\n fontSizePt: 13,\n bold: true,\n color: \"#2f5496\",\n },\n 3: {\n fontFamily: \"Calibri\",\n fontSizePt: 12,\n bold: true,\n color: \"#1f3763\",\n },\n 4: {\n fontFamily: \"Calibri\",\n fontSizePt: 11,\n bold: true,\n color: \"#1f3763\",\n },\n 5: {\n fontFamily: \"Calibri\",\n fontSizePt: 11,\n bold: true,\n color: \"#1f3763\",\n },\n 6: {\n fontFamily: \"Calibri\",\n fontSizePt: 11,\n bold: true,\n color: \"#1f3763\",\n },\n}\ntype UploadedDocxFile = {\n file: File\n identity: string\n}\ntype BorderControlOption = {\n id: DocxBorderPreset\n label: string\n contexts?: DocxBorderContext[]\n separatorBefore?: boolean\n}\ntype DocxFontToggleValue =\n | \"bold\"\n | \"italic\"\n | \"underline\"\n | \"strike\"\n | \"superscript\"\n | \"subscript\"\nconst BORDER_CONTROL_OPTIONS: BorderControlOption[] = [\n { id: \"bottom\", label: \"Bottom Border\" },\n { id: \"top\", label: \"Top Border\" },\n { id: \"left\", label: \"Left Border\" },\n { id: \"right\", label: \"Right Border\" },\n { id: \"none\", label: \"No Border\", separatorBefore: true },\n { id: \"all\", label: \"All Borders\" },\n { id: \"outside\", label: \"Outside Borders\" },\n { id: \"inside\", label: \"Inside Borders\", contexts: [\"table\"] },\n {\n id: \"inside-horizontal\",\n label: \"Inside Horizontal Border\",\n contexts: [\"table\"],\n },\n {\n id: \"inside-vertical\",\n label: \"Inside Vertical Border\",\n contexts: [\"table\"],\n },\n {\n id: \"diagonal-down\",\n label: \"Diagonal Down Border\",\n contexts: [\"table\"],\n separatorBefore: true,\n },\n { id: \"diagonal-up\", label: \"Diagonal Up Border\", contexts: [\"table\"] },\n { id: \"horizontal-line\", label: \"Horizontal Line\", separatorBefore: true },\n]\nfunction borderControlOptionIcon(optionId: DocxBorderPreset) {\n switch (optionId) {\n case \"bottom\":\n return BorderBottom01Glyph\n case \"top\":\n return BorderTop01Glyph\n case \"left\":\n return BorderLeft01Glyph\n case \"right\":\n return BorderRight01Glyph\n case \"none\":\n return BorderNone01Glyph\n case \"inside\":\n return BorderInnerGlyph\n case \"inside-horizontal\":\n return BorderHorizontalGlyph\n case \"inside-vertical\":\n return BorderVerticalGlyph\n case \"diagonal-down\":\n return ArrowExpandDiagonal01Glyph\n case \"diagonal-up\":\n return ArrowExpandDiagonal02Glyph\n case \"horizontal-line\":\n return LineGlyph\n default:\n return BorderAll01Glyph\n }\n}\nasync function loadDocxFile(\n url: string,\n displayFileName: string\n): Promise {\n const response = await fetch(url)\n if (!response.ok) {\n throw new Error(`Failed to fetch DOCX (${response.status})`)\n }\n const blob = await response.blob()\n return new File([blob], displayFileName, {\n type: blob.type || DOCX_MIME_TYPE,\n })\n}\nfunction formatDocumentName(fileName: string | undefined, url: string) {\n if (fileName?.trim()) return fileName\n const pathname = url.split(\"?\")[0] ?? \"\"\n const rawName = pathname.split(\"/\").pop() ?? \"document.docx\"\n try {\n return decodeURIComponent(rawName)\n } catch {\n return rawName\n }\n}\nfunction getNextZoomScale(currentZoomScale: number, direction: 1 | -1) {\n const currentIndex = ZOOM_OPTIONS.indexOf(\n currentZoomScale as (typeof ZOOM_OPTIONS)[number]\n )\n let fallbackIndex = -1\n if (direction > 0) {\n fallbackIndex = ZOOM_OPTIONS.findIndex((value) => value > currentZoomScale)\n } else {\n for (let index = ZOOM_OPTIONS.length - 1; index >= 0; index -= 1) {\n if (ZOOM_OPTIONS[index] < currentZoomScale) {\n fallbackIndex = index\n break\n }\n }\n }\n const resolvedIndex = currentIndex >= 0 ? currentIndex : fallbackIndex\n if (resolvedIndex < 0) return currentZoomScale\n const nextIndex = Math.min(\n Math.max(resolvedIndex + direction, 0),\n ZOOM_OPTIONS.length - 1\n )\n return ZOOM_OPTIONS[nextIndex] ?? currentZoomScale\n}\nfunction normalizeDocxZoomScale(value: number | undefined): number {\n return typeof value === \"number\" &&\n ZOOM_OPTIONS.includes(value as (typeof ZOOM_OPTIONS)[number])\n ? value\n : DOCX_EDITOR_DEFAULT_ZOOM_SCALE\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 isDocxPaddingWarning(args: unknown[]) {\n return (\n typeof args[0] === \"string\" &&\n args[0].includes(DOCX_PADDING_WARNING_TEXT) &&\n args.some((arg) => String(arg).includes(\"padding\"))\n )\n}\nfunction useSuppressDocxPaddingWarning(enabled: boolean) {\n React.useEffect(() => {\n if (!enabled) return\n const originalConsoleError = console.error\n console.error = (...args: unknown[]) => {\n if (isDocxPaddingWarning(args)) return\n originalConsoleError(...args)\n }\n return () => {\n console.error = originalConsoleError\n }\n }, [enabled])\n}\nfunction normalizeHexColor(value?: string, fallback = \"#111827\") {\n if (!value) return fallback\n const trimmed = value.trim()\n const threeDigit = /^#([0-9a-f]{3})$/i.exec(trimmed)\n if (threeDigit?.[1]) {\n const [red, green, blue] = threeDigit[1].split(\"\")\n return `#${red}${red}${green}${green}${blue}${blue}`.toLowerCase()\n }\n const sixDigit = /^#([0-9a-f]{6})$/i.exec(trimmed)\n if (sixDigit?.[1]) {\n return `#${sixDigit[1].toLowerCase()}`\n }\n return fallback\n}\nfunction inferParagraphStyleHeadingLevel(value?: string) {\n if (!value) return undefined\n const match = value.match(/(?:^|[\\s_-])(?:heading|h)\\s*([1-6])(?:$|[\\s_-])/i)\n const level = match?.[1] ? Number(match[1]) : NaN\n return level >= 1 && level <= 6 ? (level as 1 | 2 | 3 | 4 | 5 | 6) : undefined\n}\nfunction resolveParagraphStyleHeadingLevel(option?: ParagraphStyleDefinition) {\n if (\n Number.isFinite(option?.headingLevel) &&\n option?.headingLevel &&\n option.headingLevel >= 1 &&\n option.headingLevel <= 6\n ) {\n return option.headingLevel as 1 | 2 | 3 | 4 | 5 | 6\n }\n return (\n inferParagraphStyleHeadingLevel(option?.id) ??\n inferParagraphStyleHeadingLevel(option?.name)\n )\n}\nfunction resolveParagraphStyleRunPreview(option?: ParagraphStyleDefinition) {\n if (!option) return undefined\n const headingLevel = resolveParagraphStyleHeadingLevel(option)\n const headingRunStyle = headingLevel\n ? DEFAULT_HEADING_PREVIEW_RUN_STYLES[headingLevel]\n : undefined\n return headingRunStyle\n ? {\n ...headingRunStyle,\n ...(option.runStyle ?? {}),\n }\n : option.runStyle\n}\nfunction resolveHighlightPreview(value?: string) {\n if (!value) return undefined\n const normalized = value.trim().toLowerCase()\n if (!normalized) return undefined\n const hex = normalizeHexColor(normalized, \"\")\n if (hex) return hex\n return HIGHLIGHT_PREVIEW_COLORS[normalized]\n}\nfunction themedPreviewColor(\n color: string | undefined,\n documentTheme: DocxDocumentTheme\n) {\n if (documentTheme !== \"dark\") return color\n if (!color) return \"#f3f4f6\"\n const normalized = color.trim().toLowerCase()\n if (\n normalized === \"#000\" ||\n normalized === \"#000000\" ||\n normalized === \"#111111\" ||\n normalized === \"#111827\" ||\n normalized === \"black\" ||\n normalized === \"rgb(0,0,0)\" ||\n normalized === \"rgb(0, 0, 0)\"\n ) {\n return \"#f3f4f6\"\n }\n return color\n}\nfunction paragraphStylePreviewStyle(\n option: ParagraphStyleDefinition,\n documentTheme: DocxDocumentTheme\n): React.CSSProperties {\n const runStyle = resolveParagraphStyleRunPreview(option)\n const textDecoration = [\n runStyle?.underline ? \"underline\" : \"\",\n runStyle?.strike ? \"line-through\" : \"\",\n ]\n .filter(Boolean)\n .join(\" \")\n return {\n textAlign: option.align ?? \"left\",\n fontFamily: runStyle?.fontFamily,\n fontSize: runStyle?.fontSizePt ? `${runStyle.fontSizePt}pt` : \"11pt\",\n fontWeight:\n runStyle?.bold !== undefined ? (runStyle.bold ? 700 : 400) : undefined,\n fontStyle: runStyle?.italic ? \"italic\" : undefined,\n textDecoration: textDecoration || undefined,\n color:\n runStyle?.color !== undefined\n ? themedPreviewColor(normalizeHexColor(runStyle.color), documentTheme)\n : undefined,\n backgroundColor: resolveHighlightPreview(runStyle?.highlight),\n lineHeight: 1,\n whiteSpace: \"pre-wrap\",\n }\n}\nfunction parseToolbarSectionColumns(sectionPropertiesXml?: string):\n | {\n count: number\n gapPx: number\n }\n | undefined {\n if (!sectionPropertiesXml) return undefined\n const columnsTag = sectionPropertiesXml.match(/]*\\/?>/i)?.[0]\n if (!columnsTag) return undefined\n const countRaw = columnsTag.match(/\\bw:num=\"(\\d+)\"/i)?.[1]\n const count = countRaw ? Number(countRaw) : 1\n if (!Number.isFinite(count) || count <= 1) return undefined\n const gapRaw = columnsTag.match(/\\bw:space=\"(\\d+)\"/i)?.[1]\n const gapTwips = gapRaw ? Number(gapRaw) : 720\n const gapPx = Math.max(0, Math.round((gapTwips * 96) / 1440))\n return {\n count: Math.max(2, Math.round(count)),\n gapPx,\n }\n}\nfunction ToolbarTooltip({\n label,\n children,\n}: {\n label: string\n children: React.ReactNode\n}) {\n return (\n \n {children}}\n >\n {label}\n \n )\n}\nfunction EditorLoadingSurface({\n showSpinner = true,\n}: {\n showSpinner?: boolean\n}) {\n return (\n
\n {showSpinner ? : null}\n
\n )\n}\nfunction ToolbarIconButton({\n active,\n children,\n label,\n ...props\n}: React.ComponentProps & {\n active?: boolean\n label: string\n}) {\n return (\n \n \n {children}\n \n \n )\n}\nfunction ToolbarSeparator() {\n return \n}\nfunction DocxSidebarThumbnail({\n canvasRef,\n displayFileName,\n hasError,\n isActive,\n isLoading,\n pageNumber,\n pixelHeightPx,\n pixelWidthPx,\n previewAspectRatio,\n}: {\n canvasRef: React.RefCallback\n displayFileName: string\n hasError: boolean\n isActive: boolean\n isLoading: boolean\n pageNumber: number\n pixelHeightPx: number\n pixelWidthPx: number\n previewAspectRatio: number\n}) {\n return (\n \n }\n isLoading={isLoading}\n hasError={hasError}\n className={cn(\n \"w-[92px] rounded-md border-0 shadow-xs ring-0 transition-shadow duration-150\",\n isActive && \"shadow-sm\"\n )}\n />\n )\n}\nfunction ParagraphStylePreviewCard({\n documentTheme,\n option,\n}: {\n documentTheme: DocxDocumentTheme\n option: ParagraphStyleDefinition\n}) {\n const surfaceStyle: React.CSSProperties =\n documentTheme === \"dark\"\n ? {\n backgroundColor: \"#111827\",\n borderColor: \"#374151\",\n color: \"#f3f4f6\",\n }\n : {\n backgroundColor: \"#ffffff\",\n borderColor: \"#d4d4d8\",\n color: \"#111827\",\n }\n const secondaryTextColor = documentTheme === \"dark\" ? \"#9ca3af\" : \"#6b7280\"\n return (\n
\n

\n Style Preview\n

\n
\n

\n {option.name}\n

\n \n The quick brown fox jumps over the lazy dog.\n

\n
\n
\n )\n}\nfunction DocxEditorToolbar({\n activePage,\n controlsDisabled,\n editor,\n isReadOnly,\n onImageUploadClick,\n onIsDarkChange,\n onIsReadOnlyChange,\n onOpenLinkEditor,\n onToggleSidebar,\n onUploadClick,\n pageCount,\n setZoomScale,\n showNightRenderToggle,\n zoomScale,\n}: {\n activePage: number\n controlsDisabled: boolean\n editor: DocxEditorController\n isReadOnly: boolean\n onImageUploadClick: () => void\n onIsDarkChange: (checked: boolean) => void\n onIsReadOnlyChange: (checked: boolean) => void\n onOpenLinkEditor: () => void\n onToggleSidebar: () => void\n onUploadClick: () => void\n pageCount: number\n setZoomScale: React.Dispatch>\n showNightRenderToggle: boolean\n zoomScale: number\n}) {\n const { documentTheme, setDocumentTheme } = useDocxDocumentTheme(editor)\n const { layout: pageLayout } = useDocxPageLayout(editor)\n const { paragraphStyles, selectedParagraphStyleId, setParagraphStyle } =\n useDocxParagraphStyles(editor)\n const { lineSpacing, setLineSpacing } = useDocxLineSpacing(editor)\n const { borderContext, activeBorderPresets, applyBorderPreset } =\n useDocxBorders(editor)\n const { showTrackedChanges, setShowTrackedChanges } =\n useDocxTrackChanges(editor)\n const { showComments, setShowComments } = useDocxComments(editor)\n const selectedRunStyle = editor.selectedRunStyle\n const selectedParagraph = editor.selectedParagraph\n const paragraphStyleOptions: ParagraphStyleDefinition[] =\n paragraphStyles.length > 0\n ? paragraphStyles\n : [...FALLBACK_PARAGRAPH_STYLE_OPTIONS]\n const selectedParagraphStyleValue =\n selectedParagraphStyleId ??\n paragraphStyleOptions.find((option) => \"isDefault\" in option)?.id ??\n paragraphStyleOptions[0]?.id ??\n \"Normal\"\n const [paragraphStylePreviewId, setParagraphStylePreviewId] = React.useState<\n string | null\n >(null)\n const selectedLineSpacingValue = React.useMemo(() => {\n const current = Number.isFinite(lineSpacing.multiple)\n ? lineSpacing.multiple\n : 1\n const nearest = LINE_SPACING_OPTIONS.reduce((closest, candidate) => {\n return Math.abs(candidate - current) < Math.abs(closest - current)\n ? candidate\n : closest\n }, LINE_SPACING_OPTIONS[0])\n return String(nearest)\n }, [lineSpacing.multiple])\n const textColorValue = normalizeHexColor(selectedRunStyle?.color)\n const highlightColor =\n HIGHLIGHT_COLORS.find(\n (option) => option.value === selectedRunStyle?.highlight\n )?.color ?? \"#fff59d\"\n const activeNodeIndex =\n editor.selection.kind === \"paragraph\"\n ? editor.selection.nodeIndex\n : editor.selection.tableIndex\n const letterheadColumns =\n editor.selection.kind === \"paragraph\" &&\n paragraphLetterheadFloatSideAtNodeIndex(\n editor.model.nodes,\n editor.selection.nodeIndex\n )\n ? { count: 2, gapPx: 28 }\n : undefined\n const sections = editor.model.metadata.sections ?? []\n const activeSection = sections\n .filter((section) => section.startNodeIndex <= activeNodeIndex)\n .at(-1)\n const activeColumns =\n letterheadColumns ??\n parseToolbarSectionColumns(activeSection?.sectionPropertiesXml) ??\n parseToolbarSectionColumns(editor.model.metadata.sectionPropertiesXml) ??\n pageLayout.columns\n const activeBorderControlOptions = BORDER_CONTROL_OPTIONS.filter(\n (option) => activeBorderPresets[option.id]\n )\n const borderTriggerLabel =\n activeBorderControlOptions.length === 1\n ? activeBorderControlOptions[0].label\n : \"Borders\"\n const borderTriggerIcon = React.createElement(\n borderControlOptionIcon(\n activeBorderControlOptions.length === 1\n ? activeBorderControlOptions[0].id\n : \"all\"\n ),\n { className: \"size-4\" }\n )\n const canEdit = !controlsDisabled && !isReadOnly\n const canZoomIn = zoomScale < ZOOM_OPTIONS[ZOOM_OPTIONS.length - 1]\n const canZoomOut = zoomScale > ZOOM_OPTIONS[0]\n const fontToggleValues = React.useMemo(() => {\n const values: DocxFontToggleValue[] = []\n if (selectedRunStyle?.bold) values.push(\"bold\")\n if (selectedRunStyle?.italic) values.push(\"italic\")\n if (selectedRunStyle?.underline) values.push(\"underline\")\n if (selectedRunStyle?.strike) values.push(\"strike\")\n if (selectedRunStyle?.verticalAlign === \"superscript\") {\n values.push(\"superscript\")\n }\n if (selectedRunStyle?.verticalAlign === \"subscript\") {\n values.push(\"subscript\")\n }\n return values\n }, [selectedRunStyle])\n const preserveTextSelection = React.useCallback(\n (event: React.MouseEvent | React.PointerEvent) =>\n event.preventDefault(),\n []\n )\n const applyFontToggleValues = React.useCallback(\n (nextValues: DocxFontToggleValue[]) => {\n const changedValue =\n nextValues.find((value) => !fontToggleValues.includes(value)) ??\n fontToggleValues.find((value) => !nextValues.includes(value))\n if (changedValue === \"bold\") {\n editor.toggleBold()\n } else if (changedValue === \"italic\") {\n editor.toggleItalic()\n } else if (changedValue === \"underline\") {\n editor.toggleUnderline()\n } else if (changedValue === \"strike\") {\n editor.toggleStrike()\n } else if (changedValue === \"superscript\") {\n editor.toggleSuperscript()\n } else if (changedValue === \"subscript\") {\n editor.toggleSubscript()\n }\n },\n [editor, fontToggleValues]\n )\n return (\n
\n \n
\n \n \n \n
\n Page {pageCount ? activePage : 1} of {pageCount || \"-\"}\n
\n
\n {showNightRenderToggle ? (\n <>\n {\n const nextIsDark = documentTheme !== \"dark\"\n setDocumentTheme(nextIsDark ? \"dark\" : \"light\")\n onIsDarkChange(nextIsDark)\n }}\n >\n {documentTheme === \"dark\" ? (\n \n ) : (\n \n )}\n \n \n \n ) : null}\n setShowTrackedChanges(!showTrackedChanges)}\n >\n \n \n setShowComments(!showComments)}\n >\n \n \n onIsReadOnlyChange(!isReadOnly)}\n >\n \n \n \n \n {editor.isImporting ? (\n \n ) : (\n \n )}\n \n \n \n \n
\n\n
\n
\n \n \n \n \n \n \n
\n\n \n\n setParagraphStylePreviewId(null)}\n onValueChange={(value) => {\n if (value) {\n setParagraphStyle(value)\n }\n }}\n disabled={!canEdit}\n modal={false}\n >\n \n \n \n \n {paragraphStyleOptions.map((option) => (\n {\n setParagraphStylePreviewId((current) =>\n open ? option.id : current === option.id ? null : current\n )\n }}\n openDelay={0}\n closeDelay={120}\n >\n setParagraphStylePreviewId(option.id)}\n onPointerEnter={() => setParagraphStylePreviewId(option.id)}\n >\n \n {option.name}\n \n }\n >\n \n \n \n \n \n ))}\n \n \n\n {\n if (value) {\n editor.setFontFamily(value)\n }\n }}\n disabled={!canEdit}\n modal={false}\n >\n \n \n \n \n {FONT_FAMILIES.map((fontFamily) => (\n \n {fontFamily}\n \n ))}\n \n \n\n {\n const nextSize = Number(value)\n if (Number.isFinite(nextSize)) {\n editor.setFontSize(nextSize)\n }\n }}\n disabled={!canEdit}\n modal={false}\n >\n \n \n \n \n {FONT_SIZE_OPTIONS.map((size) => (\n \n {size} pt\n \n ))}\n \n \n\n {\n const nextSpacing = Number(value)\n if (Number.isFinite(nextSpacing)) {\n setLineSpacing(nextSpacing)\n }\n }}\n disabled={!canEdit}\n modal={false}\n >\n \n \n \n \n {LINE_SPACING_OPTIONS.map((spacing) => (\n \n {spacing}x\n \n ))}\n \n \n\n \n\n \n applyFontToggleValues(value as DocxFontToggleValue[])\n }\n spacing={1}\n >\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n\n
\n \n editor.setTextColor(normalizeHexColor(color))\n }\n />\n \n \n \n \n \n }\n >\n \n {HIGHLIGHT_COLORS.map((option) => (\n editor.setHighlight(option.value)}\n >\n \n {option.label}\n \n ))}\n \n editor.setHighlight(undefined)}\n >\n No highlight\n \n \n \n \n \n \n
\n\n \n\n
\n editor.setAlignment(\"left\")}\n >\n \n \n editor.setAlignment(\"center\")}\n >\n \n \n editor.setAlignment(\"right\")}\n >\n \n \n editor.setAlignment(\"justify\")}\n >\n \n \n
\n\n \n\n
\n editor.toggleList(\"unordered\")}\n >\n \n \n editor.toggleList(\"ordered\")}\n >\n \n \n
\n\n \n\n \n \n {borderTriggerIcon}\n {borderTriggerLabel}\n \n }\n >\n \n {BORDER_CONTROL_OPTIONS.map((option) => {\n const enabledForContext =\n !option.contexts || option.contexts.includes(borderContext)\n const BorderOptionIcon = borderControlOptionIcon(option.id)\n return (\n \n {option.separatorBefore ? : null}\n {\n if (enabledForContext) {\n applyBorderPreset(option.id)\n }\n }}\n >\n \n {option.label}\n \n \n )\n })}\n \n \n\n \n\n
\n \n \n \n \n \n \n \n
\n \n {activeColumns ? `${activeColumns.count} cols` : \"1 col\"}\n
\n \n
\n\n \n\n
\n \n setZoomScale((currentZoomScale) =>\n getNextZoomScale(currentZoomScale, -1)\n )\n }\n >\n \n \n setZoomScale(Number(value))}\n disabled={controlsDisabled}\n modal={false}\n >\n \n {Math.round(zoomScale)}%\n \n \n {ZOOM_OPTIONS.map((value) => (\n \n {value}%\n \n ))}\n \n \n \n setZoomScale((currentZoomScale) =>\n getNextZoomScale(currentZoomScale, 1)\n )\n }\n >\n \n \n
\n
\n \n
\n )\n}\nexport function DocxEditorPreview({\n className,\n defaultZoomScale = DOCX_EDITOR_DEFAULT_ZOOM_SCALE,\n fileName,\n isDark,\n onIsDarkChange,\n src,\n}: {\n className?: string\n defaultZoomScale?: number\n fileName?: string\n isDark: boolean\n onIsDarkChange: (isDark: boolean) => void\n src?: string\n}) {\n return (\n \n )\n}\nfunction DocxEditorContent({\n className,\n defaultZoomScale,\n effectiveIsDark,\n fileName,\n setIsDark,\n shouldRenderNightMode,\n url,\n}: {\n className?: string\n defaultZoomScale?: number\n effectiveIsDark: boolean\n fileName?: string\n setIsDark: (checked: boolean) => void\n shouldRenderNightMode: boolean\n url?: string\n}) {\n const fileInputRef = React.useRef(null)\n const imageInputRef = React.useRef(null)\n const viewportRef = React.useRef(null)\n const [viewportElement, setViewportElement] =\n React.useState(null)\n const [viewerShellRef, viewerShellWidth] = useElementWidth()\n const [uploadedDocxFile, setUploadedDocxFile] =\n React.useState(null)\n const [activePage, setActivePage] = React.useState(1)\n const [sidebarOpen, setSidebarOpen] = React.useState(false)\n const resolvedDefaultZoomScale = normalizeDocxZoomScale(defaultZoomScale)\n const [zoomScale, setZoomScale] = React.useState(\n resolvedDefaultZoomScale\n )\n const [loadError, setLoadError] = React.useState()\n const [isLoadingDocument, setIsLoadingDocument] = React.useState(Boolean(url))\n const [isReadOnly, setIsReadOnly] = React.useState(false)\n const [linkEditorOpen, setLinkEditorOpen] = React.useState(false)\n const [linkDraft, setLinkDraft] = React.useState(\"\")\n const viewerBackgroundColor =\n \"color-mix(in oklab, var(--muted) 40%, transparent)\"\n const displayFileName = React.useMemo(\n () =>\n uploadedDocxFile?.file.name ??\n (url ? formatDocumentName(fileName, url) : (fileName ?? \"document.docx\")),\n [fileName, uploadedDocxFile?.file.name, url]\n )\n const [initialDocumentTheme] = React.useState(() =>\n effectiveIsDark ? \"dark\" : \"light\"\n )\n const editorOptions = React.useMemo(\n () => ({\n initialDocumentTheme,\n initialFileName: displayFileName,\n }),\n [displayFileName, initialDocumentTheme]\n )\n const editor = useDocxEditor(editorOptions)\n const { layout: pageLayout } = useDocxPageLayout(editor)\n const { importDocxFile, setDocumentTheme, status } = editor\n const [reportedPageCount, setReportedPageCount] = React.useState(0)\n const thumbnailEditor = React.useMemo(\n () => ({\n ...editor,\n totalPages: Math.max(editor.totalPages, reportedPageCount),\n }),\n [editor, reportedPageCount]\n )\n const thumbnailOptions = React.useMemo(\n () => ({\n pixelRatio: 2,\n resolution: {\n maxHeight: DOCX_THUMBNAIL_WIDTH * 1.35,\n maxWidth: DOCX_THUMBNAIL_WIDTH,\n },\n }),\n []\n )\n const { thumbnails } = useDocxViewerThumbnails(\n thumbnailEditor,\n thumbnailOptions\n )\n const shouldShowDocumentSpinner = useDelayedLoadingIndicator(\n isLoadingDocument,\n DOCX_LOADING_INDICATOR_DELAY_MS\n )\n const loadingState = (\n \n )\n const renderTrackedChangeCard = React.useMemo(\n () => createDocxTrackedChangeCardRenderer(editor.documentTheme),\n [editor.documentTheme]\n )\n const renderCommentCard = React.useMemo(\n () => createDocxCommentCardRenderer(editor.documentTheme),\n [editor.documentTheme]\n )\n const hasDocument = Boolean(url || uploadedDocxFile)\n const sidebarInline = useInlineThumbnailSidebar(viewerShellWidth)\n const pageCount =\n hasDocument && !isLoadingDocument && !loadError\n ? Math.max(1, reportedPageCount || editor.totalPages)\n : 0\n const controlsDisabled =\n !hasDocument || isLoadingDocument || Boolean(loadError)\n const thumbnailSidebarOpen = Boolean(\n sidebarOpen && (pageCount || isLoadingDocument)\n )\n const handlePageCountChange = React.useCallback((nextPageCount: number) => {\n setReportedPageCount(Math.max(1, Math.round(nextPageCount || 1)))\n }, [])\n const setViewportRef = React.useCallback((element: HTMLDivElement | null) => {\n viewportRef.current = element\n setViewportElement(element)\n }, [])\n const pageVirtualization = React.useMemo(\n () => ({\n enabled: true,\n overscan: 1,\n scrollElement: viewportElement,\n zoomScale: zoomScale / 100,\n }),\n [viewportElement, zoomScale]\n )\n useSuppressDocxPaddingWarning(!isLoadingDocument && !loadError)\n const [previousDefaultZoom, setPreviousDefaultZoom] = React.useState(\n resolvedDefaultZoomScale\n )\n if (previousDefaultZoom !== resolvedDefaultZoomScale) {\n setPreviousDefaultZoom(resolvedDefaultZoomScale)\n setZoomScale(resolvedDefaultZoomScale)\n setActivePage(1)\n }\n React.useEffect(() => {\n viewportRef.current?.scrollTo({ top: 0, left: 0 })\n }, [resolvedDefaultZoomScale, url])\n React.useEffect(() => {\n setDocumentTheme(effectiveIsDark ? \"dark\" : \"light\")\n }, [effectiveIsDark, setDocumentTheme])\n const [previousStatus, setPreviousStatus] = React.useState(status)\n if (previousStatus !== status) {\n setPreviousStatus(status)\n if (\n status.startsWith(\"Failed to load file\") ||\n status === \"Only .docx files are supported\"\n ) {\n setLoadError(status)\n setIsLoadingDocument(false)\n }\n }\n React.useEffect(() => {\n let isCurrent = true\n async function load() {\n if (!uploadedDocxFile && !url) return\n try {\n const docxFile =\n uploadedDocxFile?.file ??\n (url ? await loadDocxFile(url, displayFileName) : null)\n if (!docxFile) return\n await importDocxFile(docxFile)\n if (isCurrent) {\n setIsLoadingDocument(false)\n setActivePage(1)\n viewportRef.current?.scrollTo({ top: 0, left: 0 })\n }\n } catch (error) {\n if (isCurrent) {\n setLoadError(\n error instanceof Error ? error.message : \"Unknown DOCX load error\"\n )\n setIsLoadingDocument(false)\n }\n }\n }\n void load()\n return () => {\n isCurrent = false\n }\n }, [displayFileName, importDocxFile, uploadedDocxFile, url])\n const updateActivePageFromViewport = React.useCallback(() => {\n const viewport = viewportRef.current\n if (!viewport || !pageCount) return\n const viewportRect = viewport.getBoundingClientRect()\n const viewportCenter = viewportRect.top + viewportRect.height / 2\n let closestPage = 1\n let closestDistance = Number.POSITIVE_INFINITY\n viewport\n .querySelectorAll(\n '[data-docx-page-wrapper=\"true\"][data-index]'\n )\n .forEach((page) => {\n const pageIndex = Number(page.dataset.index)\n if (!Number.isFinite(pageIndex)) return\n const pageRect = page.getBoundingClientRect()\n const pageCenter = pageRect.top + pageRect.height / 2\n const distance = Math.abs(pageCenter - viewportCenter)\n if (distance < closestDistance) {\n closestDistance = distance\n closestPage = pageIndex + 1\n }\n })\n setActivePage((currentPage) =>\n currentPage === closestPage ? currentPage : closestPage\n )\n }, [pageCount])\n React.useEffect(() => {\n const viewport = viewportRef.current\n if (!viewport || !pageCount) return\n let frameId = 0\n const handleScroll = () => {\n window.cancelAnimationFrame(frameId)\n frameId = window.requestAnimationFrame(updateActivePageFromViewport)\n }\n frameId = window.requestAnimationFrame(updateActivePageFromViewport)\n viewport.addEventListener(\"scroll\", handleScroll, { passive: true })\n return () => {\n window.cancelAnimationFrame(frameId)\n viewport.removeEventListener(\"scroll\", handleScroll)\n }\n }, [pageCount, updateActivePageFromViewport])\n const scrollToPage = React.useCallback(\n (pageNumber: number) => {\n const viewport = viewportRef.current\n const targetPageIndex = pageNumber - 1\n const page = viewport?.querySelector(\n `[data-docx-page-wrapper=\"true\"][data-index=\"${targetPageIndex}\"]`\n )\n setActivePage(pageNumber)\n if (!viewport) return\n if (!page) {\n const pageStridePx =\n (pageLayout.pageHeightPx + pageLayout.viewportDefaults.pageGapPx) *\n (zoomScale / 100)\n viewport.scrollTo({\n top: Math.max(0, targetPageIndex * pageStridePx - 24),\n behavior: \"auto\",\n })\n return\n }\n viewport.scrollTo({\n top:\n page.getBoundingClientRect().top -\n viewport.getBoundingClientRect().top +\n viewport.scrollTop -\n 24,\n behavior: \"auto\",\n })\n },\n [pageLayout.pageHeightPx, pageLayout.viewportDefaults.pageGapPx, zoomScale]\n )\n async function handleUpload(event: React.ChangeEvent) {\n const file = event.target.files?.[0]\n event.target.value = \"\"\n if (!file) return\n setZoomScale(resolvedDefaultZoomScale)\n setActivePage(1)\n setReportedPageCount(0)\n setIsLoadingDocument(true)\n setLoadError(undefined)\n setUploadedDocxFile({\n file,\n identity: `${file.name}-${file.size}-${file.lastModified}`,\n })\n }\n async function handleImageUpload(event: React.ChangeEvent) {\n const file = event.target.files?.[0]\n event.target.value = \"\"\n if (!file) return\n await editor.insertImageFile(file)\n }\n function openLinkEditor() {\n setLinkDraft(editor.selectedLink ?? \"\")\n setLinkEditorOpen(true)\n }\n function applyLink() {\n editor.setLink(linkDraft.trim() || undefined)\n setLinkEditorOpen(false)\n }\n return (\n \n \n \n imageInputRef.current?.click()}\n onIsDarkChange={setIsDark}\n onIsReadOnlyChange={setIsReadOnly}\n onOpenLinkEditor={openLinkEditor}\n onToggleSidebar={() => setSidebarOpen((open) => !open)}\n onUploadClick={() => fileInputRef.current?.click()}\n pageCount={pageCount}\n setZoomScale={setZoomScale}\n showNightRenderToggle={shouldRenderNightMode}\n zoomScale={zoomScale}\n />\n \n {linkEditorOpen ? (\n
\n setLinkDraft(event.target.value)}\n onKeyDown={(event) => {\n if (event.key === \"Enter\") {\n event.preventDefault()\n applyLink()\n }\n if (event.key === \"Escape\") {\n setLinkEditorOpen(false)\n }\n }}\n placeholder=\"https://example.com\"\n aria-label=\"Link URL\"\n />\n \n {\n editor.setLink(undefined)\n setLinkEditorOpen(false)\n }}\n >\n Clear\n \n
\n ) : null}\n \n \n
\n {isLoadingDocument ? (\n <>\n
\n
\n
\n
\n \n ) : (\n
\n {thumbnails.slice(0, pageCount || 0).map((thumbnail) => (\n event.currentTarget.blur()}\n onClick={() => scrollToPage(thumbnail.pageNumber)}\n >\n \n {thumbnail.pageNumber}\n \n ))}\n
\n )}\n
\n \n \n \n {!url && !uploadedDocxFile ? (\n
\n
\n
Upload a DOCX to edit
\n
\n Pass a DOCX URL with the src prop or upload a\n file.\n
\n fileInputRef.current?.click()}\n >\n \n Upload DOCX\n \n
\n
\n ) : loadError ? (\n
\n
\n
Unable to edit DOCX
\n
{loadError}
\n
\n
\n ) : isLoadingDocument ? (\n loadingState\n ) : (\n
\n \n \n
\n
\n )}\n \n
\n
\n )\n}\ntype InlineRegistryIconProps = Omit<\n React.ComponentProps<\"svg\">,\n \"children\" | \"strokeWidth\"\n> & { strokeWidth?: number }\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}\n", "type": "registry:ui", "target": "@components/extend/docx-editor.tsx" }, { "path": "components/extend/docx-annotation-card.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type {\n DocxCommentCardRenderProps,\n DocxDocumentTheme,\n DocxTrackedChangeCardRenderProps,\n} from \"@extend-ai/react-docx\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card } from \"@/components/ui/card\"\n\ntype AnnotationBadgeVariant =\n | \"outline\"\n | \"secondary\"\n | \"success\"\n | \"error\"\n | \"warning\"\n | \"info\"\nfunction trackedChangeBadgeVariant(\n kind: DocxTrackedChangeCardRenderProps[\"change\"][\"kind\"]\n): AnnotationBadgeVariant {\n switch (kind) {\n case \"insertion\":\n case \"move-to\":\n return \"success\"\n case \"deletion\":\n case \"move-from\":\n return \"error\"\n default:\n return \"warning\"\n }\n}\nfunction trackedChangeBadgeLabel({\n change,\n kindLabel,\n}: Pick) {\n switch (change.kind) {\n case \"insertion\":\n return \"Inserted\"\n case \"deletion\":\n return \"Removed\"\n case \"move-from\":\n return \"Moved from\"\n case \"move-to\":\n return \"Moved to\"\n default:\n return kindLabel\n }\n}\nfunction DocxAnnotationCard({\n anchorText,\n badge,\n badgeVariant = \"outline\",\n date,\n meta,\n documentTheme,\n snippet,\n style,\n}: {\n anchorText?: string\n badge: string\n badgeVariant?: AnnotationBadgeVariant\n date?: string\n documentTheme: DocxDocumentTheme\n meta: string\n snippet: string\n style: React.CSSProperties\n}) {\n const isDarkDocument = documentTheme === \"dark\"\n const cardStyle: React.CSSProperties = {\n ...style,\n backgroundColor: isDarkDocument\n ? \"rgb(24 24 27 / 0.95)\"\n : \"rgb(255 255 255 / 0.95)\",\n color: isDarkDocument ? \"#f4f4f5\" : \"#18181b\",\n }\n const mutedTextColor = isDarkDocument ? \"#a1a1aa\" : \"#71717a\"\n const anchorStyle: React.CSSProperties = {\n backgroundColor: isDarkDocument\n ? \"rgb(63 63 70 / 0.55)\"\n : \"rgb(244 244 245 / 0.75)\",\n color: mutedTextColor,\n }\n return (\n \n
\n \n
{meta}
\n {date ?
{date}
: null}\n
\n \n {badge}\n \n \n {anchorText ? (\n \n {anchorText}\n \n ) : null}\n
{snippet}
\n \n )\n}\nexport function createDocxTrackedChangeCardRenderer(\n documentTheme: DocxDocumentTheme\n) {\n return function renderDocxTrackedChangeCard({\n change,\n formattedDate,\n kindLabel,\n snippet,\n style,\n }: DocxTrackedChangeCardRenderProps) {\n return (\n \n )\n }\n}\nexport function createDocxCommentCardRenderer(\n documentTheme: DocxDocumentTheme\n) {\n return function renderDocxCommentCard({\n comment,\n formattedDate,\n snippet,\n style,\n }: DocxCommentCardRenderProps) {\n const badge = comment.resolved\n ? \"Resolved\"\n : comment.parentId !== undefined\n ? \"Reply\"\n : \"Comment\"\n return (\n \n )\n }\n}\n", "type": "registry:ui", "target": "@components/extend/docx-annotation-card.tsx" } ], "categories": [ "documents" ], "type": "registry:ui" }