@eigenpal/docx-editor-vue/composables
Vue composables mirroring the React hooks subpath — history, table selection, find/replace, autosave, clipboard, zoom, and the high-level useDocxEditor host composable.
export declare function useAutoSave(document: MaybeRef<Document | null | undefined>, options?: UseAutoSaveOptions): UseAutoSaveReturn;
export declare function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;
export declare function useCommentSidebarItems(input: UseCommentSidebarItemsOptions): import('vue').ComputedRef<CommentSidebarItem[]>;
export declare function useDocxEditor(options: UseDocxEditorOptions): UseDocxEditorReturn;
export declare function useDragAutoScroll(input: DragAutoScrollOptions): UseDragAutoScrollReturn;
export declare function useFindReplace(hookOptions?: FindReplaceOptions): UseFindReplaceReturn;
export declare function useFixedDropdown(input: UseFixedDropdownOptions): UseFixedDropdownReturn;
useHistoryfunctionSource ↗
export declare function useHistory(view: Ref<EditorView | null>, stateTick: Ref<number>): UseHistoryReturn;
export declare function useSelectionHighlight(options: UseSelectionHighlightOptions): UseSelectionHighlightReturn;
export declare function useTableResize(): UseTableResizeReturn;
export declare function useTableSelection(): UseTableSelectionReturn;
Pass the editor view ref + a stateTick that bumps on every PM transaction (the same tick the Toolbar listens to). The computed re-runs whenever the tick advances.
export declare function useTrackedChanges(view: Ref<EditorView | null>, stateTick: Ref<number>): import('vue').ComputedRef<TrackedChangesResult>;
export declare function useVisualLineNavigation(pagesContainer: Ref<HTMLElement | null>): UseVisualLineNavigationReturn;
export declare function useZoom(initialZoom?: number): UseZoomReturn;
export interface CommentSidebarItem
export interface DragAutoScrollOptions
| Member | Type | Summary |
|---|
| onScrollExtendSelection | (clientX: number, clientY: number) => void | Called during auto-scroll to extend the selection at the current mouse position. |
| pagesContainer | Ref<HTMLElement | null> | |
export interface FindReplaceOptions
| Member | Type | Summary |
|---|
| initialReplaceMode? | boolean | |
| onCurrentMatchChange? | (match: FindMatch | null, index: number) => void | |
| onMatchesChange? | (matches: FindMatch[]) => void | |
export interface FindReplaceState
| Member | Type | Summary |
|---|
| currentIndex | number | |
| isOpen | boolean | |
| matches | FindMatch[] | |
| options | FindOptions | |
| replaceMode | boolean | |
| replaceText | string | |
| searchText | string | |
export interface UseAutoSaveOptions
| Member | Type | Summary |
|---|
| debounceDelay? | number | Debounce delay for saveOnChange in milliseconds. |
| enabled? | boolean | Whether auto-save starts enabled (default: true). |
| interval? | number | Auto-save interval in ms (default: 30000) |
| maxAge? | number | Maximum age of auto-save before it is considered stale. |
| onError? | (error: Error) => void | Callback when save fails. |
| onRecoveryAvailable? | (savedDocument: SavedDocumentData) => void | Callback when recovery data is found. |
| onSave? | (timestamp: Date) => void | Callback when save succeeds. |
| saveOnChange? | boolean | Whether document changes trigger a debounced save. |
| storageKey? | string | localStorage key (default: 'docx-editor-autosave') |
export interface UseAutoSaveReturn
| Member | Type | Summary |
|---|
| acceptRecovery | () => Document | null | |
| clearAutoSave | () => void | |
| disable | () => void | |
| dismissRecovery | () => void | |
| enable | () => void | |
| getRecoveryData | () => SavedDocumentData | null | |
| hasRecoveryData | Ref<boolean> | |
| isEnabled | Ref<boolean> | |
| lastSaveTime | Ref<Date | null> | |
| save | () => Promise<boolean> | |
| status | Ref<AutoSaveStatus> | |
export interface UseClipboardOptions
| Member | Type | Summary |
|---|
| cleanWordFormatting? | boolean | |
| editable? | boolean | |
| onCopy? | (selection: ClipboardSelection) => void | |
| onCut? | (selection: ClipboardSelection) => void | |
| onError? | (error: Error) => void | |
| onPaste? | (content: ParsedClipboardContent, asPlainText: boolean) => void | |
| theme? | Theme | null | |
export interface UseClipboardReturn
| Member | Type | Summary |
|---|
| copy | (selection: ClipboardSelection) => Promise<boolean> | |
| cut | (selection: ClipboardSelection) => Promise<boolean> | |
| isProcessing | Ref<boolean> | |
| lastPastedContent | Ref<ParsedClipboardContent | null> | |
| paste | (asPlainText?: boolean) => Promise<ParsedClipboardContent | null> | |
export interface UseCommentSidebarItemsOptions
export interface UseDocxEditorOptions
| Member | Type | Summary |
|---|
| author? | MaybeRef<string> | Author name attached to tracked changes minted in suggesting mode. |
| editorMode? | MaybeRef<'editing' | 'suggesting' | 'viewing'> | Editor mode. When set to `'suggesting'`, the composable toggles the mounted suggestion-mode plugin's active state so typed text becomes tracked changes. Reactive — flip at runtime to switch modes. Mirrors React's `editingMode` prop wiring. |
| externalPlugins? | Plugin[] | External ProseMirror plugins supplied by the host app. |
| hiddenContainer | Ref<HTMLElement | null> | Container element for the hidden ProseMirror editor |
| onChange? | (doc: Document) => void | Callback on document change |
| onError? | (error: Error) => void | Callback on error |
| onSelectionUpdate? | () => void | Callback on selection change |
| pageGap? | number | Page gap in pixels |
| pagesContainer | Ref<HTMLElement | null> | Container element for the visible pages |
| readOnly? | MaybeRef<boolean> | Whether the editor is read-only |
| syncCoordinator? | LayoutSelectionGate | Coordinates layout updates with visible selection/decoration overlays. |
export interface UseDocxEditorReturn
| Member | Type | Summary |
|---|
| destroy | () => void | Destroy the editor view and clean up listeners. |
| documentFonts | Ref<FontOption[]> | Fonts the loaded document references that the browser can render (embedded faces + system-resolved), for the picker's "Document fonts" group. |
| editorState | ShallowRef<EditorState | null> | Latest editor state. Updated on each transaction. |
| editorView | ShallowRef<EditorView | null> | ProseMirror editor view (hidden). |
| focus | () => void | Focus the hidden ProseMirror view. |
| getCommands | () => CommandMap | Access the extension command map for invoking marks/nodes/features. |
| getDocument | () => Document | null | Snapshot the current document model. |
| getHfPmView | (hf: import('@eigenpal/docx-editor-core/types/document').HeaderFooter) => EditorView | null | Look up the persistent hidden HF EditorView for a HeaderFooter instance. The inline overlay and the click router use this to dispatch selection / focus on the same EditorView the painter reads. Returns null if the document is unloaded or no PM is mounted for the HF's `rId` (cold boot, or just-removed slot). |
| getHfPmViews | () => Map<string, EditorView> | Get all active header/footer EditorViews mapped by rId. |
| isReady | Ref<boolean> | True once the editor view has mounted and a document is loaded. |
| layout | ShallowRef<Layout | null> | Computed page layout. |
| loadBuffer | (buffer: ArrayBuffer | Uint8Array | Blob | File) => Promise<void> | Load a DOCX from a binary buffer. |
| loadDocument | (doc: Document) => void | Load a parsed `Document` directly. |
| parseError | Ref<string | null> | Last parse error message, or null if the most recent load succeeded. |
| reLayout | () => void | Force a re-layout without a doc change (e.g. after page-setup changes). |
| save | () => Promise<Blob | null> | Serialize the current document to a DOCX blob. |
| setDocument | (doc: Document) => void | Publish a fresh Document object (used by HF materialisation). |
| setHfTransactionListener | (cb: ((rId: string, view: EditorView, docChanged: boolean) => void) | null) => void | Subscribe to every HF transaction. `cb(rId, view)` fires after the EditorView's state has been updated. Used by the painted-HF caret overlay and HF UI chrome (toolbar selection sync). |
| syncHfPMs | () => void | Re-mount / tear down HF EditorViews to match the current document's `package.headers/footers`. Call this after the inline overlay saves back into `Document.package.headers` (the swap produces new HeaderFooter objects; new EditorViews need to point at the new objects). |
export interface UseDragAutoScrollReturn
| Member | Type | Summary |
|---|
| stopAutoScroll | () => void | |
| updateMousePosition | (clientX: number, clientY: number) => void | |
export interface UseFindReplaceReturn
| Member | Type | Summary |
|---|
| close | () => void | |
| currentMatch | ComputedRef<FindMatch | null> | |
| goToMatch | (index: number) => void | |
| goToNextMatch | () => number | |
| goToPreviousMatch | () => number | |
| hasMatches | ComputedRef<boolean> | |
| openFind | (selectedText?: string) => void | |
| openReplace | (selectedText?: string) => void | |
| setMatches | (matches: FindMatch[], currentIndex?: number) => void | |
| setOptions | (opts: Partial<FindOptions>) => void | |
| setReplaceText | (text: string) => void | |
| setSearchText | (text: string) => void | |
| state | FindReplaceState | |
| toggle | () => void | |
export interface UseFixedDropdownOptions
| Member | Type | Summary |
|---|
| align? | 'left' | 'right' | 'left' aligns dropdown left edge to trigger, 'right' aligns right edge. |
| isOpen | Ref<boolean> | |
| onClose | () => void | |
export interface UseFixedDropdownReturn
| Member | Type | Summary |
|---|
| containerRef | Ref<HTMLElement | null> | |
| dropdownRef | Ref<HTMLElement | null> | |
| dropdownStyle | Ref<CSSProperties> | |
| handleMouseDown | (e: MouseEvent) => void | |
UseHistoryReturninterfaceSource ↗
export interface UseHistoryReturn
| Member | Type | Summary |
|---|
| canRedo | ComputedRef<boolean> | |
| canUndo | ComputedRef<boolean> | |
| redo | () => boolean | |
| undo | () => boolean | |
export interface UseSelectionHighlightOptions
| Member | Type | Summary |
|---|
| config? | SelectionHighlightConfig | |
| containerRef | Ref<HTMLElement | null> | |
| debounceMs? | number | |
| enabled? | boolean | |
| onSelectionChange? | (hasSelection: boolean, text: string) => void | |
| useOverlay? | boolean | |
export interface UseSelectionHighlightReturn
| Member | Type | Summary |
|---|
| getOverlayStyle | (rect: HighlightRect) => CSSProperties | |
| hasSelection | ComputedRef<boolean> | |
| highlightRects | ComputedRef<HighlightRect[]> | |
| isSelectionInContainer | ComputedRef<boolean> | |
| refresh | () => void | |
| selectedText | ComputedRef<string> | |
export interface UseTableResizeReturn
| Member | Type | Summary |
|---|
| install | () => () => void | |
| isResizing | () => boolean | |
| tryStartResize | (e: MouseEvent, view: EditorView) => boolean | |
export interface UseTableSelectionReturn
| Member | Type | Summary |
|---|
| clearSelection | () => void | |
| handleCellClick | (tableIndex: number, rowIndex: number, columnIndex: number) => void | |
| handleClickTarget | (target: EventTarget | null, container?: HTMLElement | null) => void | |
| isCellSelected | (tableIndex: number, rowIndex: number, columnIndex: number) => boolean | |
| selectedCell | Ref<CellCoordinates | null> | |
export interface UseVisualLineNavigationReturn
| Member | Type | Summary |
|---|
| findLineElementAtPosition | (pmPos: number) => HTMLElement | null | |
| findPositionOnLineAtClientX | (line: HTMLElement, clientX: number) => number | null | |
| getCaretClientX | (pmPos: number) => number | null | |
| handlePMKeyDown | (view: EditorView, event: KeyboardEvent) => boolean | |
| state | ReturnType<typeof createVisualLineState> | |
export interface UseZoomReturn
| Member | Type | Summary |
|---|
| handleKeyDown | (e: KeyboardEvent) => void | |
| handleWheel | (e: WheelEvent) => void | |
| installShortcuts | () => void | |
| isMaxZoom | ComputedRef<boolean> | |
| isMinZoom | ComputedRef<boolean> | |
| resetZoom | () => void | |
| setZoom | (level: number) => void | |
| ZOOM_PRESETS | number[] | |
| zoom | Ref<number> | |
| zoomIn | () => void | |
| zoomOut | () => void | |
| zoomPercent | ComputedRef<number> | |