docx-vue-viewer 1.0.0 → 1.1.0

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,7 +2,8 @@ import * as vue from 'vue';
 import { PropType, MaybeRefOrGetter } from 'vue';
 import { DocumentModel } from 'docx-core';
 export * from 'docx-core';
-import { EditorThemeMode, RibbonActionInput, RibbonAddInTab, DocxCollaborationOptions, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail, DocxCollaborationState, SurfaceHostActions, DocxEditorElement, WordListState, WordAlignment, WordListChoice, WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
+import { DocumentStorage } from 'ooxml-core/embedding';
+import { EditorTheme, EditorThemeMode, RibbonActionInput, RibbonAddInTab, DocxCollaborationOptions, WordCustomization, EditorLocaleInput, PageChangeDetail, FileCommandDetail, RibbonAction, RibbonAddInCommandDetail, DocxCollaborationState, SurfaceHostActions, DocxEditorElement, WordListState, WordAlignment, WordListChoice, WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
 export * from 'ooxml-ui/docx';
 export { WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
 export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/docx/load';
@@ -10,6 +11,9 @@ export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/d
 declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     documentModel: PropType<DocumentModel>;
     readOnly: BooleanConstructor;
+    fileName: StringConstructor;
+    reviewAuthor: StringConstructor;
+    themeColors: PropType<Partial<EditorTheme>>;
     locale: StringConstructor;
     theme: PropType<EditorThemeMode>;
     showThumbnails: BooleanConstructor;
@@ -20,11 +24,16 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     hiddenActions: PropType<readonly RibbonActionInput[]>;
     ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
     collaboration: PropType<DocxCollaborationOptions | null>;
+    storage: PropType<DocumentStorage | null>;
+    customization: PropType<WordCustomization | null>;
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, 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<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("document-change" | "document-error" | "document-warning" | "readonly-change" | "ribbon-action" | "ribbon-customize" | "file-command" | "page-change" | "dirty-change" | "collaboration-change" | "office-ribbon-add-in" | "update:readOnly")[], "document-change" | "document-error" | "document-warning" | "readonly-change" | "ribbon-action" | "ribbon-customize" | "file-command" | "page-change" | "dirty-change" | "collaboration-change" | "office-ribbon-add-in" | "update:readOnly", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     documentModel: PropType<DocumentModel>;
     readOnly: BooleanConstructor;
+    fileName: StringConstructor;
+    reviewAuthor: StringConstructor;
+    themeColors: PropType<Partial<EditorTheme>>;
     locale: StringConstructor;
     theme: PropType<EditorThemeMode>;
     showThumbnails: BooleanConstructor;
@@ -35,13 +44,21 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     hiddenActions: PropType<readonly RibbonActionInput[]>;
     ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
     collaboration: PropType<DocxCollaborationOptions | null>;
+    storage: PropType<DocumentStorage | null>;
+    customization: PropType<WordCustomization | null>;
 }>> & Readonly<{
     "onDocument-change"?: (...args: any[]) => any;
     "onDocument-error"?: (...args: any[]) => any;
+    "onDocument-warning"?: (...args: any[]) => any;
+    "onReadonly-change"?: (...args: any[]) => any;
+    "onRibbon-action"?: (...args: any[]) => any;
+    "onRibbon-customize"?: (...args: any[]) => any;
+    "onFile-command"?: (...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;
+    "onUpdate:readOnly"?: (...args: any[]) => any;
 }>, {
     readOnly: boolean;
     showThumbnails: boolean;
@@ -56,6 +73,15 @@ interface EditorProps {
     locale?: EditorLocaleInput | undefined;
     /** `light`, `dark`, or `auto` (default) to follow the OS color scheme. */
     theme?: EditorThemeMode | undefined;
+    /**
+     * Name shown in the title bar and used by Save and Download (default `Document1.docx`). Forwarded
+     * when the prop changes, so File > Open can rename the document without being reverted.
+     */
+    fileName?: string | undefined;
+    /** Author recorded on tracked changes and comments. Default `Author`. Forwarded when it changes. */
+    reviewAuthor?: string | undefined;
+    /** Token overrides applied as `--dve-*` custom properties. Forwarded when its values change. */
+    themeColors?: Partial<EditorTheme> | undefined;
     /** Left rail of page thumbnails (needs Print Layout). Default false. */
     showThumbnails?: boolean | undefined;
     /** Ribbon visibility. Default true. */
@@ -69,6 +95,17 @@ interface EditorProps {
      * Forwarded only when the object changes, so pass a stable object, not a new literal per render.
      */
     collaboration?: DocxCollaborationOptions | null | undefined;
+    /**
+     * Host-owned storage: File > Save and Save As go to `storage.save()` instead of a download, and
+     * File > Open to `storage.open()` when it has one. `file-command` still fires first.
+     */
+    storage?: DocumentStorage | null | undefined;
+    /**
+     * Host customisation (`WordCustomization`): `capabilities`, `backstage.extraPages` and
+     * `contextMenu.extraCommands`. Forwarded when the object changes, so keep it stable (memoise
+     * it); `null` or omitted restores the defaults.
+     */
+    customization?: WordCustomization | null | undefined;
 }
 /** Editor callbacks; each is the framework-neutral form of one entry in `EDITOR_EVENT_NAMES`. */
 interface EditorEventOptions {
@@ -76,6 +113,28 @@ interface EditorEventOptions {
     onDocumentError?: ((error: Error) => void) | undefined;
     onPageChange?: ((detail: PageChangeDetail) => void) | undefined;
     onDirtyChange?: ((dirty: boolean) => void) | undefined;
+    /**
+     * A File command (new, open, save, saveAs, export, exportText, print, share) is about to run. The
+     * event is cancelable: call `event.preventDefault()` to take the command over yourself.
+     */
+    onFileCommand?: ((event: CustomEvent<FileCommandDetail>) => void) | undefined;
+    /** A non-fatal notice, such as a print layout that could not be produced faithfully. */
+    onDocumentWarning?: ((message: string) => void) | undefined;
+    /**
+     * The user toggled Editing / Viewing, `readOnly` changed or a collaboration role changed.
+     * `readOnly` is the effective value. A parent that syncs the `readOnly` prop from this callback
+     * must store `detail.hostReadOnly`, never `readOnly`, or a `viewer` role lock would be
+     * written into the host's setting.
+     */
+    onReadOnlyChange?: ((readOnly: boolean, detail: {
+        readOnly: boolean;
+        locked: boolean;
+        hostReadOnly: boolean;
+    }) => void) | undefined;
+    /** A ribbon control was activated. */
+    onRibbonAction?: ((detail: RibbonAction) => void) | undefined;
+    /** The user changed which ribbon commands are shown (File > Customize Ribbon); persist the ids. */
+    onRibbonCustomize?: ((ids: readonly string[]) => 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. */
@@ -255,7 +314,7 @@ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBloc
     } | null>;
     loading: vue.ComputedRef<boolean>;
     error: vue.ComputedRef<Error | null>;
-    mode: vue.ComputedRef<"view" | "edit">;
+    mode: vue.ComputedRef<"edit" | "view">;
 };
 declare const DocumentCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
     mount: {

package/dist/index.js

@@ -21,59 +21,104 @@ var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = Object.g
 import * as S from "ooxml-ui/docx";
 b(x, S);
 //#endregion
+//#region packages/bindings/src/forwarding.ts
+function C(e, t) {
+	if (e === t) return !0;
+	let n = { ...e }, r = { ...t }, i = Object.keys(n);
+	return i.length === Object.keys(r).length && i.every((e) => n[e] === r[e]);
+}
+function w() {
+	let e = /* @__PURE__ */ new Map();
+	return function(t, n, r = Object.is) {
+		return e.has(t) && r(e.get(t), n) ? !1 : (e.set(t, n), !0);
+	};
+}
+//#endregion
 //#region packages/bindings/src/index.ts
-var C = [
+var T = [
 	"documentModel",
 	"readOnly",
+	"fileName",
+	"reviewAuthor",
+	"themeColors",
 	"locale",
 	"theme",
 	"showThumbnails",
 	"showToolbar",
 	"hiddenActions",
 	"ribbonAddIns",
-	"collaboration"
-], w = [
+	"collaboration",
+	"storage",
+	"customization"
+], E = [
 	"document-change",
 	"document-error",
+	"document-warning",
 	"page-change",
 	"dirty-change",
+	"readonly-change",
+	"file-command",
+	"ribbon-action",
+	"ribbon-customize",
 	"office-ribbon-add-in",
 	"collaboration-change"
 ];
-function T(e, t) {
+function D(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function E(e, t, n) {
+function O(e, t, n) {
 	e[n] = t[n];
 }
-function D(e) {
+function k(e) {
 	let t = {};
-	for (let n of C) E(t, e, n);
+	for (let n of T) O(t, e, n);
 	return t;
 }
-function O(e) {
+function A(e) {
 	return {
 		onDocumentChange: e["document-change"],
 		onDocumentError: e["document-error"],
 		onPageChange: e["page-change"],
 		onDirtyChange: e["dirty-change"],
+		onFileCommand: e["file-command"],
+		onDocumentWarning: e["document-warning"],
+		onReadOnlyChange: e["readonly-change"],
+		onRibbonAction: e["ribbon-action"],
+		onRibbonCustomize: e["ribbon-customize"],
 		onRibbonAddIn: e["office-ribbon-add-in"],
 		onCollaborationChange: e["collaboration-change"]
 	};
 }
-function k(e, t = {}, n = !1) {
+function j(e, t = {}, n = !1) {
 	(0, x.registerDocxEditor)();
 	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 = null, l = !1, u = (e) => {
-		o = e.detail, i.onDocumentChange?.(o);
-	}, 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 = {
+	let i = {}, a, o, s, c = null, l = !1, u = w(), d = {
+		"document-change": (e) => {
+			o = e.detail, i.onDocumentChange?.(o);
+		},
+		"document-error": (e) => i.onDocumentError?.(e.detail),
+		"document-warning": (e) => i.onDocumentWarning?.(e.detail),
+		"page-change": (e) => i.onPageChange?.(e.detail),
+		"dirty-change": (e) => i.onDirtyChange?.(e.detail),
+		"readonly-change": (e) => i.onReadOnlyChange?.(e.detail.readOnly, e.detail),
+		"file-command": (e) => i.onFileCommand?.(e),
+		"ribbon-action": (e) => i.onRibbonAction?.(e.detail),
+		"ribbon-customize": (e) => i.onRibbonCustomize?.(e.detail),
+		"office-ribbon-add-in": (e) => i.onRibbonAddIn?.(e.detail),
+		"collaboration-change": (e) => i.onCollaborationChange?.(e.detail)
+	}, f = (e, t = E) => {
+		for (let n of t) {
+			let t = d[n];
+			e ? r.addEventListener(n, t) : r.removeEventListener(n, t);
+		}
+	};
+	f(!0);
+	let p = {
 		element: r,
 		update(e) {
-			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);
+			l || (i = e, r.locale = e.locale ?? "en", u("readOnly", e.readOnly ?? !1) && (r.readOnly = e.readOnly ?? !1), e.fileName !== void 0 && u("fileName", e.fileName) && (r.fileName = e.fileName), e.reviewAuthor !== void 0 && u("reviewAuthor", e.reviewAuthor) && (r.reviewAuthor = e.reviewAuthor), e.themeColors !== void 0 && u("themeColors", e.themeColors, C) && (r.themeColors = { ...e.themeColors }), r.theme = e.theme ?? "auto", r.showThumbnails = e.showThumbnails ?? !1, r.showToolbar = e.showToolbar ?? !0, D(r.hiddenActions, (0, x.normalizeRibbonActions)(e.hiddenActions ?? []).ids) || (r.hiddenActions = e.hiddenActions ?? []), e.ribbonAddIns !== s && (r.ribbonAddIns = e.ribbonAddIns ?? []), s = e.ribbonAddIns, u("customization", e.customization ?? null) && (r.customization = e.customization ?? null), u("storage", e.storage ?? null) && (r.storage = e.storage ?? void 0), (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(),
@@ -83,12 +128,12 @@ function k(e, t = {}, n = !1) {
 			return r.dirty;
 		},
 		destroy() {
-			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());
+			l || (l = !0, f(!1, E.filter((e) => e !== "collaboration-change")), c && r.stopCollaboration(), f(!1, ["collaboration-change"]), r.remove());
 		}
 	};
-	return g.update(t), e.append(r), g;
+	return p.update(t), e.append(r), p;
 }
-function A(e, t = {}) {
+function M(e, t = {}) {
 	let n = (e) => ({
 		...e,
 		readOnly: e.canEdit !== !0 || e.readOnly === !0
@@ -96,7 +141,7 @@ function A(e, t = {}) {
 		...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) => {
+	}), i = j(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);
 	};
@@ -112,11 +157,14 @@ function A(e, t = {}) {
 }
 //#endregion
 //#region packages/bindings/src/vue.ts
-var j = t({
+var N = t({
 	name: "WordEditor",
 	props: {
 		documentModel: Object,
 		readOnly: Boolean,
+		fileName: String,
+		reviewAuthor: String,
+		themeColors: Object,
 		locale: String,
 		theme: String,
 		showThumbnails: Boolean,
@@ -126,24 +174,33 @@ var j = t({
 		},
 		hiddenActions: Array,
 		ribbonAddIns: Array,
-		collaboration: Object
+		collaboration: Object,
+		storage: Object,
+		customization: Object
 	},
-	emits: [...w],
+	emits: [...E, "update:readOnly"],
 	setup(e, { emit: t, expose: a }) {
 		let s = o(), c, u = () => ({
-			...D(e),
-			...O({
+			...k(e),
+			...A({
 				"document-change": (e) => t("document-change", e),
 				"document-error": (e) => t("document-error", e),
 				"page-change": (e) => t("page-change", e),
 				"dirty-change": (e) => t("dirty-change", e),
+				"file-command": (e) => t("file-command", e),
+				"document-warning": (e) => t("document-warning", e),
+				"readonly-change": (n, r) => {
+					t("readonly-change", n, r), r.hostReadOnly !== e.readOnly && t("update:readOnly", r.hostReadOnly);
+				},
+				"ribbon-action": (e) => t("ribbon-action", e),
+				"ribbon-customize": (e) => t("ribbon-customize", e),
 				"office-ribbon-add-in": (e) => t("office-ribbon-add-in", e),
 				"collaboration-change": (e) => t("collaboration-change", e)
 			})
 		});
 		return i(() => {
-			c = k(s.value, u());
-		}), l(() => C.map((t) => e[t]), () => c?.update(u())), r(() => c?.destroy()), a({
+			c = j(s.value, u());
+		}), l(() => T.map((t) => e[t]), () => c?.update(u())), r(() => c?.destroy()), a({
 			get element() {
 				return c?.element;
 			},
@@ -167,15 +224,15 @@ var j = t({
 			}
 		}), () => n("div", { ref: s });
 	}
-}), M = /* @__PURE__ */ v({
+}), P = /* @__PURE__ */ v({
 	detectDocumentFormat: () => d,
 	loadDocument: () => f,
-	mountEditorSurface: () => A
+	mountEditorSurface: () => M
 });
-b(M, x);
+b(P, x);
 //#endregion
 //#region packages/bindings/src/building-blocks.ts
-function N(e = {}) {
+function F(e = {}) {
 	let t = e, n, r, i, a = 0, o = null, s, c = {
 		toolbarProps: null,
 		navigationProps: null,
@@ -226,7 +283,7 @@ function N(e = {}) {
 	}, 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());
+		e !== o && (o = e, ++a, r?.(), r = void 0, n?.destroy(), n = void 0, i = void 0, e && (n = M(e, p()), r = n.subscribe(f)), f(), g());
 	};
 	return {
 		canvasProps: { mount: _ },
@@ -258,14 +315,14 @@ function N(e = {}) {
 		}
 	};
 }
-function P(e) {
+function I(e) {
 	if (!e) return;
 	let t = Reflect.get(p, "prepareOfficeUiBlock");
 	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 = [
+var L = [
 	"Calibri",
 	"Arial",
 	"Cambria",
@@ -274,7 +331,7 @@ var F = [
 	"Segoe UI",
 	"Times New Roman",
 	"Verdana"
-], I = [
+], R = [
 	8,
 	9,
 	10,
@@ -289,7 +346,7 @@ var F = [
 	36,
 	48,
 	72
-], L = [
+], z = [
 	50,
 	75,
 	100,
@@ -297,7 +354,7 @@ var F = [
 	150,
 	200
 ];
-function R(e, t) {
+function B(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
@@ -307,32 +364,32 @@ function R(e, t) {
 		label: ""
 	}, ...r] : r;
 }
-var z = (e, t) => e[t] ?? t;
-function B(e) {
+var V = (e, t) => e[t] ?? t;
+function H(e) {
 	let { labels: t } = e, n = !e.canEdit, r = (e, r, i, a) => ({
 		kind: "toggle",
 		id: e,
-		label: z(t, r),
+		label: V(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),
+		label: V(t, n),
 		disabled: r,
 		run: () => void i()
 	}), a = (r, i, a) => ({
 		kind: "toggle",
 		id: r,
-		label: z(t, i),
+		label: V(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),
+		label: V(t, i),
 		disabled: n,
 		pressed: e.list === a,
 		run: () => void e.onListChange(e.list === a ? "remove" : a)
@@ -341,18 +398,18 @@ function B(e) {
 		[{
 			kind: "select",
 			id: "fontFamily",
-			label: z(t, "Font"),
+			label: V(t, "Font"),
 			disabled: n,
 			value: e.fontFamily ?? "",
-			options: R(F, e.fontFamily),
+			options: B(L, e.fontFamily),
 			change: (t) => void e.onFontFamilyChange(t)
 		}, {
 			kind: "select",
 			id: "fontSize",
-			label: z(t, "Font size"),
+			label: V(t, "Font size"),
 			disabled: n,
 			value: e.fontSize === null ? "" : String(e.fontSize),
-			options: R(I, e.fontSize),
+			options: B(R, e.fontSize),
 			change: (t) => void e.onFontSizeChange(Number(t))
 		}],
 		[
@@ -370,13 +427,13 @@ function B(e) {
 	], 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) {
+function U(e) {
 	let { labels: t } = e;
 	return [[
 		{
 			kind: "action",
 			id: "previousPage",
-			label: z(t, "Previous page"),
+			label: V(t, "Previous page"),
 			disabled: !e.canGoPrevious,
 			run: () => void e.onPreviousPage()
 		},
@@ -390,28 +447,28 @@ function V(e) {
 		{
 			kind: "action",
 			id: "nextPage",
-			label: z(t, "Next page"),
+			label: V(t, "Next page"),
 			disabled: !e.canGoNext,
 			run: () => void e.onNextPage()
 		}
 	], [{
 		kind: "select",
 		id: "viewMode",
-		label: z(t, "Layout view"),
+		label: V(t, "Layout view"),
 		disabled: !1,
 		value: e.viewMode,
 		options: [{
 			value: "draft",
-			label: z(t, "Draft")
+			label: V(t, "Draft")
 		}, {
 			value: "print",
-			label: z(t, "Print Layout")
+			label: V(t, "Print Layout")
 		}],
 		change: (t) => void e.onViewModeChange(t === "print" ? "print" : "draft")
 	}]];
 }
-function H(e) {
-	let t = R(L, e.zoom).map((e) => ({
+function W(e) {
+	let t = B(z, e.zoom).map((e) => ({
 		value: e.value,
 		label: `${e.label}%`
 	}));
@@ -424,7 +481,7 @@ function H(e) {
 	}], [{
 		kind: "select",
 		id: "zoom",
-		label: z(e.labels, "Zoom"),
+		label: V(e.labels, "Zoom"),
 		disabled: !1,
 		value: String(e.zoom),
 		options: t,
@@ -433,8 +490,8 @@ function H(e) {
 }
 //#endregion
 //#region packages/vue/src/building-blocks.ts
-function U(t = {}) {
-	let n = N(), r = s(n.state), i = n.subscribe((e) => {
+function G(t = {}) {
+	let n = F(), r = s(n.state), i = n.subscribe((e) => {
 		r.value = e;
 	});
 	return u(() => n.update(c(t))), a(() => {
@@ -450,7 +507,7 @@ function U(t = {}) {
 		mode: e(() => r.value.mode)
 	};
 }
-var W = t({
+var K = t({
 	name: "DocumentCanvas",
 	inheritAttrs: !1,
 	props: { mount: {
@@ -470,7 +527,7 @@ var W = t({
 		});
 	}
 });
-function G(e) {
+function q(e) {
 	return e.kind === "text" ? n("span", {
 		key: e.id,
 		role: "status"
@@ -493,47 +550,47 @@ function G(e) {
 		onClick: e.run
 	}, e.label);
 }
-function K(e, t) {
+function J(e, t) {
 	return n("div", {
 		role: e,
-		ref: (e) => P(e)
+		ref: (e) => I(e)
 	}, t.map((e, t) => n("span", {
 		key: t,
 		role: "group"
-	}, e.map(G))));
+	}, e.map(q))));
 }
-var q = t({
+var Y = t({
 	name: "WordToolbar",
 	props: { toolbarProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("toolbar", B(e.toolbarProps))
-}), J = t({
+	setup: (e) => () => J("toolbar", H(e.toolbarProps))
+}), X = t({
 	name: "WordPageNavigation",
 	props: { navigationProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("group", V(e.navigationProps))
-}), Y = t({
+	setup: (e) => () => J("group", U(e.navigationProps))
+}), Z = t({
 	name: "WordStatusBar",
 	props: { statusProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("group", H(e.statusProps))
+	setup: (e) => () => J("group", W(e.statusProps))
 });
 b(/* @__PURE__ */ v({
-	DocumentCanvas: () => W,
-	PageNavigation: () => J,
-	StatusBar: () => Y,
-	Toolbar: () => q,
-	WordEditor: () => j,
+	DocumentCanvas: () => K,
+	PageNavigation: () => X,
+	StatusBar: () => Z,
+	Toolbar: () => Y,
+	WordEditor: () => N,
 	detectDocumentFormat: () => d,
 	loadDocument: () => f,
-	mountEditorSurface: () => A,
-	useViewerBuildingBlocks: () => U
-}), M);
+	mountEditorSurface: () => M,
+	useViewerBuildingBlocks: () => G
+}), P);
 //#endregion
-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 };
+export { K as DocumentCanvas, X as PageNavigation, Z as StatusBar, Y as Toolbar, N as WordEditor, d as detectDocumentFormat, f as loadDocument, M as mountEditorSurface, G as useViewerBuildingBlocks };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "docx-vue-viewer",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Vue 3 component for the DOCX editor. Self-contained: includes the editor, layout engine and legacy .doc reader.",
 	"keywords": [
 		"doc",
@@ -41,8 +41,8 @@
 	},
 	"dependencies": {
 		"docx-core": "^0.3.0",
-		"ooxml-core": "^1.22.0",
-		"ooxml-ui": "^1.21.0"
+		"ooxml-core": "^1.24.0",
+		"ooxml-ui": "^1.23.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"