New

docx-editor 1.x has shipped. Vue support, i18n, agents. Read the migration guide →

API Referencev1.0.2

@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;

Alignment dropdown component — single button with popover panel

declare function AlignmentButtons(input: AlignmentButtonsProps): react_jsx_runtime.JSX.Element;

Calculate scaled dimensions to fit within bounds

declare function calculateFitDimensions(originalWidth: number, originalHeight: number, maxWidth: number, maxHeight: number): {
    width: number;
    height: number;
};

Clamp TableConfig to valid range

declare function clampTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): TableConfig;
declare function ColorPicker(input: ColorPickerProps): react_jsx_runtime.JSX.Element;

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;
};

Create a default TableConfig

declare function createDefaultTableConfig(rows?: number, columns?: number): TableConfig;

Create an error response

declare function createErrorResponse(error: string): AgentResponse;

Create a mock response for testing

declare function createMockResponse(newText: string, warnings?: string[]): AgentResponse;

Create a table context from a table and selection

declare function createTableContext(table: Table, selection: TableSelection): TableContext;

Create a toolbar item

declare function createToolbarItem(id: string, content: ReactNode, options?: Partial<Omit<ToolbarItem, 'id' | 'content'>>): ToolbarItem;

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 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;
declare function FontSizePicker(input: FontSizePickerProps): react_jsx_runtime.JSX.Element;

Format file size for display

declare function formatFileSize(bytes: number): string;
fn

formatPrintPageRange

Format page range for display

declare function formatPageRange(range: {
    start: number;
    end: number;
} | null, totalPages: number): string;

Format key combination for current platform

declare function formatKeys(keys: string): string;

Format table dimensions for display

declare function formatTableDimensions(config: TableConfig): string;

Get action shortcuts

declare function getActionShortcut(action: AIAction): string | undefined;

Get all available actions

declare function getAllActions(): AIAction[];

Get all categories

declare function getAllCategories(): ShortcutCategory[];
fn

getAllIndicatorPositions

Get all indicator positions

declare function getAllPositions(): IndicatorPosition[];
fn

getAllIndicatorVariants

Get all indicator variants

declare function getAllVariants(): IndicatorVariant[];

Get all loading sizes

declare function getAllLoadingSizes(): LoadingSize[];

Get all loading variants

declare function getAllLoadingVariants(): LoadingVariant[];

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;

Get column count from a table

declare function getColumnCount(table: Table): number;

Get common/frequently used shortcuts

declare function getCommonShortcuts(): KeyboardShortcut[];

Get default actions for selection

declare function getDefaultActions(): AIAction[];

Get default paste option

declare function getDefaultPasteOption(): PasteOption;

Get default print options

declare function getDefaultPrintOptions(): PrintOptions;

Get all default shortcuts

declare function getDefaultShortcuts(): KeyboardShortcut[];

Get default menu item definitions (untranslated, use translation keys)

declare function getDefaultTextContextMenuItems(): TextContextMenuItem[];

Get accept string for file input

declare function getImageAcceptString(): string;

Get image dimensions from a data URL

declare function getImageDimensions(src: string): Promise<{
    width: number;
    height: number;
}>;

Get loading variant label

declare function getLoadingVariantLabel(variant: LoadingVariant): string;
declare function getMarginInUnits(marginTwips: number, unit: 'inch' | 'cm'): string;

Get paste option definition by id

declare function getPasteOption(id: PasteOption): PasteOptionDef | undefined;

Get recommended priority for common toolbar items

declare function getRecommendedPriority(itemType: string): ToolbarItemPriority;
declare function getRulerDimensions(sectionProps?: SectionProperties | null, zoom?: number): {
    width: number;
    leftMargin: number;
    rightMargin: number;
    contentWidth: number;
};

Get shortcuts by category

declare function getShortcutsByCategory(category: ShortcutCategory): KeyboardShortcut[];

Get supported image extensions

declare function getSupportedImageExtensions(): string[];

Get all symbol categories

declare function getSymbolCategories(): SymbolCategory[];

Get symbols by category name

declare function getSymbolsByCategory(categoryName: string): string[];
fn

getSymbolUnicodeInfo

Get symbol Unicode info

declare function getSymbolInfo(symbol: string): {
    character: string;
    codePoint: string;
    decimal: number;
    hex: string;
};

Get common table presets

declare function getTablePresets(): {
    label: string;
    config: TableConfig;
}[];
declare function getTableSplitCellDialogConfig(table: Table, rowIndex: number, columnIndex: number): TableSplitConfig | null;

Get action label

declare function getTextActionLabel(action: TextContextAction): string;

Get action shortcut

declare function getTextActionShortcut(action: TextContextAction): string;

Get indicator variant label

declare function getVariantLabel(variant: IndicatorVariant): string;
declare function HorizontalRuler(input: HorizontalRulerProps): React__default.ReactElement;

HyperlinkDialog component - Modal for inserting/editing hyperlinks

declare function HyperlinkDialog(input: HyperlinkDialogProps): React__default.ReactElement | null;

InsertImageDialog - Modal for inserting images with preview and sizing

declare function InsertImageDialog(input: InsertImageDialogProps): React__default.ReactElement | null;

InsertSymbolDialog - Modal for inserting special characters

declare function InsertSymbolDialog(input: InsertSymbolDialogProps): React__default.ReactElement | null;

InsertTableDialog - Modal for inserting tables with visual grid selector

declare function InsertTableDialog(input: InsertTableDialogProps): React__default.ReactElement | null;

Check if action is available for selection

declare function isActionAvailable(_action: AIAction, selectedText: string, _selectionContext?: SelectionContext): boolean;

Check if paste special shortcut

declare function isPasteSpecialShortcut(event: KeyboardEvent): boolean;

Check if browser supports good print functionality

declare function isPrintSupported(): boolean;

Check if action is available

declare function isTextActionAvailable(action: TextContextAction, hasSelection: boolean, isEditable: boolean): boolean;

Check if a file is a valid image

declare function isValidImageFile(file: File): boolean;

Validate TableConfig

declare function isValidTableConfig(config: TableConfig, maxRows?: number, maxColumns?: number): boolean;
declare function LineSpacingPicker(input: LineSpacingPickerProps): react_jsx_runtime.JSX.Element;

List buttons component for bullet/numbered list controls

declare function ListButtons(input: ListButtonsProps): react_jsx_runtime.JSX.Element;

Merge cells in a selection

declare function mergeCells(table: Table, selection: TableSelection): Table;

Create print-optimized document view in a new window

declare function openPrintWindow(title: string | undefined, content: string): Window | null;
declare function parseMarginFromUnits(value: string, unit: 'inch' | 'cm'): number | null;

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;
declare function positionToMargin(positionPx: number, side: 'left' | 'right', pageWidthPx: number, zoom: number): number;

PrintButton - Standalone print button for toolbar

declare function PrintButton(input: PrintButtonProps): React__default.ReactElement;

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;
declare function splitTableCell(table: Table, rowIndex: number, columnIndex: number, rows: number, cols: number): Table;
declare function StylePicker(input: StylePickerProps): react_jsx_runtime.JSX.Element;

Get symbol from Unicode code point string

declare function symbolFromCodePoint(codePointStr: string): string | null;
declare function TableBorderColorPicker(input: TableBorderColorPickerProps): react_jsx_runtime.JSX.Element;
declare function TableBorderPicker(input: TableBorderPickerProps): react_jsx_runtime.JSX.Element;
declare function TableBorderWidthPicker(input: TableBorderWidthPickerProps): react_jsx_runtime.JSX.Element;
declare function TableCellFillPicker(input: TableCellFillPickerProps): react_jsx_runtime.JSX.Element;
declare function TableInsertButtons(input: TableInsertButtonsProps): react_jsx_runtime.JSX.Element;
declare function TableMergeButton(input: TableMergeButtonProps): react_jsx_runtime.JSX.Element;
declare function TableMoreDropdown(input: TableMoreDropdownProps): react_jsx_runtime.JSX.Element;

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;

Individual toolbar button with shadcn styling

declare function ToolbarButton(input: ToolbarButtonProps): react_jsx_runtime.JSX.Element;

Toolbar button group with modern styling

declare function ToolbarGroup$1(input: ToolbarGroupProps$1): react_jsx_runtime.JSX.Element;

Toolbar separator

declare function ToolbarSeparator(): react_jsx_runtime.JSX.Element;

Trigger browser print dialog for the current document

declare function triggerPrint(): void;

Hook to manage context menu state

declare function useContextMenu(): {
    isOpen: boolean;
    position: {
        x: number;
        y: number;
    };
    selectedText: string;
    selectionContext: SelectionContext | undefined;
    openMenu: (e: React__default.MouseEvent | MouseEvent, text: string, context?: SelectionContext) => void;
    closeMenu: () => void;
};

Hook for managing find/replace dialog state

declare function useFindReplace(hookOptions?: FindReplaceOptions): UseFindReplaceReturn;

Hook for managing Hyperlink dialog state

declare function useHyperlinkDialog(): UseHyperlinkDialogReturn;

Hook for managing Insert Image dialog state

declare function useInsertImageDialog(): {
    isOpen: boolean;
    open: () => void;
    close: () => void;
    toggle: () => void;
};

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;
};

Hook for managing Insert Table dialog state

declare function useInsertTableDialog(): {
    isOpen: boolean;
    open: () => void;
    close: () => void;
    toggle: () => void;
};

Hook to manage keyboard shortcuts dialog

declare function useKeyboardShortcutsDialog(options?: UseKeyboardShortcutsDialogOptions): UseKeyboardShortcutsDialogReturn;

Hook to manage loading states

declare function useLoading(options?: UseLoadingOptions): UseLoadingReturn;

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;
};

Hook to manage paste special dialog

declare function usePasteSpecial(options?: UsePasteSpecialOptions): UsePasteSpecialReturn;

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;
};

Hook to calculate which items fit in the toolbar

declare function useResponsiveToolbar(options: UseResponsiveToolbarOptions): UseResponsiveToolbarReturn;

Hook to manage text context menu state

declare function useTextContextMenu(options?: UseTextContextMenuOptions): UseTextContextMenuReturn;

Hook to track unsaved changes in a document

declare function useUnsavedChanges(options?: UseUnsavedChangesOptions): UseUnsavedChangesReturn;
declare function ZoomControl(input: ZoomControlProps): react_jsx_runtime.JSX.Element;

Interfaces(68)

Props for the AlignmentButtons component

interface AlignmentButtonsProps
MemberTypeSummary
className?stringAdditional CSS class name
compact?booleanCompact mode (smaller buttons)
disabled?booleanWhether the buttons are disabled
onChange?(alignment: ParagraphAlignment) => voidCallback when alignment is changed
showLabels?booleanShow labels next to icons
style?CSSPropertiesAdditional inline styles
value?ParagraphAlignmentCurrent alignment value
interface ColorPickerProps
MemberTypeSummary
autoLabel?stringOverride the auto/no-color button label
className?string
defaultColor?ColorValue | stringInitial "last picked" color used by the apply half before the user picks anything. Defaults: text → red, highlight → yellow, border → black.
disabled?boolean
icon?stringOverride the default icon for the mode
modeColorPickerMode
onChange?(color: ColorValue | string) => void
splitButton?booleanWord-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

Context menu props

interface ContextMenuProps
MemberTypeSummary
actions?AIAction[]Available actions (defaults to DEFAULT_AI_ACTIONS)
className?stringAdditional className
isOpenbooleanWhether the menu is visible
onAction(action: AIAction, customPrompt?: string) => voidCallback when an action is selected
onClose() => voidCallback when menu is closed
position{ x: number; y: number; }Menu position
selectedTextstringSelected text
selectionContext?SelectionContextSelection context for AI operations
showCustomPrompt?booleanWhether to show custom prompt option
interface

DialogKeyboardShortcut

Keyboard shortcut definition

interface KeyboardShortcut
MemberTypeSummary
altKeys?stringAlternative key combination
categoryShortcutCategoryCategory for grouping
common?booleanWhether this is a common/frequently used shortcut
descriptionstringDescription of what the shortcut does
descriptionKey?TranslationKeyTranslation key for description (used internally)
idstringUnique identifier
keysstringPrimary key combination (e.g., 'Ctrl+C')
namestringDisplay name
nameKey?TranslationKeyTranslation key for display name (used internally)
interface DocumentNameProps
MemberTypeSummary
editable?boolean
onChange?(value: string) => void
placeholder?string
valuestring

Props for the EditorToolbar compound component. Extends ToolbarProps with title bar-specific fields.

interface EditorToolbarProps extends ToolbarProps

Props for the FindReplaceDialog component

interface FindReplaceDialogProps
MemberTypeSummary
className?stringAdditional CSS class
currentResult?FindResult | nullCurrent match result (from external state)
initialSearchText?stringInitial search text (e.g., from selected text)
isOpenbooleanWhether the dialog is open
onClearHighlights?() => voidCallback to clear highlights
onClose() => voidCallback when dialog is closed
onFind(searchText: string, options: FindOptions) => FindResult | nullCallback when searching for text
onFindNext() => FindMatch | nullCallback when navigating to next match
onFindPrevious() => FindMatch | nullCallback when navigating to previous match
onHighlightMatches?(matches: FindMatch[]) => voidCallback to highlight matches in document
onReplace(replaceText: string) => booleanCallback when replacing current match
onReplaceAll(searchText: string, replaceText: string, options: FindOptions) => numberCallback when replacing all matches
replaceMode?booleanWhether to start in replace mode
style?CSSPropertiesAdditional inline styles

Options for the useFindReplace hook

interface FindReplaceOptions
MemberTypeSummary
initialReplaceMode?booleanWhether to show replace functionality initially
onCurrentMatchChange?(match: FindMatch | null, index: number) => voidCallback when current match changes
onMatchesChange?(matches: FindMatch[]) => voidCallback when matches change

State for the find/replace hook

interface FindReplaceState
MemberTypeSummary
currentIndexnumberCurrent match index
isOpenbooleanWhether the dialog is open
matchesFindMatch[]All matches found
optionsFindOptionsFind options
replaceModebooleanWhether in replace mode
replaceTextstringCurrent replace text
searchTextstringCurrent search text
interface FontPickerProps
MemberTypeSummary
className?string
disabled?boolean
fonts?FontOption[]
onChange?(fontFamily: string) => void
placeholder?string
showPreview?boolean
value?string
width?number | string

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
MemberTypeSummary
className?string
disabled?boolean
maxSize?number
minSize?number
onChange?(size: number) => void
placeholder?string
sizes?number[]
value?number
width?number | string

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
MemberTypeSummary
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

Hyperlink data structure for dialog

interface HyperlinkData
MemberTypeSummary
bookmark?stringInternal bookmark name
displayText?stringDisplay text for the link
tooltip?stringTooltip text
url?stringURL for external link

Props for the HyperlinkDialog component

interface HyperlinkDialogProps
MemberTypeSummary
bookmarks?BookmarkOption[]Available bookmarks for internal links
className?stringAdditional CSS class
initialData?HyperlinkDataInitial data for editing existing hyperlink
isEditing?booleanWhether we're editing an existing hyperlink
isOpenbooleanWhether the dialog is open
onClose() => voidCallback when dialog is closed
onRemove?() => voidCallback when hyperlink is removed
onSubmit(data: HyperlinkData) => voidCallback when hyperlink is inserted/updated
selectedText?stringCurrently selected text (used as default display text)
style?CSSPropertiesAdditional inline styles
interface

ImageData_2

Image data for insertion

interface ImageData
MemberTypeSummary
alt?stringAlt text for accessibility
fileName?stringOriginal file name
heightnumberImage height in pixels
mimeType?stringMIME type
srcstringBase64 data URL or external URL
widthnumberImage width in pixels

Props for InsertImageDialog

interface InsertImageDialogProps
MemberTypeSummary
accept?stringAccepted file types (default: image/*)
className?stringAdditional CSS class
isOpenbooleanWhether the dialog is open
maxHeight?numberMaximum height in pixels (default: 600)
maxWidth?numberMaximum width in pixels (default: 800)
onClose() => voidCallback when dialog is closed
onInsert(data: ImageData) => voidCallback when image is inserted
style?CSSPropertiesAdditional inline styles

Props for InsertSymbolDialog

interface InsertSymbolDialogProps
MemberTypeSummary
className?stringAdditional CSS class
isOpenbooleanWhether the dialog is open
onClose() => voidCallback when dialog is closed
onInsert(symbol: string) => voidCallback when symbol is inserted
recentSymbols?string[]Recently used symbols
style?CSSPropertiesAdditional inline styles

Props for InsertTableDialog

interface InsertTableDialogProps
MemberTypeSummary
className?stringAdditional CSS class
isOpenbooleanWhether the dialog is open
maxColumns?numberMaximum allowed columns (default: 20)
maxGridColumns?numberMaximum columns in grid selector (default: 10)
maxGridRows?numberMaximum rows in grid selector (default: 8)
maxRows?numberMaximum allowed rows (default: 100)
onClose() => voidCallback when dialog is closed
onInsert(config: TableConfig) => voidCallback when table is inserted
style?CSSPropertiesAdditional inline styles

Dialog props

interface KeyboardShortcutsDialogProps
MemberTypeSummary
className?stringAdditional className
customShortcuts?KeyboardShortcut[]Custom shortcuts (merged with defaults)
isOpenbooleanWhether the dialog is open
onClose() => voidClose callback
showSearch?booleanWhether to show search
interface LineSpacingOption
MemberTypeSummary
labelstring
labelKey?TranslationKey
twipsValuenumber
valuenumber
interface LineSpacingPickerProps
MemberTypeSummary
className?string
disabled?boolean
onChange?(twipsValue: number) => void
options?LineSpacingOption[]
value?number
width?number | string

Props for the ListButtons component

interface ListButtonsProps
MemberTypeSummary
className?stringAdditional CSS class name
compact?booleanCompact mode (smaller buttons)
disabled?booleanWhether the buttons are disabled
hasIndent?booleanWhether the current paragraph has left indentation (for enabling outdent)
listState?ListStateCurrent list state of the selection
onBulletList?() => voidCallback when bullet list is toggled
onIndent?() => voidCallback to increase list indent
onNumberedList?() => voidCallback when numbered list is toggled
onOutdent?() => voidCallback to decrease list indent
showIndentButtons?booleanShow indent/outdent buttons
style?CSSPropertiesAdditional inline styles

Loading indicator props

interface LoadingIndicatorProps
MemberTypeSummary
className?stringAdditional className
color?stringCustom color
isLoadingbooleanWhether loading is active
message?stringLoading message to display
overlay?booleanWhether to show as full-screen overlay
overlayOpacity?numberOverlay background opacity (0-1)
progress?numberProgress percentage (0-100) for progress variant
showProgressText?booleanShow progress percentage text
size?LoadingSizeSize of the indicator
style?React__default.CSSPropertiesAdditional inline styles
variant?LoadingVariantVariant of the loading indicator

Loading operation state

interface LoadingOperation
MemberTypeSummary
idstring
message?string
progress?number
startTimenumber
interface LogoProps
MemberTypeSummary
childrenReactNode

Paste special dialog props

interface PasteSpecialDialogProps
MemberTypeSummary
className?stringAdditional className
isOpenbooleanWhether the dialog is open
onClose() => voidCallback when dialog is closed
onPaste(content: ParsedClipboardContent, asPlainText: boolean) => voidCallback when paste is confirmed
position?{ x: number; y: number; }Optional custom position

PrintButton props

interface PrintButtonProps
MemberTypeSummary
className?stringAdditional CSS class
compact?booleanCompact mode
disabled?booleanWhether the button is disabled
label?stringButton label
onPrint() => voidCallback when print is triggered
showIcon?booleanShow icon
style?CSSPropertiesAdditional inline styles

Print options

interface PrintOptions
MemberTypeSummary
includeFooters?booleanWhether to include footers
includeHeaders?booleanWhether to include headers
includePageNumbers?booleanWhether to include page numbers
margins?'default' | 'none' | 'minimum'Margins mode
pageRange?{ start: number; end: number; } | nullPage range to print (null = all)
printBackground?booleanWhether to show background colors
scale?numberScale factor for printing (1.0 = 100%)

Response preview props

interface ResponsePreviewProps
MemberTypeSummary
actionAIActionAction that was performed
allowEdit?booleanAllow editing before accepting
className?stringAdditional className
error?stringError message if request failed
isLoadingbooleanWhether the response is loading
onAccept(newText: string) => voidCallback when user accepts the change
onReject() => voidCallback when user rejects the change
onRetry?() => voidCallback when user wants to retry
originalTextstringOriginal selected text
position?{ x: number; y: number; }Position for the preview
responseAgentResponse | nullAI response (or null if loading/error)
showDiff?booleanShow diff view

State for response preview

interface ResponsePreviewState
MemberTypeSummary
actionAIAction
error?string
isLoadingboolean
isVisibleboolean
originalTextstring
position?{ x: number; y: number; }
responseAgentResponse | null
interface

ResponsiveToolbarGroupProps

interface ToolbarGroupProps
MemberTypeSummary
childrenReactNodeGroup items
className?stringAdditional className
gap?numberGap between items
separatorAfter?booleanWhether to show separator after group
style?CSSPropertiesAdditional styles

Props for ResponsiveToolbar component

interface ResponsiveToolbarProps
MemberTypeSummary
alwaysShowOverflow?booleanWhether to show overflow button even when all items fit
backgroundColor?stringBackground color
borderBottom?stringBorder styles
className?stringAdditional className
height?number | stringHeight of the toolbar
itemGap?numberGap between items in pixels
itemsToolbarItem[]Toolbar items
overflowButtonWidth?numberMinimum width for overflow button
overflowItems?ToolbarItem[]Additional items for overflow menu only
padding?number | stringPadding for the toolbar
renderOverflowButton?(itemCount: number, isOpen: boolean, onClick: () => void) => ReactNodeCustom overflow button renderer
renderOverflowMenu?(items: ToolbarItem[], onClose: () => void) => ReactNodeCustom overflow menu renderer
style?CSSPropertiesAdditional styles
interface StyleOption
MemberTypeSummary
bold?booleanBold styling
color?stringText color (RGB hex)
fontSize?numberFont size in half-points for visual preview
isDefault?boolean
italic?booleanItalic styling
namestring
nameKey?TranslationKey
priority?number
qFormat?boolean
styleIdstring
typeStyleType
interface StylePickerProps
MemberTypeSummary
className?string
disabled?boolean
onChange?(styleId: string) => void
styles?Style[]
theme?Theme | null
value?string
width?number | string

Symbol category

interface SymbolCategory
MemberTypeSummary
labelstringDisplay label
namestringCategory name
symbolsstring[]Symbols in this category
interface TableBorderColorPickerProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
theme?Theme | null
value?stringCurrent border color (RGB hex without #)
interface TableBorderPickerProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
interface TableBorderWidthPickerProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
interface TableCellFillPickerProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
theme?Theme | null
value?stringCurrent fill color (RGB hex without #)

Table configuration for insertion

interface TableConfig
MemberTypeSummary
columnsnumberNumber of columns
rowsnumberNumber of rows

Context for table operations

interface TableContext
MemberTypeSummary
canSplitCellbooleanWhether current cell can be split
columnCountnumberTotal number of columns
hasMultiCellSelectionbooleanWhether multiple cells are selected (for merge)
rowCountnumberTotal number of rows
selectionTableSelectionCurrent selection within the table
tableTableThe table being edited
interface TableInsertButtonsProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
interface TableMergeButtonProps
MemberTypeSummary
canMerge?boolean
canSplit?boolean
disabled?boolean
onAction(action: TableAction) => void
interface TableMoreDropdownProps
MemberTypeSummary
disabled?boolean
onAction(action: TableAction) => void
tableContext?{ isInTable: boolean; rowCount?: number; columnCount?: number; canSplitCell?: boolean; hasMultiCellSelection?: boolean; table?: { attrs?: { justification?: string; }; }; } | null

Selection within a table

interface TableSelection
MemberTypeSummary
columnIndexnumberColumn index (0-indexed)
rowIndexnumberRow index (0-indexed)
selectedCells?{ startRow: number; startCol: number; endRow: number; endCol: number; }Selected cell range for multi-cell selection
tableIndexnumberIndex of the table in the document
interface TableSplitConfig
MemberTypeSummary
initialColsnumber
initialRowsnumber
minColsnumber
minRowsnumber

Props for TableToolbar component

interface TableToolbarProps
MemberTypeSummary
children?ReactNodeCustom render for additional buttons
className?stringAdditional CSS class name
compact?booleanCompact mode
contextTableContext | nullCurrent table context (null if cursor not in table)
disabled?booleanWhether the toolbar is disabled
onAction?(action: TableAction, context: TableContext) => voidCallback when a table action is triggered
position?'top' | 'floating'Position of the toolbar
showLabels?booleanShow labels next to icons
style?CSSPropertiesAdditional inline styles

Menu item configuration

interface TextContextMenuItem
MemberTypeSummary
actionTextContextActionAction type
disabled?booleanWhether the item is disabled
dividerAfter?booleanWhether to show divider after this item
labelstringDisplay label
shortcut?stringKeyboard shortcut hint

Context menu props

interface TextContextMenuProps
MemberTypeSummary
className?stringAdditional className
hasClipboardContent?booleanWhether clipboard has content (enables paste)
hasSelectionbooleanWhether there's a selection (enables copy/cut)
isEditablebooleanWhether the editor is editable (enables paste/cut/delete)
isOpenbooleanWhether the menu is visible
items?TextContextMenuItem[]Custom menu items (overrides default)
onAction(action: TextContextAction) => voidCallback when an action is selected
onClose() => voidCallback when menu is closed
position{ x: number; y: number; }Menu position
interface TitleBarProps
MemberTypeSummary
childrenReactNode
interface TitleBarRightProps
MemberTypeSummary
childrenReactNode

Toolbar item configuration

interface ToolbarItem
MemberTypeSummary
alwaysVisible?booleanWhether this item should never be hidden
contentReactNodeThe content to render
group?stringGroup name for keeping items together
idstringUnique identifier
minWidth?numberMinimum width in pixels (for measuring)
priority?ToolbarItemPriorityPriority level (1 = highest, 5 = lowest)
separatorAfter?booleanWhether to show separator after this item

Props for the Toolbar (formatting rail) component

interface ToolbarProps
MemberTypeSummary
canRedo?booleanWhether redo is available
canUndo?booleanWhether undo is available
children?ReactNodeCustom toolbar items to render at the end
className?stringAdditional CSS class name
currentFormatting?SelectionFormattingCurrent formatting of the selection
disabled?booleanWhether 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?booleanWhether 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; } | nullImage context when an image is selected
inline?booleanWhen true, renders with display:contents so children flow in the parent flex container
onFormat?(action: FormattingAction) => voidCallback when a formatting action is triggered
onImageTransform?(action: 'rotateCW' | 'rotateCCW' | 'flipH' | 'flipV') => voidCallback for image transform (rotate/flip)
onImageWrapType?(wrapType: string) => voidCallback when image wrap type changes
onInsertImage?() => voidCallback when user wants to insert an image
onInsertPageBreak?() => voidCallback when user wants to insert a page break
onInsertShape?(data: { shapeType: string; width: number; height: number; fillColor?: string; fillType?: string; outlineWidth?: number; outlineColor?: string; }) => voidCallback when user wants to insert a shape
onInsertTable?(rows: number, columns: number) => voidCallback when a table should be inserted
onInsertTOC?() => voidCallback when user wants to insert a table of contents
onOpen?() => voidCallback to open/import a DOCX file (File → Open)
onOpenImageProperties?() => voidCallback to open image properties dialog (alt text + border)
onPageSetup?() => voidCallback to open page setup dialog
onPrint?() => voidCallback for print action. Set to enable the File Print menu entry.
onRedo?() => voidCallback for redo action
onRefocusEditor?() => voidCallback to refocus the editor after toolbar interactions
onSave?() => voidCallback to save/download the current DOCX (File → Save)
onTableAction?(action: TableAction) => voidCallback when a table action is triggered
onUndo?() => voidCallback for undo action
onZoomChange?(zoom: number) => voidCallback when zoom changes
showAlignmentButtons?booleanWhether to show alignment buttons (default: true)
showFontPicker?booleanWhether to show font family picker (default: true)
showFontSizePicker?booleanWhether to show font size picker (default: true)
showHighlightColorPicker?booleanWhether to show highlight color picker (default: true)
showLineSpacingPicker?booleanWhether to show line spacing picker (default: true)
showListButtons?booleanWhether to show list buttons (default: true)
showStylePicker?booleanWhether to show style picker (default: true)
showTableInsert?booleanWhether to show table insert button (default: true)
showTextColorPicker?booleanWhether to show text color picker (default: true)
showZoomControl?booleanWhether to show zoom control (default: true)
style?CSSPropertiesAdditional inline styles
tableContext?{ isInTable: boolean; rowCount?: number; columnCount?: number; canSplitCell?: boolean; hasMultiCellSelection?: boolean; cellBorderColor?: ColorValue; cellBackgroundColor?: string; } | nullTable context when cursor is in a table
theme?Theme | nullTheme for the style picker / color picker theme matrix
zoom?numberCurrent zoom level (1.0 = 100%)

Unsaved indicator props

interface UnsavedIndicatorProps
MemberTypeSummary
className?stringAdditional className
hasUnsavedChangesbooleanWhether there are unsaved changes
label?stringCustom label for text variant
onClick?() => voidClick handler
position?IndicatorPositionPosition of the indicator
savedColor?stringCustom color for saved state
savedLabel?stringCustom saved label for text variant
showPulse?booleanWhether to show pulse animation
showWhenSaved?booleanWhether to show indicator when saved (always show)
size?numberSize in pixels (for dot/icon)
style?React__default.CSSPropertiesAdditional inline styles
title?stringTitle/tooltip text
unsavedColor?stringCustom color for unsaved state
variant?IndicatorVariantVariant of the indicator

Return type for the useFindReplace hook

interface UseFindReplaceReturn
MemberTypeSummary
close() => voidClose the dialog
getCurrentMatch() => FindMatch | nullGet current match
goToMatch(index: number) => voidGo to a specific match by index
goToNextMatch() => numberGo to next match
goToPreviousMatch() => numberGo to previous match
hasMatches() => booleanCheck if has matches
openFind(selectedText?: string) => voidOpen the find dialog
openReplace(selectedText?: string) => voidOpen the replace dialog
setMatches(matches: FindMatch[], currentIndex?: number) => voidSet search results
setOptions(options: Partial<FindOptions>) => voidUpdate find options
setReplaceText(text: string) => voidUpdate replace text
setSearchText(text: string) => voidUpdate search text
stateFindReplaceStateCurrent state
toggle() => voidToggle dialog visibility

Hook options

interface UseKeyboardShortcutsDialogOptions
MemberTypeSummary
enabled?booleanWhether the dialog can be opened with Ctrl+? or F1
openShortcut?stringCustom open shortcut (default: Ctrl+/)

Hook return value

interface UseKeyboardShortcutsDialogReturn
MemberTypeSummary
close() => voidClose the dialog
handleKeyDown(event: KeyboardEvent) => voidKeyboard event handler
isOpenbooleanWhether dialog is open
open() => voidOpen the dialog
toggle() => voidToggle the dialog

Options for useLoading hook

interface UseLoadingOptions
MemberTypeSummary
initialLoading?booleanInitial loading state
minDuration?numberMinimum loading duration in ms (prevents flash)
onEnd?() => voidCallback when loading ends
onStart?() => voidCallback when loading starts

Return value of useLoading hook

interface UseLoadingReturn
MemberTypeSummary
isLoadingbooleanCurrent loading state
messagestring | nullCurrent message
progressnumberCurrent progress (0-100)
setMessage(message: string | null) => voidUpdate message
setProgress(progress: number) => voidUpdate progress (0-100)
startLoading(message?: string) => voidStart loading with optional message
stopLoading() => voidStop loading
withLoading<T>(operation: () => Promise<T>, message?: string) => Promise<T>Wrap an async operation with loading state

Options for usePasteSpecial hook

interface UsePasteSpecialOptions
MemberTypeSummary
enabled?booleanWhether paste operations are enabled
onPaste?(content: ParsedClipboardContent, asPlainText: boolean) => voidCallback when paste is confirmed

Hook return value for paste special

interface UsePasteSpecialReturn
MemberTypeSummary
closeDialog() => voidClose the dialog
handleKeyDown(event: KeyboardEvent) => booleanHandle keyboard shortcut (Ctrl+Shift+V)
isOpenbooleanWhether the dialog is open
openDialog() => voidOpen the paste special dialog
pasteAsPlainText() => Promise<void>Paste as plain text directly

Options for useResponsiveToolbar hook

interface UseResponsiveToolbarOptions
MemberTypeSummary
containerRefReact__default.RefObject<HTMLElement | null>Container ref
itemGap?numberGap between items
itemsToolbarItem[]Total items
overflowButtonWidth?numberWidth reserved for overflow button

Return value of useResponsiveToolbar hook

interface UseResponsiveToolbarReturn
MemberTypeSummary
hasOverflowbooleanWhether overflow menu is needed
overflowItemsToolbarItem[]Items in overflow menu
recalculate() => voidForce a recalculation
visibleItemsToolbarItem[]Items that fit in visible area

Hook options for text context menu

interface UseTextContextMenuOptions
MemberTypeSummary
containerRef?React__default.RefObject<HTMLElement>Container element ref
enabled?booleanWhether the context menu is enabled
isEditable?booleanWhether the editor is editable
onAction?(action: TextContextAction) => voidCallback when an action is triggered

Hook return value

interface UseTextContextMenuReturn
MemberTypeSummary
closeMenu() => voidClose the context menu
handleAction(action: TextContextAction) => voidHandle action selection
hasSelectionbooleanWhether there's a text selection
isOpenbooleanWhether the menu is open
onContextMenu(event: React__default.MouseEvent) => voidContext menu event handler for onContextMenu prop
openMenu(event: React__default.MouseEvent | MouseEvent) => voidOpen the context menu
position{ x: number; y: number; }Menu position

Hook options for tracking unsaved changes

interface UseUnsavedChangesOptions
MemberTypeSummary
document?Document | nullThe document to track
enabled?booleanWhether tracking is enabled
onChangeStatusChange?(hasChanges: boolean) => voidCallback when changes status changes
warnBeforeLeave?booleanWhether to warn before leaving page
warningMessage?stringCustom warning message

Hook return value

interface UseUnsavedChangesReturn
MemberTypeSummary
changeCountnumberNumber of changes since last save
hasUnsavedChangesbooleanWhether there are unsaved changes
lastSavedDocumentDocument | nullThe last saved document snapshot
markAsChanged() => voidMark the document as changed
markAsSaved() => voidMark the document as saved (resets change tracking)
resetTracking(newDocument?: Document | null) => voidReset tracking (resets baseline)
interface ZoomControlProps
MemberTypeSummary
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)

type ColorPickerMode = 'text' | 'highlight' | 'border';

Indicator position type

type IndicatorPosition = 'inline' | 'absolute-top-right' | 'absolute-top-left';

Indicator variant type

type IndicatorVariant = 'dot' | 'badge' | 'text' | 'icon';

Loading indicator size

type LoadingSize = 'small' | 'medium' | 'large';

Loading indicator variant

type LoadingVariant = 'spinner' | 'dots' | 'bar' | 'pulse' | 'progress';

Paste option type

type PasteOption = 'formatted' | 'plainText';

Shortcut category

type ShortcutCategory = 'editing' | 'formatting' | 'navigation' | 'clipboard' | 'selection' | 'view' | 'file' | 'other';

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;
};

Context menu action types

type TextContextAction = 'cut' | 'copy' | 'paste' | 'pasteAsPlainText' | 'selectAll' | 'delete' | 'separator' | 'addRowAbove' | 'addRowBelow' | 'deleteRow' | 'addColumnLeft' | 'addColumnRight' | 'deleteColumn' | 'mergeCells' | 'splitCell' | 'addComment';

Priority level for toolbar items Lower numbers = higher priority (shown first, hidden last)

type ToolbarItemPriority = 1 | 2 | 3 | 4 | 5;

Variables(11)

ContextMenu: React__default.FC<ContextMenuProps>
EditorToolbar: EditorToolbarComponent
KeyboardShortcutsDialog: React__default.FC<KeyboardShortcutsDialogProps>
LoadingIndicator: React__default.FC<LoadingIndicatorProps>
PasteSpecialDialog: React__default.FC<PasteSpecialDialogProps>
ResponsePreview: React__default.FC<ResponsePreviewProps>
ResponsiveToolbar: React__default.FC<ResponsiveToolbarProps>
const

ResponsiveToolbarGroup

ToolbarGroup: React__default.FC<ToolbarGroupProps>

Default symbol categories

SYMBOL_CATEGORIES: SymbolCategory[]
TextContextMenu: React__default.FC<TextContextMenuProps>
UnsavedIndicator: React__default.FC<UnsavedIndicatorProps>