@eigenpal/docx-editor-vue
v1.8.3 · 6 published subpaths with full TypeScript signatures and JSDoc.
Subpaths
@eigenpal/docx-editor-vue/ui
UI entry point — toolbar primitives, pickers, dialogs. Mirrors `packages/react/src/ui.ts` so consumer code that imports `@eigenpal/docx-editor-react/ui { ColorPicker, FontPicker }` and swaps to `@eigenpal/docx-editor-vue/ui` works without surface changes.
@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.
@eigenpal/docx-editor-vue/dialogs
Modal dialog components — hyperlinks, find/replace, page setup, image properties, and keyboard shortcuts. Mirrors the React dialogs subpath.
@eigenpal/docx-editor-vue/plugin-api
Generic plugin interface and host component for integrating external plugins with the Vue editor. Pairs with the framework-agnostic plugin types exported from `@eigenpal/docx-editor-core/plugin-api`.
@eigenpal/docx-editor-vue/styles
CSS import path constant and shared layering tokens. Bring in the editor's base styles by importing `@eigenpal/docx-editor-vue/styles.css` directly; this module exists for tooling that prefers a JS-style import.
Package root
Framework-agnostic document utilities live in @eigenpal/docx-editor-core. Agent/MCP surfaces live in @eigenpal/docx-editor-agents.
Functions (3)
provideLocalefunctionSource ↗
Provide locale strings to descendant components. Call in a parent's setup():
provideLocale(myTranslations);
export declare function provideLocale(i18n?: MaybeRef<Translations | undefined>): void;renderAsyncfunctionSource ↗
Render a DOCX editor into a container element using Vue.
export declare function renderAsync(input: DocxInput, container: HTMLElement, options?: RenderAsyncOptions): Promise<DocxEditorHandle>;useTranslationfunctionSource ↗
useTranslation composable — returns t(key, vars?). Inject-based, so a provideLocale(...) call must sit above it in the component tree.
export declare function useTranslation(): {
t: TFunction;
};Interfaces (2)
DocxEditorHandleinterfaceSource ↗
Imperative handle returned by Vue renderAsync().
export interface DocxEditorHandle extends EditorHandle| Member | Type | Summary |
|---|---|---|
| scrollToParaId | (paraId: string, options?: ScrollToParaIdOptions) => boolean | Scroll to a body paragraph by Word `w14:paraId`. |
| scrollToPosition | (pmPos: number) => void | Scroll to a raw ProseMirror document position. |
| setZoom | (zoom: number) => void | Set zoom level (1.0 = 100%). |
DocxEditorPropsinterfaceSource ↗
Public props for the Vue editor component.
export interface DocxEditorProps| Member | Type | Summary |
|---|---|---|
| author? | string | Author name used for comments and tracked changes created in the UI. Defaults to `'User'`. |
| className? | string | Additional CSS class name on the editor root. |
| colorMode? | 'light' | 'dark' | 'system' | Color theme mode for UI styling. `'system'` follows the OS preference. |
| commentsSidebarOpen? | boolean | Controlled comments-sidebar visibility; source of truth when set. Pair with `onCommentsSidebarOpenChange`; omit for the default self-managed behavior. |
| disableFindReplaceShortcuts? | boolean | Disable Cmd/Ctrl+F and Cmd/Ctrl+H interception. |
| document? | Document | null | Pre-parsed document model, alternative to documentBuffer. |
| documentBuffer? | DocxInput | null | Document data — ArrayBuffer, Uint8Array, Blob, or File. |
| documentName? | string | Document name shown in the title bar. |
| documentNameEditable? | boolean | Whether the document name is editable. |
| externalPlugins? | Plugin[] | External ProseMirror plugins supplied by the host app. |
| fontFamilies? | ReadonlyArray<string | FontOption> | Custom list of fonts shown in the font-family dropdown. |
| fonts? | ReadonlyArray<FontDefinition> | Custom font faces to register before the editor measures text. Each entry injects an `@font-face` rule. Pass a URL (woff2/woff/ttf/otf), an ArrayBuffer, or omit `src` to load by name from Google Fonts. Multiple entries can share `family` to register different weights/styles. |
| i18n? | Translations | Translation overrides merged with English fallback. |
| initialZoom? | number | Initial zoom level. |
| mode? | EditorMode | Editor mode: direct editing, suggesting, or viewing. |
| onChange? | (document: Document) => void | Callback fired whenever the document changes. Mirrors the `@change` event. |
| onCommentAdd? | (comment: Comment) => void | Callback fired when a top-level comment is added via the UI. |
| onCommentDelete? | (comment: Comment) => void | Callback fired when a comment (and its replies) is deleted via the UI. |
| onCommentReply? | (reply: Comment, parent: Comment) => void | Callback fired when a reply is added to a comment via the UI. |
| onCommentResolve? | (comment: Comment) => void | Callback fired when a comment is resolved via the UI. Receives the comment with `done: true`. |
| onCommentsChange? | (comments: Comment[]) => void | Callback fired with the full comment array whenever it changes (add/reply/resolve/delete). |
| onCommentsSidebarOpenChange? | (open: boolean) => void | Fires with the next open state whenever the editor wants to show or hide the comments sidebar. Fires in both controlled and uncontrolled modes. |
| onDocumentNameChange? | (name: string) => void | Callback when the document name changes. |
| onEditorViewReady? | (view: EditorView) => void | Callback fired once the underlying ProseMirror EditorView is ready. |
| onError? | (error: Error) => void | Callback fired when the editor errors (parse/layout/font). Mirrors the `@error` event. |
| onModeChange? | (mode: EditorMode) => void | Callback when the editing mode changes. |
| onOpen? | (file: File) => void | Promise<void> | Callback when a DOCX file is selected through `File > Open` or Cmd/Ctrl+O. Pass it to route the picked file through your own import pipeline. Omit it to keep the built-in local document load behavior. |
| onPrint? | () => void | Callback fired when the print action is triggered. Pass it to enable the `File > Print` menu entry; omit to hide. The `editor.print()` ref method also invokes this callback. |
| onSelectionChange? | (state: SelectionState | null) => void | Callback fired when the selection changes, with the current selection state (or null). |
| readOnly? | boolean | Whether the editor is read-only. |
| renderLogo? | () => VNodeChild | Custom logo/icon renderer for the title bar. Slots remain preferred in templates. |
| renderTitleBarRight? | () => VNodeChild | Custom right-side actions renderer for the title bar. Slots remain preferred in templates. |
| showFileOpen? | boolean | Whether to show `File > Open` and enable Cmd/Ctrl+O (default: true). Set false when you provide your own open action elsewhere. |
| showHelpMenu? | boolean | Whether to show the Help menu in the menu bar (default: true). |
| showMenuBar? | boolean | Whether to show the title/menu bar. Vue-only chrome toggle. |
| showOutline? | boolean | Whether to show the document outline panel initially. |
| showOutlineButton? | boolean | Whether to show the floating outline toggle button. |
| showRuler? | boolean | Whether to show page rulers. |
| showToolbar? | boolean | Whether to show the main formatting toolbar. |
| showZoomControl? | boolean | Whether to show the zoom controls in the toolbar. |
| style? | StyleValue | Additional inline styles on the editor root. |
| theme? | Theme | null | Theme override used for toolbar color palettes when the document has no theme. |
| toolbarExtra? | () => VNodeChild | Custom toolbar content appended after the built-in controls. |
| watermarkPresets? | readonly string[] | Text-watermark presets shown in the watermark dialog's preset dropdown. Omit to use the built-in MS Word phrases (`DEFAULT_WATERMARK_PRESETS`). Pass an empty array to hide the preset dropdown. |
Type aliases (3)
DocxEditorReftypeSource ↗
Public ref shape for <DocxEditor>. Exposes the full editor-scope EditorRefLike contract so the agent bridge can attach to either React or Vue without an adapter shim.
export type DocxEditorRef = EditorRefLike & {
getAgent(): null;
save(): Promise<ArrayBuffer | null>;
setZoom(zoom: number): void;
getZoom(): number;
focus(): void;
scrollToParaId(paraId: string, options?: ScrollToParaIdOptions): boolean;
scrollToPage(pageNumber: number): void;
scrollToPosition(pmPos: number): void;
scrollToCommentId(commentId: number): boolean;
scrollToChangeId(revisionId: number): boolean;
highlightRange(from: number, to: number): void;
openPrintPreview(): void;
print(): void;
loadDocument(doc: Document): void;
loadDocumentBuffer(buffer: DocxInput): Promise<void>;
destroy(): void;
getContentControls(filter?: ContentControlFilter): PMContentControl[];
scrollToContentControl(filter: ContentControlFilter): boolean;
setContentControlContent(filter: ContentControlFilter, text: string, options?: {
force?: boolean;
}): boolean;
removeContentControl(filter: ContentControlFilter, options?: {
force?: boolean;
keepContent?: boolean;
}): boolean;
setContentControlValue(filter: ContentControlFilter, value: ContentControlValue, options?: {
force?: boolean;
}): boolean;
};EditorModetypeSource ↗
export type EditorMode = 'editing' | 'suggesting' | 'viewing';RenderAsyncOptionstypeSource ↗
Options for renderAsync.
export type RenderAsyncOptions = Omit<DocxEditorProps, 'documentBuffer' | 'document'> & {
onReady?: () => void;
onError?: (error: Error) => void;
onChange?: (document: Document) => void;
onRename?: (name: string) => void;
onMenuAction?: (action: string) => void;
onModeChange?: (mode: EditorMode) => void;
};Variables (2)
i18nPluginconstSource ↗
Vue plugin for i18n. Install via app.use(i18nPlugin, translations).
i18nPlugin: {
install(app: App, i18n?: Translations): void;
}VERSIONconstSource ↗
eigenpal/docx-editor-vue
Curated root entry for the documented Vue 3 editor API. Advanced surfaces stay public through explicit subpaths: - @eigenpal/docx-editor-vue/ui - @eigenpal/docx-editor-vue/dialogs - @eigenpal/docx-editor-vue/composables - @eigenpal/docx-editor-vue/plugin-api
Framework-agnostic document utilities live in @eigenpal/docx-editor-core. Agent/MCP surfaces live in @eigenpal/docx-editor-agents.
VERSION = "0.0.2"