docx-vue-viewer 0.4.10 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import * as vue from 'vue';
2
- import { PropType } from 'vue';
2
+ import { PropType, MaybeRefOrGetter } from 'vue';
3
3
  import { DocumentModel } from 'docx-core';
4
4
  export * from 'docx-core';
5
- import { EditorThemeMode, RibbonActionInput, DocxEditorElement, EditorLocaleInput, PageChangeDetail } from 'ooxml-ui/docx';
5
+ import { EditorThemeMode, RibbonActionInput, RibbonAddInTab, EditorLocaleInput, PageChangeDetail, RibbonAddInCommandDetail, DocxEditorElement, WordToolbarProps } from 'ooxml-ui/docx';
6
6
  export * from 'ooxml-ui/docx';
7
+ export { WordToolbarProps } from 'ooxml-ui/docx';
7
8
  export { DocumentFormat, detectDocumentFormat, loadDocument } from 'ooxml-core/docx/load';
8
9
 
9
10
  declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -17,9 +18,10 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
17
18
  default: boolean;
18
19
  };
19
20
  hiddenActions: PropType<readonly RibbonActionInput[]>;
21
+ ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
20
22
  }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
21
23
  [key: string]: any;
22
- }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("document-change" | "document-error" | "page-change" | "dirty-change")[], "document-change" | "document-error" | "page-change" | "dirty-change", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
24
+ }>, {}, {}, {}, 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<{
23
25
  documentModel: PropType<DocumentModel>;
24
26
  readOnly: BooleanConstructor;
25
27
  locale: StringConstructor;
@@ -30,11 +32,13 @@ declare const WordEditor: vue.DefineComponent<vue.ExtractPropTypes<{
30
32
  default: boolean;
31
33
  };
32
34
  hiddenActions: PropType<readonly RibbonActionInput[]>;
35
+ ribbonAddIns: PropType<readonly RibbonAddInTab[]>;
33
36
  }>> & Readonly<{
34
37
  "onDocument-change"?: (...args: any[]) => any;
35
38
  "onDocument-error"?: (...args: any[]) => any;
36
39
  "onPage-change"?: (...args: any[]) => any;
37
40
  "onDirty-change"?: (...args: any[]) => any;
41
+ "onOffice-ribbon-add-in"?: (...args: any[]) => any;
38
42
  }>, {
39
43
  readOnly: boolean;
40
44
  showThumbnails: boolean;
@@ -55,6 +59,8 @@ interface EditorProps {
55
59
  showToolbar?: boolean | undefined;
56
60
  /** Ribbon controls to hide, by stable id (`RIBBON_ACTION_IDS`). Old English labels still work but warn. */
57
61
  hiddenActions?: readonly RibbonActionInput[] | undefined;
62
+ /** Tabs the host adds after Word's own, as an Office add-in does. */
63
+ ribbonAddIns?: readonly RibbonAddInTab[] | undefined;
58
64
  }
59
65
  /** Editor callbacks; each is the framework-neutral form of one entry in `EDITOR_EVENT_NAMES`. */
60
66
  interface EditorEventOptions {
@@ -62,6 +68,8 @@ interface EditorEventOptions {
62
68
  onDocumentError?: ((error: Error) => void) | undefined;
63
69
  onPageChange?: ((detail: PageChangeDetail) => void) | undefined;
64
70
  onDirtyChange?: ((dirty: boolean) => void) | undefined;
71
+ /** A command of a host tab (`ribbonAddIns`) was chosen. */
72
+ onRibbonAddIn?: ((detail: RibbonAddInCommandDetail) => void) | undefined;
65
73
  }
66
74
  interface EditorOptions extends EditorProps, EditorEventOptions {
67
75
  }
@@ -79,6 +87,114 @@ interface EditorBinding extends EditorHandle {
79
87
  update(options: EditorOptions): void;
80
88
  destroy(): void;
81
89
  }
90
+ /** Framework-neutral composition API, shared by every adapter. Choose before mount. */
91
+ interface SurfaceOptions extends EditorOptions {
92
+ canEdit?: boolean | undefined;
93
+ }
94
+ declare function mountEditorSurface(host: HTMLElement, initial?: SurfaceOptions): EditorBinding & {
95
+ update: (options: SurfaceOptions) => void;
96
+ getToolbarProps: () => {
97
+ labels: {
98
+ [k: string]: string;
99
+ };
100
+ canEdit: boolean;
101
+ list: "bullet" | "decimal" | "other" | null;
102
+ selection: {
103
+ from: number;
104
+ to: number;
105
+ } | null;
106
+ bold: boolean | null;
107
+ italic: boolean | null;
108
+ underline: boolean | null;
109
+ fontFamily: string | null;
110
+ fontSize: number | null;
111
+ alignment: string | null;
112
+ canUndo: boolean;
113
+ canRedo: boolean;
114
+ onBold: () => boolean;
115
+ onItalic: () => boolean;
116
+ onUnderline: () => boolean;
117
+ onFontFamilyChange: (family: string) => boolean;
118
+ onFontSizeChange: (size: number) => boolean;
119
+ onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
120
+ onListChange: (kind: "bullet" | "number" | "remove") => boolean;
121
+ onUndo: () => boolean;
122
+ onRedo: () => boolean;
123
+ };
124
+ subscribe: (listener: () => void) => () => void;
125
+ };
126
+
127
+ interface BuildingBlockOptions extends SurfaceOptions {
128
+ bytes?: Uint8Array | ArrayBuffer | undefined;
129
+ }
130
+ interface CanvasProps {
131
+ mount: (host: HTMLElement | null) => void;
132
+ className?: string | undefined;
133
+ }
134
+
135
+ declare function useViewerBuildingBlocks(options?: MaybeRefOrGetter<BuildingBlockOptions>): {
136
+ canvasProps: {
137
+ mount: (host: HTMLElement | null) => void;
138
+ };
139
+ handle: EditorHandle;
140
+ toolbarProps: vue.ComputedRef<{
141
+ labels: {
142
+ [k: string]: string;
143
+ };
144
+ canEdit: boolean;
145
+ list: "bullet" | "decimal" | "other" | null;
146
+ selection: {
147
+ from: number;
148
+ to: number;
149
+ } | null;
150
+ bold: boolean | null;
151
+ italic: boolean | null;
152
+ underline: boolean | null;
153
+ fontFamily: string | null;
154
+ fontSize: number | null;
155
+ alignment: string | null;
156
+ canUndo: boolean;
157
+ canRedo: boolean;
158
+ onBold: () => boolean;
159
+ onItalic: () => boolean;
160
+ onUnderline: () => boolean;
161
+ onFontFamilyChange: (family: string) => boolean;
162
+ onFontSizeChange: (size: number) => boolean;
163
+ onAlignmentChange: (alignment: "left" | "center" | "right" | "justify") => boolean;
164
+ onListChange: (kind: "bullet" | "number" | "remove") => boolean;
165
+ onUndo: () => boolean;
166
+ onRedo: () => boolean;
167
+ } | null>;
168
+ loading: vue.ComputedRef<boolean>;
169
+ error: vue.ComputedRef<Error | null>;
170
+ mode: vue.ComputedRef<"view" | "edit">;
171
+ };
172
+ declare const DocumentCanvas: vue.DefineComponent<vue.ExtractPropTypes<{
173
+ mount: {
174
+ type: PropType<CanvasProps["mount"]>;
175
+ required: true;
176
+ };
177
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
178
+ [key: string]: any;
179
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
180
+ mount: {
181
+ type: PropType<CanvasProps["mount"]>;
182
+ required: true;
183
+ };
184
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
185
+ declare const Toolbar: vue.DefineComponent<vue.ExtractPropTypes<{
186
+ toolbarProps: {
187
+ type: PropType<WordToolbarProps>;
188
+ required: true;
189
+ };
190
+ }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
191
+ [key: string]: any;
192
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
193
+ toolbarProps: {
194
+ type: PropType<WordToolbarProps>;
195
+ required: true;
196
+ };
197
+ }>> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
82
198
 
83
- export { WordEditor };
84
- export type { EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps };
199
+ export { DocumentCanvas, Toolbar, WordEditor, mountEditorSurface, useViewerBuildingBlocks };
200
+ export type { BuildingBlockOptions, CanvasProps, EditorBinding, EditorEventOptions, EditorHandle, EditorOptions, EditorProps, SurfaceOptions };
package/dist/index.js CHANGED
@@ -1,86 +1,104 @@
1
- import { defineComponent as e, h as t, onBeforeUnmount as n, onMounted as r, ref as i, watch as a } from "vue";
2
- import { detectDocumentFormat as o, loadDocument as s } from "ooxml-core/docx/load";
1
+ 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";
2
+ import { detectDocumentFormat as d, loadDocument as f } from "ooxml-core/docx/load";
3
+ import * as p from "ooxml-ui/theme";
3
4
  export * from "ooxml-ui/docx";
4
5
  export * from "docx-core";
5
6
  //#region \0rolldown/runtime.js
6
- var c = Object.defineProperty, l = Object.getOwnPropertyDescriptor, u = Object.getOwnPropertyNames, d = Object.prototype.hasOwnProperty, f = (e, t) => {
7
+ var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, g = Object.getOwnPropertyNames, _ = Object.prototype.hasOwnProperty, v = (e, t) => {
7
8
  let n = {};
8
- for (var r in e) c(n, r, {
9
+ for (var r in e) m(n, r, {
9
10
  get: e[r],
10
11
  enumerable: !0
11
12
  });
12
- return t || c(n, Symbol.toStringTag, { value: "Module" }), n;
13
- }, p = (e, t, n, r) => {
14
- 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, {
13
+ return t || m(n, Symbol.toStringTag, { value: "Module" }), n;
14
+ }, y = (e, t, n, r) => {
15
+ 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, {
15
16
  get: ((e) => t[e]).bind(null, s),
16
- enumerable: !(r = l(t, s)) || r.enumerable
17
+ enumerable: !(r = h(t, s)) || r.enumerable
17
18
  });
18
19
  return e;
19
- }, m = (e, t, n) => (p(e, t, "default"), n && p(n, t, "default")), h = /* @__PURE__ */ f({});
20
- import * as g from "ooxml-ui/docx";
21
- m(h, g);
20
+ }, b = (e, t, n) => (y(e, t, "default"), n && y(n, t, "default")), x = /* @__PURE__ */ v({});
21
+ import * as S from "ooxml-ui/docx";
22
+ b(x, S);
22
23
  //#endregion
23
24
  //#region packages/bindings/src/index.ts
24
- var _ = [
25
+ var C = [
25
26
  "documentModel",
26
27
  "readOnly",
27
28
  "locale",
28
29
  "theme",
29
30
  "showThumbnails",
30
31
  "showToolbar",
31
- "hiddenActions"
32
- ], v = [
32
+ "hiddenActions",
33
+ "ribbonAddIns"
34
+ ], w = [
33
35
  "document-change",
34
36
  "document-error",
35
37
  "page-change",
36
- "dirty-change"
38
+ "dirty-change",
39
+ "office-ribbon-add-in"
37
40
  ];
38
- function y(e, t) {
41
+ function T(e, t) {
39
42
  return e.length === t.length && e.every((e, n) => e === t[n]);
40
43
  }
41
- function b(e, t, n) {
44
+ function E(e, t, n) {
42
45
  e[n] = t[n];
43
46
  }
44
- function x(e) {
47
+ function D(e) {
45
48
  let t = {};
46
- for (let n of _) b(t, e, n);
49
+ for (let n of C) E(t, e, n);
47
50
  return t;
48
51
  }
49
- function S(e) {
52
+ function O(e) {
50
53
  return {
51
54
  onDocumentChange: e["document-change"],
52
55
  onDocumentError: e["document-error"],
53
56
  onPageChange: e["page-change"],
54
- onDirtyChange: e["dirty-change"]
57
+ onDirtyChange: e["dirty-change"],
58
+ onRibbonAddIn: e["office-ribbon-add-in"]
55
59
  };
56
60
  }
57
- function C(e, t = {}) {
58
- (0, h.registerDocxEditor)();
59
- let n = e.ownerDocument.createElement("docx-editor"), r = {}, i, a, o = !1, s = (e) => {
60
- a = e.detail, r.onDocumentChange?.(a);
61
- }, c = (e) => r.onDocumentError?.(e.detail), l = (e) => r.onPageChange?.(e.detail), u = (e) => r.onDirtyChange?.(e.detail);
62
- n.addEventListener("document-change", s), n.addEventListener("document-error", c), n.addEventListener("page-change", l), n.addEventListener("dirty-change", u);
63
- let d = {
64
- element: n,
61
+ function k(e, t = {}, n = !1) {
62
+ (0, x.registerDocxEditor)();
63
+ let r = e.ownerDocument.createElement("docx-editor");
64
+ if (n && typeof r.getToolbarProps != "function") throw Error("Update ooxml-ui to use editor building blocks.");
65
+ r.surfaceOnly = n;
66
+ let i = {}, a, o, s, c = !1, l = (e) => {
67
+ o = e.detail, i.onDocumentChange?.(o);
68
+ }, u = (e) => i.onDocumentError?.(e.detail), d = (e) => i.onPageChange?.(e.detail), f = (e) => i.onDirtyChange?.(e.detail), p = (e) => i.onRibbonAddIn?.(e.detail);
69
+ 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);
70
+ let m = {
71
+ element: r,
65
72
  update(e) {
66
- o || (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.documentModel && e.documentModel !== i && e.documentModel !== a && (n.documentModel = e.documentModel), i = e.documentModel);
73
+ 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);
67
74
  },
68
- load: (e) => n.load(e),
69
- save: () => n.save(),
70
- download: (e) => n.download(e),
71
- markClean: () => n.markClean(),
75
+ load: (e) => r.load(e),
76
+ save: () => r.save(),
77
+ download: (e) => r.download(e),
78
+ markClean: () => r.markClean(),
72
79
  get dirty() {
73
- return n.dirty;
80
+ return r.dirty;
74
81
  },
75
82
  destroy() {
76
- o || (o = !0, n.removeEventListener("document-change", s), n.removeEventListener("document-error", c), n.removeEventListener("page-change", l), n.removeEventListener("dirty-change", u), n.remove());
83
+ 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());
77
84
  }
78
85
  };
79
- return d.update(t), e.append(n), d;
86
+ return m.update(t), e.append(r), m;
87
+ }
88
+ function A(e, t = {}) {
89
+ let n = (e) => ({
90
+ ...e,
91
+ readOnly: e.canEdit === !1 || e.readOnly === !0
92
+ }), r = k(e, n(t), !0), i = r.update;
93
+ return Object.assign(r, {
94
+ update: (e) => i(n(e)),
95
+ getToolbarProps: () => r.element.getToolbarProps(),
96
+ subscribe: (e) => r.element.subscribeEditorState(e)
97
+ });
80
98
  }
81
99
  //#endregion
82
100
  //#region packages/bindings/src/vue.ts
83
- var w = e({
101
+ var j = t({
84
102
  name: "WordEditor",
85
103
  props: {
86
104
  documentModel: Object,
@@ -92,53 +110,227 @@ var w = e({
92
110
  type: Boolean,
93
111
  default: !0
94
112
  },
95
- hiddenActions: Array
113
+ hiddenActions: Array,
114
+ ribbonAddIns: Array
96
115
  },
97
- emits: [...v],
98
- setup(e, { emit: o, expose: s }) {
99
- let c = i(), l, u = () => ({
100
- ...x(e),
101
- ...S({
102
- "document-change": (e) => o("document-change", e),
103
- "document-error": (e) => o("document-error", e),
104
- "page-change": (e) => o("page-change", e),
105
- "dirty-change": (e) => o("dirty-change", e)
116
+ emits: [...w],
117
+ setup(e, { emit: t, expose: a }) {
118
+ let s = o(), c, u = () => ({
119
+ ...D(e),
120
+ ...O({
121
+ "document-change": (e) => t("document-change", e),
122
+ "document-error": (e) => t("document-error", e),
123
+ "page-change": (e) => t("page-change", e),
124
+ "dirty-change": (e) => t("dirty-change", e),
125
+ "office-ribbon-add-in": (e) => t("office-ribbon-add-in", e)
106
126
  })
107
127
  });
108
- return r(() => {
109
- l = C(c.value, u());
110
- }), a(() => _.map((t) => e[t]), () => l?.update(u())), n(() => l?.destroy()), s({
128
+ return i(() => {
129
+ c = k(s.value, u());
130
+ }), l(() => C.map((t) => e[t]), () => c?.update(u())), r(() => c?.destroy()), a({
111
131
  get element() {
112
- return l?.element;
132
+ return c?.element;
113
133
  },
114
134
  async load(e) {
115
- if (!l) throw Error("Editor is not mounted");
116
- await l.load(e);
135
+ if (!c) throw Error("Editor is not mounted");
136
+ await c.load(e);
117
137
  },
118
138
  async save() {
119
- if (!l) throw Error("Editor is not mounted");
120
- return l.save();
139
+ if (!c) throw Error("Editor is not mounted");
140
+ return c.save();
121
141
  },
122
142
  async download(e) {
123
- if (!l) throw Error("Editor is not mounted");
124
- await l.download(e);
143
+ if (!c) throw Error("Editor is not mounted");
144
+ await c.download(e);
125
145
  },
126
146
  markClean() {
127
- l?.markClean();
147
+ c?.markClean();
128
148
  },
129
149
  get dirty() {
130
- return l?.dirty ?? !1;
150
+ return c?.dirty ?? !1;
131
151
  }
132
- }), () => t("div", { ref: c });
152
+ }), () => n("div", { ref: s });
153
+ }
154
+ }), M = /* @__PURE__ */ v({
155
+ detectDocumentFormat: () => d,
156
+ loadDocument: () => f,
157
+ mountEditorSurface: () => A
158
+ });
159
+ b(M, x);
160
+ //#endregion
161
+ //#region packages/bindings/src/building-blocks.ts
162
+ function N(e = {}) {
163
+ let t = e, n, r, i, a = 0, o = null, s = {
164
+ toolbarProps: null,
165
+ loading: !1,
166
+ error: null,
167
+ mode: "edit"
168
+ }, c = /* @__PURE__ */ new Set(), l = (e) => {
169
+ s = {
170
+ ...s,
171
+ ...e,
172
+ mode: t.canEdit === !1 || t.readOnly ? "view" : "edit"
173
+ };
174
+ for (let e of c) e(s);
175
+ }, u = () => l({
176
+ toolbarProps: n?.getToolbarProps() ?? null,
177
+ loading: n?.element.loading ?? !1,
178
+ ...n?.element.loading ? { error: null } : {}
179
+ }), d = () => ({
180
+ ...t,
181
+ onDocumentError: (e) => {
182
+ l({ error: e }), t.onDocumentError?.(e);
183
+ }
184
+ }), f = () => {
185
+ if (!n) throw Error("Editor is not mounted");
186
+ return n;
187
+ }, p = async (e) => {
188
+ let t = f(), r = ++a;
189
+ l({
190
+ loading: !0,
191
+ error: null
192
+ });
193
+ try {
194
+ await t.load(e);
195
+ } catch (e) {
196
+ throw r === a && n === t && l({ error: e instanceof Error ? e : Error(String(e)) }), e;
197
+ } finally {
198
+ r === a && n === t && u();
199
+ }
200
+ }, m = () => {
201
+ n && t.bytes && i !== t.bytes && (i = t.bytes, p(t.bytes).catch(() => {}));
202
+ }, h = (e) => {
203
+ 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());
204
+ };
205
+ return {
206
+ canvasProps: { mount: h },
207
+ handle: {
208
+ get element() {
209
+ return f().element;
210
+ },
211
+ load: p,
212
+ save: () => f().save(),
213
+ download: (e) => f().download(e),
214
+ markClean: () => f().markClean(),
215
+ get dirty() {
216
+ return n?.dirty ?? !1;
217
+ }
218
+ },
219
+ get state() {
220
+ return s;
221
+ },
222
+ subscribe(e) {
223
+ return c.add(e), e(s), () => {
224
+ c.delete(e);
225
+ };
226
+ },
227
+ update(e) {
228
+ t.documentModel !== e.documentModel && l({ error: null }), t = e, n?.update(d()), u(), m();
229
+ },
230
+ destroy() {
231
+ h(null), c.clear();
232
+ }
233
+ };
234
+ }
235
+ function P(e) {
236
+ if (!e) return;
237
+ let t = Reflect.get(p, "prepareOfficeUiBlock");
238
+ typeof t == "function" ? t(e, "toolbar", "docx") : (p.installOfficeUiTheme(e.ownerDocument), e.setAttribute("data-office-block", "toolbar"), e.setAttribute("data-office-product", "docx"));
239
+ }
240
+ //#endregion
241
+ //#region packages/vue/src/building-blocks.ts
242
+ function F(t = {}) {
243
+ let n = N(), r = s(n.state), i = n.subscribe((e) => {
244
+ r.value = e;
245
+ });
246
+ return u(() => n.update(c(t))), a(() => {
247
+ i(), n.destroy();
248
+ }), {
249
+ canvasProps: n.canvasProps,
250
+ handle: n.handle,
251
+ toolbarProps: e(() => r.value.toolbarProps),
252
+ loading: e(() => r.value.loading),
253
+ error: e(() => r.value.error),
254
+ mode: e(() => r.value.mode)
255
+ };
256
+ }
257
+ var I = t({
258
+ name: "DocumentCanvas",
259
+ inheritAttrs: !1,
260
+ props: { mount: {
261
+ type: Function,
262
+ required: !0
263
+ } },
264
+ setup(e, { attrs: t }) {
265
+ let r = null, i = (t) => {
266
+ let n = t;
267
+ r !== n && (r = n, e.mount(n));
268
+ };
269
+ return l(() => e.mount, (e, t) => {
270
+ t(null), r && e(r);
271
+ }), a(() => e.mount(null)), () => n("div", {
272
+ ...t,
273
+ ref: i
274
+ });
275
+ }
276
+ }), L = t({
277
+ name: "WordToolbar",
278
+ props: { toolbarProps: {
279
+ type: Object,
280
+ required: !0
281
+ } },
282
+ setup(e) {
283
+ return () => n("div", {
284
+ role: "toolbar",
285
+ ref: (e) => P(e)
286
+ }, [
287
+ [
288
+ "Bold",
289
+ e.toolbarProps.bold,
290
+ e.toolbarProps.onBold,
291
+ !e.toolbarProps.canEdit
292
+ ],
293
+ [
294
+ "Italic",
295
+ e.toolbarProps.italic,
296
+ e.toolbarProps.onItalic,
297
+ !e.toolbarProps.canEdit
298
+ ],
299
+ [
300
+ "Underline",
301
+ e.toolbarProps.underline,
302
+ e.toolbarProps.onUnderline,
303
+ !e.toolbarProps.canEdit
304
+ ],
305
+ [
306
+ "Undo",
307
+ !1,
308
+ e.toolbarProps.onUndo,
309
+ !e.toolbarProps.canUndo
310
+ ],
311
+ [
312
+ "Redo",
313
+ !1,
314
+ e.toolbarProps.onRedo,
315
+ !e.toolbarProps.canRedo
316
+ ]
317
+ ].map(([t, r, i, a]) => n("button", {
318
+ type: "button",
319
+ disabled: a,
320
+ "aria-pressed": r === null ? "mixed" : r,
321
+ onMousedown: (e) => e.preventDefault(),
322
+ onClick: i
323
+ }, e.toolbarProps.labels[String(t)] ?? String(t))));
133
324
  }
134
- }), T = /* @__PURE__ */ f({
135
- detectDocumentFormat: () => o,
136
- loadDocument: () => s
137
325
  });
138
- m(T, h), m(/* @__PURE__ */ f({
139
- WordEditor: () => w,
140
- detectDocumentFormat: () => o,
141
- loadDocument: () => s
142
- }), T);
326
+ b(/* @__PURE__ */ v({
327
+ DocumentCanvas: () => I,
328
+ Toolbar: () => L,
329
+ WordEditor: () => j,
330
+ detectDocumentFormat: () => d,
331
+ loadDocument: () => f,
332
+ mountEditorSurface: () => A,
333
+ useViewerBuildingBlocks: () => F
334
+ }), M);
143
335
  //#endregion
144
- export { w as WordEditor, o as detectDocumentFormat, s as loadDocument };
336
+ 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "docx-vue-viewer",
3
- "version": "0.4.10",
3
+ "version": "0.6.0",
4
4
  "description": "Vue 3 component for the DOCX editor. Self-contained: includes the editor, layout engine and legacy .doc reader.",
5
5
  "keywords": [
6
6
  "doc",
@@ -40,9 +40,9 @@
40
40
  "access": "public"
41
41
  },
42
42
  "dependencies": {
43
- "docx-core": "^0.1.13",
44
- "ooxml-core": "^1.4.0",
45
- "ooxml-ui": "^1.4.1"
43
+ "docx-core": "^0.2.0",
44
+ "ooxml-core": "^1.20.0",
45
+ "ooxml-ui": "^1.19.0"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "vue": "^3.5.0"