docx-vue-viewer 1.0.1 → 1.1.1

package/README.md

@@ -64,8 +64,9 @@ To render only the controls you use, with your own design system, use the buildi
 
 This is an early editor. It does not establish Microsoft Word layout parity or
 lossless saving for unsupported features. Legacy DOC support is limited to
-main-body text with constrained paragraph edits. SmartArt is display-only and
-charts render as placeholders.
+main-body text with constrained paragraph edits. SmartArt nodes, text and layout can be edited
+(drawn with an approximate layout until Word lays them out again) and charts can be inserted, edited and resized (chartex charts stay
+read-only).
 
 ## Documentation
 

package/dist/index.d.ts

@@ -2,14 +2,22 @@ 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, DocxEditorElement, SurfaceHostActions, 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';
 
+/**
+ * Kebab-case emits for every editor event, `v-model:readOnly` (the host's switch, never a role
+ * lock) and the handle on the template ref, all generated from `EDITOR_CONTRACT`.
+ */
 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 +28,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, string[], string, 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 +48,10 @@ 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;
-    "onPage-change"?: (...args: any[]) => any;
-    "onDirty-change"?: (...args: any[]) => any;
-    "onCollaboration-change"?: (...args: any[]) => any;
-    "onOffice-ribbon-add-in"?: (...args: any[]) => any;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     readOnly: boolean;
     showThumbnails: boolean;
@@ -56,6 +66,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 +88,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 +106,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. */
@@ -93,6 +145,7 @@ interface EditorHandle {
     markClean(): void;
     readonly dirty: boolean;
 }
+
 interface EditorBinding extends EditorHandle {
     update(options: EditorOptions): void;
     destroy(): void;

package/dist/index.js

@@ -1,94 +1,150 @@
-import { computed as e, defineComponent as t, h as n, onBeforeUnmount as r, onMounted as i, onScopeDispose as a, ref as o, shallowRef as s, toValue as c, watch as l, watchEffect as u } from "vue";
-import { detectDocumentFormat as d, loadDocument as f } from "ooxml-core/docx/load";
-import * as p from "ooxml-ui/theme";
+import { defineVueBinding as e } from "ooxml-ui/bindings/vue";
+import { bindElement as t, eventArgs as n, readOnlyChange as r, sameList as i, shallowEqual as a } from "ooxml-ui/bindings";
+import { detectDocumentFormat as o, loadDocument as s } from "ooxml-core/docx/load";
+import { computed as c, defineComponent as l, h as u, onScopeDispose as d, shallowRef as f, toValue as p, watch as m, watchEffect as h } from "vue";
+import * as g from "ooxml-ui/theme";
 export * from "ooxml-ui/docx";
 export * from "docx-core";
 //#region \0rolldown/runtime.js
-var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = Object.getOwnPropertyNames, _ = Object.prototype.hasOwnProperty, v = (e, t) => {
+var _ = Object.defineProperty, v = Object.getOwnPropertyDescriptor, y = Object.getOwnPropertyNames, b = Object.prototype.hasOwnProperty, x = (e, t) => {
 	let n = {};
-	for (var r in e) m(n, r, {
+	for (var r in e) _(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || m(n, Symbol.toStringTag, { value: "Module" }), n;
-}, y = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = g(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !_.call(e, s) && s !== n && m(e, s, {
+	return t || _(n, Symbol.toStringTag, { value: "Module" }), n;
+}, S = (e, t, n, r) => {
+	if (t && typeof t == "object" || typeof t == "function") for (var i = y(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !b.call(e, s) && s !== n && _(e, s, {
 		get: ((e) => t[e]).bind(null, s),
-		enumerable: !(r = h(t, s)) || r.enumerable
+		enumerable: !(r = v(t, s)) || r.enumerable
 	});
 	return e;
-}, b = (e, t, n) => (y(e, t, "default"), n && y(n, t, "default")), x = /* @__PURE__ */ v({});
-import * as S from "ooxml-ui/docx";
-b(x, S);
+}, C = (e, t, n) => (S(e, t, "default"), n && S(n, t, "default")), w = /* @__PURE__ */ x({});
+import * as T from "ooxml-ui/docx";
+C(w, T);
 //#endregion
-//#region packages/bindings/src/index.ts
-var C = [
-	"documentModel",
-	"readOnly",
-	"locale",
-	"theme",
-	"showThumbnails",
-	"showToolbar",
-	"hiddenActions",
-	"ribbonAddIns",
-	"collaboration"
-], w = [
+//#region packages/bindings/src/contract.ts
+var 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) {
-	return e.length === t.length && e.every((e, n) => e === t[n]);
-}
-function E(e, t, n) {
-	e[n] = t[n];
-}
-function D(e) {
-	let t = {};
-	for (let n of C) E(t, e, n);
-	return t;
-}
-function O(e) {
-	return {
-		onDocumentChange: e["document-change"],
-		onDocumentError: e["document-error"],
-		onPageChange: e["page-change"],
-		onDirtyChange: e["dirty-change"],
-		onRibbonAddIn: e["office-ribbon-add-in"],
-		onCollaborationChange: e["collaboration-change"]
-	};
-}
-function k(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 = {
-		element: r,
+], D = {
+	props: {
+		locale: {
+			forward: "always",
+			fallback: "en"
+		},
+		readOnly: {
+			forward: "changed",
+			fallback: !1
+		},
+		fileName: { forward: "defined" },
+		reviewAuthor: { forward: "defined" },
+		themeColors: {
+			forward: "defined",
+			same: a,
+			apply: (e, t) => e.themeColors = { ...t }
+		},
+		theme: {
+			forward: "always",
+			fallback: "auto"
+		},
+		showThumbnails: {
+			forward: "always",
+			fallback: !1
+		},
+		showToolbar: {
+			forward: "always",
+			fallback: !0
+		},
+		hiddenActions: {
+			forward: "always",
+			apply: (e, t) => {
+				i(e.hiddenActions, (0, w.normalizeRibbonActions)(t ?? []).ids) || (e.hiddenActions = t ?? []);
+			}
+		},
+		ribbonAddIns: {
+			forward: "changed",
+			initial: void 0,
+			apply: (e, t) => e.ribbonAddIns = t ?? []
+		},
+		customization: {
+			forward: "changed",
+			fallback: null
+		},
+		storage: {
+			forward: "changed",
+			fallback: null,
+			apply: (e, t) => e.storage = t ?? void 0
+		},
+		collaboration: {
+			forward: "changed",
+			fallback: null,
+			initial: null
+		},
+		documentModel: { forward: "manual" }
+	},
+	events: {
+		"document-change": { option: "onDocumentChange" },
+		"document-error": { option: "onDocumentError" },
+		"document-warning": { option: "onDocumentWarning" },
+		"page-change": { option: "onPageChange" },
+		"dirty-change": { option: "onDirtyChange" },
+		"readonly-change": r,
+		"file-command": {
+			option: "onFileCommand",
+			args: n.event
+		},
+		"ribbon-action": { option: "onRibbonAction" },
+		"ribbon-customize": { option: "onRibbonCustomize" },
+		"office-ribbon-add-in": { option: "onRibbonAddIn" },
+		"collaboration-change": { option: "onCollaborationChange" }
+	},
+	handle: {
+		element: "get",
+		load: "async",
+		save: "async",
+		download: "async",
+		markClean: "optional-call",
+		dirty: { fallback: !1 }
+	}
+};
+//#endregion
+//#region packages/bindings/src/index.ts
+function O(e, n = {}, r = !1) {
+	(0, w.registerDocxEditor)();
+	let i = e.ownerDocument.createElement("docx-editor");
+	if (r && typeof i.getToolbarProps != "function") throw Error("Update ooxml-ui to use editor building blocks.");
+	i.surfaceOnly = r;
+	let a = {}, o, s, c = !1, l = t(i, D, () => a, { onEvent: (e, t) => {
+		e === "document-change" && (s = t.detail);
+	} }), u = {
+		element: i,
 		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);
+			c || (a = e, l.update(e), e.documentModel && e.documentModel !== o && e.documentModel !== s && (i.documentModel = e.documentModel), o = e.documentModel);
 		},
-		load: (e) => r.load(e),
-		save: () => r.save(),
-		download: (e) => r.download(e),
-		markClean: () => r.markClean(),
+		load: (e) => i.load(e),
+		save: () => i.save(),
+		download: (e) => i.download(e),
+		markClean: () => i.markClean(),
 		get dirty() {
-			return r.dirty;
+			return i.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());
+			c || (c = !0, l.unlisten(E.filter((e) => e !== "collaboration-change")), l.sent("collaboration") && i.stopCollaboration(), l.unlisten(), i.remove());
 		}
 	};
-	return g.update(t), e.append(r), g;
+	return u.update(n), e.append(i), u;
 }
-function A(e, t = {}) {
+function k(e, t = {}) {
 	let n = (e) => ({
 		...e,
 		readOnly: e.canEdit !== !0 || e.readOnly === !0
@@ -96,7 +152,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 = O(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 +168,14 @@ function A(e, t = {}) {
 }
 //#endregion
 //#region packages/bindings/src/vue.ts
-var j = t({
+var A = e({
 	name: "WordEditor",
 	props: {
 		documentModel: Object,
 		readOnly: Boolean,
+		fileName: String,
+		reviewAuthor: String,
+		themeColors: Object,
 		locale: String,
 		theme: String,
 		showThumbnails: Boolean,
@@ -126,56 +185,22 @@ var j = t({
 		},
 		hiddenActions: Array,
 		ribbonAddIns: Array,
-		collaboration: Object
+		collaboration: Object,
+		storage: Object,
+		customization: Object
 	},
-	emits: [...w],
-	setup(e, { emit: t, expose: a }) {
-		let s = o(), c, u = () => ({
-			...D(e),
-			...O({
-				"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),
-				"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({
-			get element() {
-				return c?.element;
-			},
-			async load(e) {
-				if (!c) throw Error("Editor is not mounted");
-				await c.load(e);
-			},
-			async save() {
-				if (!c) throw Error("Editor is not mounted");
-				return c.save();
-			},
-			async download(e) {
-				if (!c) throw Error("Editor is not mounted");
-				await c.download(e);
-			},
-			markClean() {
-				c?.markClean();
-			},
-			get dirty() {
-				return c?.dirty ?? !1;
-			}
-		}), () => n("div", { ref: s });
-	}
-}), M = /* @__PURE__ */ v({
-	detectDocumentFormat: () => d,
-	loadDocument: () => f,
-	mountEditorSurface: () => A
+	contract: D,
+	handle: D.handle,
+	mount: O
+}), j = /* @__PURE__ */ x({
+	detectDocumentFormat: () => o,
+	loadDocument: () => s,
+	mountEditorSurface: () => k
 });
-b(M, x);
+C(j, w);
 //#endregion
 //#region packages/bindings/src/building-blocks.ts
-function N(e = {}) {
+function M(e = {}) {
 	let t = e, n, r, i, a = 0, o = null, s, c = {
 		toolbarProps: null,
 		navigationProps: null,
@@ -226,7 +251,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 = k(e, p()), r = n.subscribe(f)), f(), g());
 	};
 	return {
 		canvasProps: { mount: _ },
@@ -258,14 +283,14 @@ function N(e = {}) {
 		}
 	};
 }
-function P(e) {
+function N(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"));
+	let t = Reflect.get(g, "prepareOfficeUiBlock");
+	typeof t == "function" ? t(e, "toolbar", "docx") : (g.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 P = [
 	"Calibri",
 	"Arial",
 	"Cambria",
@@ -274,7 +299,7 @@ var F = [
 	"Segoe UI",
 	"Times New Roman",
 	"Verdana"
-], I = [
+], F = [
 	8,
 	9,
 	10,
@@ -289,7 +314,7 @@ var F = [
 	36,
 	48,
 	72
-], L = [
+], I = [
 	50,
 	75,
 	100,
@@ -297,7 +322,7 @@ var F = [
 	150,
 	200
 ];
-function R(e, t) {
+function L(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 +332,32 @@ function R(e, t) {
 		label: ""
 	}, ...r] : r;
 }
-var z = (e, t) => e[t] ?? t;
-function B(e) {
+var R = (e, t) => e[t] ?? t;
+function z(e) {
 	let { labels: t } = e, n = !e.canEdit, r = (e, r, i, a) => ({
 		kind: "toggle",
 		id: e,
-		label: z(t, r),
+		label: R(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: R(t, n),
 		disabled: r,
 		run: () => void i()
 	}), a = (r, i, a) => ({
 		kind: "toggle",
 		id: r,
-		label: z(t, i),
+		label: R(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: R(t, i),
 		disabled: n,
 		pressed: e.list === a,
 		run: () => void e.onListChange(e.list === a ? "remove" : a)
@@ -341,18 +366,18 @@ function B(e) {
 		[{
 			kind: "select",
 			id: "fontFamily",
-			label: z(t, "Font"),
+			label: R(t, "Font"),
 			disabled: n,
 			value: e.fontFamily ?? "",
-			options: R(F, e.fontFamily),
+			options: L(P, e.fontFamily),
 			change: (t) => void e.onFontFamilyChange(t)
 		}, {
 			kind: "select",
 			id: "fontSize",
-			label: z(t, "Font size"),
+			label: R(t, "Font size"),
 			disabled: n,
 			value: e.fontSize === null ? "" : String(e.fontSize),
-			options: R(I, e.fontSize),
+			options: L(F, e.fontSize),
 			change: (t) => void e.onFontSizeChange(Number(t))
 		}],
 		[
@@ -370,13 +395,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 B(e) {
 	let { labels: t } = e;
 	return [[
 		{
 			kind: "action",
 			id: "previousPage",
-			label: z(t, "Previous page"),
+			label: R(t, "Previous page"),
 			disabled: !e.canGoPrevious,
 			run: () => void e.onPreviousPage()
 		},
@@ -390,28 +415,28 @@ function V(e) {
 		{
 			kind: "action",
 			id: "nextPage",
-			label: z(t, "Next page"),
+			label: R(t, "Next page"),
 			disabled: !e.canGoNext,
 			run: () => void e.onNextPage()
 		}
 	], [{
 		kind: "select",
 		id: "viewMode",
-		label: z(t, "Layout view"),
+		label: R(t, "Layout view"),
 		disabled: !1,
 		value: e.viewMode,
 		options: [{
 			value: "draft",
-			label: z(t, "Draft")
+			label: R(t, "Draft")
 		}, {
 			value: "print",
-			label: z(t, "Print Layout")
+			label: R(t, "Print Layout")
 		}],
 		change: (t) => void e.onViewModeChange(t === "print" ? "print" : "draft")
 	}]];
 }
-function H(e) {
-	let t = R(L, e.zoom).map((e) => ({
+function V(e) {
+	let t = L(I, e.zoom).map((e) => ({
 		value: e.value,
 		label: `${e.label}%`
 	}));
@@ -424,7 +449,7 @@ function H(e) {
 	}], [{
 		kind: "select",
 		id: "zoom",
-		label: z(e.labels, "Zoom"),
+		label: R(e.labels, "Zoom"),
 		disabled: !1,
 		value: String(e.zoom),
 		options: t,
@@ -433,24 +458,24 @@ 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) => {
-		r.value = e;
+function H(e = {}) {
+	let t = M(), n = f(t.state), r = t.subscribe((e) => {
+		n.value = e;
 	});
-	return u(() => n.update(c(t))), a(() => {
-		i(), n.destroy();
+	return h(() => t.update(p(e))), d(() => {
+		r(), t.destroy();
 	}), {
-		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)
+		canvasProps: t.canvasProps,
+		handle: t.handle,
+		toolbarProps: c(() => n.value.toolbarProps),
+		navigationProps: c(() => n.value.navigationProps),
+		statusProps: c(() => n.value.statusProps),
+		loading: c(() => n.value.loading),
+		error: c(() => n.value.error),
+		mode: c(() => n.value.mode)
 	};
 }
-var W = t({
+var U = l({
 	name: "DocumentCanvas",
 	inheritAttrs: !1,
 	props: { mount: {
@@ -458,32 +483,32 @@ var W = t({
 		required: !0
 	} },
 	setup(e, { attrs: t }) {
-		let r = null, i = (t) => {
-			let n = t;
-			r !== n && (r = n, e.mount(n));
+		let n = null, r = (t) => {
+			let r = t;
+			n !== r && (n = r, e.mount(r));
 		};
-		return l(() => e.mount, (e, t) => {
-			t(null), r && e(r);
-		}), a(() => e.mount(null)), () => n("div", {
+		return m(() => e.mount, (e, t) => {
+			t(null), n && e(n);
+		}), d(() => e.mount(null)), () => u("div", {
 			...t,
-			ref: i
+			ref: r
 		});
 	}
 });
-function G(e) {
-	return e.kind === "text" ? n("span", {
+function W(e) {
+	return e.kind === "text" ? u("span", {
 		key: e.id,
 		role: "status"
-	}, e.text) : e.kind === "select" ? n("select", {
+	}, e.text) : e.kind === "select" ? u("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", {
+	}, e.options.map((e) => u("option", {
 		key: e.value,
 		value: e.value
-	}, e.label))) : n("button", {
+	}, e.label))) : u("button", {
 		key: e.id,
 		type: "button",
 		"aria-label": e.label,
@@ -493,47 +518,47 @@ function G(e) {
 		onClick: e.run
 	}, e.label);
 }
-function K(e, t) {
-	return n("div", {
+function G(e, t) {
+	return u("div", {
 		role: e,
-		ref: (e) => P(e)
-	}, t.map((e, t) => n("span", {
+		ref: (e) => N(e)
+	}, t.map((e, t) => u("span", {
 		key: t,
 		role: "group"
-	}, e.map(G))));
+	}, e.map(W))));
 }
-var q = t({
+var K = l({
 	name: "WordToolbar",
 	props: { toolbarProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("toolbar", B(e.toolbarProps))
-}), J = t({
+	setup: (e) => () => G("toolbar", z(e.toolbarProps))
+}), q = l({
 	name: "WordPageNavigation",
 	props: { navigationProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("group", V(e.navigationProps))
-}), Y = t({
+	setup: (e) => () => G("group", B(e.navigationProps))
+}), J = l({
 	name: "WordStatusBar",
 	props: { statusProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => K("group", H(e.statusProps))
+	setup: (e) => () => G("group", V(e.statusProps))
 });
-b(/* @__PURE__ */ v({
-	DocumentCanvas: () => W,
-	PageNavigation: () => J,
-	StatusBar: () => Y,
-	Toolbar: () => q,
-	WordEditor: () => j,
-	detectDocumentFormat: () => d,
-	loadDocument: () => f,
-	mountEditorSurface: () => A,
-	useViewerBuildingBlocks: () => U
-}), M);
+C(/* @__PURE__ */ x({
+	DocumentCanvas: () => U,
+	PageNavigation: () => q,
+	StatusBar: () => J,
+	Toolbar: () => K,
+	WordEditor: () => A,
+	detectDocumentFormat: () => o,
+	loadDocument: () => s,
+	mountEditorSurface: () => k,
+	useViewerBuildingBlocks: () => H
+}), j);
 //#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 { U as DocumentCanvas, q as PageNavigation, J as StatusBar, K as Toolbar, A as WordEditor, o as detectDocumentFormat, s as loadDocument, k as mountEditorSurface, H as useViewerBuildingBlocks };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "docx-vue-viewer",
-	"version": "1.0.1",
+	"version": "1.1.1",
 	"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.23.0",
-		"ooxml-ui": "^1.22.0"
+		"ooxml-core": "^1.25.0",
+		"ooxml-ui": "^1.26.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"