docx-vue-viewer 1.1.0 → 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

@@ -3,11 +3,15 @@ import { PropType, MaybeRefOrGetter } from 'vue';
 import { DocumentModel } from 'docx-core';
 export * from 'docx-core';
 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';
+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;
@@ -28,7 +32,7 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     customization: PropType<WordCustomization | null>;
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, 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<{
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, string[], string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     documentModel: PropType<DocumentModel>;
     readOnly: BooleanConstructor;
     fileName: StringConstructor;
@@ -47,18 +51,7 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     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;
+    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }>, {
     readOnly: boolean;
     showThumbnails: boolean;
@@ -152,6 +145,7 @@ interface EditorHandle {
     markClean(): void;
     readonly dirty: boolean;
 }
+
 interface EditorBinding extends EditorHandle {
     update(options: EditorOptions): void;
     destroy(): void;
@@ -314,7 +308,7 @@ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBloc
     } | null>;
     loading: vue.ComputedRef<boolean>;
     error: vue.ComputedRef<Error | null>;
-    mode: vue.ComputedRef<"edit" | "view">;
+    mode: vue.ComputedRef<"view" | "edit">;
 };
 declare const DocumentCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
     mount: {

package/dist/index.js

@@ -1,56 +1,30 @@
-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/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 T = [
-	"documentModel",
-	"readOnly",
-	"fileName",
-	"reviewAuthor",
-	"themeColors",
-	"locale",
-	"theme",
-	"showThumbnails",
-	"showToolbar",
-	"hiddenActions",
-	"ribbonAddIns",
-	"collaboration",
-	"storage",
-	"customization"
-], E = [
+//#region packages/bindings/src/contract.ts
+var E = [
 	"document-change",
 	"document-error",
 	"document-warning",
@@ -62,78 +36,115 @@ var T = [
 	"ribbon-customize",
 	"office-ribbon-add-in",
 	"collaboration-change"
-];
-function D(e, t) {
-	return e.length === t.length && e.every((e, n) => e === t[n]);
-}
-function O(e, t, n) {
-	e[n] = t[n];
-}
-function k(e) {
-	let t = {};
-	for (let n of T) O(t, e, n);
-	return t;
-}
-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 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 = w(), d = {
-		"document-change": (e) => {
-			o = e.detail, i.onDocumentChange?.(o);
+], D = {
+	props: {
+		locale: {
+			forward: "always",
+			fallback: "en"
 		},
-		"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,
+		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", 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);
+			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, f(!1, E.filter((e) => e !== "collaboration-change")), c && r.stopCollaboration(), f(!1, ["collaboration-change"]), r.remove());
+			c || (c = !0, l.unlisten(E.filter((e) => e !== "collaboration-change")), l.sent("collaboration") && i.stopCollaboration(), l.unlisten(), i.remove());
 		}
 	};
-	return p.update(t), e.append(r), p;
+	return u.update(n), e.append(i), u;
 }
-function M(e, t = {}) {
+function k(e, t = {}) {
 	let n = (e) => ({
 		...e,
 		readOnly: e.canEdit !== !0 || e.readOnly === !0
@@ -141,7 +152,7 @@ function M(e, t = {}) {
 		...e.onOpenHyperlinkDialog && { onOpenHyperlinkDialog: e.onOpenHyperlinkDialog },
 		...e.onOpenFindReplace && { onOpenFindReplace: e.onOpenFindReplace },
 		...e.onOpenImagePicker && { onOpenImagePicker: e.onOpenImagePicker }
-	}), i = j(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);
 	};
@@ -157,7 +168,7 @@ function M(e, t = {}) {
 }
 //#endregion
 //#region packages/bindings/src/vue.ts
-var N = t({
+var A = e({
 	name: "WordEditor",
 	props: {
 		documentModel: Object,
@@ -178,61 +189,18 @@ var N = t({
 		storage: Object,
 		customization: Object
 	},
-	emits: [...E, "update:readOnly"],
-	setup(e, { emit: t, expose: a }) {
-		let s = o(), c, u = () => ({
-			...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 = j(s.value, u());
-		}), l(() => T.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 });
-	}
-}), P = /* @__PURE__ */ v({
-	detectDocumentFormat: () => d,
-	loadDocument: () => f,
-	mountEditorSurface: () => M
+	contract: D,
+	handle: D.handle,
+	mount: O
+}), j = /* @__PURE__ */ x({
+	detectDocumentFormat: () => o,
+	loadDocument: () => s,
+	mountEditorSurface: () => k
 });
-b(P, x);
+C(j, w);
 //#endregion
 //#region packages/bindings/src/building-blocks.ts
-function F(e = {}) {
+function M(e = {}) {
 	let t = e, n, r, i, a = 0, o = null, s, c = {
 		toolbarProps: null,
 		navigationProps: null,
@@ -283,7 +251,7 @@ function F(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 = M(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: _ },
@@ -315,14 +283,14 @@ function F(e = {}) {
 		}
 	};
 }
-function I(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 L = [
+var P = [
 	"Calibri",
 	"Arial",
 	"Cambria",
@@ -331,7 +299,7 @@ var L = [
 	"Segoe UI",
 	"Times New Roman",
 	"Verdana"
-], R = [
+], F = [
 	8,
 	9,
 	10,
@@ -346,7 +314,7 @@ var L = [
 	36,
 	48,
 	72
-], z = [
+], I = [
 	50,
 	75,
 	100,
@@ -354,7 +322,7 @@ var L = [
 	150,
 	200
 ];
-function B(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
@@ -364,32 +332,32 @@ function B(e, t) {
 		label: ""
 	}, ...r] : r;
 }
-var V = (e, t) => e[t] ?? t;
-function H(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: V(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: V(t, n),
+		label: R(t, n),
 		disabled: r,
 		run: () => void i()
 	}), a = (r, i, a) => ({
 		kind: "toggle",
 		id: r,
-		label: V(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: V(t, i),
+		label: R(t, i),
 		disabled: n,
 		pressed: e.list === a,
 		run: () => void e.onListChange(e.list === a ? "remove" : a)
@@ -398,18 +366,18 @@ function H(e) {
 		[{
 			kind: "select",
 			id: "fontFamily",
-			label: V(t, "Font"),
+			label: R(t, "Font"),
 			disabled: n,
 			value: e.fontFamily ?? "",
-			options: B(L, e.fontFamily),
+			options: L(P, e.fontFamily),
 			change: (t) => void e.onFontFamilyChange(t)
 		}, {
 			kind: "select",
 			id: "fontSize",
-			label: V(t, "Font size"),
+			label: R(t, "Font size"),
 			disabled: n,
 			value: e.fontSize === null ? "" : String(e.fontSize),
-			options: B(R, e.fontSize),
+			options: L(F, e.fontSize),
 			change: (t) => void e.onFontSizeChange(Number(t))
 		}],
 		[
@@ -427,13 +395,13 @@ function H(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 U(e) {
+function B(e) {
 	let { labels: t } = e;
 	return [[
 		{
 			kind: "action",
 			id: "previousPage",
-			label: V(t, "Previous page"),
+			label: R(t, "Previous page"),
 			disabled: !e.canGoPrevious,
 			run: () => void e.onPreviousPage()
 		},
@@ -447,28 +415,28 @@ function U(e) {
 		{
 			kind: "action",
 			id: "nextPage",
-			label: V(t, "Next page"),
+			label: R(t, "Next page"),
 			disabled: !e.canGoNext,
 			run: () => void e.onNextPage()
 		}
 	], [{
 		kind: "select",
 		id: "viewMode",
-		label: V(t, "Layout view"),
+		label: R(t, "Layout view"),
 		disabled: !1,
 		value: e.viewMode,
 		options: [{
 			value: "draft",
-			label: V(t, "Draft")
+			label: R(t, "Draft")
 		}, {
 			value: "print",
-			label: V(t, "Print Layout")
+			label: R(t, "Print Layout")
 		}],
 		change: (t) => void e.onViewModeChange(t === "print" ? "print" : "draft")
 	}]];
 }
-function W(e) {
-	let t = B(z, e.zoom).map((e) => ({
+function V(e) {
+	let t = L(I, e.zoom).map((e) => ({
 		value: e.value,
 		label: `${e.label}%`
 	}));
@@ -481,7 +449,7 @@ function W(e) {
 	}], [{
 		kind: "select",
 		id: "zoom",
-		label: V(e.labels, "Zoom"),
+		label: R(e.labels, "Zoom"),
 		disabled: !1,
 		value: String(e.zoom),
 		options: t,
@@ -490,24 +458,24 @@ function W(e) {
 }
 //#endregion
 //#region packages/vue/src/building-blocks.ts
-function G(t = {}) {
-	let n = F(), 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 K = t({
+var U = l({
 	name: "DocumentCanvas",
 	inheritAttrs: !1,
 	props: { mount: {
@@ -515,32 +483,32 @@ var K = 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 q(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,
@@ -550,47 +518,47 @@ function q(e) {
 		onClick: e.run
 	}, e.label);
 }
-function J(e, t) {
-	return n("div", {
+function G(e, t) {
+	return u("div", {
 		role: e,
-		ref: (e) => I(e)
-	}, t.map((e, t) => n("span", {
+		ref: (e) => N(e)
+	}, t.map((e, t) => u("span", {
 		key: t,
 		role: "group"
-	}, e.map(q))));
+	}, e.map(W))));
 }
-var Y = t({
+var K = l({
 	name: "WordToolbar",
 	props: { toolbarProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => J("toolbar", H(e.toolbarProps))
-}), X = t({
+	setup: (e) => () => G("toolbar", z(e.toolbarProps))
+}), q = l({
 	name: "WordPageNavigation",
 	props: { navigationProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => J("group", U(e.navigationProps))
-}), Z = t({
+	setup: (e) => () => G("group", B(e.navigationProps))
+}), J = l({
 	name: "WordStatusBar",
 	props: { statusProps: {
 		type: Object,
 		required: !0
 	} },
-	setup: (e) => () => J("group", W(e.statusProps))
+	setup: (e) => () => G("group", V(e.statusProps))
 });
-b(/* @__PURE__ */ v({
-	DocumentCanvas: () => K,
-	PageNavigation: () => X,
-	StatusBar: () => Z,
-	Toolbar: () => Y,
-	WordEditor: () => N,
-	detectDocumentFormat: () => d,
-	loadDocument: () => f,
-	mountEditorSurface: () => M,
-	useViewerBuildingBlocks: () => G
-}), P);
+C(/* @__PURE__ */ x({
+	DocumentCanvas: () => U,
+	PageNavigation: () => q,
+	StatusBar: () => J,
+	Toolbar: () => K,
+	WordEditor: () => A,
+	detectDocumentFormat: () => o,
+	loadDocument: () => s,
+	mountEditorSurface: () => k,
+	useViewerBuildingBlocks: () => H
+}), j);
 //#endregion
-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 };
+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.1.0",
+	"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.24.0",
-		"ooxml-ui": "^1.23.0"
+		"ooxml-core": "^1.25.0",
+		"ooxml-ui": "^1.26.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"