docx-vue-viewer 0.5.0 → 1.0.0

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as vue from 'vue';
-import { PropType } from 'vue';
+import { PropType, MaybeRefOrGetter } from 'vue';
 import { DocumentModel } from 'docx-core';
 export * from 'docx-core';
-import { EditorThemeMode, RibbonActionInput, RibbonAddInTab, DocxEditorElement, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail } 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 { WordNavigationProps, WordStatusProps, WordToolbarProps } from 'ooxml-ui/docx';
 export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/docx/load';
 
 declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -18,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;
@@ -32,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;
@@ -60,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 {
@@ -69,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 {
 }
@@ -86,6 +97,221 @@ interface EditorBinding extends EditorHandle {
     update(options: EditorOptions): void;
     destroy(): void;
 }
+/** 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: WordListState;
+        selection: {
+            from: number;
+            to: number;
+        } | null;
+        bold: boolean | null;
+        italic: boolean | null;
+        underline: boolean | null;
+        fontFamily: string | null;
+        fontSize: number | null;
+        alignment: WordAlignment | null;
+        canUndo: boolean;
+        canRedo: boolean;
+        onBold: () => boolean;
+        onItalic: () => boolean;
+        onUnderline: () => boolean;
+        onFontFamilyChange: (family: string) => boolean;
+        onFontSizeChange: (size: number) => 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;
+};
+
+interface BuildingBlockOptions extends SurfaceOptions {
+    bytes?: Uint8Array | ArrayBuffer | undefined;
+}
+interface CanvasProps {
+    mount: (host: HTMLElement | null) => void;
+    className?: string | undefined;
+}
+
+declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBlockOptions>): {
+    canvasProps: {
+        mount: (host: HTMLElement | null) => void;
+    };
+    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: WordListState;
+        selection: {
+            from: number;
+            to: number;
+        } | null;
+        bold: boolean | null;
+        italic: boolean | null;
+        underline: boolean | null;
+        fontFamily: string | null;
+        fontSize: number | null;
+        alignment: WordAlignment | null;
+        canUndo: boolean;
+        canRedo: boolean;
+        onBold: () => boolean;
+        onItalic: () => boolean;
+        onUnderline: () => boolean;
+        onFontFamilyChange: (family: string) => boolean;
+        onFontSizeChange: (size: number) => 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">;
+};
+declare const DocumentCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
+    mount: {
+        type: PropType<CanvasProps["mount"]>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    mount: {
+        type: PropType<CanvasProps["mount"]>;
+        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>;
+        required: true;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    toolbarProps: {
+        type: PropType<WordToolbarProps>;
+        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 { WordEditor };
-export type { EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps };
+export { DocumentCanvas, PageNavigation, StatusBar, Toolbar, WordEditor, mountEditorSurface, useViewerBuildingBlocks };
+export type { BuildingBlockOptions, CanvasProps, EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps, SurfaceOptions };

package/dist/index.js

@@ -1,27 +1,28 @@
-import { defineComponent as e, h as t, onBeforeUnmount as n, onMounted as r, ref as i, watch as a } from "vue";
-import { detectDocumentFormat as o, loadDocument as s } from "ooxml-core/docx/load";
+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";
 export * from "ooxml-ui/docx";
 export * from "docx-core";
 //#region \0rolldown/runtime.js
-var c = Object.defineProperty, l = Object.getOwnPropertyDescriptor, u = Object.getOwnPropertyNames, d = Object.prototype.hasOwnProperty, f = (e, t) => {
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = Object.getOwnPropertyNames, _ = Object.prototype.hasOwnProperty, v = (e, t) => {
 	let n = {};
-	for (var r in e) c(n, r, {
+	for (var r in e) m(n, r, {
 		get: e[r],
 		enumerable: !0
 	});
-	return t || c(n, Symbol.toStringTag, { value: "Module" }), n;
-}, p = (e, t, n, r) => {
-	if (t && typeof t == "object" || typeof t == "function") for (var i = u(t), a = 0, o = i.length, s; a < o; a++) s = i[a], !d.call(e, s) && s !== n && c(e, s, {
+	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, {
 		get: ((e) => t[e]).bind(null, s),
-		enumerable: !(r = l(t, s)) || r.enumerable
+		enumerable: !(r = h(t, s)) || r.enumerable
 	});
 	return e;
-}, m = (e, t, n) => (p(e, t, "default"), n && p(n, t, "default")), h = /* @__PURE__ */ f({});
-import * as g from "ooxml-ui/docx";
-m(h, g);
+}, 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);
 //#endregion
 //#region packages/bindings/src/index.ts
-var _ = [
+var C = [
 	"documentModel",
 	"readOnly",
 	"locale",
@@ -29,61 +30,89 @@ var _ = [
 	"showThumbnails",
 	"showToolbar",
 	"hiddenActions",
-	"ribbonAddIns"
-], v = [
+	"ribbonAddIns",
+	"collaboration"
+], w = [
 	"document-change",
 	"document-error",
 	"page-change",
 	"dirty-change",
-	"office-ribbon-add-in"
+	"office-ribbon-add-in",
+	"collaboration-change"
 ];
-function y(e, t) {
+function T(e, t) {
 	return e.length === t.length && e.every((e, n) => e === t[n]);
 }
-function b(e, t, n) {
+function E(e, t, n) {
 	e[n] = t[n];
 }
-function x(e) {
+function D(e) {
 	let t = {};
-	for (let n of _) b(t, e, n);
+	for (let n of C) E(t, e, n);
 	return t;
 }
-function S(e) {
+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"]
+		onRibbonAddIn: e["office-ribbon-add-in"],
+		onCollaborationChange: e["collaboration-change"]
 	};
 }
-function C(e, t = {}) {
-	(0, h.registerDocxEditor)();
-	let n = e.ownerDocument.createElement("docx-editor"), r = {}, i, a, o, s = !1, c = (e) => {
-		a = e.detail, r.onDocumentChange?.(a);
-	}, l = (e) => r.onDocumentError?.(e.detail), u = (e) => r.onPageChange?.(e.detail), d = (e) => r.onDirtyChange?.(e.detail), f = (e) => r.onRibbonAddIn?.(e.detail);
-	n.addEventListener("document-change", c), n.addEventListener("document-error", l), n.addEventListener("page-change", u), n.addEventListener("dirty-change", d), n.addEventListener("office-ribbon-add-in", f);
-	let p = {
-		element: n,
+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,
 		update(e) {
-			s || (r = e, n.locale = e.locale ?? "en", n.readOnly = e.readOnly ?? !1, n.theme = e.theme ?? "auto", n.showThumbnails = e.showThumbnails ?? !1, n.showToolbar = e.showToolbar ?? !0, y(n.hiddenActions, (0, h.normalizeRibbonActions)(e.hiddenActions ?? []).ids) || (n.hiddenActions = e.hiddenActions ?? []), e.ribbonAddIns !== o && (n.ribbonAddIns = e.ribbonAddIns ?? []), o = e.ribbonAddIns, e.documentModel && e.documentModel !== i && e.documentModel !== a && (n.documentModel = e.documentModel), i = 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) => n.load(e),
-		save: () => n.save(),
-		download: (e) => n.download(e),
-		markClean: () => n.markClean(),
+		load: (e) => r.load(e),
+		save: () => r.save(),
+		download: (e) => r.download(e),
+		markClean: () => r.markClean(),
 		get dirty() {
-			return n.dirty;
+			return r.dirty;
 		},
 		destroy() {
-			s || (s = !0, n.removeEventListener("document-change", c), n.removeEventListener("document-error", l), n.removeEventListener("page-change", u), n.removeEventListener("dirty-change", d), n.removeEventListener("office-ribbon-add-in", f), n.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 p.update(t), e.append(n), p;
+	return g.update(t), e.append(r), g;
+}
+function A(e, t = {}) {
+	let n = (e) => ({
+		...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
 //#region packages/bindings/src/vue.ts
-var w = e({
+var j = t({
 	name: "WordEditor",
 	props: {
 		documentModel: Object,
@@ -96,54 +125,415 @@ var w = e({
 			default: !0
 		},
 		hiddenActions: Array,
-		ribbonAddIns: Array
+		ribbonAddIns: Array,
+		collaboration: Object
 	},
-	emits: [...v],
-	setup(e, { emit: o, expose: s }) {
-		let c = i(), l, u = () => ({
-			...x(e),
-			...S({
-				"document-change": (e) => o("document-change", e),
-				"document-error": (e) => o("document-error", e),
-				"page-change": (e) => o("page-change", e),
-				"dirty-change": (e) => o("dirty-change", e),
-				"office-ribbon-add-in": (e) => o("office-ribbon-add-in", e)
+	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 r(() => {
-			l = C(c.value, u());
-		}), a(() => _.map((t) => e[t]), () => l?.update(u())), n(() => l?.destroy()), s({
+		return i(() => {
+			c = k(s.value, u());
+		}), l(() => C.map((t) => e[t]), () => c?.update(u())), r(() => c?.destroy()), a({
 			get element() {
-				return l?.element;
+				return c?.element;
 			},
 			async load(e) {
-				if (!l) throw Error("Editor is not mounted");
-				await l.load(e);
+				if (!c) throw Error("Editor is not mounted");
+				await c.load(e);
 			},
 			async save() {
-				if (!l) throw Error("Editor is not mounted");
-				return l.save();
+				if (!c) throw Error("Editor is not mounted");
+				return c.save();
 			},
 			async download(e) {
-				if (!l) throw Error("Editor is not mounted");
-				await l.download(e);
+				if (!c) throw Error("Editor is not mounted");
+				await c.download(e);
 			},
 			markClean() {
-				l?.markClean();
+				c?.markClean();
 			},
 			get dirty() {
-				return l?.dirty ?? !1;
+				return c?.dirty ?? !1;
 			}
-		}), () => t("div", { ref: c });
+		}), () => n("div", { ref: s });
 	}
-}), T = /* @__PURE__ */ f({
-	detectDocumentFormat: () => o,
-	loadDocument: () => s
+}), M = /* @__PURE__ */ v({
+	detectDocumentFormat: () => d,
+	loadDocument: () => f,
+	mountEditorSurface: () => A
+});
+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, c = {
+		toolbarProps: null,
+		navigationProps: null,
+		statusProps: null,
+		loading: !1,
+		error: null,
+		mode: "view"
+	}, l = /* @__PURE__ */ new Set(), u = (e) => {
+		let n = {
+			...c,
+			...e,
+			mode: t.canEdit !== !0 || t.readOnly ? "view" : "edit"
+		};
+		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) => {
+			u({ error: e }), t.onDocumentError?.(e);
+		}
+	}), m = () => {
+		if (!n) throw Error("Editor is not mounted");
+		return n;
+	}, 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 && u({ error: e instanceof Error ? e : Error(String(e)) }), e;
+		} finally {
+			r === a && n === t && f();
+		}
+	}, 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: _ },
+		handle: {
+			get element() {
+				return m().element;
+			},
+			load: h,
+			save: () => m().save(),
+			download: (e) => m().download(e),
+			markClean: () => m().markClean(),
+			get dirty() {
+				return n?.dirty ?? !1;
+			}
+		},
+		get state() {
+			return c;
+		},
+		subscribe(e) {
+			return l.add(e), e(c), () => {
+				l.delete(e);
+			};
+		},
+		update(e) {
+			t.documentModel !== e.documentModel && u({ error: null }), t = e, n?.update(p()), f(), g();
+		},
+		destroy() {
+			_(null), l.clear();
+		}
+	};
+}
+function P(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 = [
+	"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 U(t = {}) {
+	let n = N(), r = s(n.state), i = n.subscribe((e) => {
+		r.value = e;
+	});
+	return u(() => n.update(c(t))), a(() => {
+		i(), n.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)
+	};
+}
+var W = t({
+	name: "DocumentCanvas",
+	inheritAttrs: !1,
+	props: { mount: {
+		type: Function,
+		required: !0
+	} },
+	setup(e, { attrs: t }) {
+		let r = null, i = (t) => {
+			let n = t;
+			r !== n && (r = n, e.mount(n));
+		};
+		return l(() => e.mount, (e, t) => {
+			t(null), r && e(r);
+		}), a(() => e.mount(null)), () => n("div", {
+			...t,
+			ref: i
+		});
+	}
+});
+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) => () => 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))
 });
-m(T, h), m(/* @__PURE__ */ f({
-	WordEditor: () => w,
-	detectDocumentFormat: () => o,
-	loadDocument: () => s
-}), T);
+b(/* @__PURE__ */ v({
+	DocumentCanvas: () => W,
+	PageNavigation: () => J,
+	StatusBar: () => Y,
+	Toolbar: () => q,
+	WordEditor: () => j,
+	detectDocumentFormat: () => d,
+	loadDocument: () => f,
+	mountEditorSurface: () => A,
+	useViewerBuildingBlocks: () => U
+}), M);
 //#endregion
-export { w as WordEditor, o as detectDocumentFormat, s as loadDocument };
+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.5.0",
+	"version": "1.0.0",
 	"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.1.13",
-		"ooxml-core": "^1.8.0",
-		"ooxml-ui": "^1.8.0"
+		"docx-core": "^0.3.0",
+		"ooxml-core": "^1.22.0",
+		"ooxml-ui": "^1.21.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"