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 +121 -5
- package/dist/index.js +262 -70
- package/package.json +4 -4
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,
|
|
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 {
|
|
2
|
-
import { detectDocumentFormat as
|
|
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
|
|
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)
|
|
9
|
+
for (var r in e) m(n, r, {
|
|
9
10
|
get: e[r],
|
|
10
11
|
enumerable: !0
|
|
11
12
|
});
|
|
12
|
-
return t ||
|
|
13
|
-
},
|
|
14
|
-
if (t && typeof t == "object" || typeof t == "function") for (var i =
|
|
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 =
|
|
17
|
+
enumerable: !(r = h(t, s)) || r.enumerable
|
|
17
18
|
});
|
|
18
19
|
return e;
|
|
19
|
-
},
|
|
20
|
-
import * as
|
|
21
|
-
|
|
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
|
-
|
|
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
|
|
41
|
+
function T(e, t) {
|
|
39
42
|
return e.length === t.length && e.every((e, n) => e === t[n]);
|
|
40
43
|
}
|
|
41
|
-
function
|
|
44
|
+
function E(e, t, n) {
|
|
42
45
|
e[n] = t[n];
|
|
43
46
|
}
|
|
44
|
-
function
|
|
47
|
+
function D(e) {
|
|
45
48
|
let t = {};
|
|
46
|
-
for (let n of
|
|
49
|
+
for (let n of C) E(t, e, n);
|
|
47
50
|
return t;
|
|
48
51
|
}
|
|
49
|
-
function
|
|
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
|
|
58
|
-
(0,
|
|
59
|
-
let
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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
|
-
|
|
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) =>
|
|
69
|
-
save: () =>
|
|
70
|
-
download: (e) =>
|
|
71
|
-
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
|
|
80
|
+
return r.dirty;
|
|
74
81
|
},
|
|
75
82
|
destroy() {
|
|
76
|
-
|
|
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
|
|
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
|
|
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: [...
|
|
98
|
-
setup(e, { emit:
|
|
99
|
-
let
|
|
100
|
-
...
|
|
101
|
-
...
|
|
102
|
-
"document-change": (e) =>
|
|
103
|
-
"document-error": (e) =>
|
|
104
|
-
"page-change": (e) =>
|
|
105
|
-
"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
|
|
109
|
-
|
|
110
|
-
}),
|
|
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
|
|
132
|
+
return c?.element;
|
|
113
133
|
},
|
|
114
134
|
async load(e) {
|
|
115
|
-
if (!
|
|
116
|
-
await
|
|
135
|
+
if (!c) throw Error("Editor is not mounted");
|
|
136
|
+
await c.load(e);
|
|
117
137
|
},
|
|
118
138
|
async save() {
|
|
119
|
-
if (!
|
|
120
|
-
return
|
|
139
|
+
if (!c) throw Error("Editor is not mounted");
|
|
140
|
+
return c.save();
|
|
121
141
|
},
|
|
122
142
|
async download(e) {
|
|
123
|
-
if (!
|
|
124
|
-
await
|
|
143
|
+
if (!c) throw Error("Editor is not mounted");
|
|
144
|
+
await c.download(e);
|
|
125
145
|
},
|
|
126
146
|
markClean() {
|
|
127
|
-
|
|
147
|
+
c?.markClean();
|
|
128
148
|
},
|
|
129
149
|
get dirty() {
|
|
130
|
-
return
|
|
150
|
+
return c?.dirty ?? !1;
|
|
131
151
|
}
|
|
132
|
-
}), () =>
|
|
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
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
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 {
|
|
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.
|
|
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.
|
|
44
|
-
"ooxml-core": "^1.
|
|
45
|
-
"ooxml-ui": "^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"
|