docx-vue-viewer 0.5.0 → 0.6.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, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail, DocxEditorElement, WordToolbarProps } from 'ooxml-ui/docx';
 export * from 'ooxml-ui/docx';
+export { WordToolbarProps } from 'ooxml-ui/docx';
 export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/docx/load';
 
 declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -86,6 +87,114 @@ interface EditorBinding extends EditorHandle {
     update(options: EditorOptions): void;
     destroy(): void;
 }
+/** Framework-neutral composition API, shared by every adapter. Choose before mount. */
+interface SurfaceOptions extends EditorOptions {
+    canEdit?: boolean | undefined;
+}
+declare function mountEditorSurface(host: HTMLElement, initial?: SurfaceOptions): EditorBinding & {
+    update: (options: SurfaceOptions) => void;
+    getToolbarProps: () => {
+        labels: {
+            [k: string]: string;
+        };
+        canEdit: boolean;
+        list: "bullet" | "decimal" | "other" | null;
+        selection: {
+            from: number;
+            to: number;
+        } | null;
+        bold: boolean | null;
+        italic: boolean | null;
+        underline: boolean | null;
+        fontFamily: string | null;
+        fontSize: number | null;
+        alignment: string | null;
+        canUndo: boolean;
+        canRedo: boolean;
+        onBold: () => boolean;
+        onItalic: () => boolean;
+        onUnderline: () => boolean;
+        onFontFamilyChange: (family: string) => boolean;
+        onFontSizeChange: (size: number) => boolean;
+        onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
+        onListChange: (kind: "bullet" | "number" | "remove") => boolean;
+        onUndo: () => boolean;
+        onRedo: () => 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<{
+        labels: {
+            [k: string]: string;
+        };
+        canEdit: boolean;
+        list: "bullet" | "decimal" | "other" | null;
+        selection: {
+            from: number;
+            to: number;
+        } | null;
+        bold: boolean | null;
+        italic: boolean | null;
+        underline: boolean | null;
+        fontFamily: string | null;
+        fontSize: number | null;
+        alignment: string | null;
+        canUndo: boolean;
+        canRedo: boolean;
+        onBold: () => boolean;
+        onItalic: () => boolean;
+        onUnderline: () => boolean;
+        onFontFamilyChange: (family: string) => boolean;
+        onFontSizeChange: (size: number) => boolean;
+        onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
+        onListChange: (kind: "bullet" | "number" | "remove") => boolean;
+        onUndo: () => boolean;
+        onRedo: () => 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>;
+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>;
 
-export { WordEditor };
-export type { EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps };
+export { DocumentCanvas, 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",
@@ -30,25 +31,25 @@ var _ = [
 	"showToolbar",
 	"hiddenActions",
 	"ribbonAddIns"
-], v = [
+], w = [
 	"document-change",
 	"document-error",
 	"page-change",
 	"dirty-change",
 	"office-ribbon-add-in"
 ];
-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"],
@@ -57,33 +58,47 @@ function S(e) {
 		onRibbonAddIn: e["office-ribbon-add-in"]
 	};
 }
-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 = !1, l = (e) => {
+		o = e.detail, i.onDocumentChange?.(o);
+	}, u = (e) => i.onDocumentError?.(e.detail), d = (e) => i.onPageChange?.(e.detail), f = (e) => i.onDirtyChange?.(e.detail), p = (e) => i.onRibbonAddIn?.(e.detail);
+	r.addEventListener("document-change", l), r.addEventListener("document-error", u), r.addEventListener("page-change", d), r.addEventListener("dirty-change", f), r.addEventListener("office-ribbon-add-in", p);
+	let m = {
+		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);
+			c || (i = e, r.locale = e.locale ?? "en", r.readOnly = e.readOnly ?? !1, r.theme = e.theme ?? "auto", r.showThumbnails = e.showThumbnails ?? !1, r.showToolbar = e.showToolbar ?? !0, T(r.hiddenActions, (0, x.normalizeRibbonActions)(e.hiddenActions ?? []).ids) || (r.hiddenActions = e.hiddenActions ?? []), e.ribbonAddIns !== s && (r.ribbonAddIns = e.ribbonAddIns ?? []), s = e.ribbonAddIns, e.documentModel && e.documentModel !== a && e.documentModel !== o && (r.documentModel = e.documentModel), a = e.documentModel);
 		},
-		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());
+			c || (c = !0, r.removeEventListener("document-change", l), r.removeEventListener("document-error", u), r.removeEventListener("page-change", d), r.removeEventListener("dirty-change", f), r.removeEventListener("office-ribbon-add-in", p), r.remove());
 		}
 	};
-	return p.update(t), e.append(n), p;
+	return m.update(t), e.append(r), m;
+}
+function A(e, t = {}) {
+	let n = (e) => ({
+		...e,
+		readOnly: e.canEdit === !1 || e.readOnly === !0
+	}), r = k(e, n(t), !0), i = r.update;
+	return Object.assign(r, {
+		update: (e) => i(n(e)),
+		getToolbarProps: () => r.element.getToolbarProps(),
+		subscribe: (e) => r.element.subscribeEditorState(e)
+	});
 }
 //#endregion
 //#region packages/bindings/src/vue.ts
-var w = e({
+var j = t({
 	name: "WordEditor",
 	props: {
 		documentModel: Object,
@@ -98,52 +113,224 @@ var w = e({
 		hiddenActions: Array,
 		ribbonAddIns: Array
 	},
-	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)
 			})
 		});
-		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 });
+	}
+}), 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 = {
+		toolbarProps: null,
+		loading: !1,
+		error: null,
+		mode: "edit"
+	}, c = /* @__PURE__ */ new Set(), l = (e) => {
+		s = {
+			...s,
+			...e,
+			mode: t.canEdit === !1 || t.readOnly ? "view" : "edit"
+		};
+		for (let e of c) e(s);
+	}, u = () => l({
+		toolbarProps: n?.getToolbarProps() ?? null,
+		loading: n?.element.loading ?? !1,
+		...n?.element.loading ? { error: null } : {}
+	}), d = () => ({
+		...t,
+		onDocumentError: (e) => {
+			l({ error: e }), t.onDocumentError?.(e);
+		}
+	}), f = () => {
+		if (!n) throw Error("Editor is not mounted");
+		return n;
+	}, p = async (e) => {
+		let t = f(), r = ++a;
+		l({
+			loading: !0,
+			error: null
+		});
+		try {
+			await t.load(e);
+		} catch (e) {
+			throw r === a && n === t && l({ error: e instanceof Error ? e : Error(String(e)) }), e;
+		} finally {
+			r === a && n === t && u();
+		}
+	}, m = () => {
+		n && t.bytes && i !== t.bytes && (i = t.bytes, p(t.bytes).catch(() => {}));
+	}, h = (e) => {
+		e !== o && (o = e, ++a, r?.(), r = void 0, n?.destroy(), n = void 0, i = void 0, e && (n = A(e, d()), r = n.subscribe(u)), u(), m());
+	};
+	return {
+		canvasProps: { mount: h },
+		handle: {
+			get element() {
+				return f().element;
+			},
+			load: p,
+			save: () => f().save(),
+			download: (e) => f().download(e),
+			markClean: () => f().markClean(),
+			get dirty() {
+				return n?.dirty ?? !1;
+			}
+		},
+		get state() {
+			return s;
+		},
+		subscribe(e) {
+			return c.add(e), e(s), () => {
+				c.delete(e);
+			};
+		},
+		update(e) {
+			t.documentModel !== e.documentModel && l({ error: null }), t = e, n?.update(d()), u(), m();
+		},
+		destroy() {
+			h(null), c.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/vue/src/building-blocks.ts
+function F(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),
+		loading: e(() => r.value.loading),
+		error: e(() => r.value.error),
+		mode: e(() => r.value.mode)
+	};
+}
+var I = 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
+		});
+	}
+}), L = t({
+	name: "WordToolbar",
+	props: { toolbarProps: {
+		type: Object,
+		required: !0
+	} },
+	setup(e) {
+		return () => n("div", {
+			role: "toolbar",
+			ref: (e) => P(e)
+		}, [
+			[
+				"Bold",
+				e.toolbarProps.bold,
+				e.toolbarProps.onBold,
+				!e.toolbarProps.canEdit
+			],
+			[
+				"Italic",
+				e.toolbarProps.italic,
+				e.toolbarProps.onItalic,
+				!e.toolbarProps.canEdit
+			],
+			[
+				"Underline",
+				e.toolbarProps.underline,
+				e.toolbarProps.onUnderline,
+				!e.toolbarProps.canEdit
+			],
+			[
+				"Undo",
+				!1,
+				e.toolbarProps.onUndo,
+				!e.toolbarProps.canUndo
+			],
+			[
+				"Redo",
+				!1,
+				e.toolbarProps.onRedo,
+				!e.toolbarProps.canRedo
+			]
+		].map(([t, r, i, a]) => n("button", {
+			type: "button",
+			disabled: a,
+			"aria-pressed": r === null ? "mixed" : r,
+			onMousedown: (e) => e.preventDefault(),
+			onClick: i
+		}, e.toolbarProps.labels[String(t)] ?? String(t))));
 	}
-}), T = /* @__PURE__ */ f({
-	detectDocumentFormat: () => o,
-	loadDocument: () => s
 });
-m(T, h), m(/* @__PURE__ */ f({
-	WordEditor: () => w,
-	detectDocumentFormat: () => o,
-	loadDocument: () => s
-}), T);
+b(/* @__PURE__ */ v({
+	DocumentCanvas: () => I,
+	Toolbar: () => L,
+	WordEditor: () => j,
+	detectDocumentFormat: () => d,
+	loadDocument: () => f,
+	mountEditorSurface: () => A,
+	useViewerBuildingBlocks: () => F
+}), M);
 //#endregion
-export { w as WordEditor, o as detectDocumentFormat, s as loadDocument };
+export { I as DocumentCanvas, L as Toolbar, j as WordEditor, d as detectDocumentFormat, f as loadDocument, A as mountEditorSurface, F as useViewerBuildingBlocks };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "docx-vue-viewer",
-	"version": "0.5.0",
+	"version": "0.6.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.2.0",
+		"ooxml-core": "^1.20.0",
+		"ooxml-ui": "^1.19.0"
 	},
 	"peerDependencies": {
 		"vue": "^3.5.0"