@eigenpal/docx-editor-vue
Subpaths
@eigenpal/docx-editor-vue/ui
UI entry point — toolbar primitives, pickers, dialogs. Mirrors
packages/react/src/ui.tsso consumer code that imports@eigenpal/docx-editor-react/ui { ColorPicker, FontPicker }and swaps to@eigenpal/docx-editor-vue/uiworks without surface changes.@eigenpal/docx-editor-vue/composables
Vue composables mirroring the React
hookssubpath — history, table selection, find/replace, autosave, clipboard, zoom, and the high-leveluseDocxEditorhost 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.cssdirectly; this module exists for tooling that prefers a JS-style import.
Package root: @eigenpal/docx-editor-vue
Functions(3)
provideLocale
Provide locale strings to descendant components. Call in a parent's `setup()`:
provideLocale(myTranslations);
export declare function provideLocale(i18n?: MaybeRef<Translations | undefined>): void;renderAsync
Render a DOCX editor into a container element using Vue.
export declare function renderAsync(input: DocxInput, container: HTMLElement, options?: RenderAsyncOptions): Promise<DocxEditorHandle>;useTranslation
`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)
DocxEditorHandle
Imperative handle returned by Vue `renderAsync()`.
export interface DocxEditorHandle extends EditorHandle| Member | Type | Summary |
|---|---|---|
| scrollToParaId | (paraId: string) => 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%). |
DocxEditorProps
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. |
| 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). |
| 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. |
| 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. |
| 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. |
Type aliases(3)
DocxEditorRef
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;
scrollToPage(pageNumber: number): void;
scrollToPosition(pmPos: 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;
};EditorMode
export type EditorMode = 'editing' | 'suggesting' | 'viewing';RenderAsyncOptions
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)
i18nPlugin
Vue plugin for i18n. Install via `app.use(i18nPlugin, translations)`.
i18nPlugin: {
install(app: App, i18n?: Translations): void;
}VERSION
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"