docx-vue-viewer 0.6.0 → 1.0.1

package/README.md

@@ -56,6 +56,10 @@ are available from the package. Framework handles expose `load`, `save` and
 framework-free lifecycle management. ProseMirror, `docx-core`, `ooxml-core` and `ooxml-ui` are regular
 dependencies; document and layout algorithms live in OOXML core.
 
+## Custom editor UI
+
+To render only the controls you use, with your own design system, use the building blocks. `useViewerBuildingBlocks` returns `canvasProps` for `DocumentCanvas` plus flat `toolbarProps`, `navigationProps` and `statusProps`; the optional `Toolbar`, `PageNavigation` and `StatusBar` components consume them. The surface is read-only until you pass `canEdit: true`; a read-only surface still allows selection, keyboard navigation and copy. Hosts that relied on the former editable default must now pass `canEdit: true`. See [Building blocks](https://christophervr.github.io/ooxml/docx/building-blocks).
+
 ## Limitations
 
 This is an early editor. It does not establish Microsoft Word layout parity or

package/dist/index.d.ts

@@ -2,9 +2,9 @@ import * as vue from 'vue';
 import { PropType, MaybeRefOrGetter } from 'vue';
 import { DocumentModel } from 'docx-core';
 export * from 'docx-core';
-import { EditorThemeMode, RibbonActionInput, RibbonAddInTab, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail, DocxEditorElement, WordToolbarProps } from 'ooxml-ui/docx';
+import { EditorThemeMode, RibbonActionInput, RibbonAddInTab, DocxCollaborationOptions, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail, DocxCollaborationState, SurfaceHostActions, DocxEditorElement, WordListState, WordAlignment, WordListChoice, WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
 export * from 'ooxml-ui/docx';
-export { WordToolbarProps } from 'ooxml-ui/docx';
+export { WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
 export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/docx/load';
 
 declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -19,9 +19,10 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     hiddenActions: PropType<readonly RibbonActionInput[]>;
     ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
+    collaboration: PropType<DocxCollaborationOptions | null>;
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("document-change" | "document-error" | "page-change" | "dirty-change" | "office-ribbon-add-in")[], "document-change" | "document-error" | "page-change" | "dirty-change" | "office-ribbon-add-in", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("document-change" | "document-error" | "page-change" | "dirty-change" | "collaboration-change" | "office-ribbon-add-in")[], "document-change" | "document-error" | "page-change" | "dirty-change" | "collaboration-change" | "office-ribbon-add-in", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     documentModel: PropType<DocumentModel>;
     readOnly: BooleanConstructor;
     locale: StringConstructor;
@@ -33,11 +34,13 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     };
     hiddenActions: PropType<readonly RibbonActionInput[]>;
     ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
+    collaboration: PropType<DocxCollaborationOptions | null>;
 }>> & Readonly<{
     "onDocument-change"?: (...args: any[]) => any;
     "onDocument-error"?: (...args: any[]) => any;
     "onPage-change"?: (...args: any[]) => any;
     "onDirty-change"?: (...args: any[]) => any;
+    "onCollaboration-change"?: (...args: any[]) => any;
     "onOffice-ribbon-add-in"?: (...args: any[]) => any;
 }>, {
     readOnly: boolean;
@@ -61,6 +64,11 @@ interface EditorProps {
     hiddenActions?: readonly RibbonActionInput[] | undefined;
     /** Tabs the host adds after Word's own, as an Office add-in does. */
     ribbonAddIns?: readonly RibbonAddInTab[] | undefined;
+    /**
+     * Shares the loaded document in a room while set; `null` leaves (see `DocxCollaborationOptions`).
+     * Forwarded only when the object changes, so pass a stable object, not a new literal per render.
+     */
+    collaboration?: DocxCollaborationOptions | null | undefined;
 }
 /** Editor callbacks; each is the framework-neutral form of one entry in `EDITOR_EVENT_NAMES`. */
 interface EditorEventOptions {
@@ -70,6 +78,8 @@ interface EditorEventOptions {
     onDirtyChange?: ((dirty: boolean) => void) | undefined;
     /** A command of a host tab (`ribbonAddIns`) was chosen. */
     onRibbonAddIn?: ((detail: RibbonAddInCommandDetail) => void) | undefined;
+    /** Sharing started, stopped, reconnected or the people in the room changed. */
+    onCollaborationChange?: ((state: DocxCollaborationState) => void) | undefined;
 }
 interface EditorOptions extends EditorProps, EditorEventOptions {
 }
@@ -87,18 +97,35 @@ interface EditorBinding extends EditorHandle {
     update(options: EditorOptions): void;
     destroy(): void;
 }
-/** Framework-neutral composition API, shared by every adapter. Choose before mount. */
-interface SurfaceOptions extends EditorOptions {
+/** Ribbon and chrome options that a surface, which draws none, would silently ignore. */
+type RibbonOnlyOption = 'showToolbar' | 'showThumbnails' | 'hiddenActions' | 'ribbonAddIns' | 'onRibbonAddIn';
+/**
+ * Framework-neutral composition API, shared by every adapter. Choose before mount. Ribbon-only
+ * options are not part of it. The `onOpen...` callbacks are the host's own dialogs: a workflow
+ * without its callback reports as not enabled.
+ */
+interface SurfaceOptions extends Omit<EditorOptions, RibbonOnlyOption>, SurfaceHostActions {
     canEdit?: boolean | undefined;
 }
 declare function mountEditorSurface(host: HTMLElement, initial?: SurfaceOptions): EditorBinding & {
     update: (options: SurfaceOptions) => void;
     getToolbarProps: () => {
+        hostWorkflows: {
+            hyperlink: boolean;
+            findReplace: boolean;
+            picture: boolean;
+        };
+        canInsertLink: boolean;
+        canFindReplace: boolean;
+        canInsertPicture: boolean;
+        openHyperlinkDialog: () => boolean;
+        openFindReplace: () => boolean;
+        openImagePicker: () => boolean;
         labels: {
             [k: string]: string;
         };
         canEdit: boolean;
-        list: "bullet" | "decimal" | "other" | null;
+        list: WordListState;
         selection: {
             from: number;
             to: number;
@@ -108,7 +135,7 @@ declare function mountEditorSurface(host: HTMLElement, initial?: SurfaceOptions)
         underline: boolean | null;
         fontFamily: string | null;
         fontSize: number | null;
-        alignment: string | null;
+        alignment: WordAlignment | null;
         canUndo: boolean;
         canRedo: boolean;
         onBold: () => boolean;
@@ -116,11 +143,36 @@ declare function mountEditorSurface(host: HTMLElement, initial?: SurfaceOptions)
         onUnderline: () => boolean;
         onFontFamilyChange: (family: string) => boolean;
         onFontSizeChange: (size: number) => boolean;
-        onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
-        onListChange: (kind: "bullet" | "number" | "remove") => boolean;
+        onAlignmentChange: (alignment: WordAlignment) => boolean;
+        onListChange: (kind: WordListChoice | "remove") => boolean;
         onUndo: () => boolean;
         onRedo: () => boolean;
     };
+    getNavigationProps: () => {
+        labels: Record<string, string>;
+        viewMode: "draft" | "print";
+        pagesAvailable: boolean;
+        page: number;
+        pageCount: number;
+        pageText: string;
+        canGoPrevious: boolean;
+        canGoNext: boolean;
+        onGoToPage: (target: number) => boolean;
+        onPreviousPage: () => boolean;
+        onNextPage: () => boolean;
+        onViewModeChange: (mode: "draft" | "print") => boolean;
+    };
+    getStatusProps: () => {
+        labels: Record<string, string>;
+        words: number;
+        wordText: string;
+        zoom: number;
+        minZoom: number;
+        maxZoom: number;
+        onZoomChange: (percent: number) => boolean;
+        onZoomIn: () => boolean;
+        onZoomOut: () => boolean;
+    };
     subscribe: (listener: () => void) => () => void;
 };
 
@@ -138,11 +190,22 @@ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBloc
     };
     handle: EditorHandle;
     toolbarProps: vue.ComputedRef<{
+        hostWorkflows: {
+            hyperlink: boolean;
+            findReplace: boolean;
+            picture: boolean;
+        };
+        canInsertLink: boolean;
+        canFindReplace: boolean;
+        canInsertPicture: boolean;
+        openHyperlinkDialog: () => boolean;
+        openFindReplace: () => boolean;
+        openImagePicker: () => boolean;
         labels: {
             [k: string]: string;
         };
         canEdit: boolean;
-        list: "bullet" | "decimal" | "other" | null;
+        list: WordListState;
         selection: {
             from: number;
             to: number;
@@ -152,7 +215,7 @@ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBloc
         underline: boolean | null;
         fontFamily: string | null;
         fontSize: number | null;
-        alignment: string | null;
+        alignment: WordAlignment | null;
         canUndo: boolean;
         canRedo: boolean;
         onBold: () => boolean;
@@ -160,11 +223,36 @@ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBloc
         onUnderline: () => boolean;
         onFontFamilyChange: (family: string) => boolean;
         onFontSizeChange: (size: number) => boolean;
-        onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
-        onListChange: (kind: "bullet" | "number" | "remove") => boolean;
+        onAlignmentChange: (alignment: WordAlignment) => boolean;
+        onListChange: (kind: WordListChoice | "remove") => boolean;
         onUndo: () => boolean;
         onRedo: () => boolean;
     } | null>;
+    navigationProps: vue.ComputedRef<{
+        labels: Record<string, string>;
+        viewMode: "draft" | "print";
+        pagesAvailable: boolean;
+        page: number;
+        pageCount: number;
+        pageText: string;
+        canGoPrevious: boolean;
+        canGoNext: boolean;
+        onGoToPage: (target: number) => boolean;
+        onPreviousPage: () => boolean;
+        onNextPage: () => boolean;
+        onViewModeChange: (mode: "draft" | "print") => boolean;
+    } | null>;
+    statusProps: vue.ComputedRef<{
+        labels: Record<string, string>;
+        words: number;
+        wordText: string;
+        zoom: number;
+        minZoom: number;
+        maxZoom: number;
+        onZoomChange: (percent: number) => boolean;
+        onZoomIn: () => boolean;
+        onZoomOut: () => boolean;
+    } | null>;
     loading: vue.ComputedRef<boolean>;
     error: vue.ComputedRef<Error | null>;
     mode: vue.ComputedRef<"view" | "edit">;
@@ -182,6 +270,7 @@ declare const DocumentCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Optional controls: history, font, formatting, alignment, lists and enabled host workflows. */
 declare const Toolbar: vue.DefineComponent<vue.ExtractPropTypes<{
     toolbarProps: {
         type: PropType<WordToolbarProps>;
@@ -195,6 +284,34 @@ declare const Toolbar: vue.DefineComponent<vue.ExtractPropTypes<{
         required: true;
     };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Optional page navigation for `navigationProps`. Pages exist in Print Layout only. */
+declare const PageNavigation: vue.DefineComponent<vue.ExtractPropTypes<{
+    navigationProps: {
+        type: PropType<WordNavigationProps>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    navigationProps: {
+        type: PropType<WordNavigationProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+/** Optional word count and zoom for `statusProps`. */
+declare const StatusBar: vue.DefineComponent<vue.ExtractPropTypes<{
+    statusProps: {
+        type: PropType<WordStatusProps>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    statusProps: {
+        type: PropType<WordStatusProps>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { DocumentCanvas, Toolbar, WordEditor, mountEditorSurface, useViewerBuildingBlocks };
+export { DocumentCanvas, PageNavigation, StatusBar, Toolbar, WordEditor, mountEditorSurface, useViewerBuildingBlocks };
 export type { BuildingBlockOptions, CanvasProps, EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps, SurfaceOptions };

package/dist/index.js

@@ -30,13 +30,15 @@ var C = [
 	"showThumbnails",
 	"showToolbar",
 	"hiddenActions",
-	"ribbonAddIns"
+	"ribbonAddIns",
+	"collaboration"
 ], w = [
 	"document-change",
 	"document-error",
 	"page-change",
 	"dirty-change",
-	"office-ribbon-add-in"
+	"office-ribbon-add-in",
+	"collaboration-change"
 ];
 function T(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
@@ -55,7 +57,8 @@ function O(e) {
 		onDocumentError: e["document-error"],
 		onPageChange: e["page-change"],
 		onDirtyChange: e["dirty-change"],
-		onRibbonAddIn: e["office-ribbon-add-in"]
+		onRibbonAddIn: e["office-ribbon-add-in"],
+		onCollaborationChange: e["collaboration-change"]
 	};
 }
 function k(e, t = {}, n = !1) {
@@ -63,14 +66,14 @@ function k(e, t = {}, n = !1) {
 	let r = e.ownerDocument.createElement("docx-editor");
 	if (n && typeof r.getToolbarProps != "function") throw Error("Update ooxml-ui to use editor building blocks.");
 	r.surfaceOnly = n;
-	let i = {}, a, o, s, c = !1, l = (e) => {
+	let i = {}, a, o, s, c = null, l = !1, u = (e) => {
 		o = e.detail, i.onDocumentChange?.(o);
-	}, u = (e) => i.onDocumentError?.(e.detail), d = (e) => i.onPageChange?.(e.detail), f = (e) => i.onDirtyChange?.(e.detail), p = (e) => i.onRibbonAddIn?.(e.detail);
-	r.addEventListener("document-change", l), r.addEventListener("document-error", u), r.addEventListener("page-change", d), r.addEventListener("dirty-change", f), r.addEventListener("office-ribbon-add-in", p);
-	let m = {
+	}, d = (e) => i.onDocumentError?.(e.detail), f = (e) => i.onPageChange?.(e.detail), p = (e) => i.onDirtyChange?.(e.detail), m = (e) => i.onRibbonAddIn?.(e.detail), h = (e) => i.onCollaborationChange?.(e.detail);
+	r.addEventListener("document-change", u), r.addEventListener("document-error", d), r.addEventListener("page-change", f), r.addEventListener("dirty-change", p), r.addEventListener("office-ribbon-add-in", m), r.addEventListener("collaboration-change", h);
+	let g = {
 		element: r,
 		update(e) {
-			c || (i = e, r.locale = e.locale ?? "en", r.readOnly = e.readOnly ?? !1, r.theme = e.theme ?? "auto", r.showThumbnails = e.showThumbnails ?? !1, r.showToolbar = e.showToolbar ?? !0, T(r.hiddenActions, (0, x.normalizeRibbonActions)(e.hiddenActions ?? []).ids) || (r.hiddenActions = e.hiddenActions ?? []), e.ribbonAddIns !== s && (r.ribbonAddIns = e.ribbonAddIns ?? []), s = e.ribbonAddIns, e.documentModel && e.documentModel !== a && e.documentModel !== o && (r.documentModel = e.documentModel), a = e.documentModel);
+			l || (i = e, r.locale = e.locale ?? "en", r.readOnly = e.readOnly ?? !1, r.theme = e.theme ?? "auto", r.showThumbnails = e.showThumbnails ?? !1, r.showToolbar = e.showToolbar ?? !0, T(r.hiddenActions, (0, x.normalizeRibbonActions)(e.hiddenActions ?? []).ids) || (r.hiddenActions = e.hiddenActions ?? []), e.ribbonAddIns !== s && (r.ribbonAddIns = e.ribbonAddIns ?? []), s = e.ribbonAddIns, (e.collaboration ?? null) !== c && (c = e.collaboration ?? null, r.collaboration = c), e.documentModel && e.documentModel !== a && e.documentModel !== o && (r.documentModel = e.documentModel), a = e.documentModel);
 		},
 		load: (e) => r.load(e),
 		save: () => r.save(),
@@ -80,20 +83,31 @@ function k(e, t = {}, n = !1) {
 			return r.dirty;
 		},
 		destroy() {
-			c || (c = !0, r.removeEventListener("document-change", l), r.removeEventListener("document-error", u), r.removeEventListener("page-change", d), r.removeEventListener("dirty-change", f), r.removeEventListener("office-ribbon-add-in", p), r.remove());
+			l || (l = !0, r.removeEventListener("document-change", u), r.removeEventListener("document-error", d), r.removeEventListener("page-change", f), r.removeEventListener("dirty-change", p), r.removeEventListener("office-ribbon-add-in", m), c && r.stopCollaboration(), r.removeEventListener("collaboration-change", h), r.remove());
 		}
 	};
-	return m.update(t), e.append(r), m;
+	return g.update(t), e.append(r), g;
 }
 function A(e, t = {}) {
 	let n = (e) => ({
 		...e,
-		readOnly: e.canEdit === !1 || e.readOnly === !0
-	}), r = k(e, n(t), !0), i = r.update;
-	return Object.assign(r, {
-		update: (e) => i(n(e)),
-		getToolbarProps: () => r.element.getToolbarProps(),
-		subscribe: (e) => r.element.subscribeEditorState(e)
+		readOnly: e.canEdit !== !0 || e.readOnly === !0
+	}), r = (e) => ({
+		...e.onOpenHyperlinkDialog && { onOpenHyperlinkDialog: e.onOpenHyperlinkDialog },
+		...e.onOpenFindReplace && { onOpenFindReplace: e.onOpenFindReplace },
+		...e.onOpenImagePicker && { onOpenImagePicker: e.onOpenImagePicker }
+	}), i = k(e, n(t), !0), a = i.update, o = (e) => {
+		let t = r(e), n = i.element.surfaceActions;
+		[.../* @__PURE__ */ new Set([...Object.keys(n), ...Object.keys(t)])].some((e) => n[e] !== t[e]) && (i.element.surfaceActions = t);
+	};
+	return o(t), Object.assign(i, {
+		update: (e) => {
+			a(n(e)), o(e);
+		},
+		getToolbarProps: () => i.element.getToolbarProps(),
+		getNavigationProps: () => i.element.getNavigationProps(),
+		getStatusProps: () => i.element.getStatusProps(),
+		subscribe: (e) => i.element.subscribeEditorState(e)
 	});
 }
 //#endregion
@@ -111,7 +125,8 @@ var j = t({
 			default: !0
 		},
 		hiddenActions: Array,
-		ribbonAddIns: Array
+		ribbonAddIns: Array,
+		collaboration: Object
 	},
 	emits: [...w],
 	setup(e, { emit: t, expose: a }) {
@@ -122,7 +137,8 @@ var j = t({
 				"document-error": (e) => t("document-error", e),
 				"page-change": (e) => t("page-change", e),
 				"dirty-change": (e) => t("dirty-change", e),
-				"office-ribbon-add-in": (e) => t("office-ribbon-add-in", e)
+				"office-ribbon-add-in": (e) => t("office-ribbon-add-in", e),
+				"collaboration-change": (e) => t("collaboration-change", e)
 			})
 		});
 		return i(() => {
@@ -160,75 +176,85 @@ b(M, x);
 //#endregion
 //#region packages/bindings/src/building-blocks.ts
 function N(e = {}) {
-	let t = e, n, r, i, a = 0, o = null, s = {
+	let t = e, n, r, i, a = 0, o = null, s, c = {
 		toolbarProps: null,
+		navigationProps: null,
+		statusProps: null,
 		loading: !1,
 		error: null,
-		mode: "edit"
-	}, c = /* @__PURE__ */ new Set(), l = (e) => {
-		s = {
-			...s,
+		mode: "view"
+	}, l = /* @__PURE__ */ new Set(), u = (e) => {
+		let n = {
+			...c,
 			...e,
-			mode: t.canEdit === !1 || t.readOnly ? "view" : "edit"
+			mode: t.canEdit !== !0 || t.readOnly ? "view" : "edit"
 		};
-		for (let e of c) e(s);
-	}, u = () => l({
-		toolbarProps: n?.getToolbarProps() ?? null,
-		loading: n?.element.loading ?? !1,
-		...n?.element.loading ? { error: null } : {}
-	}), d = () => ({
+		if (!Object.keys(n).every((e) => n[e] === c[e])) {
+			c = n;
+			for (let e of l) e(c);
+		}
+	}, d = (e, t, n) => e && t && n && JSON.stringify(e) === JSON.stringify(t) ? e : t, f = () => {
+		let e = n?.element ?? null, t = s === e;
+		s = e, u({
+			toolbarProps: d(c.toolbarProps, n?.getToolbarProps() ?? null, t),
+			navigationProps: d(c.navigationProps, n?.getNavigationProps() ?? null, t),
+			statusProps: d(c.statusProps, n?.getStatusProps() ?? null, t),
+			loading: n?.element.loading ?? !1,
+			...n?.element.loading ? { error: null } : {}
+		});
+	}, p = () => ({
 		...t,
 		onDocumentError: (e) => {
-			l({ error: e }), t.onDocumentError?.(e);
+			u({ error: e }), t.onDocumentError?.(e);
 		}
-	}), f = () => {
+	}), m = () => {
 		if (!n) throw Error("Editor is not mounted");
 		return n;
-	}, p = async (e) => {
-		let t = f(), r = ++a;
-		l({
+	}, h = async (e) => {
+		let t = m(), r = ++a;
+		u({
 			loading: !0,
 			error: null
 		});
 		try {
 			await t.load(e);
 		} catch (e) {
-			throw r === a && n === t && l({ error: e instanceof Error ? e : Error(String(e)) }), e;
+			throw r === a && n === t && u({ error: e instanceof Error ? e : Error(String(e)) }), e;
 		} finally {
-			r === a && n === t && u();
+			r === a && n === t && f();
 		}
-	}, m = () => {
-		n && t.bytes && i !== t.bytes && (i = t.bytes, p(t.bytes).catch(() => {}));
-	}, h = (e) => {
-		e !== o && (o = e, ++a, r?.(), r = void 0, n?.destroy(), n = void 0, i = void 0, e && (n = A(e, d()), r = n.subscribe(u)), u(), m());
+	}, g = () => {
+		n && t.bytes && i !== t.bytes && (i = t.bytes, h(t.bytes).catch(() => {}));
+	}, _ = (e) => {
+		e !== o && (o = e, ++a, r?.(), r = void 0, n?.destroy(), n = void 0, i = void 0, e && (n = A(e, p()), r = n.subscribe(f)), f(), g());
 	};
 	return {
-		canvasProps: { mount: h },
+		canvasProps: { mount: _ },
 		handle: {
 			get element() {
-				return f().element;
+				return m().element;
 			},
-			load: p,
-			save: () => f().save(),
-			download: (e) => f().download(e),
-			markClean: () => f().markClean(),
+			load: h,
+			save: () => m().save(),
+			download: (e) => m().download(e),
+			markClean: () => m().markClean(),
 			get dirty() {
 				return n?.dirty ?? !1;
 			}
 		},
 		get state() {
-			return s;
+			return c;
 		},
 		subscribe(e) {
-			return c.add(e), e(s), () => {
-				c.delete(e);
+			return l.add(e), e(c), () => {
+				l.delete(e);
 			};
 		},
 		update(e) {
-			t.documentModel !== e.documentModel && l({ error: null }), t = e, n?.update(d()), u(), m();
+			t.documentModel !== e.documentModel && u({ error: null }), t = e, n?.update(p()), f(), g();
 		},
 		destroy() {
-			h(null), c.clear();
+			_(null), l.clear();
 		}
 	};
 }
@@ -238,8 +264,176 @@ function P(e) {
 	typeof t == "function" ? t(e, "toolbar", "docx") : (p.installOfficeUiTheme(e.ownerDocument), e.setAttribute("data-office-block", "toolbar"), e.setAttribute("data-office-product", "docx"));
 }
 //#endregion
+//#region packages/bindings/src/controls.ts
+var F = [
+	"Calibri",
+	"Arial",
+	"Cambria",
+	"Courier New",
+	"Georgia",
+	"Segoe UI",
+	"Times New Roman",
+	"Verdana"
+], I = [
+	8,
+	9,
+	10,
+	11,
+	12,
+	14,
+	16,
+	18,
+	20,
+	24,
+	28,
+	36,
+	48,
+	72
+], L = [
+	50,
+	75,
+	100,
+	125,
+	150,
+	200
+];
+function R(e, t) {
+	let n = typeof e[0] == "number", r = (t === null || e.includes(t) ? [...e] : [...e, t]).map(String).sort((e, t) => n ? Number(e) - Number(t) : e.localeCompare(t)).map((e) => ({
+		value: e,
+		label: e
+	}));
+	return t === null ? [{
+		value: "",
+		label: ""
+	}, ...r] : r;
+}
+var z = (e, t) => e[t] ?? t;
+function B(e) {
+	let { labels: t } = e, n = !e.canEdit, r = (e, r, i, a) => ({
+		kind: "toggle",
+		id: e,
+		label: z(t, r),
+		disabled: n,
+		pressed: i === null ? "mixed" : i,
+		run: () => void a()
+	}), i = (e, n, r, i) => ({
+		kind: "action",
+		id: e,
+		label: z(t, n),
+		disabled: r,
+		run: () => void i()
+	}), a = (r, i, a) => ({
+		kind: "toggle",
+		id: r,
+		label: z(t, i),
+		disabled: n,
+		pressed: e.alignment === null ? "mixed" : e.alignment === a,
+		run: () => void e.onAlignmentChange(a)
+	}), o = (r, i, a) => ({
+		kind: "toggle",
+		id: r,
+		label: z(t, i),
+		disabled: n,
+		pressed: e.list === a,
+		run: () => void e.onListChange(e.list === a ? "remove" : a)
+	}), s = [
+		[i("undo", "Undo", !e.canUndo, e.onUndo), i("redo", "Redo", !e.canRedo, e.onRedo)],
+		[{
+			kind: "select",
+			id: "fontFamily",
+			label: z(t, "Font"),
+			disabled: n,
+			value: e.fontFamily ?? "",
+			options: R(F, e.fontFamily),
+			change: (t) => void e.onFontFamilyChange(t)
+		}, {
+			kind: "select",
+			id: "fontSize",
+			label: z(t, "Font size"),
+			disabled: n,
+			value: e.fontSize === null ? "" : String(e.fontSize),
+			options: R(I, e.fontSize),
+			change: (t) => void e.onFontSizeChange(Number(t))
+		}],
+		[
+			r("bold", "Bold", e.bold, e.onBold),
+			r("italic", "Italic", e.italic, e.onItalic),
+			r("underline", "Underline", e.underline, e.onUnderline)
+		],
+		[
+			a("alignLeft", "Align left", "left"),
+			a("alignCenter", "Align center", "center"),
+			a("alignRight", "Align right", "right"),
+			a("alignJustify", "Justify", "justify")
+		],
+		[o("bulletList", "Bulleted list", "bullet"), o("numberList", "Numbered list", "number")]
+	], c = [], { hyperlink: l, findReplace: u, picture: d } = e.hostWorkflows;
+	return l && c.push(i("link", "Insert link", !e.canInsertLink, e.openHyperlinkDialog)), u && c.push(i("find", "Find", !e.canFindReplace, e.openFindReplace)), d && c.push(i("picture", "Insert picture", !e.canInsertPicture, e.openImagePicker)), c.length && s.push(c), s;
+}
+function V(e) {
+	let { labels: t } = e;
+	return [[
+		{
+			kind: "action",
+			id: "previousPage",
+			label: z(t, "Previous page"),
+			disabled: !e.canGoPrevious,
+			run: () => void e.onPreviousPage()
+		},
+		{
+			kind: "text",
+			id: "pageText",
+			label: "",
+			text: e.pageText,
+			disabled: !1
+		},
+		{
+			kind: "action",
+			id: "nextPage",
+			label: z(t, "Next page"),
+			disabled: !e.canGoNext,
+			run: () => void e.onNextPage()
+		}
+	], [{
+		kind: "select",
+		id: "viewMode",
+		label: z(t, "Layout view"),
+		disabled: !1,
+		value: e.viewMode,
+		options: [{
+			value: "draft",
+			label: z(t, "Draft")
+		}, {
+			value: "print",
+			label: z(t, "Print Layout")
+		}],
+		change: (t) => void e.onViewModeChange(t === "print" ? "print" : "draft")
+	}]];
+}
+function H(e) {
+	let t = R(L, e.zoom).map((e) => ({
+		value: e.value,
+		label: `${e.label}%`
+	}));
+	return [[{
+		kind: "text",
+		id: "wordText",
+		label: "",
+		text: e.wordText,
+		disabled: !1
+	}], [{
+		kind: "select",
+		id: "zoom",
+		label: z(e.labels, "Zoom"),
+		disabled: !1,
+		value: String(e.zoom),
+		options: t,
+		change: (t) => void e.onZoomChange(Number(t))
+	}]];
+}
+//#endregion
 //#region packages/vue/src/building-blocks.ts
-function F(t = {}) {
+function U(t = {}) {
 	let n = N(), r = s(n.state), i = n.subscribe((e) => {
 		r.value = e;
 	});
@@ -249,12 +443,14 @@ function F(t = {}) {
 		canvasProps: n.canvasProps,
 		handle: n.handle,
 		toolbarProps: e(() => r.value.toolbarProps),
+		navigationProps: e(() => r.value.navigationProps),
+		statusProps: e(() => r.value.statusProps),
 		loading: e(() => r.value.loading),
 		error: e(() => r.value.error),
 		mode: e(() => r.value.mode)
 	};
 }
-var I = t({
+var W = t({
 	name: "DocumentCanvas",
 	inheritAttrs: !1,
 	props: { mount: {
@@ -273,64 +469,71 @@ var I = t({
 			ref: i
 		});
 	}
-}), L = t({
+});
+function G(e) {
+	return e.kind === "text" ? n("span", {
+		key: e.id,
+		role: "status"
+	}, e.text) : e.kind === "select" ? n("select", {
+		key: e.id,
+		"aria-label": e.label,
+		disabled: e.disabled,
+		value: e.value,
+		onChange: (t) => e.change(t.target.value)
+	}, e.options.map((e) => n("option", {
+		key: e.value,
+		value: e.value
+	}, e.label))) : n("button", {
+		key: e.id,
+		type: "button",
+		"aria-label": e.label,
+		disabled: e.disabled,
+		...e.kind === "toggle" ? { "aria-pressed": e.pressed } : {},
+		onMousedown: (e) => e.preventDefault(),
+		onClick: e.run
+	}, e.label);
+}
+function K(e, t) {
+	return n("div", {
+		role: e,
+		ref: (e) => P(e)
+	}, t.map((e, t) => n("span", {
+		key: t,
+		role: "group"
+	}, e.map(G))));
+}
+var q = t({
 	name: "WordToolbar",
 	props: { toolbarProps: {
 		type: Object,
 		required: !0
 	} },
-	setup(e) {
-		return () => n("div", {
-			role: "toolbar",
-			ref: (e) => P(e)
-		}, [
-			[
-				"Bold",
-				e.toolbarProps.bold,
-				e.toolbarProps.onBold,
-				!e.toolbarProps.canEdit
-			],
-			[
-				"Italic",
-				e.toolbarProps.italic,
-				e.toolbarProps.onItalic,
-				!e.toolbarProps.canEdit
-			],
-			[
-				"Underline",
-				e.toolbarProps.underline,
-				e.toolbarProps.onUnderline,
-				!e.toolbarProps.canEdit
-			],
-			[
-				"Undo",
-				!1,
-				e.toolbarProps.onUndo,
-				!e.toolbarProps.canUndo
-			],
-			[
-				"Redo",
-				!1,
-				e.toolbarProps.onRedo,
-				!e.toolbarProps.canRedo
-			]
-		].map(([t, r, i, a]) => n("button", {
-			type: "button",
-			disabled: a,
-			"aria-pressed": r === null ? "mixed" : r,
-			onMousedown: (e) => e.preventDefault(),
-			onClick: i
-		}, e.toolbarProps.labels[String(t)] ?? String(t))));
-	}
+	setup: (e) => () => K("toolbar", B(e.toolbarProps))
+}), J = t({
+	name: "WordPageNavigation",
+	props: { navigationProps: {
+		type: Object,
+		required: !0
+	} },
+	setup: (e) => () => K("group", V(e.navigationProps))
+}), Y = t({
+	name: "WordStatusBar",
+	props: { statusProps: {
+		type: Object,
+		required: !0
+	} },
+	setup: (e) => () => K("group", H(e.statusProps))
 });
 b(/* @__PURE__ */ v({
-	DocumentCanvas: () => I,
-	Toolbar: () => L,
+	DocumentCanvas: () => W,
+	PageNavigation: () => J,
+	StatusBar: () => Y,
+	Toolbar: () => q,
 	WordEditor: () => j,
 	detectDocumentFormat: () => d,
 	loadDocument: () => f,
 	mountEditorSurface: () => A,
-	useViewerBuildingBlocks: () => F
+	useViewerBuildingBlocks: () => U
 }), M);
 //#endregion
-export { I as DocumentCanvas, L as Toolbar, j as WordEditor, d as detectDocumentFormat, f as loadDocument, A as mountEditorSurface, F as useViewerBuildingBlocks };
+export { W as DocumentCanvas, J as PageNavigation, Y as StatusBar, q as Toolbar, j as WordEditor, d as detectDocumentFormat, f as loadDocument, A as mountEditorSurface, U as useViewerBuildingBlocks };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "docx-vue-viewer",
-	"version": "0.6.0",
+	"version": "1.0.1",
 	"description": "Vue 3 component for the DOCX editor. Self-contained: includes the editor, layout engine and legacy .doc reader.",
 	"keywords": [
 		"doc",
@@ -40,9 +40,9 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"docx-core": "^0.2.0",
-		"ooxml-core": "^1.20.0",
-		"ooxml-ui": "^1.19.0"
+		"docx-core": "^0.3.0",
+		"ooxml-core": "^1.23.0",
+		"ooxml-ui": "^1.22.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"