@eigenpal/docx-editor-react/ui
UI entry point — Toolbar, pickers, dialogs, and UI components.
Functions(111)
Add a column to a table at the specified index
declare function addColumn(table: Table, atIndex: number, position?: 'before' | 'after'): Table;Add a row to a table at the specified index
declare function addRow(table: Table, atIndex: number, position?: 'before' | 'after'): Table;calculateFitDimensions
Calculate scaled dimensions to fit within bounds
declare function calculateFitDimensions(originalWidth: number, originalHeight: number, maxWidth: number, maxHeight: number): {
width: number;
height: number;
};clampTableConfig
Clamp TableConfig to valid range
declare function clampTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): TableConfig;ColorPicker
declare function ColorPicker(input: ColorPickerProps): react_jsx_runtime.JSX.Element;createChangeTracker
Create a document change tracker Simple utility for external change tracking
declare function createChangeTracker(): {
markChanged: () => void;
markSaved: () => void;
getState: () => {
changeCount: number;
lastSaveTime: Date | null;
hasUnsavedChanges: boolean;
};
reset: () => void;
};createDefaultTableConfig
Create a default TableConfig
declare function createDefaultTableConfig(rows?: number, columns?: number): TableConfig;createErrorResponse
Create an error response
declare function createErrorResponse(error: string): AgentResponse;createMockResponse
Create a mock response for testing
declare function createMockResponse(newText: string, warnings?: string[]): AgentResponse;createTableContext
Create a table context from a table and selection
declare function createTableContext(table: Table, selection: TableSelection): TableContext;createToolbarItem
Create a toolbar item
declare function createToolbarItem(id: string, content: ReactNode, options?: Partial<Omit<ToolbarItem, 'id' | 'content'>>): ToolbarItem;createToolbarItems
Create toolbar items from an array of configs
declare function createToolbarItems(configs: Array<{
id: string;
content: ReactNode;
priority?: ToolbarItemPriority;
minWidth?: number;
alwaysVisible?: boolean;
separatorAfter?: boolean;
group?: string;
}>): ToolbarItem[];Convert data URL to Blob
declare function dataUrlToBlob(dataUrl: string): Blob;Create a delay promise for testing loading states
declare function delay(ms: number): Promise<void>;Delete a column from a table
declare function deleteColumn(table: Table, columnIndex: number): Table;Delete a row from a table
declare function deleteRow(table: Table, rowIndex: number): Table;FindReplaceDialog
FindReplaceDialog component - Modal for finding and replacing text
declare function FindReplaceDialog(input: FindReplaceDialogProps): React__default.ReactElement | null;declare function FontPicker(input: FontPickerProps): react_jsx_runtime.JSX.Element;FontSizePicker
declare function FontSizePicker(input: FontSizePickerProps): react_jsx_runtime.JSX.Element;formatFileSize
Format file size for display
declare function formatFileSize(bytes: number): string;formatPrintPageRange
Format page range for display
declare function formatPageRange(range: {
start: number;
end: number;
} | null, totalPages: number): string;formatShortcutKeys
Format key combination for current platform
declare function formatKeys(keys: string): string;formatTableDimensions
Format table dimensions for display
declare function formatTableDimensions(config: TableConfig): string;getActionShortcut
Get action shortcuts
declare function getActionShortcut(action: AIAction): string | undefined;getAllActions
Get all available actions
declare function getAllActions(): AIAction[];Get all categories
declare function getAllCategories(): ShortcutCategory[];getAllIndicatorPositions
Get all indicator positions
declare function getAllPositions(): IndicatorPosition[];getAllIndicatorVariants
Get all indicator variants
declare function getAllVariants(): IndicatorVariant[];getAllLoadingSizes
Get all loading sizes
declare function getAllLoadingSizes(): LoadingSize[];getAllLoadingVariants
Get all loading variants
declare function getAllLoadingVariants(): LoadingVariant[];getAllPasteOptions
Get all paste option definitions
declare function getAllPasteOptions(): PasteOptionDef[];Get category label translation key
declare function getCategoryLabel(category: ShortcutCategory): string;Get cell at specific row and column index
declare function getCellAt(table: Table, rowIndex: number, columnIndex: number): TableCell | null;getColumnCount
Get column count from a table
declare function getColumnCount(table: Table): number;getCommonShortcuts
Get common/frequently used shortcuts
declare function getCommonShortcuts(): KeyboardShortcut[];getDefaultActions
Get default actions for selection
declare function getDefaultActions(): AIAction[];getDefaultPasteOption
Get default paste option
declare function getDefaultPasteOption(): PasteOption;getDefaultPrintOptions
Get default print options
declare function getDefaultPrintOptions(): PrintOptions;getDefaultShortcuts
Get all default shortcuts
declare function getDefaultShortcuts(): KeyboardShortcut[];getImageAcceptString
Get accept string for file input
declare function getImageAcceptString(): string;getImageDimensions
Get image dimensions from a data URL
declare function getImageDimensions(src: string): Promise<{
width: number;
height: number;
}>;getLoadingVariantLabel
Get loading variant label
declare function getLoadingVariantLabel(variant: LoadingVariant): string;getMarginInUnits
declare function getMarginInUnits(marginTwips: number, unit: 'inch' | 'cm'): string;getPasteOption
Get paste option definition by id
declare function getPasteOption(id: PasteOption): PasteOptionDef | undefined;getRecommendedPriority
Get recommended priority for common toolbar items
declare function getRecommendedPriority(itemType: string): ToolbarItemPriority;getRulerDimensions
declare function getRulerDimensions(sectionProps?: SectionProperties | null, zoom?: number): {
width: number;
leftMargin: number;
rightMargin: number;
contentWidth: number;
};getShortcutsByCategory
Get shortcuts by category
declare function getShortcutsByCategory(category: ShortcutCategory): KeyboardShortcut[];getSupportedImageExtensions
Get supported image extensions
declare function getSupportedImageExtensions(): string[];getSymbolCategories
Get all symbol categories
declare function getSymbolCategories(): SymbolCategory[];getSymbolsByCategory
Get symbols by category name
declare function getSymbolsByCategory(categoryName: string): string[];getSymbolUnicodeInfo
Get symbol Unicode info
declare function getSymbolInfo(symbol: string): {
character: string;
codePoint: string;
decimal: number;
hex: string;
};getTablePresets
Get common table presets
declare function getTablePresets(): {
label: string;
config: TableConfig;
}[];getTableSplitCellDialogConfig
declare function getTableSplitCellDialogConfig(table: Table, rowIndex: number, columnIndex: number): TableSplitConfig | null;getTextActionLabel
Get action label
declare function getTextActionLabel(action: TextContextAction): string;getTextActionShortcut
Get action shortcut
declare function getTextActionShortcut(action: TextContextAction): string;getVariantLabel
Get indicator variant label
declare function getVariantLabel(variant: IndicatorVariant): string;HorizontalRuler
declare function HorizontalRuler(input: HorizontalRulerProps): React__default.ReactElement;HyperlinkDialog
HyperlinkDialog component - Modal for inserting/editing hyperlinks
declare function HyperlinkDialog(input: HyperlinkDialogProps): React__default.ReactElement | null;InsertImageDialog
InsertImageDialog - Modal for inserting images with preview and sizing
declare function InsertImageDialog(input: InsertImageDialogProps): React__default.ReactElement | null;InsertSymbolDialog
InsertSymbolDialog - Modal for inserting special characters
declare function InsertSymbolDialog(input: InsertSymbolDialogProps): React__default.ReactElement | null;InsertTableDialog
InsertTableDialog - Modal for inserting tables with visual grid selector
declare function InsertTableDialog(input: InsertTableDialogProps): React__default.ReactElement | null;isPasteSpecialShortcut
Check if paste special shortcut
declare function isPasteSpecialShortcut(event: KeyboardEvent): boolean;isPrintSupported
Check if browser supports good print functionality
declare function isPrintSupported(): boolean;isValidImageFile
Check if a file is a valid image
declare function isValidImageFile(file: File): boolean;isValidTableConfig
Validate TableConfig
declare function isValidTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): boolean;LineSpacingPicker
declare function LineSpacingPicker(input: LineSpacingPickerProps): react_jsx_runtime.JSX.Element;Merge cells in a selection
declare function mergeCells(table: Table, selection: TableSelection): Table;openPrintWindow
Create print-optimized document view in a new window
declare function openPrintWindow(title: string | undefined, content: string): Window | null;parseMarginFromUnits
declare function parseMarginFromUnits(value: string, unit: 'inch' | 'cm'): number | null;parsePageRange
Create page range from string (e.g., "1-5", "3", "1,3,5")
declare function parsePageRange(input: string, maxPages: number): {
start: number;
end: number;
} | null;positionToMargin
declare function positionToMargin(positionPx: number, side: 'left' | 'right', pageWidthPx: number, zoom: number): number;PrintStyles - Injects print-specific CSS
declare function PrintStyles(): React__default.ReactElement;Search symbols by query
declare function searchSymbols(query: string): string[];Backward-compatible helper for callers that still use the older merged-cell split behavior directly.
User-facing Split cell is now dialog-driven. For document-model tables, use `getTableSplitCellDialogConfig()` and `splitTableCell()` instead.
declare function splitCell(table: Table, rowIndex: number, columnIndex: number): Table;splitTableCell
declare function splitTableCell(table: Table, rowIndex: number, columnIndex: number, rows: number, cols: number): Table;StylePicker
declare function StylePicker(input: StylePickerProps): react_jsx_runtime.JSX.Element;symbolFromCodePoint
Get symbol from Unicode code point string
declare function symbolFromCodePoint(codePointStr: string): string | null;TableBorderColorPicker
declare function TableBorderColorPicker(input: TableBorderColorPickerProps): react_jsx_runtime.JSX.Element;TableBorderPicker
declare function TableBorderPicker(input: TableBorderPickerProps): react_jsx_runtime.JSX.Element;TableBorderWidthPicker
declare function TableBorderWidthPicker(input: TableBorderWidthPickerProps): react_jsx_runtime.JSX.Element;TableCellFillPicker
declare function TableCellFillPicker(input: TableCellFillPickerProps): react_jsx_runtime.JSX.Element;TableMoreDropdown
declare function TableMoreDropdown(input: TableMoreDropdownProps): react_jsx_runtime.JSX.Element;TableToolbar
TableToolbar - Shows table manipulation controls when cursor is in a table
declare function TableToolbar(input: TableToolbarProps): React__default.ReactElement | null;Icon-based formatting toolbar — undo/redo, zoom, styles, fonts, bold/italic/underline, colors, alignment, lists, table/image context, clear formatting.
declare function Toolbar(explicitProps: ToolbarProps): react_jsx_runtime.JSX.Element;ToolbarGroup
Toolbar button group with modern styling
declare function ToolbarGroup$1(input: ToolbarGroupProps$1): react_jsx_runtime.JSX.Element;ToolbarSeparator
Toolbar separator
declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;triggerPrint
Trigger browser print dialog for the current document
declare function triggerPrint(): void;useFindReplace
Hook for managing find/replace dialog state
declare function useFindReplace(hookOptions?: FindReplaceOptions): UseFindReplaceReturn;useHyperlinkDialog
Hook for managing Hyperlink dialog state
declare function useHyperlinkDialog(): UseHyperlinkDialogReturn;useInsertImageDialog
Hook for managing Insert Image dialog state
declare function useInsertImageDialog(): {
isOpen: boolean;
open: () => void;
close: () => void;
toggle: () => void;
};useInsertSymbolDialog
Hook for managing Insert Symbol dialog state with recent symbols
declare function useInsertSymbolDialog(maxRecent?: number): {
isOpen: boolean;
recentSymbols: string[];
open: () => void;
close: () => void;
toggle: () => void;
addRecent: (symbol: string) => void;
};useInsertTableDialog
Hook for managing Insert Table dialog state
declare function useInsertTableDialog(): {
isOpen: boolean;
open: () => void;
close: () => void;
toggle: () => void;
};useKeyboardShortcutsDialog
Hook to manage keyboard shortcuts dialog
declare function useKeyboardShortcutsDialog(options?: UseKeyboardShortcutsDialogOptions): UseKeyboardShortcutsDialogReturn;Hook to manage loading states
declare function useLoading(options?: UseLoadingOptions): UseLoadingReturn;useLoadingOperations
Hook to manage multiple concurrent loading operations
declare function useLoadingOperations(): {
operations: LoadingOperation[];
isAnyLoading: boolean;
startOperation: (id: string, message?: string) => void;
updateOperation: (id: string, updates: Partial<LoadingOperation>) => void;
endOperation: (id: string) => void;
getOperation: (id: string) => LoadingOperation | undefined;
};usePasteSpecial
Hook to manage paste special dialog
declare function usePasteSpecial(options?: UsePasteSpecialOptions): UsePasteSpecialReturn;useResponsePreview
Hook to manage response preview state
declare function useResponsePreview(): {
state: ResponsePreviewState;
showPreview: (originalText: string, action: AIAction, position?: {
x: number;
y: number;
}) => void;
setResponse: (response: AgentResponse) => void;
setError: (error: string) => void;
hidePreview: () => void;
};useResponsiveToolbar
Hook to calculate which items fit in the toolbar
declare function useResponsiveToolbar(options: UseResponsiveToolbarOptions): UseResponsiveToolbarReturn;useUnsavedChanges
Hook to track unsaved changes in a document
declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): UseUnsavedChangesReturn;ZoomControl
declare function ZoomControl(input: ZoomControlProps): react_jsx_runtime.JSX.Element;Interfaces(68)
ColorPickerProps
interface ColorPickerProps| Member | Type | Summary |
|---|---|---|
| autoLabel? | string | Override the auto/no-color button label |
| className? | string | |
| defaultColor? | ColorValue | string | Initial "last picked" color used by the apply half before the user picks anything. Defaults: text → red, highlight → yellow, border → black. |
| disabled? | boolean | |
| icon? | string | Override the default icon for the mode |
| mode | ColorPickerMode | |
| onChange? | (color: ColorValue | string) => void | |
| splitButton? | boolean | Word-style split button. When true (default), renders two halves: - left (apply): re-applies the last picked color directly - right (arrow): opens the color picker When false, the legacy single button is rendered (one click toggles dropdown). |
| style? | CSSProperties | |
| theme? | Theme | null | |
| title? | string | |
| value? | ColorValue | string |
DialogKeyboardShortcut
Keyboard shortcut definition
interface KeyboardShortcut| Member | Type | Summary |
|---|---|---|
| altKeys? | string | Alternative key combination |
| category | ShortcutCategory | Category for grouping |
| common? | boolean | Whether this is a common/frequently used shortcut |
| description | string | Description of what the shortcut does |
| descriptionKey? | TranslationKey | Translation key for description (used internally) |
| id | string | Unique identifier |
| keys | string | Primary key combination (e.g., 'Ctrl+C') |
| name | string | Display name |
| nameKey? | TranslationKey | Translation key for display name (used internally) |
DocumentNameProps
interface DocumentNameProps| Member | Type | Summary |
|---|---|---|
| editable? | boolean | |
| onChange? | (value: string) => void | |
| placeholder? | string | |
| value | string |
EditorToolbarProps
Props for the EditorToolbar compound component. Extends ToolbarProps with title bar-specific fields.
interface EditorToolbarProps extends ToolbarPropsFindReplaceDialogProps
Props for the FindReplaceDialog component
interface FindReplaceDialogProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional CSS class |
| currentResult? | FindResult | null | Current match result (from external state) |
| initialSearchText? | string | Initial search text (e.g., from selected text) |
| isOpen | boolean | Whether the dialog is open |
| onClearHighlights? | () => void | Callback to clear highlights |
| onClose | () => void | Callback when dialog is closed |
| onFind | (searchText: string, options: FindOptions) => FindResult | null | Callback when searching for text |
| onFindNext | () => FindMatch | null | Callback when navigating to next match |
| onFindPrevious | () => FindMatch | null | Callback when navigating to previous match |
| onHighlightMatches? | (matches: FindMatch[]) => void | Callback to highlight matches in document |
| onReplace | (replaceText: string) => boolean | Callback when replacing current match |
| onReplaceAll | (searchText: string, replaceText: string, options: FindOptions) => number | Callback when replacing all matches |
| replaceMode? | boolean | Whether to start in replace mode |
| style? | CSSProperties | Additional inline styles |
FindReplaceOptions
Options for the useFindReplace hook
interface FindReplaceOptions| Member | Type | Summary |
|---|---|---|
| initialReplaceMode? | boolean | Whether to show replace functionality initially |
| onCurrentMatchChange? | (match: FindMatch | null, index: number) => void | Callback when current match changes |
| onMatchesChange? | (matches: FindMatch[]) => void | Callback when matches change |
FindReplaceState
State for the find/replace hook
interface FindReplaceState| Member | Type | Summary |
|---|---|---|
| currentIndex | number | Current match index |
| isOpen | boolean | Whether the dialog is open |
| matches | FindMatch[] | All matches found |
| options | FindOptions | Find options |
| replaceMode | boolean | Whether in replace mode |
| replaceText | string | Current replace text |
| searchText | string | Current search text |
FontPickerProps
interface FontPickerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| disabled? | boolean | |
| fonts? | FontOption[] | |
| onChange? | (fontFamily: string) => void | |
| placeholder? | string | |
| showPreview? | boolean | |
| value? | string | |
| width? | number | string |
FontSizePickerProps
Font Size Picker Component (Google Docs Style)
A font size control with minus/plus buttons and editable input. Features: - Minus button to decrease font size - Plus button to increase font size - Editable input for custom sizes - Click input to show dropdown with preset sizes
interface FontSizePickerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| disabled? | boolean | |
| maxSize? | number | |
| minSize? | number | |
| onChange? | (size: number) => void | |
| placeholder? | string | |
| sizes? | number[] | |
| value? | number | |
| width? | number | string |
HorizontalRulerProps
HorizontalRuler Component — Google Docs style
3 handles only: - Left side: first-line indent (▼ down at top) + left indent (▲ up at bottom) - Right side: right indent (▼ down at top)
Margins shown as gray zones on the ruler edges. Drag the boundary between gray/white to adjust page margins. Drag tooltip shows value during any drag.
interface HorizontalRulerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| editable? | boolean | |
| firstLineIndent? | number | |
| hangingIndent? | boolean | |
| indentLeft? | number | |
| indentRight? | number | |
| onFirstLineIndentChange? | (indentTwips: number) => void | |
| onIndentLeftChange? | (indentTwips: number) => void | |
| onIndentRightChange? | (indentTwips: number) => void | |
| onLeftMarginChange? | (marginTwips: number) => void | |
| onRightMarginChange? | (marginTwips: number) => void | |
| onTabStopRemove? | (positionTwips: number) => void | |
| sectionProps? | SectionProperties | null | |
| showFirstLineIndent? | boolean | |
| style? | CSSProperties | |
| tabStops? | TabStop[] | null | |
| unit? | 'inch' | 'cm' | |
| zoom? | number |
HyperlinkData
Hyperlink data structure for dialog
interface HyperlinkData| Member | Type | Summary |
|---|---|---|
| bookmark? | string | Internal bookmark name |
| displayText? | string | Display text for the link |
| tooltip? | string | Tooltip text |
| url? | string | URL for external link |
HyperlinkDialogProps
Props for the HyperlinkDialog component
interface HyperlinkDialogProps| Member | Type | Summary |
|---|---|---|
| bookmarks? | BookmarkOption[] | Available bookmarks for internal links |
| className? | string | Additional CSS class |
| initialData? | HyperlinkData | Initial data for editing existing hyperlink |
| isEditing? | boolean | Whether we're editing an existing hyperlink |
| isOpen | boolean | Whether the dialog is open |
| onClose | () => void | Callback when dialog is closed |
| onRemove? | () => void | Callback when hyperlink is removed |
| onSubmit | (data: HyperlinkData) => void | Callback when hyperlink is inserted/updated |
| selectedText? | string | Currently selected text (used as default display text) |
| style? | CSSProperties | Additional inline styles |
ImageData_2
Image data for insertion
interface ImageData| Member | Type | Summary |
|---|---|---|
| alt? | string | Alt text for accessibility |
| fileName? | string | Original file name |
| height | number | Image height in pixels |
| mimeType? | string | MIME type |
| src | string | Base64 data URL or external URL |
| width | number | Image width in pixels |
InsertImageDialogProps
Props for InsertImageDialog
interface InsertImageDialogProps| Member | Type | Summary |
|---|---|---|
| accept? | string | Accepted file types (default: image/*) |
| className? | string | Additional CSS class |
| isOpen | boolean | Whether the dialog is open |
| maxHeight? | number | Maximum height in pixels (default: 600) |
| maxWidth? | number | Maximum width in pixels (default: 800) |
| onClose | () => void | Callback when dialog is closed |
| onInsert | (data: ImageData) => void | Callback when image is inserted |
| style? | CSSProperties | Additional inline styles |
InsertSymbolDialogProps
Props for InsertSymbolDialog
interface InsertSymbolDialogProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional CSS class |
| isOpen | boolean | Whether the dialog is open |
| onClose | () => void | Callback when dialog is closed |
| onInsert | (symbol: string) => void | Callback when symbol is inserted |
| recentSymbols? | string[] | Recently used symbols |
| style? | CSSProperties | Additional inline styles |
InsertTableDialogProps
Props for InsertTableDialog
interface InsertTableDialogProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional CSS class |
| isOpen | boolean | Whether the dialog is open |
| maxColumns? | number | Maximum allowed columns (default: 20) |
| maxGridColumns? | number | Maximum columns in grid selector (default: 10) |
| maxGridRows? | number | Maximum rows in grid selector (default: 8) |
| maxRows? | number | Maximum allowed rows (default: 100) |
| onClose | () => void | Callback when dialog is closed |
| onInsert | (config: TableConfig) => void | Callback when table is inserted |
| style? | CSSProperties | Additional inline styles |
KeyboardShortcutsDialogProps
Dialog props
interface KeyboardShortcutsDialogProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional className |
| customShortcuts? | KeyboardShortcut[] | Custom shortcuts (merged with defaults) |
| isOpen | boolean | Whether the dialog is open |
| onClose | () => void | Close callback |
| showSearch? | boolean | Whether to show search |
LineSpacingOption
interface LineSpacingOption| Member | Type | Summary |
|---|---|---|
| label | string | |
| labelKey? | TranslationKey | |
| twipsValue | number | |
| value | number |
LineSpacingPickerProps
interface LineSpacingPickerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| disabled? | boolean | |
| onChange? | (twipsValue: number) => void | |
| options? | LineSpacingOption[] | |
| value? | number | |
| width? | number | string |
LoadingIndicatorProps
Loading indicator props
interface LoadingIndicatorProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional className |
| color? | string | Custom color |
| isLoading | boolean | Whether loading is active |
| message? | string | Loading message to display |
| overlay? | boolean | Whether to show as full-screen overlay |
| overlayOpacity? | number | Overlay background opacity (0-1) |
| progress? | number | Progress percentage (0-100) for progress variant |
| showProgressText? | boolean | Show progress percentage text |
| size? | LoadingSize | Size of the indicator |
| style? | React__default.CSSProperties | Additional inline styles |
| variant? | LoadingVariant | Variant of the loading indicator |
LoadingOperation
Loading operation state
interface LoadingOperation| Member | Type | Summary |
|---|---|---|
| id | string | |
| message? | string | |
| progress? | number | |
| startTime | number |
LogoProps
interface LogoProps| Member | Type | Summary |
|---|---|---|
| children | ReactNode |
PasteSpecialDialogProps
Paste special dialog props
interface PasteSpecialDialogProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional className |
| isOpen | boolean | Whether the dialog is open |
| onClose | () => void | Callback when dialog is closed |
| onPaste | (content: ParsedClipboardContent, asPlainText: boolean) => void | Callback when paste is confirmed |
| position? | {
x: number;
y: number;
} | Optional custom position |
PrintOptions
Print options
interface PrintOptions| Member | Type | Summary |
|---|---|---|
| includeFooters? | boolean | Whether to include footers |
| includeHeaders? | boolean | Whether to include headers |
| includePageNumbers? | boolean | Whether to include page numbers |
| margins? | 'default' | 'none' | 'minimum' | Margins mode |
| pageRange? | {
start: number;
end: number;
} | null | Page range to print (null = all) |
| printBackground? | boolean | Whether to show background colors |
| scale? | number | Scale factor for printing (1.0 = 100%) |
ResponsePreviewProps
Response preview props
interface ResponsePreviewProps| Member | Type | Summary |
|---|---|---|
| action | AIAction | Action that was performed |
| allowEdit? | boolean | Allow editing before accepting |
| className? | string | Additional className |
| error? | string | Error message if request failed |
| isLoading | boolean | Whether the response is loading |
| onAccept | (newText: string) => void | Callback when user accepts the change |
| onReject | () => void | Callback when user rejects the change |
| onRetry? | () => void | Callback when user wants to retry |
| originalText | string | Original selected text |
| position? | {
x: number;
y: number;
} | Position for the preview |
| response | AgentResponse | null | AI response (or null if loading/error) |
| showDiff? | boolean | Show diff view |
ResponsePreviewState
State for response preview
interface ResponsePreviewState| Member | Type | Summary |
|---|---|---|
| action | AIAction | |
| error? | string | |
| isLoading | boolean | |
| isVisible | boolean | |
| originalText | string | |
| position? | {
x: number;
y: number;
} | |
| response | AgentResponse | null |
ResponsiveToolbarGroupProps
interface ToolbarGroupProps| Member | Type | Summary |
|---|---|---|
| children | ReactNode | Group items |
| className? | string | Additional className |
| gap? | number | Gap between items |
| separatorAfter? | boolean | Whether to show separator after group |
| style? | CSSProperties | Additional styles |
ResponsiveToolbarProps
Props for ResponsiveToolbar component
interface ResponsiveToolbarProps| Member | Type | Summary |
|---|---|---|
| alwaysShowOverflow? | boolean | Whether to show overflow button even when all items fit |
| backgroundColor? | string | Background color |
| borderBottom? | string | Border styles |
| className? | string | Additional className |
| height? | number | string | Height of the toolbar |
| itemGap? | number | Gap between items in pixels |
| items | ToolbarItem[] | Toolbar items |
| overflowButtonWidth? | number | Minimum width for overflow button |
| overflowItems? | ToolbarItem[] | Additional items for overflow menu only |
| padding? | number | string | Padding for the toolbar |
| renderOverflowButton? | (itemCount: number, isOpen: boolean, onClick: () => void) => ReactNode | Custom overflow button renderer |
| renderOverflowMenu? | (items: ToolbarItem[], onClose: () => void) => ReactNode | Custom overflow menu renderer |
| style? | CSSProperties | Additional styles |
StyleOption
interface StyleOption| Member | Type | Summary |
|---|---|---|
| bold? | boolean | Bold styling |
| color? | string | Text color (RGB hex) |
| fontSize? | number | Font size in half-points for visual preview |
| isDefault? | boolean | |
| italic? | boolean | Italic styling |
| name | string | |
| nameKey? | TranslationKey | |
| priority? | number | |
| qFormat? | boolean | |
| styleId | string | |
| type | StyleType |
StylePickerProps
interface StylePickerProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| disabled? | boolean | |
| onChange? | (styleId: string) => void | |
| styles? | Style[] | |
| theme? | Theme | null | |
| value? | string | |
| width? | number | string |
SymbolCategory
Symbol category
interface SymbolCategory| Member | Type | Summary |
|---|---|---|
| label | string | Display label |
| name | string | Category name |
| symbols | string[] | Symbols in this category |
TableBorderColorPickerProps
interface TableBorderColorPickerProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| onAction | (action: TableAction) => void | |
| theme? | Theme | null | |
| value? | string | Current border color (RGB hex without #) |
TableBorderPickerProps
interface TableBorderPickerProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| onAction | (action: TableAction) => void |
TableBorderWidthPickerProps
interface TableBorderWidthPickerProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| onAction | (action: TableAction) => void |
TableCellFillPickerProps
interface TableCellFillPickerProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| onAction | (action: TableAction) => void | |
| theme? | Theme | null | |
| value? | string | Current fill color (RGB hex without #) |
TableConfig
Table configuration for insertion
interface TableConfig| Member | Type | Summary |
|---|---|---|
| columns | number | Number of columns |
| rows | number | Number of rows |
TableContext
Context for table operations
interface TableContext| Member | Type | Summary |
|---|---|---|
| canSplitCell | boolean | Whether current cell can be split |
| columnCount | number | Total number of columns |
| hasMultiCellSelection | boolean | Whether multiple cells are selected (for merge) |
| rowCount | number | Total number of rows |
| selection | TableSelection | Current selection within the table |
| table | Table | The table being edited |
TableMoreDropdownProps
interface TableMoreDropdownProps| Member | Type | Summary |
|---|---|---|
| disabled? | boolean | |
| onAction | (action: TableAction) => void | |
| tableContext? | {
isInTable: boolean;
rowCount?: number;
columnCount?: number;
canSplitCell?: boolean;
hasMultiCellSelection?: boolean;
table?: {
attrs?: {
justification?: string;
};
};
} | null |
TableSelection
Selection within a table
interface TableSelection| Member | Type | Summary |
|---|---|---|
| columnIndex | number | Column index (0-indexed) |
| rowIndex | number | Row index (0-indexed) |
| selectedCells? | {
startRow: number;
startCol: number;
endRow: number;
endCol: number;
} | Selected cell range for multi-cell selection |
| tableIndex | number | Index of the table in the document |
TableSplitConfig
interface TableSplitConfig| Member | Type | Summary |
|---|---|---|
| initialCols | number | |
| initialRows | number | |
| minCols | number | |
| minRows | number |
TableToolbarProps
Props for TableToolbar component
interface TableToolbarProps| Member | Type | Summary |
|---|---|---|
| children? | ReactNode | Custom render for additional buttons |
| className? | string | Additional CSS class name |
| compact? | boolean | Compact mode |
| context | TableContext | null | Current table context (null if cursor not in table) |
| disabled? | boolean | Whether the toolbar is disabled |
| onAction? | (action: TableAction, context: TableContext) => void | Callback when a table action is triggered |
| position? | 'top' | 'floating' | Position of the toolbar |
| showLabels? | boolean | Show labels next to icons |
| style? | CSSProperties | Additional inline styles |
TitleBarProps
interface TitleBarProps| Member | Type | Summary |
|---|---|---|
| children | ReactNode |
TitleBarRightProps
interface TitleBarRightProps| Member | Type | Summary |
|---|---|---|
| children | ReactNode |
ToolbarItem
Toolbar item configuration
interface ToolbarItem| Member | Type | Summary |
|---|---|---|
| alwaysVisible? | boolean | Whether this item should never be hidden |
| content | ReactNode | The content to render |
| group? | string | Group name for keeping items together |
| id | string | Unique identifier |
| minWidth? | number | Minimum width in pixels (for measuring) |
| priority? | ToolbarItemPriority | Priority level (1 = highest, 5 = lowest) |
| separatorAfter? | boolean | Whether to show separator after this item |
ToolbarProps
Props for the Toolbar (formatting rail) component
interface ToolbarProps| Member | Type | Summary |
|---|---|---|
| canRedo? | boolean | Whether redo is available |
| canUndo? | boolean | Whether undo is available |
| children? | ReactNode | Custom toolbar items to render at the end |
| className? | string | Additional CSS class name |
| currentFormatting? | SelectionFormatting | Current formatting of the selection |
| disabled? | boolean | Whether the toolbar is disabled |
| documentStyles? | Style[] | Document styles for the style picker |
| editorRef? | React__default.RefObject<HTMLElement> | Ref to the editor container for keyboard events |
| enableShortcuts? | boolean | Whether to enable keyboard shortcuts (default: true) |
| fontFamilies? | ReadonlyArray<string | FontOption> | Custom list of fonts in the toolbar dropdown. When omitted, the built-in 12-font default is used. Strings render in the "Other" group; pass `FontOption[]` for category grouping and CSS fallback chains. An empty array renders an empty (but enabled) dropdown. |
| imageContext? | {
wrapType: string;
displayMode: string;
cssFloat: string | null;
} | null | Image context when an image is selected |
| inline? | boolean | When true, renders with display:contents so children flow in the parent flex container |
| onFormat? | (action: FormattingAction) => void | Callback when a formatting action is triggered |
| onImageTransform? | (action: 'rotateCW' | 'rotateCCW' | 'flipH' | 'flipV') => void | Callback for image transform (rotate/flip) |
| onImageWrapType? | (wrapType: string) => void | Callback when image wrap type changes |
| onInsertImage? | () => void | Callback when user wants to insert an image |
| onInsertPageBreak? | () => void | Callback when user wants to insert a page break |
| onInsertShape? | (data: {
shapeType: string;
width: number;
height: number;
fillColor?: string;
fillType?: string;
outlineWidth?: number;
outlineColor?: string;
}) => void | Callback when user wants to insert a shape |
| onInsertTable? | (rows: number, columns: number) => void | Callback when a table should be inserted |
| onInsertTOC? | () => void | Callback when user wants to insert a table of contents |
| onOpen? | () => void | Callback to open/import a DOCX file (File → Open) |
| onOpenImageProperties? | () => void | Callback to open image properties dialog (alt text + border) |
| onPageSetup? | () => void | Callback to open page setup dialog |
| onPrint? | () => void | Callback for print action. Set to enable the File Print menu entry. |
| onRedo? | () => void | Callback for redo action |
| onRefocusEditor? | () => void | Callback to refocus the editor after toolbar interactions |
| onSave? | () => void | Callback to save/download the current DOCX (File → Save) |
| onTableAction? | (action: TableAction) => void | Callback when a table action is triggered |
| onUndo? | () => void | Callback for undo action |
| onZoomChange? | (zoom: number) => void | Callback when zoom changes |
| showAlignmentButtons? | boolean | Whether to show alignment buttons (default: true) |
| showFontPicker? | boolean | Whether to show font family picker (default: true) |
| showFontSizePicker? | boolean | Whether to show font size picker (default: true) |
| showHighlightColorPicker? | boolean | Whether to show highlight color picker (default: true) |
| showLineSpacingPicker? | boolean | Whether to show line spacing picker (default: true) |
| showListButtons? | boolean | Whether to show list buttons (default: true) |
| showStylePicker? | boolean | Whether to show style picker (default: true) |
| showTableInsert? | boolean | Whether to show table insert button (default: true) |
| showTextColorPicker? | boolean | Whether to show text color picker (default: true) |
| showZoomControl? | boolean | Whether to show zoom control (default: true) |
| style? | CSSProperties | Additional inline styles |
| tableContext? | {
isInTable: boolean;
rowCount?: number;
columnCount?: number;
canSplitCell?: boolean;
hasMultiCellSelection?: boolean;
cellBorderColor?: ColorValue;
cellBackgroundColor?: string;
} | null | Table context when cursor is in a table |
| theme? | Theme | null | Theme for the style picker / color picker theme matrix |
| zoom? | number | Current zoom level (1.0 = 100%) |
UnsavedIndicatorProps
Unsaved indicator props
interface UnsavedIndicatorProps| Member | Type | Summary |
|---|---|---|
| className? | string | Additional className |
| hasUnsavedChanges | boolean | Whether there are unsaved changes |
| label? | string | Custom label for text variant |
| onClick? | () => void | Click handler |
| position? | IndicatorPosition | Position of the indicator |
| savedColor? | string | Custom color for saved state |
| savedLabel? | string | Custom saved label for text variant |
| showPulse? | boolean | Whether to show pulse animation |
| showWhenSaved? | boolean | Whether to show indicator when saved (always show) |
| size? | number | Size in pixels (for dot/icon) |
| style? | React__default.CSSProperties | Additional inline styles |
| title? | string | Title/tooltip text |
| unsavedColor? | string | Custom color for unsaved state |
| variant? | IndicatorVariant | Variant of the indicator |
UseFindReplaceReturn
Return type for the useFindReplace hook
interface UseFindReplaceReturn| Member | Type | Summary |
|---|---|---|
| close | () => void | Close the dialog |
| getCurrentMatch | () => FindMatch | null | Get current match |
| goToMatch | (index: number) => void | Go to a specific match by index |
| goToNextMatch | () => number | Go to next match |
| goToPreviousMatch | () => number | Go to previous match |
| hasMatches | () => boolean | Check if has matches |
| openFind | (selectedText?: string) => void | Open the find dialog |
| openReplace | (selectedText?: string) => void | Open the replace dialog |
| setMatches | (matches: FindMatch[], currentIndex?: number) => void | Set search results |
| setOptions | (options: Partial<FindOptions>) => void | Update find options |
| setReplaceText | (text: string) => void | Update replace text |
| setSearchText | (text: string) => void | Update search text |
| state | FindReplaceState | Current state |
| toggle | () => void | Toggle dialog visibility |
UseKeyboardShortcutsDialogOptions
Hook options
interface UseKeyboardShortcutsDialogOptions| Member | Type | Summary |
|---|---|---|
| enabled? | boolean | Whether the dialog can be opened with Ctrl+? or F1 |
| openShortcut? | string | Custom open shortcut (default: Ctrl+/) |
UseKeyboardShortcutsDialogReturn
Hook return value
interface UseKeyboardShortcutsDialogReturn| Member | Type | Summary |
|---|---|---|
| close | () => void | Close the dialog |
| handleKeyDown | (event: KeyboardEvent) => void | Keyboard event handler |
| isOpen | boolean | Whether dialog is open |
| open | () => void | Open the dialog |
| toggle | () => void | Toggle the dialog |
UseLoadingOptions
Options for useLoading hook
interface UseLoadingOptions| Member | Type | Summary |
|---|---|---|
| initialLoading? | boolean | Initial loading state |
| minDuration? | number | Minimum loading duration in ms (prevents flash) |
| onEnd? | () => void | Callback when loading ends |
| onStart? | () => void | Callback when loading starts |
UseLoadingReturn
Return value of useLoading hook
interface UseLoadingReturn| Member | Type | Summary |
|---|---|---|
| isLoading | boolean | Current loading state |
| message | string | null | Current message |
| progress | number | Current progress (0-100) |
| setMessage | (message: string | null) => void | Update message |
| setProgress | (progress: number) => void | Update progress (0-100) |
| startLoading | (message?: string) => void | Start loading with optional message |
| stopLoading | () => void | Stop loading |
| withLoading | <T>(operation: () => Promise<T>, message?: string) => Promise<T> | Wrap an async operation with loading state |
UsePasteSpecialOptions
Options for usePasteSpecial hook
interface UsePasteSpecialOptions| Member | Type | Summary |
|---|---|---|
| enabled? | boolean | Whether paste operations are enabled |
| onPaste? | (content: ParsedClipboardContent, asPlainText: boolean) => void | Callback when paste is confirmed |
UsePasteSpecialReturn
Hook return value for paste special
interface UsePasteSpecialReturn| Member | Type | Summary |
|---|---|---|
| closeDialog | () => void | Close the dialog |
| handleKeyDown | (event: KeyboardEvent) => boolean | Handle keyboard shortcut (Ctrl+Shift+V) |
| isOpen | boolean | Whether the dialog is open |
| openDialog | () => void | Open the paste special dialog |
| pasteAsPlainText | () => Promise<void> | Paste as plain text directly |
UseResponsiveToolbarOptions
Options for useResponsiveToolbar hook
interface UseResponsiveToolbarOptions| Member | Type | Summary |
|---|---|---|
| containerRef | React__default.RefObject<HTMLElement | null> | Container ref |
| itemGap? | number | Gap between items |
| items | ToolbarItem[] | Total items |
| overflowButtonWidth? | number | Width reserved for overflow button |
UseResponsiveToolbarReturn
Return value of useResponsiveToolbar hook
interface UseResponsiveToolbarReturn| Member | Type | Summary |
|---|---|---|
| hasOverflow | boolean | Whether overflow menu is needed |
| overflowItems | ToolbarItem[] | Items in overflow menu |
| recalculate | () => void | Force a recalculation |
| visibleItems | ToolbarItem[] | Items that fit in visible area |
UseUnsavedChangesOptions
Hook options for tracking unsaved changes
interface UseUnsavedChangesOptions| Member | Type | Summary |
|---|---|---|
| document? | Document | null | The document to track |
| enabled? | boolean | Whether tracking is enabled |
| onChangeStatusChange? | (hasChanges: boolean) => void | Callback when changes status changes |
| warnBeforeLeave? | boolean | Whether to warn before leaving page |
| warningMessage? | string | Custom warning message |
UseUnsavedChangesReturn
Hook return value
interface UseUnsavedChangesReturn| Member | Type | Summary |
|---|---|---|
| changeCount | number | Number of changes since last save |
| hasUnsavedChanges | boolean | Whether there are unsaved changes |
| lastSavedDocument | Document | null | The last saved document snapshot |
| markAsChanged | () => void | Mark the document as changed |
| markAsSaved | () => void | Mark the document as saved (resets change tracking) |
| resetTracking | (newDocument?: Document | null) => void | Reset tracking (resets baseline) |
ZoomControlProps
interface ZoomControlProps| Member | Type | Summary |
|---|---|---|
| className? | string | |
| compact? | boolean | |
| disabled? | boolean | |
| levels? | ZoomLevel[] | |
| maxZoom? | number | |
| minZoom? | number | |
| onChange? | (zoom: number) => void | |
| persistZoom? | boolean | |
| showButtons? | boolean | |
| storageKey? | string | |
| value? | number |
Type aliases(10)
ColorPickerMode
type ColorPickerMode = 'text' | 'highlight' | 'border';IndicatorPosition
Indicator position type
type IndicatorPosition = 'inline' | 'absolute-top-right' | 'absolute-top-left';IndicatorVariant
Indicator variant type
type IndicatorVariant = 'dot' | 'badge' | 'text' | 'icon';LoadingSize
Loading indicator size
type LoadingSize = 'small' | 'medium' | 'large';LoadingVariant
Loading indicator variant
type LoadingVariant = 'spinner' | 'dots' | 'bar' | 'pulse' | 'progress';Paste option type
type PasteOption = 'formatted' | 'plainText';ShortcutCategory
Shortcut category
type ShortcutCategory = 'editing' | 'formatting' | 'navigation' | 'clipboard' | 'selection' | 'view' | 'file' | 'other';TableAction
Table editing action types
type TableAction = 'addRowAbove' | 'addRowBelow' | 'addColumnLeft' | 'addColumnRight' | 'deleteRow' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'deleteTable' | 'selectTable' | 'selectRow' | 'selectColumn' | 'borderAll' | 'borderOutside' | 'borderInside' | 'borderNone' | 'borderTop' | 'borderBottom' | 'borderLeft' | 'borderRight' | {
type: 'cellFillColor';
color: string | null;
} | {
type: 'borderColor';
color: string;
} | {
type: 'borderWidth';
size: number;
} | {
type: 'cellBorder';
side: 'top' | 'bottom' | 'left' | 'right' | 'all';
style: string;
size: number;
color: string;
} | {
type: 'cellVerticalAlign';
align: 'top' | 'center' | 'bottom';
} | {
type: 'cellMargins';
margins: {
top?: number;
bottom?: number;
left?: number;
right?: number;
};
} | {
type: 'cellTextDirection';
direction: string | null;
} | {
type: 'toggleNoWrap';
} | {
type: 'rowHeight';
height: number | null;
rule?: 'auto' | 'atLeast' | 'exact';
} | {
type: 'toggleHeaderRow';
} | {
type: 'distributeColumns';
} | {
type: 'autoFitContents';
} | {
type: 'tableProperties';
props: {
width?: number | null;
widthType?: string | null;
justification?: 'left' | 'center' | 'right' | null;
};
} | {
type: 'openTableProperties';
} | {
type: 'applyTableStyle';
styleId: string;
};TextContextAction
Context menu action types
type TextContextAction = 'cut' | 'copy' | 'paste' | 'pasteAsPlainText' | 'selectAll' | 'delete' | 'separator' | 'addRowAbove' | 'addRowBelow' | 'deleteRow' | 'addColumnLeft' | 'addColumnRight' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'addComment';ToolbarItemPriority
Priority level for toolbar items Lower numbers = higher priority (shown first, hidden last)
type ToolbarItemPriority = 1 | 2 | 3 | 4 | 5;Variables(11)
EditorToolbar
EditorToolbar: EditorToolbarComponentKeyboardShortcutsDialog
KeyboardShortcutsDialog: React__default.FC<KeyboardShortcutsDialogProps>LoadingIndicator
LoadingIndicator: React__default.FC<LoadingIndicatorProps>PasteSpecialDialog
PasteSpecialDialog: React__default.FC<PasteSpecialDialogProps>ResponsePreview
ResponsePreview: React__default.FC<ResponsePreviewProps>ResponsiveToolbar
ResponsiveToolbar: React__default.FC<ResponsiveToolbarProps>ResponsiveToolbarGroup
ToolbarGroup: React__default.FC<ToolbarGroupProps>SYMBOL_CATEGORIES
Default symbol categories
SYMBOL_CATEGORIES: SymbolCategory[]UnsavedIndicator
UnsavedIndicator: React__default.FC<UnsavedIndicatorProps>