@nutrient-sdk/document-authoring 1.9.0-preview.202511131343.34cbcfe1d8755618d59ebd311955807aef35937c → 1.9.1
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/README.md +2 -2
- package/lib/docauth.mjs +1 -1
- package/lib/docauth.umd.js +1 -1
- package/lib/index.d.cts +561 -839
- package/lib/index.d.mts +561 -839
- package/package.json +1 -1
package/lib/index.d.mts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Action definition that users can register
|
|
3
|
+
*
|
|
3
4
|
* @since 1.9.0
|
|
4
5
|
* @public
|
|
5
6
|
* @sidebarGroup actions
|
|
@@ -11,12 +12,11 @@ export declare type Action = BuiltInAction | CustomAction;
|
|
|
11
12
|
* @public
|
|
12
13
|
* @sidebarGroup core
|
|
13
14
|
* @sidebarGroupOrder 3
|
|
14
|
-
* @see {@
|
|
15
|
+
* @see {@linkcode CreateDocAuthSystemOptions} for all available options when creating a DocAuthSystem.
|
|
15
16
|
*/
|
|
16
17
|
export declare type Assets = {
|
|
17
18
|
/**
|
|
18
|
-
* The base path to the Document Authoring assets.
|
|
19
|
-
* If not set, assets will be fetched from a public CDN.
|
|
19
|
+
* The base path to the Document Authoring assets. If not set, assets will be fetched from a public CDN.
|
|
20
20
|
*
|
|
21
21
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/self-hosting-assets/" target="_blank">Self-hosting assets guide</a> for information about hosting assets elsewhere.
|
|
22
22
|
*/
|
|
@@ -24,10 +24,10 @@ export declare type Assets = {
|
|
|
24
24
|
};
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
|
-
* Input type for binary data like DOCX files or font files.
|
|
28
|
-
* Used by {@link DocAuthSystem.importDOCX} and font loading functions.
|
|
27
|
+
* Input type for binary data like DOCX files or font files. Used by {@linkcode DocAuthSystem.importDOCX} and font loading functions.
|
|
29
28
|
*
|
|
30
29
|
* @example
|
|
30
|
+
*
|
|
31
31
|
* ```ts
|
|
32
32
|
* // From a Blob (e.g. file input)
|
|
33
33
|
* const fileInput = document.querySelector('input[type="file"]');
|
|
@@ -35,7 +35,7 @@ export declare type Assets = {
|
|
|
35
35
|
* const doc = await system.importDOCX(blob);
|
|
36
36
|
*
|
|
37
37
|
* // From an ArrayBuffer
|
|
38
|
-
* const arrayBuffer = await fetch('/document.docx').then(r => r.arrayBuffer());
|
|
38
|
+
* const arrayBuffer = await fetch('/document.docx').then((r) => r.arrayBuffer());
|
|
39
39
|
* const doc = await system.importDOCX(arrayBuffer);
|
|
40
40
|
*
|
|
41
41
|
* // From a fetch Response
|
|
@@ -46,71 +46,69 @@ export declare type Assets = {
|
|
|
46
46
|
* const doc = await system.importDOCX(fetch('/document.docx'));
|
|
47
47
|
*
|
|
48
48
|
* // From a Promise that resolves to ArrayBuffer
|
|
49
|
-
* const bufferPromise = fetch('/document.docx').then(r => r.arrayBuffer());
|
|
49
|
+
* const bufferPromise = fetch('/document.docx').then((r) => r.arrayBuffer());
|
|
50
50
|
* const doc = await system.importDOCX(bufferPromise);
|
|
51
51
|
* ```
|
|
52
52
|
*
|
|
53
53
|
* @public
|
|
54
54
|
* @sidebarGroup core
|
|
55
55
|
* @sidebarGroupOrder 10
|
|
56
|
-
* @see {@
|
|
57
|
-
* @see {@
|
|
56
|
+
* @see {@linkcode DocAuthSystem.importDOCX} for importing DOCX files.
|
|
57
|
+
* @see {@linkcode FontFile} for using BlobInput with fonts.
|
|
58
58
|
*/
|
|
59
59
|
export declare type BlobInput = Promise<Response | Blob | ArrayBuffer> | Response | Blob | ArrayBuffer;
|
|
60
60
|
|
|
61
61
|
/**
|
|
62
|
-
* Built-in actions have pre-defined IDs from {@
|
|
63
|
-
*
|
|
64
|
-
* reimplement internal functionality.
|
|
62
|
+
* Built-in actions have pre-defined IDs from {@linkcode BuiltInActionId} and automatically use default handlers if not provided. This allows you
|
|
63
|
+
* to customize things without having to reimplement internal functionality.
|
|
65
64
|
*
|
|
65
|
+
* @since 1.9.0
|
|
66
66
|
* @example
|
|
67
|
+
*
|
|
67
68
|
* ```ts
|
|
68
69
|
* import { defaultActions } from '@nutrient-sdk/document-authoring';
|
|
69
70
|
*
|
|
70
71
|
* // Remove all built-in actions except bold built-in (handler auto-populated)
|
|
71
|
-
* editor.setActions([
|
|
72
|
-
* { id: 'formatting.bold', label: 'Bold', shortcuts: ['Mod+B'] },
|
|
73
|
-
* ]);
|
|
72
|
+
* editor.setActions([{ id: 'formatting.bold', label: 'Bold', shortcuts: ['Mod+B'] }]);
|
|
74
73
|
*
|
|
75
74
|
* // Override the default handler for bold
|
|
76
75
|
* editor.setActions([
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
82
|
-
*
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
76
|
+
* ...defaultActions.filter(({ id }) => id !== 'formatting.bold'),
|
|
77
|
+
* {
|
|
78
|
+
* id: 'formatting.bold',
|
|
79
|
+
* label: 'Bold',
|
|
80
|
+
* shortcuts: ['Mod+B'],
|
|
81
|
+
* handler: () => {
|
|
82
|
+
* console.log('Custom bold implementation');
|
|
83
|
+
* },
|
|
84
|
+
* },
|
|
86
85
|
* ]);
|
|
87
86
|
*
|
|
88
87
|
* // Customize shortcuts and labels while keeping default behavior
|
|
89
88
|
* editor.setActions([
|
|
90
|
-
*
|
|
91
|
-
*
|
|
89
|
+
* ...defaultActions.filter(({ id }) => id !== 'document.export-pdf'),
|
|
90
|
+
* { id: 'document.export-pdf', label: 'Download PDF', shortcuts: ['Mod+P'] },
|
|
92
91
|
* ]);
|
|
93
92
|
* ```
|
|
94
93
|
*
|
|
95
|
-
* @since 1.9.0
|
|
96
94
|
* @public
|
|
97
95
|
* @sidebarGroup actions
|
|
98
96
|
* @sidebarGroupOrder 3
|
|
99
|
-
* @see {@
|
|
100
|
-
* @see {@
|
|
97
|
+
* @see {@linkcode BuiltInActionId} for available built-in action IDs.
|
|
98
|
+
* @see {@linkcode CustomAction} for defining custom actions.
|
|
101
99
|
*/
|
|
102
100
|
export declare type BuiltInAction = {
|
|
103
|
-
/** Built-in action ID from {@link BuiltInActionId} */
|
|
104
101
|
id: BuiltInActionId;
|
|
105
102
|
label: string;
|
|
106
103
|
description?: string;
|
|
107
104
|
/**
|
|
108
|
-
* Keyboard shortcuts for the action.
|
|
109
|
-
*
|
|
105
|
+
* Keyboard shortcuts for the action. Use "Mod" as the primary modifier key - it will be automatically resolved to:
|
|
106
|
+
*
|
|
110
107
|
* - "Ctrl" on Windows/Linux
|
|
111
108
|
* - "⌘" (Command) on Mac
|
|
112
109
|
*
|
|
113
110
|
* Examples:
|
|
111
|
+
*
|
|
114
112
|
* - "Mod+B" becomes "Ctrl+B" on Windows, "⌘B" on Mac
|
|
115
113
|
* - "Mod+Shift+P" becomes "Ctrl+Shift+P" on Windows, "⌘⇧P" on Mac
|
|
116
114
|
*/
|
|
@@ -127,6 +125,7 @@ export declare type BuiltInAction = {
|
|
|
127
125
|
*/
|
|
128
126
|
/**
|
|
129
127
|
* Built-in action IDs that have default implementations
|
|
128
|
+
*
|
|
130
129
|
* @since 1.9.0
|
|
131
130
|
* @public
|
|
132
131
|
* @sidebarGroup actions
|
|
@@ -135,15 +134,15 @@ export declare type BuiltInAction = {
|
|
|
135
134
|
export declare type BuiltInActionId = 'document.undo' | 'document.redo' | 'document.export-pdf' | 'document.export-docx' | 'formatting.bold' | 'formatting.italic' | 'formatting.underline' | 'formatting.strikethrough' | 'formatting.subscript' | 'formatting.superscript' | 'formatting.clear' | 'insert.page-break' | 'insert.section-break-next-page' | 'insert.section-break-continuous' | 'insert.column-break' | 'insert.image' | 'insert.link' | 'table.insert' | 'table.delete' | 'table.insert-row-above' | 'table.insert-row-below' | 'table.insert-column-left' | 'table.insert-column-right' | 'table.delete-row' | 'table.delete-column' | 'table.merge-cells' | 'table.split-cells' | 'view.zoom-in' | 'view.zoom-out' | 'view.zoom-reset' | 'view.toggle-ruler' | 'view.toggle-formatting-marks' | 'layout.align-left' | 'layout.align-center' | 'layout.align-right' | 'layout.align-justify' | 'layout.increase-indent' | 'layout.decrease-indent' | 'layout.bulleted-list' | 'layout.numbered-list' | 'style.apply';
|
|
136
135
|
|
|
137
136
|
/**
|
|
138
|
-
* Creates an instance of the Document Authoring system which can be shared between different tasks
|
|
139
|
-
*
|
|
137
|
+
* Creates an instance of the Document Authoring system which can be shared between different tasks like creating editors, importing Word
|
|
138
|
+
* documents or creating PDFs.
|
|
140
139
|
*
|
|
141
140
|
* This loads the JavaScript and WASM code and manages the font cache.
|
|
142
141
|
*
|
|
143
|
-
* @see <a href="https://www.nutrient.io/sdk/document-authoring/getting-started/" target="_blank">Getting started guide</a>
|
|
144
142
|
* @public
|
|
145
143
|
* @sidebarGroup core
|
|
146
144
|
* @sidebarGroupOrder 1
|
|
145
|
+
* @see <a href="https://www.nutrient.io/sdk/document-authoring/getting-started/" target="_blank">Getting started guide</a>
|
|
147
146
|
*/
|
|
148
147
|
export declare function createDocAuthSystem(options?: CreateDocAuthSystemOptions): Promise<DocAuthSystem>;
|
|
149
148
|
|
|
@@ -151,84 +150,89 @@ export declare function createDocAuthSystem(options?: CreateDocAuthSystemOptions
|
|
|
151
150
|
* Configuration options for creating a Document Authoring system.
|
|
152
151
|
*
|
|
153
152
|
* @example
|
|
153
|
+
*
|
|
154
154
|
* ```ts
|
|
155
155
|
* // Basic setup with CDN assets
|
|
156
156
|
* // Don't forget your license key with all the examples below
|
|
157
157
|
* const system = await createDocAuthSystem({
|
|
158
|
-
*
|
|
158
|
+
* licenseKey: 'YOUR_LICENSE_KEY',
|
|
159
159
|
* });
|
|
160
160
|
* ```
|
|
161
161
|
*
|
|
162
162
|
* @example
|
|
163
|
+
*
|
|
163
164
|
* ```ts
|
|
164
165
|
* // Self-hosted assets
|
|
165
166
|
* const system = await createDocAuthSystem({
|
|
166
|
-
*
|
|
167
|
-
*
|
|
168
|
-
*
|
|
167
|
+
* assets: {
|
|
168
|
+
* base: '/static/assets/',
|
|
169
|
+
* },
|
|
169
170
|
* });
|
|
170
171
|
* ```
|
|
171
172
|
*
|
|
172
173
|
* @example
|
|
174
|
+
*
|
|
173
175
|
* ```ts
|
|
174
176
|
* // With custom fonts using FontFile
|
|
175
177
|
* import { defaultFontIndex } from '@nutrient-sdk/document-authoring';
|
|
176
178
|
*
|
|
177
179
|
* const system = await createDocAuthSystem({
|
|
178
|
-
*
|
|
179
|
-
*
|
|
180
|
-
*
|
|
181
|
-
*
|
|
182
|
-
*
|
|
183
|
-
*
|
|
184
|
-
*
|
|
180
|
+
* fontConfig: {
|
|
181
|
+
* fonts: [
|
|
182
|
+
* defaultFontIndex,
|
|
183
|
+
* { type: 'file', blob: fetch('/fonts/custom-font.ttf') },
|
|
184
|
+
* { type: 'file', blob: fetch('/fonts/another-font.ttf') },
|
|
185
|
+
* ],
|
|
186
|
+
* },
|
|
185
187
|
* });
|
|
186
188
|
* ```
|
|
187
189
|
*
|
|
188
190
|
* @example
|
|
191
|
+
*
|
|
189
192
|
* ```ts
|
|
190
193
|
* // With custom font index for large font libraries
|
|
191
194
|
* const system = await createDocAuthSystem({
|
|
192
|
-
*
|
|
193
|
-
*
|
|
194
|
-
*
|
|
195
|
-
*
|
|
196
|
-
*
|
|
197
|
-
*
|
|
198
|
-
*
|
|
199
|
-
*
|
|
200
|
-
*
|
|
201
|
-
*
|
|
195
|
+
* fontConfig: {
|
|
196
|
+
* fonts: [
|
|
197
|
+
* defaultFontIndex,
|
|
198
|
+
* {
|
|
199
|
+
* type: 'index',
|
|
200
|
+
* index: fetch('/fonts/font-index.json'),
|
|
201
|
+
* loadFn: (name) => fetch(`/fonts/${name}`),
|
|
202
|
+
* },
|
|
203
|
+
* ],
|
|
204
|
+
* },
|
|
202
205
|
* });
|
|
203
206
|
* ```
|
|
204
207
|
*
|
|
205
208
|
* @example
|
|
209
|
+
*
|
|
206
210
|
* ```ts
|
|
207
211
|
* // Complete configuration
|
|
208
212
|
* const system = await createDocAuthSystem({
|
|
209
|
-
*
|
|
210
|
-
*
|
|
211
|
-
*
|
|
212
|
-
*
|
|
213
|
-
*
|
|
214
|
-
*
|
|
215
|
-
*
|
|
216
|
-
*
|
|
217
|
-
*
|
|
218
|
-
*
|
|
219
|
-
*
|
|
220
|
-
*
|
|
221
|
-
*
|
|
222
|
-
*
|
|
213
|
+
* licenseKey: 'YOUR_LICENSE_KEY',
|
|
214
|
+
* assets: {
|
|
215
|
+
* base: '/static/docauth/',
|
|
216
|
+
* },
|
|
217
|
+
* fontConfig: {
|
|
218
|
+
* fonts: [
|
|
219
|
+
* defaultFontIndex,
|
|
220
|
+
* {
|
|
221
|
+
* type: 'index',
|
|
222
|
+
* index: fetch('/fonts/corporate-fonts.json'),
|
|
223
|
+
* loadFn: (name) => fetch(`/fonts/${name}`),
|
|
224
|
+
* },
|
|
225
|
+
* ],
|
|
226
|
+
* },
|
|
223
227
|
* });
|
|
224
228
|
* ```
|
|
225
229
|
*
|
|
226
230
|
* @public
|
|
227
231
|
* @sidebarGroup core
|
|
228
232
|
* @sidebarGroupOrder 2
|
|
229
|
-
* @see {@
|
|
230
|
-
* @see {@
|
|
231
|
-
* @see {@
|
|
233
|
+
* @see {@linkcode createDocAuthSystem} for creating a system instance.
|
|
234
|
+
* @see {@linkcode FontConfig} for font configuration details.
|
|
235
|
+
* @see {@linkcode Assets} for asset hosting configuration.
|
|
232
236
|
*/
|
|
233
237
|
export declare type CreateDocAuthSystemOptions = {
|
|
234
238
|
licenseKey?: string;
|
|
@@ -239,7 +243,7 @@ export declare type CreateDocAuthSystemOptions = {
|
|
|
239
243
|
*/
|
|
240
244
|
assets?: Assets;
|
|
241
245
|
/**
|
|
242
|
-
* @since
|
|
246
|
+
* @since 1.0.26
|
|
243
247
|
*
|
|
244
248
|
* Font configuration.
|
|
245
249
|
*/
|
|
@@ -250,42 +254,47 @@ export declare type CreateDocAuthSystemOptions = {
|
|
|
250
254
|
* Options for creating documents from plain text.
|
|
251
255
|
*
|
|
252
256
|
* @example
|
|
257
|
+
*
|
|
253
258
|
* ```ts
|
|
254
259
|
* // Create document with default page settings
|
|
255
260
|
* const doc = await system.createDocumentFromPlaintext('Hello World');
|
|
256
261
|
* ```
|
|
257
262
|
*
|
|
258
263
|
* @example
|
|
264
|
+
*
|
|
259
265
|
* ```ts
|
|
260
266
|
* // Create document with standard page size
|
|
261
267
|
* const doc = await system.createDocumentFromPlaintext('My content', {
|
|
262
|
-
*
|
|
268
|
+
* pageSize: 'A4',
|
|
263
269
|
* });
|
|
264
270
|
* ```
|
|
265
271
|
*
|
|
266
272
|
* @example
|
|
273
|
+
*
|
|
267
274
|
* ```ts
|
|
268
275
|
* // Create document with custom page size (in points, 72 points = 1 inch)
|
|
269
276
|
* const doc = await system.createDocumentFromPlaintext('My content', {
|
|
270
|
-
*
|
|
277
|
+
* pageSize: { width: 612, height: 792 }, // US Letter in points
|
|
271
278
|
* });
|
|
272
279
|
* ```
|
|
273
280
|
*
|
|
274
281
|
* @example
|
|
282
|
+
*
|
|
275
283
|
* ```ts
|
|
276
284
|
* // Create document with custom margins
|
|
277
285
|
* const doc = await system.createDocumentFromPlaintext('My content', {
|
|
278
|
-
*
|
|
279
|
-
*
|
|
280
|
-
*
|
|
281
|
-
*
|
|
282
|
-
*
|
|
283
|
-
*
|
|
284
|
-
*
|
|
286
|
+
* pageSize: 'Letter',
|
|
287
|
+
* pageMargins: {
|
|
288
|
+
* left: 72, // 1 inch
|
|
289
|
+
* right: 72, // 1 inch
|
|
290
|
+
* top: 72, // 1 inch
|
|
291
|
+
* bottom: 72, // 1 inch
|
|
292
|
+
* },
|
|
285
293
|
* });
|
|
286
294
|
* ```
|
|
287
295
|
*
|
|
288
296
|
* @example
|
|
297
|
+
*
|
|
289
298
|
* ```ts
|
|
290
299
|
* // Process multi-paragraph text
|
|
291
300
|
* const text = `First paragraph
|
|
@@ -294,19 +303,18 @@ export declare type CreateDocAuthSystemOptions = {
|
|
|
294
303
|
*
|
|
295
304
|
* Third paragraph with\ttab character.`;
|
|
296
305
|
* const doc = await system.createDocumentFromPlaintext(text, {
|
|
297
|
-
*
|
|
306
|
+
* pageSize: 'Letter',
|
|
298
307
|
* });
|
|
299
308
|
* ```
|
|
300
309
|
*
|
|
301
310
|
* @public
|
|
302
311
|
* @sidebarGroup core
|
|
303
312
|
* @sidebarGroupOrder 8
|
|
304
|
-
* @see {@
|
|
313
|
+
* @see {@linkcode DocAuthSystem.createDocumentFromPlaintext} for creating documents from text.
|
|
305
314
|
*/
|
|
306
315
|
export declare type CreateDocumentFromPlaintextOptions = {
|
|
307
316
|
/**
|
|
308
|
-
* Defines the size of the document pages.
|
|
309
|
-
* Can be custom dimensions or standard sizes ('Letter', 'A4', 'A5', 'A6').
|
|
317
|
+
* Defines the size of the document pages. Can be custom dimensions or standard sizes ('Letter', 'A4', 'A5', 'A6').
|
|
310
318
|
*/
|
|
311
319
|
pageSize?: {
|
|
312
320
|
width: number;
|
|
@@ -329,12 +337,14 @@ export declare type CreateDocumentFromPlaintextOptions = {
|
|
|
329
337
|
* Options for creating an editor instance.
|
|
330
338
|
*
|
|
331
339
|
* @example
|
|
340
|
+
*
|
|
332
341
|
* ```ts
|
|
333
342
|
* // Create editor with empty document
|
|
334
343
|
* const editor = await system.createEditor(targetElement);
|
|
335
344
|
* ```
|
|
336
345
|
*
|
|
337
346
|
* @example
|
|
347
|
+
*
|
|
338
348
|
* ```ts
|
|
339
349
|
* // Create editor with existing document
|
|
340
350
|
* const doc = await system.loadDocument(docJSON);
|
|
@@ -342,147 +352,144 @@ export declare type CreateDocumentFromPlaintextOptions = {
|
|
|
342
352
|
* ```
|
|
343
353
|
*
|
|
344
354
|
* @example
|
|
355
|
+
*
|
|
345
356
|
* ```ts
|
|
346
357
|
* // Create editor with custom UI settings
|
|
347
358
|
* const editor = await system.createEditor(targetElement, {
|
|
348
|
-
*
|
|
349
|
-
*
|
|
350
|
-
*
|
|
351
|
-
*
|
|
352
|
-
*
|
|
359
|
+
* ui: {
|
|
360
|
+
* locale: 'de',
|
|
361
|
+
* unit: 'cm',
|
|
362
|
+
* ruler: { enabled: false },
|
|
363
|
+
* },
|
|
353
364
|
* });
|
|
354
365
|
* ```
|
|
355
366
|
*
|
|
356
367
|
* @example
|
|
368
|
+
*
|
|
357
369
|
* ```ts
|
|
358
370
|
* // Create editor with custom actions and toolbar
|
|
359
371
|
* const editor = await system.createEditor(targetElement, {
|
|
360
|
-
*
|
|
361
|
-
*
|
|
362
|
-
*
|
|
363
|
-
*
|
|
364
|
-
*
|
|
365
|
-
*
|
|
366
|
-
*
|
|
367
|
-
*
|
|
368
|
-
*
|
|
369
|
-
*
|
|
370
|
-
*
|
|
371
|
-
*
|
|
372
|
-
*
|
|
373
|
-
*
|
|
374
|
-
*
|
|
375
|
-
*
|
|
376
|
-
*
|
|
377
|
-
*
|
|
378
|
-
*
|
|
379
|
-
*
|
|
380
|
-
*
|
|
381
|
-
*
|
|
372
|
+
* ui: {
|
|
373
|
+
* actions: [
|
|
374
|
+
* ...defaultActions,
|
|
375
|
+
* {
|
|
376
|
+
* id: 'custom.save',
|
|
377
|
+
* label: 'Save',
|
|
378
|
+
* shortcuts: ['Mod+S'],
|
|
379
|
+
* handler: async () => {
|
|
380
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
381
|
+
* await fetch('/api/save', { method: 'POST', body: JSON.stringify(doc) });
|
|
382
|
+
* },
|
|
383
|
+
* },
|
|
384
|
+
* ],
|
|
385
|
+
* toolbar: {
|
|
386
|
+
* items: [
|
|
387
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
388
|
+
* { type: 'built-in', id: 'redo', builtInType: 'redo' },
|
|
389
|
+
* { type: 'separator', id: 'sep-1' },
|
|
390
|
+
* { type: 'action', id: 'save-btn', actionId: 'custom.save' },
|
|
391
|
+
* ],
|
|
392
|
+
* },
|
|
393
|
+
* },
|
|
382
394
|
* });
|
|
383
395
|
* ```
|
|
384
396
|
*
|
|
385
397
|
* @public
|
|
386
398
|
* @sidebarGroup core
|
|
387
399
|
* @sidebarGroupOrder 6
|
|
388
|
-
* @see {@
|
|
389
|
-
* @see {@
|
|
400
|
+
* @see {@linkcode DocAuthSystem.createEditor} for creating editors.
|
|
401
|
+
* @see {@linkcode UIOptions} for available UI configuration options.
|
|
390
402
|
*/
|
|
391
403
|
export declare type CreateEditorOptions = {
|
|
392
404
|
/**
|
|
393
|
-
* The document to attach to this editor.
|
|
394
|
-
*
|
|
395
|
-
* @see {@
|
|
405
|
+
* The document to attach to this editor. If no document is provided, an empty document will be created.
|
|
406
|
+
*
|
|
407
|
+
* @see {@linkcode DocAuthEditor.setCurrentDocument} for setting the document after the editor is created.
|
|
396
408
|
*/
|
|
397
409
|
document?: DocAuthDocument;
|
|
398
410
|
/**
|
|
399
|
-
* @since 1.5.0
|
|
400
|
-
* Allows toggling/changing various UI options.
|
|
411
|
+
* @since 1.5.0 Allows toggling/changing various UI options.
|
|
401
412
|
*/
|
|
402
413
|
ui?: UIOptions;
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
*/
|
|
406
|
-
__hideDOCXDownload?: boolean;
|
|
407
|
-
/**
|
|
408
|
-
* @internal
|
|
409
|
-
*/
|
|
410
|
-
__hidePDFDownload?: boolean;
|
|
414
|
+
|
|
415
|
+
|
|
411
416
|
};
|
|
412
417
|
|
|
413
418
|
/**
|
|
414
|
-
* Custom actions allow you to add your own functionality to the editor.
|
|
415
|
-
*
|
|
419
|
+
* Custom actions allow you to add your own functionality to the editor. Unlike {@linkcode BuiltInAction}, custom actions must provide a handler
|
|
420
|
+
* function.
|
|
416
421
|
*
|
|
422
|
+
* @since 1.9.0
|
|
417
423
|
* @example
|
|
424
|
+
*
|
|
418
425
|
* ```ts
|
|
419
426
|
* import { defaultActions } from '@nutrient-sdk/document-authoring';
|
|
420
427
|
*
|
|
421
428
|
* // Add a custom action with keyboard shortcut
|
|
422
429
|
* editor.setActions([
|
|
423
|
-
*
|
|
424
|
-
*
|
|
425
|
-
*
|
|
426
|
-
*
|
|
427
|
-
*
|
|
428
|
-
*
|
|
429
|
-
*
|
|
430
|
-
*
|
|
431
|
-
*
|
|
430
|
+
* ...defaultActions,
|
|
431
|
+
* {
|
|
432
|
+
* id: 'custom.insert-signature',
|
|
433
|
+
* label: 'Insert Signature',
|
|
434
|
+
* shortcuts: ['Mod+Shift+S'],
|
|
435
|
+
* handler: () => {
|
|
436
|
+
* editor.insertTextAtCursor('\n\nBest regards,\nJohn Doe');
|
|
437
|
+
* },
|
|
438
|
+
* },
|
|
432
439
|
* ]);
|
|
433
440
|
*
|
|
434
441
|
* // Add a custom action with custom icon
|
|
435
442
|
* editor.setActions([
|
|
436
|
-
*
|
|
437
|
-
*
|
|
438
|
-
*
|
|
439
|
-
*
|
|
440
|
-
*
|
|
441
|
-
*
|
|
442
|
-
*
|
|
443
|
-
*
|
|
444
|
-
*
|
|
445
|
-
*
|
|
446
|
-
*
|
|
447
|
-
*
|
|
448
|
-
*
|
|
443
|
+
* ...defaultActions,
|
|
444
|
+
* {
|
|
445
|
+
* id: 'custom.save',
|
|
446
|
+
* label: 'Save Document',
|
|
447
|
+
* icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiPi4uLjwvc3ZnPg==',
|
|
448
|
+
* handler: async () => {
|
|
449
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
450
|
+
* await fetch('/api/save', {
|
|
451
|
+
* method: 'POST',
|
|
452
|
+
* body: JSON.stringify(doc),
|
|
453
|
+
* });
|
|
454
|
+
* },
|
|
455
|
+
* },
|
|
449
456
|
* ]);
|
|
450
457
|
*
|
|
451
458
|
* // Add a conditional action (disabled when no cursor/selection)
|
|
452
459
|
* editor.setActions([
|
|
453
|
-
*
|
|
454
|
-
*
|
|
455
|
-
*
|
|
456
|
-
*
|
|
457
|
-
*
|
|
458
|
-
*
|
|
459
|
-
*
|
|
460
|
-
*
|
|
461
|
-
*
|
|
462
|
-
*
|
|
460
|
+
* ...defaultActions,
|
|
461
|
+
* {
|
|
462
|
+
* id: 'custom.insert-date',
|
|
463
|
+
* label: "Insert Today's Date",
|
|
464
|
+
* isEnabled: () => editor.hasActiveCursor(),
|
|
465
|
+
* handler: () => {
|
|
466
|
+
* const date = new Date().toLocaleDateString();
|
|
467
|
+
* editor.insertTextAtCursor(date);
|
|
468
|
+
* },
|
|
469
|
+
* },
|
|
463
470
|
* ]);
|
|
464
471
|
* ```
|
|
465
472
|
*
|
|
466
|
-
* @since 1.9.0
|
|
467
473
|
* @public
|
|
468
474
|
* @sidebarGroup actions
|
|
469
475
|
* @sidebarGroupOrder 4
|
|
470
|
-
* @see {@
|
|
471
|
-
* @see {@
|
|
476
|
+
* @see {@linkcode BuiltInAction} for built-in actions with default implementations.
|
|
477
|
+
* @see {@linkcode ToolbarActionItem} for adding custom actions to the toolbar.
|
|
472
478
|
*/
|
|
473
479
|
export declare type CustomAction = {
|
|
474
|
-
/** Unique identifier for this action (must not be a {@
|
|
480
|
+
/** Unique identifier for this action (must not be a {@linkcode BuiltInActionId}) */
|
|
475
481
|
id: string;
|
|
476
482
|
label: string;
|
|
477
483
|
description?: string;
|
|
478
484
|
/**
|
|
479
|
-
* Keyboard shortcuts for the action.
|
|
480
|
-
*
|
|
485
|
+
* Keyboard shortcuts for the action. Use "Cmd" as the modifier key - it will be resolved to:
|
|
486
|
+
*
|
|
481
487
|
* - "Ctrl" on Windows/Linux (for keyboard handling)
|
|
482
488
|
* - "⌘" on Mac (for keyboard handling)
|
|
483
489
|
* - "Ctrl" or "⌘" for display based on platform
|
|
484
490
|
*
|
|
485
491
|
* Examples:
|
|
492
|
+
*
|
|
486
493
|
* - "Cmd+B" becomes "Ctrl+B" on Windows, "⌘B" on Mac
|
|
487
494
|
* - "Cmd+Shift+P" becomes "Ctrl+Shift+P" on Windows, "⌘⇧P" on Mac
|
|
488
495
|
*/
|
|
@@ -496,7 +503,7 @@ export declare type CustomAction = {
|
|
|
496
503
|
};
|
|
497
504
|
|
|
498
505
|
/**
|
|
499
|
-
* @
|
|
506
|
+
* @ignore
|
|
500
507
|
*/
|
|
501
508
|
declare const _default: {
|
|
502
509
|
createDocAuthSystem: typeof createDocAuthSystem;
|
|
@@ -509,38 +516,37 @@ export default _default;
|
|
|
509
516
|
/**
|
|
510
517
|
* Get the default set of actions available in the editor. Can be combined with custom actions.
|
|
511
518
|
*
|
|
512
|
-
* Note: Built-in actions (those with IDs from {@
|
|
513
|
-
*
|
|
514
|
-
*
|
|
515
|
-
* without needing to implement the behavior yourself. Built-in handlers can also be
|
|
516
|
-
* overridden by providing your own handler function.
|
|
519
|
+
* Note: Built-in actions (those with IDs from {@linkcode BuiltInActionId}) can omit handlers - they will be automatically populated with default
|
|
520
|
+
* implementations when passed to {@linkcode DocAuthEditor#setActions | editor.setActions()}. This allows you to customize labels, shortcuts, and order without needing to
|
|
521
|
+
* implement the behavior yourself. Built-in handlers can also be overridden by providing your own handler function.
|
|
517
522
|
*
|
|
518
523
|
* Custom actions (those with any other string ID) must provide a handler function.
|
|
519
524
|
*
|
|
525
|
+
* @since 1.9.0
|
|
520
526
|
* @example
|
|
527
|
+
*
|
|
521
528
|
* ```ts
|
|
522
529
|
* import { defaultActions } from '@nutrient-sdk/document-authoring';
|
|
523
530
|
*
|
|
524
531
|
* // Customize a built-in action's metadata (handlers auto-populate for built-in actions)
|
|
525
532
|
* editor.setActions([
|
|
526
|
-
*
|
|
527
|
-
*
|
|
533
|
+
* ...defaultActions.filter(({ id }) => id !== 'formatting.bold'),
|
|
534
|
+
* { id: 'formatting.bold', label: 'Make Bold', shortcuts: ['Ctrl+B'] },
|
|
528
535
|
* ]);
|
|
529
536
|
*
|
|
530
537
|
* // Override a built-in action's behavior
|
|
531
538
|
* editor.setActions([
|
|
532
|
-
*
|
|
533
|
-
*
|
|
539
|
+
* ...defaultActions.filter(({ id }) => id !== 'formatting.bold'),
|
|
540
|
+
* { id: 'formatting.bold', label: 'Bold', handler: () => console.log('custom bold!') },
|
|
534
541
|
* ]);
|
|
535
542
|
*
|
|
536
543
|
* // Add custom actions (must provide handler)
|
|
537
544
|
* editor.setActions([
|
|
538
|
-
*
|
|
539
|
-
*
|
|
545
|
+
* ...defaultActions.filter((a) => a.id !== 'document.export-pdf'),
|
|
546
|
+
* { id: 'custom.my-action', label: 'My Action', handler: () => console.log('clicked') },
|
|
540
547
|
* ]);
|
|
541
548
|
* ```
|
|
542
549
|
*
|
|
543
|
-
* @since 1.9.0
|
|
544
550
|
* @public
|
|
545
551
|
* @sidebarGroup actions
|
|
546
552
|
* @sidebarGroupOrder 1
|
|
@@ -550,13 +556,13 @@ export declare const defaultActions: BuiltInAction[];
|
|
|
550
556
|
/**
|
|
551
557
|
* The default font index that is part of the Document Authoring SDK bundle.
|
|
552
558
|
*
|
|
553
|
-
* See {@
|
|
559
|
+
* See {@linkcode FontConfig} for how to customize the set of fonts used by the SDK.
|
|
554
560
|
*
|
|
561
|
+
* @since 1.0.26
|
|
555
562
|
* @public
|
|
556
563
|
* @sidebarGroup fonts
|
|
557
564
|
* @sidebarGroupOrder 2
|
|
558
|
-
* @
|
|
559
|
-
* @see {@link FontConfig} for configuring fonts, including using the default font index.
|
|
565
|
+
* @see {@linkcode FontConfig} for configuring fonts, including using the default font index.
|
|
560
566
|
*/
|
|
561
567
|
export declare type DefaultFontIndex = {
|
|
562
568
|
type: 'default-index';
|
|
@@ -565,9 +571,9 @@ export declare type DefaultFontIndex = {
|
|
|
565
571
|
/**
|
|
566
572
|
* The default font index that is part of the Document Authoring SDK bundle.
|
|
567
573
|
*
|
|
568
|
-
* See {@
|
|
574
|
+
* See {@linkcode FontConfig} for how to customize the set of fonts used by the SDK.
|
|
569
575
|
*
|
|
570
|
-
* @since
|
|
576
|
+
* @since V1.0.26
|
|
571
577
|
* @public
|
|
572
578
|
* @sidebarGroup fonts
|
|
573
579
|
* @sidebarGroupOrder 1
|
|
@@ -575,35 +581,39 @@ export declare type DefaultFontIndex = {
|
|
|
575
581
|
export declare const defaultFontIndex: DefaultFontIndex;
|
|
576
582
|
|
|
577
583
|
/**
|
|
578
|
-
* Get the default toolbar configuration.
|
|
579
|
-
* Can be used as-is or customized.
|
|
584
|
+
* Get the default toolbar configuration. Can be used as-is or customized.
|
|
580
585
|
*
|
|
586
|
+
* @since 1.9.0
|
|
581
587
|
* @example
|
|
588
|
+
*
|
|
582
589
|
* ```ts
|
|
583
590
|
* import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';
|
|
584
591
|
*
|
|
585
592
|
* // remove the first two items
|
|
586
|
-
* editor.setToolbarConfig(
|
|
593
|
+
* editor.setToolbarConfig({
|
|
594
|
+
* ...defaultToolbarConfig,
|
|
595
|
+
* items: defaultToolbarConfig.items.slice(2),
|
|
596
|
+
* });
|
|
587
597
|
*
|
|
588
598
|
* // add a custom item
|
|
589
599
|
* editor.setToolbarConfig({
|
|
590
|
-
*
|
|
600
|
+
* ...defaultToolbarConfig,
|
|
601
|
+
* items: [...defaultToolbarConfig.items, myCustomItem],
|
|
591
602
|
* });
|
|
592
603
|
* ```
|
|
593
604
|
*
|
|
594
|
-
* @since 1.9.0
|
|
595
605
|
* @public
|
|
596
606
|
* @sidebarGroup toolbar
|
|
597
607
|
* @sidebarGroupOrder 1
|
|
598
608
|
*
|
|
599
|
-
* @see {@
|
|
609
|
+
* @see {@linkcode CustomAction} for the shape of custom items.
|
|
600
610
|
*/
|
|
601
611
|
export declare const defaultToolbarConfig: ToolbarConfig;
|
|
602
612
|
|
|
603
613
|
/**
|
|
604
614
|
* A document instance. Holds the content and provides methods for saving, exporting to PDF/DOCX, and more.
|
|
605
615
|
*
|
|
606
|
-
* Create documents via {@
|
|
616
|
+
* Create documents via {@linkcode DocAuthEditor} and/or {@linkcode DocAuthSystem}.
|
|
607
617
|
*
|
|
608
618
|
* @public
|
|
609
619
|
* @sidebarGroup core
|
|
@@ -611,17 +621,15 @@ export declare const defaultToolbarConfig: ToolbarConfig;
|
|
|
611
621
|
*/
|
|
612
622
|
export declare type DocAuthDocument = {
|
|
613
623
|
/**
|
|
614
|
-
* Returns the current document in the Document Authoring format as a JavaScript object.
|
|
615
|
-
* This object can be safely persisted.
|
|
624
|
+
* Returns the current document in the Document Authoring format as a JavaScript object. This object can be safely persisted.
|
|
616
625
|
*
|
|
617
626
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docjson/" target="_blank">DocJSON guide</a>
|
|
618
627
|
*/
|
|
619
628
|
saveDocument(): Promise<object>;
|
|
620
629
|
/**
|
|
621
|
-
* Returns the current document in the Document Authoring format as a JSON string.
|
|
622
|
-
* This string can be safely persisted.
|
|
630
|
+
* Returns the current document in the Document Authoring format as a JSON string. This string can be safely persisted.
|
|
623
631
|
*
|
|
624
|
-
* @see {@
|
|
632
|
+
* @see {@linkcode DocAuthDocument.saveDocument}
|
|
625
633
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docjson/" target="_blank">DocJSON guide</a>
|
|
626
634
|
*/
|
|
627
635
|
saveDocumentJSONString(): Promise<string>;
|
|
@@ -637,10 +645,7 @@ export declare type DocAuthDocument = {
|
|
|
637
645
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/" target="_blank">DOCX export guide</a>
|
|
638
646
|
*/
|
|
639
647
|
exportDOCX(options?: ExportDOCXOptions): Promise<ArrayBuffer>;
|
|
640
|
-
|
|
641
|
-
* @alpha
|
|
642
|
-
*/
|
|
643
|
-
transaction<T = void>(callback: TransactionCallback<T>): Promise<T>;
|
|
648
|
+
|
|
644
649
|
/**
|
|
645
650
|
* The `DocAuthSystem` this document is bound to.
|
|
646
651
|
*/
|
|
@@ -648,11 +653,11 @@ export declare type DocAuthDocument = {
|
|
|
648
653
|
};
|
|
649
654
|
|
|
650
655
|
/**
|
|
651
|
-
* A `string` will be treated as a document authoring document in JSON format and loaded.
|
|
652
|
-
*
|
|
653
|
-
* (e.g. the result of `JSON.parse` on a Document Authoring JSON string).
|
|
656
|
+
* A `string` will be treated as a document authoring document in JSON format and loaded. An `object` will be treated as a JavaScript
|
|
657
|
+
* representation of a Document Authoring document (e.g. the result of `JSON.parse` on a Document Authoring JSON string).
|
|
654
658
|
*
|
|
655
659
|
* @example
|
|
660
|
+
*
|
|
656
661
|
* ```ts
|
|
657
662
|
* // Load from JSON
|
|
658
663
|
* const docString = '{"version":"7.0","content":[...]}';
|
|
@@ -660,6 +665,7 @@ export declare type DocAuthDocument = {
|
|
|
660
665
|
* ```
|
|
661
666
|
*
|
|
662
667
|
* @example
|
|
668
|
+
*
|
|
663
669
|
* ```ts
|
|
664
670
|
* // Load from a JavaScript object
|
|
665
671
|
* const docObject = { version: '7.0', content: [...] };
|
|
@@ -667,6 +673,7 @@ export declare type DocAuthDocument = {
|
|
|
667
673
|
* ```
|
|
668
674
|
*
|
|
669
675
|
* @example
|
|
676
|
+
*
|
|
670
677
|
* ```ts
|
|
671
678
|
* // Load from a Blob (e.g. from a file input)
|
|
672
679
|
* const fileInput = document.querySelector('input[type="file"]');
|
|
@@ -675,6 +682,7 @@ export declare type DocAuthDocument = {
|
|
|
675
682
|
* ```
|
|
676
683
|
*
|
|
677
684
|
* @example
|
|
685
|
+
*
|
|
678
686
|
* ```ts
|
|
679
687
|
* // Load from a fetch Response
|
|
680
688
|
* const response = await fetch('/api/document.json');
|
|
@@ -682,22 +690,24 @@ export declare type DocAuthDocument = {
|
|
|
682
690
|
* ```
|
|
683
691
|
*
|
|
684
692
|
* @example
|
|
693
|
+
*
|
|
685
694
|
* ```ts
|
|
686
695
|
* // Load from a Promise (fetch is automatically awaited)
|
|
687
696
|
* const docFromPromise = await system.loadDocument(fetch('/api/document.json'));
|
|
688
697
|
* ```
|
|
689
698
|
*
|
|
690
699
|
* @example
|
|
700
|
+
*
|
|
691
701
|
* ```ts
|
|
692
702
|
* // Load from a Promise that resolves to a Blob
|
|
693
|
-
* const blobPromise = fetch('/api/document.json').then(r => r.blob());
|
|
703
|
+
* const blobPromise = fetch('/api/document.json').then((r) => r.blob());
|
|
694
704
|
* const docFromBlobPromise = await system.loadDocument(blobPromise);
|
|
695
705
|
* ```
|
|
696
706
|
*
|
|
697
707
|
* @public
|
|
698
708
|
* @sidebarGroup core
|
|
699
709
|
* @sidebarGroupOrder 5
|
|
700
|
-
* @see {@
|
|
710
|
+
* @see {@linkcode DocAuthSystem.loadDocument} for how this is used.
|
|
701
711
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docjson/" target="_blank">DocJSON guide</a>
|
|
702
712
|
*/
|
|
703
713
|
export declare type DocAuthDocumentInput = string | object | Blob | Response | Promise<string | object | Blob | Response>;
|
|
@@ -705,7 +715,7 @@ export declare type DocAuthDocumentInput = string | object | Blob | Response | P
|
|
|
705
715
|
/**
|
|
706
716
|
* The visual editor UI. Binds to a DOM element and lets users edit documents.
|
|
707
717
|
*
|
|
708
|
-
* Create editors using {@
|
|
718
|
+
* Create editors using {@linkcode createDocAuthSystem}.
|
|
709
719
|
*
|
|
710
720
|
* @public
|
|
711
721
|
* @sidebarGroup core
|
|
@@ -721,8 +731,8 @@ export declare type DocAuthEditor = {
|
|
|
721
731
|
*/
|
|
722
732
|
currentDocument(): DocAuthDocument;
|
|
723
733
|
/**
|
|
724
|
-
* Removes all DOM elements and releases resources held by the editor.
|
|
725
|
-
*
|
|
734
|
+
* Removes all DOM elements and releases resources held by the editor. Note: This does not release the underlying `DocAuthSystem`. Use
|
|
735
|
+
* `DocAuthSystem.destroy` after calling `DocAuthEditor.destroy` for a complete teardown.
|
|
726
736
|
*/
|
|
727
737
|
destroy(): void;
|
|
728
738
|
/**
|
|
@@ -730,84 +740,78 @@ export declare type DocAuthEditor = {
|
|
|
730
740
|
*/
|
|
731
741
|
docAuthSystem(): DocAuthSystem;
|
|
732
742
|
/**
|
|
733
|
-
* Inserts text at the current cursor position.
|
|
734
|
-
* If there's a selection, it will be replaced with the provided text.
|
|
743
|
+
* Inserts text at the current cursor position. If there's a selection, it will be replaced with the provided text.
|
|
735
744
|
*
|
|
745
|
+
* @since 1.9.0
|
|
736
746
|
* @param text - The text to insert at the cursor position
|
|
737
|
-
* @since 1.8.0
|
|
738
747
|
*/
|
|
739
748
|
insertTextAtCursor(text: string): void;
|
|
740
749
|
/**
|
|
741
|
-
* Checks if the editor has an active cursor/insertion point.
|
|
742
|
-
* This is useful for custom actions to determine if they should be enabled.
|
|
750
|
+
* Checks if the editor has an active cursor/insertion point. This is useful for custom actions to determine if they should be enabled.
|
|
743
751
|
*
|
|
744
|
-
* @returns true if cursor is active and insertion is possible, false otherwise
|
|
745
752
|
* @since 1.9.0
|
|
753
|
+
* @returns True if cursor is active and insertion is possible, false otherwise
|
|
746
754
|
*/
|
|
747
755
|
hasActiveCursor(): boolean;
|
|
748
756
|
/**
|
|
749
|
-
* Set all actions (replaces any existing actions).
|
|
750
|
-
* Allows setting and executing editor actions programmatically.
|
|
751
|
-
*
|
|
752
|
-
* @param actions - Array of actions to register
|
|
757
|
+
* Set all actions (replaces any existing actions). Allows setting and executing editor actions programmatically.
|
|
753
758
|
*
|
|
759
|
+
* @since 1.9.0
|
|
754
760
|
* @example
|
|
761
|
+
*
|
|
755
762
|
* ```ts
|
|
756
763
|
* import { defaultActions } from '@nutrient-sdk/document-authoring';
|
|
757
764
|
*
|
|
758
765
|
* // Register custom actions alongside default actions
|
|
759
766
|
* editor.setActions([
|
|
760
|
-
*
|
|
761
|
-
*
|
|
762
|
-
*
|
|
763
|
-
*
|
|
764
|
-
*
|
|
765
|
-
*
|
|
766
|
-
*
|
|
767
|
-
*
|
|
768
|
-
*
|
|
767
|
+
* ...defaultActions, // Keep default actions
|
|
768
|
+
* {
|
|
769
|
+
* id: 'custom.insert-signature',
|
|
770
|
+
* label: 'Insert Signature',
|
|
771
|
+
* handler: () => {
|
|
772
|
+
* editor.insertTextAtCursor('\n\nBest regards,\nJohn Doe');
|
|
773
|
+
* },
|
|
774
|
+
* shortcuts: ['Mod+Shift+S'],
|
|
775
|
+
* },
|
|
769
776
|
* ]);
|
|
770
777
|
* ```
|
|
771
778
|
*
|
|
772
|
-
* @
|
|
779
|
+
* @param actions - Array of actions to register
|
|
773
780
|
* @public
|
|
774
781
|
* @sidebarGroup actions
|
|
775
782
|
* @sidebarGroupOrder 6
|
|
776
783
|
*/
|
|
777
784
|
setActions(actions: Action[]): void;
|
|
778
785
|
/**
|
|
779
|
-
* Set the toolbar configuration.
|
|
780
|
-
* Use this to customize the editor's toolbar.
|
|
781
|
-
*
|
|
782
|
-
* @param config - Toolbar configuration object
|
|
786
|
+
* Set the toolbar configuration. Use this to customize the editor's toolbar.
|
|
783
787
|
*
|
|
788
|
+
* @since 1.9.0
|
|
784
789
|
* @example
|
|
790
|
+
*
|
|
785
791
|
* ```ts
|
|
786
792
|
* import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';
|
|
787
793
|
*
|
|
788
794
|
* // Use default toolbar config but add a custom item
|
|
789
795
|
* editor.setToolbarConfig({
|
|
790
|
-
*
|
|
791
|
-
*
|
|
792
|
-
* ...defaultToolbarConfig.items,
|
|
793
|
-
* { type: 'action', id: 'custom', actionId: 'custom.insert-signature' }
|
|
794
|
-
* ]
|
|
796
|
+
* ...defaultToolbarConfig,
|
|
797
|
+
* items: [...defaultToolbarConfig.items, { type: 'action', id: 'custom', actionId: 'custom.insert-signature' }],
|
|
795
798
|
* });
|
|
796
799
|
*
|
|
797
800
|
* // Or create a minimal toolbar
|
|
798
801
|
* editor.setToolbarConfig({
|
|
799
|
-
*
|
|
800
|
-
*
|
|
801
|
-
*
|
|
802
|
-
*
|
|
803
|
-
*
|
|
804
|
-
*
|
|
805
|
-
*
|
|
806
|
-
*
|
|
802
|
+
* ...defaultToolbarConfig,
|
|
803
|
+
* items: [
|
|
804
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
805
|
+
* { type: 'built-in', id: 'redo', builtInType: 'redo' },
|
|
806
|
+
* { type: 'separator', id: 'sep-1' },
|
|
807
|
+
* { type: 'built-in', id: 'bold', builtInType: 'bold' },
|
|
808
|
+
* { type: 'built-in', id: 'italic', builtInType: 'italic' },
|
|
809
|
+
* { type: 'action', id: 'custom', actionId: 'custom.insert-signature' },
|
|
810
|
+
* ],
|
|
807
811
|
* });
|
|
808
812
|
* ```
|
|
809
813
|
*
|
|
810
|
-
* @
|
|
814
|
+
* @param config - Toolbar configuration object
|
|
811
815
|
* @public
|
|
812
816
|
* @sidebarGroup toolbar
|
|
813
817
|
* @sidebarGroupOrder 7
|
|
@@ -816,59 +820,55 @@ export declare type DocAuthEditor = {
|
|
|
816
820
|
/**
|
|
817
821
|
* Adds an event listener that will be called every time the specified event is emitted.
|
|
818
822
|
*
|
|
819
|
-
* @
|
|
820
|
-
* @param handler - The function to call when the event is emitted
|
|
821
|
-
* @returns The editor instance for method chaining
|
|
822
|
-
*
|
|
823
|
+
* @since 1.8.0
|
|
823
824
|
* @example
|
|
825
|
+
*
|
|
824
826
|
* ```ts
|
|
825
827
|
* // Auto-save on content changes
|
|
826
828
|
* editor.on('content.change', async () => {
|
|
827
|
-
*
|
|
828
|
-
*
|
|
829
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
830
|
+
* localStorage.setItem('draft', JSON.stringify(doc));
|
|
829
831
|
* });
|
|
830
832
|
*
|
|
831
833
|
* // Track document load
|
|
832
834
|
* editor.on('document.load', () => {
|
|
833
|
-
*
|
|
835
|
+
* console.log('Document loaded successfully');
|
|
834
836
|
* });
|
|
835
837
|
*
|
|
836
838
|
* // Debounced save to prevent excessive API calls
|
|
837
839
|
* let saveTimeout;
|
|
838
840
|
* editor.on('content.change', async () => {
|
|
839
|
-
*
|
|
840
|
-
*
|
|
841
|
-
*
|
|
842
|
-
*
|
|
843
|
-
*
|
|
844
|
-
*
|
|
845
|
-
*
|
|
846
|
-
*
|
|
841
|
+
* clearTimeout(saveTimeout);
|
|
842
|
+
* saveTimeout = setTimeout(async () => {
|
|
843
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
844
|
+
* await fetch('/api/save', {
|
|
845
|
+
* method: 'POST',
|
|
846
|
+
* body: JSON.stringify(doc),
|
|
847
|
+
* });
|
|
848
|
+
* }, 1000);
|
|
847
849
|
* });
|
|
848
850
|
*
|
|
849
851
|
* // Method chaining
|
|
850
|
-
* editor
|
|
851
|
-
* .on('document.load', () => console.log('loaded'))
|
|
852
|
-
* .on('content.change', () => console.log('changed'));
|
|
852
|
+
* editor.on('document.load', () => console.log('loaded')).on('content.change', () => console.log('changed'));
|
|
853
853
|
* ```
|
|
854
854
|
*
|
|
855
|
-
* @
|
|
855
|
+
* @param event - The event name to listen for
|
|
856
|
+
* @param handler - The function to call when the event is emitted
|
|
857
|
+
* @returns The editor instance for method chaining
|
|
856
858
|
* @eventMap DocAuthEditorEvents
|
|
857
859
|
*/
|
|
858
860
|
on<EventName extends keyof DocAuthEditorEvents>(event: EventName, handler: DocAuthEditorEventHandler<EventName>): DocAuthEditor;
|
|
859
861
|
/**
|
|
860
862
|
* Removes an event listener. If no handler is provided, removes all listeners for the event.
|
|
861
863
|
*
|
|
862
|
-
* @
|
|
863
|
-
* @param handler - The specific handler to remove (optional)
|
|
864
|
-
* @returns The editor instance for method chaining
|
|
865
|
-
*
|
|
864
|
+
* @since 1.8.0
|
|
866
865
|
* @example
|
|
866
|
+
*
|
|
867
867
|
* ```ts
|
|
868
868
|
* // Remove specific handler (prevent memory leaks)
|
|
869
869
|
* const handleChange = async () => {
|
|
870
|
-
*
|
|
871
|
-
*
|
|
870
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
871
|
+
* localStorage.setItem('draft', JSON.stringify(doc));
|
|
872
872
|
* };
|
|
873
873
|
* editor.on('content.change', handleChange);
|
|
874
874
|
* // ... later ...
|
|
@@ -879,57 +879,59 @@ export declare type DocAuthEditor = {
|
|
|
879
879
|
*
|
|
880
880
|
* // Cleanup pattern
|
|
881
881
|
* const setupEditor = (target) => {
|
|
882
|
-
*
|
|
882
|
+
* const editor = await system.createEditor(target);
|
|
883
883
|
*
|
|
884
|
-
*
|
|
885
|
-
*
|
|
884
|
+
* const handleChange = () => console.log('changed');
|
|
885
|
+
* const handleLoad = () => console.log('loaded');
|
|
886
886
|
*
|
|
887
|
-
*
|
|
888
|
-
*
|
|
887
|
+
* editor.on('content.change', handleChange);
|
|
888
|
+
* editor.on('document.load', handleLoad);
|
|
889
889
|
*
|
|
890
|
-
*
|
|
891
|
-
*
|
|
892
|
-
*
|
|
893
|
-
*
|
|
894
|
-
*
|
|
890
|
+
* return () => {
|
|
891
|
+
* editor.off('content.change', handleChange);
|
|
892
|
+
* editor.off('document.load', handleLoad);
|
|
893
|
+
* editor.destroy();
|
|
894
|
+
* };
|
|
895
895
|
* };
|
|
896
896
|
* ```
|
|
897
897
|
*
|
|
898
|
-
* @
|
|
898
|
+
* @param event - The event name to remove listeners from
|
|
899
|
+
* @param handler - The specific handler to remove (optional)
|
|
900
|
+
* @returns The editor instance for method chaining
|
|
899
901
|
* @eventMap DocAuthEditorEvents
|
|
900
902
|
*/
|
|
901
903
|
off<EventName extends keyof DocAuthEditorEvents>(event: EventName, handler?: DocAuthEditorEventHandler<EventName>): DocAuthEditor;
|
|
902
904
|
/**
|
|
903
|
-
* Adds an event listener that will be called only once when the specified event is emitted.
|
|
904
|
-
*
|
|
905
|
-
*
|
|
906
|
-
* @param event - The event name to listen for
|
|
907
|
-
* @param handler - The function to call when the event is emitted
|
|
908
|
-
* @returns The editor instance for method chaining
|
|
905
|
+
* Adds an event listener that will be called only once when the specified event is emitted. The listener is automatically removed after
|
|
906
|
+
* being called.
|
|
909
907
|
*
|
|
908
|
+
* @since 1.8.0
|
|
910
909
|
* @example
|
|
910
|
+
*
|
|
911
911
|
* ```ts
|
|
912
912
|
* // Wait for initial document load
|
|
913
913
|
* editor.once('document.load', () => {
|
|
914
|
-
*
|
|
914
|
+
* console.log('Document loaded for the first time');
|
|
915
915
|
* });
|
|
916
916
|
*
|
|
917
917
|
* // Perform action after first change
|
|
918
918
|
* editor.once('content.change', () => {
|
|
919
|
-
*
|
|
919
|
+
* console.log('User made their first edit');
|
|
920
920
|
* });
|
|
921
921
|
*
|
|
922
922
|
* // Promise-based pattern for waiting on load
|
|
923
923
|
* const waitForLoad = (editor) => {
|
|
924
|
-
*
|
|
925
|
-
*
|
|
926
|
-
*
|
|
924
|
+
* return new Promise((resolve) => {
|
|
925
|
+
* editor.once('document.load', resolve);
|
|
926
|
+
* });
|
|
927
927
|
* };
|
|
928
928
|
* await waitForLoad(editor);
|
|
929
929
|
* console.log('Ready to use');
|
|
930
930
|
* ```
|
|
931
931
|
*
|
|
932
|
-
* @
|
|
932
|
+
* @param event - The event name to listen for
|
|
933
|
+
* @param handler - The function to call when the event is emitted
|
|
934
|
+
* @returns The editor instance for method chaining
|
|
933
935
|
* @eventMap DocAuthEditorEvents
|
|
934
936
|
*/
|
|
935
937
|
once<EventName extends keyof DocAuthEditorEvents>(event: EventName, handler: DocAuthEditorEventHandler<EventName>): DocAuthEditor;
|
|
@@ -947,38 +949,39 @@ export declare type DocAuthEditorEventHandler<EventName extends keyof DocAuthEdi
|
|
|
947
949
|
*/
|
|
948
950
|
export declare type DocAuthEditorEvents = {
|
|
949
951
|
/**
|
|
950
|
-
* Fired when a document is initially loaded into the editor.
|
|
951
|
-
*
|
|
952
|
+
* Fired when a document is initially loaded into the editor. This event is triggered once per document load, including when switching
|
|
953
|
+
* documents.
|
|
952
954
|
*/
|
|
953
955
|
'document.load': void;
|
|
954
956
|
/**
|
|
955
|
-
* Fired when the document content has changed due to user editing or programmatic modifications.
|
|
956
|
-
*
|
|
957
|
+
* Fired when the document content has changed due to user editing or programmatic modifications. Use this event to react to document
|
|
958
|
+
* changes, such as saving drafts or updating UI state.
|
|
957
959
|
*/
|
|
958
960
|
'content.change': void;
|
|
959
961
|
};
|
|
960
962
|
|
|
961
963
|
/**
|
|
962
|
-
* A `DocAuthSystem` instance holds the internal WASM engine and loaded fonts.
|
|
963
|
-
*
|
|
964
|
+
* A `DocAuthSystem` instance holds the internal WASM engine and loaded fonts. It is used to load or import documents and create
|
|
965
|
+
* `DocAuthEditor` instances.
|
|
964
966
|
*
|
|
965
|
-
* @see <a href="https://www.nutrient.io/sdk/document-authoring/getting-started/" target="_blank">Getting started guide</a>
|
|
966
967
|
* @public
|
|
967
968
|
* @sidebarGroup core
|
|
968
969
|
* @sidebarGroupOrder 4
|
|
970
|
+
* @see <a href="https://www.nutrient.io/sdk/document-authoring/getting-started/" target="_blank">Getting started guide</a>
|
|
969
971
|
*/
|
|
970
972
|
export declare type DocAuthSystem = {
|
|
971
973
|
/**
|
|
972
|
-
* Loads a document stored in the Document Authoring format.
|
|
973
|
-
* The document can be provided as a JSON string or a JavaScript object.
|
|
974
|
+
* Loads a document stored in the Document Authoring format. The document can be provided as a JSON string or a JavaScript object.
|
|
974
975
|
*
|
|
975
976
|
* @example
|
|
977
|
+
*
|
|
976
978
|
* ```ts
|
|
977
979
|
* // Load from JSON string
|
|
978
980
|
* const doc = await system.loadDocument('{"version":"7.0","content":[...]}');
|
|
979
981
|
* ```
|
|
980
982
|
*
|
|
981
983
|
* @example
|
|
984
|
+
*
|
|
982
985
|
* ```ts
|
|
983
986
|
* // Load from object
|
|
984
987
|
* const docData = { version: '7.0', content: [...] };
|
|
@@ -986,12 +989,14 @@ export declare type DocAuthSystem = {
|
|
|
986
989
|
* ```
|
|
987
990
|
*
|
|
988
991
|
* @example
|
|
992
|
+
*
|
|
989
993
|
* ```ts
|
|
990
994
|
* // Load from server
|
|
991
995
|
* const doc = await system.loadDocument(fetch('/api/documents/123'));
|
|
992
996
|
* ```
|
|
993
997
|
*
|
|
994
998
|
* @example
|
|
999
|
+
*
|
|
995
1000
|
* ```ts
|
|
996
1001
|
* // Load and create editor
|
|
997
1002
|
* const doc = await system.loadDocument(savedDocJSON);
|
|
@@ -999,13 +1004,14 @@ export declare type DocAuthSystem = {
|
|
|
999
1004
|
* ```
|
|
1000
1005
|
*
|
|
1001
1006
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docjson/#loading-docjson" target="_blank">DocJSON guide</a>
|
|
1002
|
-
* @see {@
|
|
1007
|
+
* @see {@linkcode DocAuthDocumentInput} for supported input types.
|
|
1003
1008
|
*/
|
|
1004
1009
|
loadDocument(documentInput: DocAuthDocumentInput): Promise<DocAuthDocument>;
|
|
1005
1010
|
/**
|
|
1006
1011
|
* Imports a DOCX document.
|
|
1007
1012
|
*
|
|
1008
1013
|
* @example
|
|
1014
|
+
*
|
|
1009
1015
|
* ```ts
|
|
1010
1016
|
* // Import from file input
|
|
1011
1017
|
* const fileInput = document.querySelector('input[type="file"]');
|
|
@@ -1014,21 +1020,24 @@ export declare type DocAuthSystem = {
|
|
|
1014
1020
|
* ```
|
|
1015
1021
|
*
|
|
1016
1022
|
* @example
|
|
1023
|
+
*
|
|
1017
1024
|
* ```ts
|
|
1018
1025
|
* // Import from URL
|
|
1019
1026
|
* const doc = await system.importDOCX(fetch('/documents/template.docx'));
|
|
1020
1027
|
* ```
|
|
1021
1028
|
*
|
|
1022
1029
|
* @example
|
|
1030
|
+
*
|
|
1023
1031
|
* ```ts
|
|
1024
1032
|
* // Import with abort signal
|
|
1025
1033
|
* const controller = new AbortController();
|
|
1026
1034
|
* const doc = await system.importDOCX(file, {
|
|
1027
|
-
*
|
|
1035
|
+
* abortSignal: controller.signal,
|
|
1028
1036
|
* });
|
|
1029
1037
|
* ```
|
|
1030
1038
|
*
|
|
1031
1039
|
* @example
|
|
1040
|
+
*
|
|
1032
1041
|
* ```ts
|
|
1033
1042
|
* // Complete workflow: import DOCX, edit, export PDF
|
|
1034
1043
|
* const doc = await system.importDOCX(fetch('/template.docx'));
|
|
@@ -1038,14 +1047,15 @@ export declare type DocAuthSystem = {
|
|
|
1038
1047
|
* ```
|
|
1039
1048
|
*
|
|
1040
1049
|
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/#importing-docx" target="_blank">DOCX import guide</a>
|
|
1041
|
-
* @see {@
|
|
1050
|
+
* @see {@linkcode BlobInput} for supported input types.
|
|
1042
1051
|
*/
|
|
1043
1052
|
importDOCX(docx: BlobInput, options?: ImportDOCXOptions): Promise<DocAuthDocument>;
|
|
1044
1053
|
/**
|
|
1045
|
-
* Creates an editor in the specified HTML element.
|
|
1046
|
-
*
|
|
1054
|
+
* Creates an editor in the specified HTML element. **IMPORTANT**: The `position` of the target element cannot be `static` or unset. If
|
|
1055
|
+
* unsure, use `relative`.
|
|
1047
1056
|
*
|
|
1048
1057
|
* @example
|
|
1058
|
+
*
|
|
1049
1059
|
* ```ts
|
|
1050
1060
|
* // Shared code for the examples below - ensure target element has proper positioning
|
|
1051
1061
|
* const target = document.getElementById('editor');
|
|
@@ -1054,12 +1064,14 @@ export declare type DocAuthSystem = {
|
|
|
1054
1064
|
* ```
|
|
1055
1065
|
*
|
|
1056
1066
|
* @example
|
|
1067
|
+
*
|
|
1057
1068
|
* ```ts
|
|
1058
1069
|
* // Create editor with empty document
|
|
1059
1070
|
* const editor = await system.createEditor(target);
|
|
1060
1071
|
* ```
|
|
1061
1072
|
*
|
|
1062
1073
|
* @example
|
|
1074
|
+
*
|
|
1063
1075
|
* ```ts
|
|
1064
1076
|
* // Create editor with existing document
|
|
1065
1077
|
* const doc = await system.loadDocument(docJSON);
|
|
@@ -1067,33 +1079,36 @@ export declare type DocAuthSystem = {
|
|
|
1067
1079
|
* ```
|
|
1068
1080
|
*
|
|
1069
1081
|
* @example
|
|
1082
|
+
*
|
|
1070
1083
|
* ```ts
|
|
1071
1084
|
* // Complete workflow with event handling
|
|
1072
1085
|
* const editor = await system.createEditor(target);
|
|
1073
1086
|
* editor.on('content.change', async () => {
|
|
1074
|
-
*
|
|
1075
|
-
*
|
|
1087
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
1088
|
+
* localStorage.setItem('draft', JSON.stringify(doc));
|
|
1076
1089
|
* });
|
|
1077
1090
|
* ```
|
|
1078
1091
|
*
|
|
1079
1092
|
* @see <a href="https://www.nutrient.io/sdk/document-authoring/getting-started/using-npm/#integrating-into-your-project" target="_blank">Getting started guide</a>
|
|
1080
|
-
* @see {@
|
|
1093
|
+
* @see {@linkcode CreateEditorOptions} for available options.
|
|
1081
1094
|
*/
|
|
1082
1095
|
createEditor(target: HTMLElement, options?: CreateEditorOptions): Promise<DocAuthEditor>;
|
|
1083
1096
|
/**
|
|
1084
|
-
* Creates a document from plain text by interpreting patterns and replacing characters.
|
|
1085
|
-
*
|
|
1097
|
+
* Creates a document from plain text by interpreting patterns and replacing characters. E.g.:
|
|
1098
|
+
*
|
|
1086
1099
|
* - `\n` creates a line break in a paragraph
|
|
1087
1100
|
* - `\n\n` separates paragraphs
|
|
1088
1101
|
* - `\t` is replaced with spaces
|
|
1089
1102
|
*
|
|
1090
1103
|
* @example
|
|
1104
|
+
*
|
|
1091
1105
|
* ```ts
|
|
1092
1106
|
* // Simple text document
|
|
1093
1107
|
* const doc = await system.createDocumentFromPlaintext('Hello World');
|
|
1094
1108
|
* ```
|
|
1095
1109
|
*
|
|
1096
1110
|
* @example
|
|
1111
|
+
*
|
|
1097
1112
|
* ```ts
|
|
1098
1113
|
* // Multi-paragraph document
|
|
1099
1114
|
* const text = `First paragraph.
|
|
@@ -1103,29 +1118,32 @@ export declare type DocAuthSystem = {
|
|
|
1103
1118
|
* ```
|
|
1104
1119
|
*
|
|
1105
1120
|
* @example
|
|
1121
|
+
*
|
|
1106
1122
|
* ```ts
|
|
1107
1123
|
* // With custom page settings
|
|
1108
1124
|
* const doc = await system.createDocumentFromPlaintext('My content', {
|
|
1109
|
-
*
|
|
1110
|
-
*
|
|
1125
|
+
* pageSize: 'A4',
|
|
1126
|
+
* pageMargins: { left: 72, right: 72, top: 72, bottom: 72 },
|
|
1111
1127
|
* });
|
|
1112
1128
|
* ```
|
|
1113
1129
|
*
|
|
1114
1130
|
* @example
|
|
1131
|
+
*
|
|
1115
1132
|
* ```ts
|
|
1116
1133
|
* // Create document and editor in one flow
|
|
1117
1134
|
* const doc = await system.createDocumentFromPlaintext('Initial content');
|
|
1118
1135
|
* const editor = await system.createEditor(targetElement, { document: doc });
|
|
1119
1136
|
* ```
|
|
1120
1137
|
*
|
|
1121
|
-
* @see {@
|
|
1138
|
+
* @see {@linkcode CreateDocumentFromPlaintextOptions} for available options.
|
|
1122
1139
|
*/
|
|
1123
1140
|
createDocumentFromPlaintext(text: string, options?: CreateDocumentFromPlaintextOptions): Promise<DocAuthDocument>;
|
|
1124
1141
|
/**
|
|
1125
|
-
* Releases resources held by the system.
|
|
1126
|
-
*
|
|
1142
|
+
* Releases resources held by the system. **IMPORTANT**: The system and any editors created by this system can no longer be used after
|
|
1143
|
+
* calling this.
|
|
1127
1144
|
*
|
|
1128
1145
|
* @example
|
|
1146
|
+
*
|
|
1129
1147
|
* ```ts
|
|
1130
1148
|
* // Clean up when done
|
|
1131
1149
|
* editor.destroy();
|
|
@@ -1134,11 +1152,11 @@ export declare type DocAuthSystem = {
|
|
|
1134
1152
|
* // Or use try-finally pattern
|
|
1135
1153
|
* const system = await createDocAuthSystem();
|
|
1136
1154
|
* try {
|
|
1137
|
-
*
|
|
1138
|
-
*
|
|
1139
|
-
*
|
|
1155
|
+
* const editor = await system.createEditor(target);
|
|
1156
|
+
* // ... use editor ...
|
|
1157
|
+
* editor.destroy();
|
|
1140
1158
|
* } finally {
|
|
1141
|
-
*
|
|
1159
|
+
* system.destroy();
|
|
1142
1160
|
* }
|
|
1143
1161
|
* ```
|
|
1144
1162
|
*/
|
|
@@ -1146,11 +1164,11 @@ export declare type DocAuthSystem = {
|
|
|
1146
1164
|
};
|
|
1147
1165
|
|
|
1148
1166
|
/**
|
|
1149
|
-
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/#exporting-docx" target="_blank">DOCX export guide</a>
|
|
1150
1167
|
* @public
|
|
1151
1168
|
* @sidebarGroup import / export
|
|
1152
1169
|
* @sidebarGroupOrder 1
|
|
1153
|
-
* @see
|
|
1170
|
+
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/#exporting-docx" target="_blank">DOCX export guide</a>
|
|
1171
|
+
* @see {@linkcode DocAuthDocument.exportDOCX} for exporting documents to DOCX with these options.
|
|
1154
1172
|
*/
|
|
1155
1173
|
export declare type ExportDOCXOptions = {
|
|
1156
1174
|
/**
|
|
@@ -1160,11 +1178,11 @@ export declare type ExportDOCXOptions = {
|
|
|
1160
1178
|
};
|
|
1161
1179
|
|
|
1162
1180
|
/**
|
|
1163
|
-
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf/" target="_blank">PDF export guide</a>
|
|
1164
1181
|
* @public
|
|
1165
1182
|
* @sidebarGroup import / export
|
|
1166
1183
|
* @sidebarGroupOrder 2
|
|
1167
|
-
* @see
|
|
1184
|
+
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/pdf/" target="_blank">PDF export guide</a>
|
|
1185
|
+
* @see {@linkcode DocAuthDocument.exportPDF} for exporting documents to PDF with these options.
|
|
1168
1186
|
*/
|
|
1169
1187
|
export declare type ExportPDFOptions = {
|
|
1170
1188
|
/**
|
|
@@ -1172,8 +1190,7 @@ export declare type ExportPDFOptions = {
|
|
|
1172
1190
|
*/
|
|
1173
1191
|
abortSignal?: AbortSignal;
|
|
1174
1192
|
/**
|
|
1175
|
-
* @since
|
|
1176
|
-
* Generate a PDF/A compliant PDF. Defaults to `false`.
|
|
1193
|
+
* @since 1.1.0 Generate a PDF/A compliant PDF. Defaults to `false`.
|
|
1177
1194
|
*/
|
|
1178
1195
|
PDF_A?: boolean;
|
|
1179
1196
|
};
|
|
@@ -1182,28 +1199,30 @@ export declare type ExportPDFOptions = {
|
|
|
1182
1199
|
* Font configuration for the Document Authoring system.
|
|
1183
1200
|
*
|
|
1184
1201
|
* The font system supports three approaches:
|
|
1185
|
-
* - {@link DefaultFontIndex}: Built-in fonts (included by default)
|
|
1186
|
-
* - {@link FontFile}: Individual font files loaded upfront
|
|
1187
|
-
* - {@link FontIndex}: Efficient lazy-loading from a font index
|
|
1188
1202
|
*
|
|
1189
|
-
* @
|
|
1190
|
-
*
|
|
1203
|
+
* - {@linkcode DefaultFontIndex}: Built-in fonts (included by default)
|
|
1204
|
+
* - {@linkcode FontFile}: Individual font files loaded upfront
|
|
1205
|
+
* - {@linkcode FontIndex}: Efficient lazy-loading from a font index
|
|
1206
|
+
*
|
|
1207
|
+
* @since 1.0.26
|
|
1208
|
+
* @example Quick start - add individual fonts (loaded during initialization):
|
|
1209
|
+
*
|
|
1191
1210
|
* ```ts
|
|
1192
1211
|
* import { createDocAuthSystem, defaultFontIndex } from '@nutrient-sdk/document-authoring';
|
|
1193
1212
|
*
|
|
1194
1213
|
* const system = await createDocAuthSystem({
|
|
1195
|
-
*
|
|
1196
|
-
*
|
|
1197
|
-
*
|
|
1198
|
-
*
|
|
1199
|
-
*
|
|
1200
|
-
*
|
|
1201
|
-
*
|
|
1214
|
+
* fontConfig: {
|
|
1215
|
+
* fonts: [
|
|
1216
|
+
* defaultFontIndex,
|
|
1217
|
+
* { type: 'file', blob: fetch('/fonts/custom-font.ttf') },
|
|
1218
|
+
* { type: 'file', blob: fetch('/fonts/another-font.ttf') },
|
|
1219
|
+
* ],
|
|
1220
|
+
* },
|
|
1202
1221
|
* });
|
|
1203
1222
|
* ```
|
|
1204
1223
|
*
|
|
1205
|
-
* @example
|
|
1206
|
-
*
|
|
1224
|
+
* @example Production setup - use font index for lazy loading (recommended):
|
|
1225
|
+
*
|
|
1207
1226
|
* ```ts
|
|
1208
1227
|
* // Step 1: Generate font index using CLI
|
|
1209
1228
|
* // $ npx document-authoring create-font-index --scan-directory ./fonts --write-to public/fonts/font-index.json
|
|
@@ -1212,38 +1231,38 @@ export declare type ExportPDFOptions = {
|
|
|
1212
1231
|
* import { createDocAuthSystem, defaultFontIndex } from '@nutrient-sdk/document-authoring';
|
|
1213
1232
|
*
|
|
1214
1233
|
* const system = await createDocAuthSystem({
|
|
1215
|
-
*
|
|
1216
|
-
*
|
|
1217
|
-
*
|
|
1218
|
-
*
|
|
1219
|
-
*
|
|
1220
|
-
*
|
|
1221
|
-
*
|
|
1222
|
-
*
|
|
1223
|
-
*
|
|
1224
|
-
*
|
|
1234
|
+
* fontConfig: {
|
|
1235
|
+
* fonts: [
|
|
1236
|
+
* defaultFontIndex, // Built-in fonts
|
|
1237
|
+
* {
|
|
1238
|
+
* type: 'index',
|
|
1239
|
+
* index: fetch('/fonts/font-index.json'),
|
|
1240
|
+
* loadFn: (name) => fetch(`/fonts/${name}`),
|
|
1241
|
+
* },
|
|
1242
|
+
* ],
|
|
1243
|
+
* },
|
|
1225
1244
|
* });
|
|
1226
1245
|
*
|
|
1227
1246
|
* // Fonts from the index are loaded on-demand as documents use them
|
|
1228
1247
|
* ```
|
|
1229
1248
|
*
|
|
1230
|
-
* @example
|
|
1231
|
-
*
|
|
1249
|
+
* @example Complete workflow with custom fonts:
|
|
1250
|
+
*
|
|
1232
1251
|
* ```ts
|
|
1233
1252
|
* import { createDocAuthSystem, defaultFontIndex } from '@nutrient-sdk/document-authoring';
|
|
1234
1253
|
*
|
|
1235
1254
|
* // Configure font sources
|
|
1236
1255
|
* const system = await createDocAuthSystem({
|
|
1237
|
-
*
|
|
1238
|
-
*
|
|
1239
|
-
*
|
|
1240
|
-
*
|
|
1241
|
-
*
|
|
1242
|
-
*
|
|
1243
|
-
*
|
|
1244
|
-
*
|
|
1245
|
-
*
|
|
1246
|
-
*
|
|
1256
|
+
* fontConfig: {
|
|
1257
|
+
* fonts: [
|
|
1258
|
+
* defaultFontIndex,
|
|
1259
|
+
* {
|
|
1260
|
+
* type: 'index',
|
|
1261
|
+
* index: fetch('/fonts/corporate-fonts.json'),
|
|
1262
|
+
* loadFn: (name) => fetch(`/fonts/${name}`),
|
|
1263
|
+
* },
|
|
1264
|
+
* ],
|
|
1265
|
+
* },
|
|
1247
1266
|
* });
|
|
1248
1267
|
*
|
|
1249
1268
|
* // Import a DOCX that uses custom fonts
|
|
@@ -1258,32 +1277,32 @@ export declare type ExportPDFOptions = {
|
|
|
1258
1277
|
* @public
|
|
1259
1278
|
* @sidebarGroup fonts
|
|
1260
1279
|
* @sidebarGroupOrder 3
|
|
1261
|
-
* @
|
|
1262
|
-
* @see {@
|
|
1263
|
-
* @see {@
|
|
1264
|
-
* @see {@
|
|
1265
|
-
* @see {@link DefaultFontIndex} for built-in fonts.
|
|
1280
|
+
* @see {@linkcode CreateDocAuthSystemOptions} for all available options when creating a DocAuthSystem.
|
|
1281
|
+
* @see {@linkcode FontFile} for loading individual fonts.
|
|
1282
|
+
* @see {@linkcode FontIndex} for efficient font loading.
|
|
1283
|
+
* @see {@linkcode DefaultFontIndex} for built-in fonts.
|
|
1266
1284
|
*/
|
|
1267
1285
|
export declare type FontConfig = {
|
|
1268
1286
|
/**
|
|
1269
|
-
* The set of fonts available to the Document Authoring system.
|
|
1270
|
-
* If unset the {@link DefaultFontIndex} is used.
|
|
1287
|
+
* The set of fonts available to the Document Authoring system. If unset the {@linkcode DefaultFontIndex} is used.
|
|
1271
1288
|
*
|
|
1272
|
-
* Individual fonts can be added directly using a {@
|
|
1273
|
-
*
|
|
1274
|
-
*
|
|
1289
|
+
* Individual fonts can be added directly using a {@linkcode FontFile} or loaded by the system as they are needed using a pre-built
|
|
1290
|
+
* {@linkcode FontIndex} that lists all available fonts. A {@link FontIndex} is the recommended way to provide a set of fonts to the system in a
|
|
1291
|
+
* production environment.
|
|
1275
1292
|
*/
|
|
1276
1293
|
fonts?: (DefaultFontIndex | FontIndex | FontFile)[];
|
|
1277
1294
|
};
|
|
1278
1295
|
|
|
1279
1296
|
/**
|
|
1280
|
-
* `FontFile` provides a quick way to add a single additional font to the system. The system will load and scan
|
|
1281
|
-
*
|
|
1297
|
+
* `FontFile` provides a quick way to add a single additional font to the system. The system will load and scan all provided `FontFile`s to
|
|
1298
|
+
* extract all the required metadata during initialization.
|
|
1282
1299
|
*
|
|
1283
|
-
* For a production system we recommend building a {@
|
|
1284
|
-
*
|
|
1300
|
+
* For a production system we recommend building a {@linkcode FontIndex} of all available fonts, which enables the system to load only fonts that
|
|
1301
|
+
* are actually needed.
|
|
1285
1302
|
*
|
|
1303
|
+
* @since 1.0.26
|
|
1286
1304
|
* @example
|
|
1305
|
+
*
|
|
1287
1306
|
* ```ts
|
|
1288
1307
|
* { type:'file', blob: fetch('/fonts/awesome.ttf') }
|
|
1289
1308
|
* ```
|
|
@@ -1291,8 +1310,7 @@ export declare type FontConfig = {
|
|
|
1291
1310
|
* @public
|
|
1292
1311
|
* @sidebarGroup fonts
|
|
1293
1312
|
* @sidebarGroupOrder 4
|
|
1294
|
-
* @
|
|
1295
|
-
* @see {@link FontConfig} for configuring fonts, including using FontFile.
|
|
1313
|
+
* @see {@linkcode FontConfig} for configuring fonts, including using FontFile.
|
|
1296
1314
|
*/
|
|
1297
1315
|
export declare type FontFile = {
|
|
1298
1316
|
type: 'file';
|
|
@@ -1302,9 +1320,8 @@ export declare type FontFile = {
|
|
|
1302
1320
|
/**
|
|
1303
1321
|
* A `FontIndex` is the preferred way to add additional fonts to the system.
|
|
1304
1322
|
*
|
|
1305
|
-
* Document Authoring can efficiently load a single `index` of available fonts, and will then only load the actually
|
|
1306
|
-
*
|
|
1307
|
-
* the font file requested.
|
|
1323
|
+
* Document Authoring can efficiently load a single `index` of available fonts, and will then only load the actually required fonts as they
|
|
1324
|
+
* are needed by calling `loadFn` with the font name. `loadFn` must return a `BlobInput` for the font file requested.
|
|
1308
1325
|
*
|
|
1309
1326
|
* In order to generate a font index from a set of fonts you want to provide to your users, use the Document Authoring CLI utility:
|
|
1310
1327
|
*
|
|
@@ -1314,7 +1331,9 @@ export declare type FontFile = {
|
|
|
1314
1331
|
*
|
|
1315
1332
|
* This will generate a `font-index.json` file that you can then host and load using the `FontIndex` configuration.
|
|
1316
1333
|
*
|
|
1334
|
+
* @since 1.0.26
|
|
1317
1335
|
* @example
|
|
1336
|
+
*
|
|
1318
1337
|
* ```ts
|
|
1319
1338
|
* {
|
|
1320
1339
|
* type: 'index',
|
|
@@ -1326,8 +1345,7 @@ export declare type FontFile = {
|
|
|
1326
1345
|
* @public
|
|
1327
1346
|
* @sidebarGroup fonts
|
|
1328
1347
|
* @sidebarGroupOrder 5
|
|
1329
|
-
* @
|
|
1330
|
-
* @see {@link FontConfig} for configuring fonts, including using FontIndex.
|
|
1348
|
+
* @see {@linkcode FontConfig} for configuring fonts, including using FontIndex.
|
|
1331
1349
|
*/
|
|
1332
1350
|
export declare type FontIndex = {
|
|
1333
1351
|
type: 'index';
|
|
@@ -1336,11 +1354,11 @@ export declare type FontIndex = {
|
|
|
1336
1354
|
};
|
|
1337
1355
|
|
|
1338
1356
|
/**
|
|
1339
|
-
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/#importing-docx" target="_blank">DOCX import guide</a>
|
|
1340
1357
|
* @public
|
|
1341
1358
|
* @sidebarGroup import / export
|
|
1342
1359
|
* @sidebarGroupOrder 3
|
|
1343
|
-
* @see
|
|
1360
|
+
* @see <a href="https://www.nutrient.io/guides/document-authoring/working-with-documents/docx/#importing-docx" target="_blank">DOCX import guide</a>
|
|
1361
|
+
* @see {@linkcode DocAuthSystem.importDOCX} for importing DOCX files with these options.
|
|
1344
1362
|
*/
|
|
1345
1363
|
export declare type ImportDOCXOptions = {
|
|
1346
1364
|
/**
|
|
@@ -1352,7 +1370,7 @@ export declare type ImportDOCXOptions = {
|
|
|
1352
1370
|
/**
|
|
1353
1371
|
* English, French and German are currently supported (two-letter ISO 639-1 codes).
|
|
1354
1372
|
*
|
|
1355
|
-
* See {@
|
|
1373
|
+
* See {@linkcode UIOptions#locale | UIOptions.locale}
|
|
1356
1374
|
*
|
|
1357
1375
|
* @since 1.5.0
|
|
1358
1376
|
* @public
|
|
@@ -1361,321 +1379,42 @@ export declare type ImportDOCXOptions = {
|
|
|
1361
1379
|
*/
|
|
1362
1380
|
export declare type Locale = 'en' | 'fr' | 'de';
|
|
1363
1381
|
|
|
1364
|
-
/**
|
|
1365
|
-
* @alpha
|
|
1366
|
-
* @sidebarGroup programmatic api
|
|
1367
|
-
*/
|
|
1368
|
-
export declare namespace Programmatic {
|
|
1369
|
-
/**
|
|
1370
|
-
* @sidebarGroup programmatic api
|
|
1371
|
-
*/
|
|
1372
|
-
export type Range = {
|
|
1373
|
-
begin: number;
|
|
1374
|
-
end?: number;
|
|
1375
|
-
};
|
|
1376
|
-
/**
|
|
1377
|
-
* @sidebarGroup programmatic api
|
|
1378
|
-
*/
|
|
1379
|
-
export type Formatting = {
|
|
1380
|
-
font: string | null;
|
|
1381
|
-
fontSize: number | null;
|
|
1382
|
-
bold: boolean | null;
|
|
1383
|
-
italic: boolean | null;
|
|
1384
|
-
color: string | null;
|
|
1385
|
-
highlight: string | null;
|
|
1386
|
-
strikeout: boolean | null;
|
|
1387
|
-
underline: boolean | null;
|
|
1388
|
-
};
|
|
1389
|
-
/**
|
|
1390
|
-
* @sidebarGroup programmatic api
|
|
1391
|
-
*/
|
|
1392
|
-
export type SearchFor = string | RegExp;
|
|
1393
|
-
/**
|
|
1394
|
-
* @sidebarGroup programmatic api
|
|
1395
|
-
*/
|
|
1396
|
-
export type Replacement = {
|
|
1397
|
-
text?: string;
|
|
1398
|
-
formatting?: Partial<Formatting>;
|
|
1399
|
-
};
|
|
1400
|
-
/**
|
|
1401
|
-
* @sidebarGroup programmatic api
|
|
1402
|
-
*/
|
|
1403
|
-
export type ReplaceFn = (value: string) => Replacement | string;
|
|
1404
|
-
/**
|
|
1405
|
-
* @sidebarGroup programmatic api
|
|
1406
|
-
*/
|
|
1407
|
-
export type ReplacementOrReplaceFn = Replacement | ReplaceFn | string;
|
|
1408
|
-
/**
|
|
1409
|
-
* @sidebarGroup programmatic api
|
|
1410
|
-
*/
|
|
1411
|
-
export type ReplaceTextSignature = (searchFor: SearchFor, replace: ReplacementOrReplaceFn) => number;
|
|
1412
|
-
/**
|
|
1413
|
-
* @sidebarGroup programmatic api
|
|
1414
|
-
*/
|
|
1415
|
-
export type SearchResult = {
|
|
1416
|
-
range: Range;
|
|
1417
|
-
text: string;
|
|
1418
|
-
};
|
|
1419
|
-
/**
|
|
1420
|
-
* @sidebarGroup programmatic api
|
|
1421
|
-
*/
|
|
1422
|
-
export type TextView = {
|
|
1423
|
-
getPlainText(range?: Range): string;
|
|
1424
|
-
searchText(searchFor: SearchFor, after?: Range): SearchResult | undefined;
|
|
1425
|
-
replaceText: ReplaceTextSignature;
|
|
1426
|
-
setText(value: string, range?: Range): Range;
|
|
1427
|
-
setFormatting(formatting: Partial<Formatting>, range?: Range): void;
|
|
1428
|
-
inlines(): RangeInline[];
|
|
1429
|
-
addLineBreak(insertionPoint?: {
|
|
1430
|
-
placement: 'before' | 'after';
|
|
1431
|
-
range: Range;
|
|
1432
|
-
}): LineBreak;
|
|
1433
|
-
addInlineText(text: string, insertionPoint?: {
|
|
1434
|
-
placement: 'before' | 'after';
|
|
1435
|
-
range: Range;
|
|
1436
|
-
}): InlineText;
|
|
1437
|
-
removeInline(index?: number): Inline | undefined;
|
|
1438
|
-
};
|
|
1439
|
-
/**
|
|
1440
|
-
* @sidebarGroup programmatic api
|
|
1441
|
-
*/
|
|
1442
|
-
export type Extent = {
|
|
1443
|
-
width: number;
|
|
1444
|
-
height: number;
|
|
1445
|
-
};
|
|
1446
|
-
/**
|
|
1447
|
-
* @sidebarGroup programmatic api
|
|
1448
|
-
*/
|
|
1449
|
-
export type Image = {
|
|
1450
|
-
type: 'image';
|
|
1451
|
-
extent(): Extent;
|
|
1452
|
-
setExtent(extent: Partial<Extent>): void;
|
|
1453
|
-
};
|
|
1454
|
-
/**
|
|
1455
|
-
* @sidebarGroup programmatic api
|
|
1456
|
-
*/
|
|
1457
|
-
export type Field = {
|
|
1458
|
-
type: 'field';
|
|
1459
|
-
};
|
|
1460
|
-
/**
|
|
1461
|
-
* @sidebarGroup programmatic api
|
|
1462
|
-
*/
|
|
1463
|
-
export type Footnote = {
|
|
1464
|
-
type: 'footnote';
|
|
1465
|
-
};
|
|
1466
|
-
/**
|
|
1467
|
-
* @sidebarGroup programmatic api
|
|
1468
|
-
*/
|
|
1469
|
-
export type FootnoteRef = {
|
|
1470
|
-
type: 'footnote/ref';
|
|
1471
|
-
};
|
|
1472
|
-
/**
|
|
1473
|
-
* @sidebarGroup programmatic api
|
|
1474
|
-
*/
|
|
1475
|
-
export type Endnote = {
|
|
1476
|
-
type: 'endnote';
|
|
1477
|
-
};
|
|
1478
|
-
/**
|
|
1479
|
-
* @sidebarGroup programmatic api
|
|
1480
|
-
*/
|
|
1481
|
-
export type EndnoteRef = {
|
|
1482
|
-
type: 'endnote/ref';
|
|
1483
|
-
};
|
|
1484
|
-
/**
|
|
1485
|
-
* @sidebarGroup programmatic api
|
|
1486
|
-
*/
|
|
1487
|
-
export type LineBreak = {
|
|
1488
|
-
type: 'line-break';
|
|
1489
|
-
};
|
|
1490
|
-
/**
|
|
1491
|
-
* @sidebarGroup programmatic api
|
|
1492
|
-
*/
|
|
1493
|
-
export type PageBreak = {
|
|
1494
|
-
type: 'page-break';
|
|
1495
|
-
};
|
|
1496
|
-
/**
|
|
1497
|
-
* @sidebarGroup programmatic api
|
|
1498
|
-
*/
|
|
1499
|
-
export type Tab = {
|
|
1500
|
-
type: 'tab';
|
|
1501
|
-
};
|
|
1502
|
-
/**
|
|
1503
|
-
* @sidebarGroup programmatic api
|
|
1504
|
-
*/
|
|
1505
|
-
export type Separator = {
|
|
1506
|
-
type: 'sep';
|
|
1507
|
-
};
|
|
1508
|
-
/**
|
|
1509
|
-
* @sidebarGroup programmatic api
|
|
1510
|
-
*/
|
|
1511
|
-
export type InlineText = {
|
|
1512
|
-
type: 'text';
|
|
1513
|
-
plainText(): string;
|
|
1514
|
-
formatting(): Formatting;
|
|
1515
|
-
};
|
|
1516
|
-
/**
|
|
1517
|
-
* @sidebarGroup programmatic api
|
|
1518
|
-
*/
|
|
1519
|
-
export type Inline = InlineText | Tab | Separator | LineBreak | PageBreak | Image | Field | Footnote | FootnoteRef | Endnote | EndnoteRef;
|
|
1520
|
-
/**
|
|
1521
|
-
* @sidebarGroup programmatic api
|
|
1522
|
-
*/
|
|
1523
|
-
export type RangeInline = {
|
|
1524
|
-
range: Range;
|
|
1525
|
-
inline: Inline;
|
|
1526
|
-
};
|
|
1527
|
-
/**
|
|
1528
|
-
* @sidebarGroup programmatic api
|
|
1529
|
-
*/
|
|
1530
|
-
export type Paragraph = {
|
|
1531
|
-
type: 'paragraph';
|
|
1532
|
-
asTextView(): TextView;
|
|
1533
|
-
replaceText: ReplaceTextSignature;
|
|
1534
|
-
};
|
|
1535
|
-
/**
|
|
1536
|
-
* @sidebarGroup programmatic api
|
|
1537
|
-
*/
|
|
1538
|
-
export type TableCell = BlockLevelContainer;
|
|
1539
|
-
/**
|
|
1540
|
-
* @sidebarGroup programmatic api
|
|
1541
|
-
*/
|
|
1542
|
-
export type TableRow = {
|
|
1543
|
-
cells(): TableCell[];
|
|
1544
|
-
addCell(index?: number): TableCell;
|
|
1545
|
-
removeCell(index: number): TableCell | undefined;
|
|
1546
|
-
replaceText: ReplaceTextSignature;
|
|
1547
|
-
};
|
|
1548
|
-
/**
|
|
1549
|
-
* @sidebarGroup programmatic api
|
|
1550
|
-
*/
|
|
1551
|
-
export type Table = {
|
|
1552
|
-
type: 'table';
|
|
1553
|
-
rows(): TableRow[];
|
|
1554
|
-
addRow(index?: number): TableRow;
|
|
1555
|
-
removeRow(index: number): TableRow | undefined;
|
|
1556
|
-
replaceText: ReplaceTextSignature;
|
|
1557
|
-
};
|
|
1558
|
-
/**
|
|
1559
|
-
* @sidebarGroup programmatic api
|
|
1560
|
-
*/
|
|
1561
|
-
export type BlockLevel = Paragraph | Table;
|
|
1562
|
-
/**
|
|
1563
|
-
* @sidebarGroup programmatic api
|
|
1564
|
-
*/
|
|
1565
|
-
export type BlockLevelContainer = {
|
|
1566
|
-
blocklevels(): BlockLevel[];
|
|
1567
|
-
addParagraph(index?: number): Paragraph;
|
|
1568
|
-
addTable(index?: number): Table;
|
|
1569
|
-
removeElement(index: number): BlockLevel | undefined;
|
|
1570
|
-
replaceText: ReplaceTextSignature;
|
|
1571
|
-
};
|
|
1572
|
-
/**
|
|
1573
|
-
* @sidebarGroup programmatic api
|
|
1574
|
-
*/
|
|
1575
|
-
export type PageSize = {
|
|
1576
|
-
width: number;
|
|
1577
|
-
height: number;
|
|
1578
|
-
};
|
|
1579
|
-
/**
|
|
1580
|
-
* @sidebarGroup programmatic api
|
|
1581
|
-
*/
|
|
1582
|
-
export type PageMargins = {
|
|
1583
|
-
left: number;
|
|
1584
|
-
right: number;
|
|
1585
|
-
top: number;
|
|
1586
|
-
bottom: number;
|
|
1587
|
-
};
|
|
1588
|
-
/**
|
|
1589
|
-
* @sidebarGroup programmatic api
|
|
1590
|
-
*/
|
|
1591
|
-
export type PageSetup = {
|
|
1592
|
-
setPageSize(size: Partial<PageSize>): void;
|
|
1593
|
-
setPageMargins(margins: Partial<PageMargins>): void;
|
|
1594
|
-
pageSize(): PageSize;
|
|
1595
|
-
pageMargins(): PageMargins;
|
|
1596
|
-
};
|
|
1597
|
-
/**
|
|
1598
|
-
* @sidebarGroup programmatic api
|
|
1599
|
-
*/
|
|
1600
|
-
export type HeaderFooter = BlockLevelContainer;
|
|
1601
|
-
/**
|
|
1602
|
-
* @sidebarGroup programmatic api
|
|
1603
|
-
*/
|
|
1604
|
-
export type HeadersFooters = {
|
|
1605
|
-
default(): HeaderFooter | null;
|
|
1606
|
-
first(): HeaderFooter | null;
|
|
1607
|
-
even(): HeaderFooter | null;
|
|
1608
|
-
replaceText: ReplaceTextSignature;
|
|
1609
|
-
};
|
|
1610
|
-
/**
|
|
1611
|
-
* @sidebarGroup programmatic api
|
|
1612
|
-
*/
|
|
1613
|
-
export type HeadersAndFooters = {
|
|
1614
|
-
headers(): HeadersFooters;
|
|
1615
|
-
footers(): HeadersFooters;
|
|
1616
|
-
replaceText: ReplaceTextSignature;
|
|
1617
|
-
};
|
|
1618
|
-
/**
|
|
1619
|
-
* @sidebarGroup programmatic api
|
|
1620
|
-
*/
|
|
1621
|
-
export type Section = {
|
|
1622
|
-
pageSetup(): PageSetup;
|
|
1623
|
-
headersAndFooters(): HeadersAndFooters;
|
|
1624
|
-
content(): BlockLevelContainer;
|
|
1625
|
-
};
|
|
1626
|
-
/**
|
|
1627
|
-
* @sidebarGroup programmatic api
|
|
1628
|
-
*/
|
|
1629
|
-
export type Body = {
|
|
1630
|
-
sections(): Section[];
|
|
1631
|
-
addSection(index?: number): Section;
|
|
1632
|
-
removeSection(index: number): Section | undefined;
|
|
1633
|
-
replaceText: ReplaceTextSignature;
|
|
1634
|
-
};
|
|
1635
|
-
/**
|
|
1636
|
-
* @sidebarGroup programmatic api
|
|
1637
|
-
*/
|
|
1638
|
-
export type Document = {
|
|
1639
|
-
body(): Body;
|
|
1640
|
-
replaceText: ReplaceTextSignature;
|
|
1641
|
-
};
|
|
1642
|
-
{};
|
|
1643
|
-
}
|
|
1644
|
-
|
|
1645
1382
|
/**
|
|
1646
1383
|
* Toolbar API - Type definitions for customizing the editor toolbar
|
|
1647
1384
|
*/
|
|
1648
1385
|
/**
|
|
1649
1386
|
* Action toolbar item - references an action by ID
|
|
1650
1387
|
*
|
|
1651
|
-
* Use this to add custom actions to the toolbar. The action must be registered
|
|
1652
|
-
*
|
|
1388
|
+
* Use this to add custom actions to the toolbar. The action must be registered via {@link DocAuthEditor.setActions} or
|
|
1389
|
+
* {@linkcode UIOptions.actions}.
|
|
1653
1390
|
*
|
|
1391
|
+
* @since 1.9.0
|
|
1654
1392
|
* @example
|
|
1393
|
+
*
|
|
1655
1394
|
* ```ts
|
|
1395
|
+
* import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';
|
|
1396
|
+
*
|
|
1656
1397
|
* // First, register a custom action
|
|
1657
1398
|
* editor.setActions([
|
|
1658
|
-
*
|
|
1659
|
-
*
|
|
1660
|
-
*
|
|
1661
|
-
*
|
|
1662
|
-
*
|
|
1399
|
+
* {
|
|
1400
|
+
* id: 'custom.insert-signature',
|
|
1401
|
+
* label: 'Insert Signature',
|
|
1402
|
+
* handler: () => editor.insertTextAtCursor('\n\nBest regards,\nJohn Doe'),
|
|
1403
|
+
* },
|
|
1663
1404
|
* ]);
|
|
1664
1405
|
*
|
|
1665
1406
|
* // Then add it to the toolbar
|
|
1666
1407
|
* editor.setToolbarConfig({
|
|
1667
|
-
*
|
|
1668
|
-
*
|
|
1669
|
-
* ]
|
|
1408
|
+
* ...defaultToolbarConfig,
|
|
1409
|
+
* items: [{ type: 'action', id: 'sig-btn', actionId: 'custom.insert-signature' }],
|
|
1670
1410
|
* });
|
|
1671
1411
|
* ```
|
|
1672
1412
|
*
|
|
1673
|
-
* @since 1.9.0
|
|
1674
1413
|
* @public
|
|
1675
1414
|
* @sidebarGroup toolbar
|
|
1676
1415
|
* @sidebarGroupOrder 4
|
|
1677
|
-
* @see {@
|
|
1678
|
-
* @see {@
|
|
1416
|
+
* @see {@linkcode Action} for defining actions.
|
|
1417
|
+
* @see {@linkcode ToolbarConfig} for full toolbar configuration.
|
|
1679
1418
|
*/
|
|
1680
1419
|
export declare type ToolbarActionItem = {
|
|
1681
1420
|
type: 'action';
|
|
@@ -1688,43 +1427,48 @@ export declare type ToolbarActionItem = {
|
|
|
1688
1427
|
/**
|
|
1689
1428
|
* Built-in toolbar item - uses original toolbar components directly
|
|
1690
1429
|
*
|
|
1691
|
-
* These are pre-built toolbar components that come with the SDK.
|
|
1692
|
-
* Each has its own UI and functionality built-in.
|
|
1430
|
+
* These are pre-built toolbar components that come with the SDK. Each has its own UI and functionality built-in.
|
|
1693
1431
|
*
|
|
1432
|
+
* @since 1.9.0
|
|
1694
1433
|
* @example
|
|
1434
|
+
*
|
|
1695
1435
|
* ```ts
|
|
1436
|
+
* import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';
|
|
1437
|
+
*
|
|
1696
1438
|
* // Add undo/redo buttons
|
|
1697
1439
|
* editor.setToolbarConfig({
|
|
1698
|
-
*
|
|
1699
|
-
*
|
|
1700
|
-
*
|
|
1701
|
-
*
|
|
1440
|
+
* ...defaultToolbarConfig,
|
|
1441
|
+
* items: [
|
|
1442
|
+
* { type: 'built-in', id: 'undo-btn', builtInType: 'undo' },
|
|
1443
|
+
* { type: 'built-in', id: 'redo-btn', builtInType: 'redo' },
|
|
1444
|
+
* ],
|
|
1702
1445
|
* });
|
|
1703
1446
|
*
|
|
1704
1447
|
* // Add text formatting buttons
|
|
1705
1448
|
* editor.setToolbarConfig({
|
|
1706
|
-
*
|
|
1707
|
-
*
|
|
1708
|
-
*
|
|
1709
|
-
*
|
|
1710
|
-
*
|
|
1449
|
+
* ...defaultToolbarConfig,
|
|
1450
|
+
* items: [
|
|
1451
|
+
* { type: 'built-in', id: 'bold-btn', builtInType: 'bold' },
|
|
1452
|
+
* { type: 'built-in', id: 'italic-btn', builtInType: 'italic' },
|
|
1453
|
+
* { type: 'built-in', id: 'underline-btn', builtInType: 'underline' },
|
|
1454
|
+
* ],
|
|
1711
1455
|
* });
|
|
1712
1456
|
*
|
|
1713
1457
|
* // Add dropdown menus
|
|
1714
1458
|
* editor.setToolbarConfig({
|
|
1715
|
-
*
|
|
1716
|
-
*
|
|
1717
|
-
*
|
|
1718
|
-
*
|
|
1719
|
-
*
|
|
1459
|
+
* ...defaultToolbarConfig,
|
|
1460
|
+
* items: [
|
|
1461
|
+
* { type: 'built-in', id: 'font-menu', builtInType: 'font-family' },
|
|
1462
|
+
* { type: 'built-in', id: 'size-menu', builtInType: 'font-size' },
|
|
1463
|
+
* { type: 'built-in', id: 'insert', builtInType: 'insert-menu' },
|
|
1464
|
+
* ],
|
|
1720
1465
|
* });
|
|
1721
1466
|
* ```
|
|
1722
1467
|
*
|
|
1723
|
-
* @since 1.9.0
|
|
1724
1468
|
* @public
|
|
1725
1469
|
* @sidebarGroup toolbar
|
|
1726
1470
|
* @sidebarGroupOrder 5
|
|
1727
|
-
* @see {@
|
|
1471
|
+
* @see {@linkcode ToolbarConfig} for full toolbar configuration.
|
|
1728
1472
|
*/
|
|
1729
1473
|
export declare type ToolbarBuiltInItem = {
|
|
1730
1474
|
type: 'built-in';
|
|
@@ -1737,62 +1481,64 @@ export declare type ToolbarBuiltInItem = {
|
|
|
1737
1481
|
/**
|
|
1738
1482
|
* Toolbar configuration
|
|
1739
1483
|
*
|
|
1484
|
+
* @since 1.9.0
|
|
1740
1485
|
* @example
|
|
1486
|
+
*
|
|
1741
1487
|
* ```ts
|
|
1742
1488
|
* import { defaultToolbarConfig, defaultActions } from '@nutrient-sdk/document-authoring';
|
|
1743
1489
|
*
|
|
1744
1490
|
* // Add custom action and toolbar button
|
|
1745
1491
|
* editor.setActions([
|
|
1746
|
-
*
|
|
1747
|
-
*
|
|
1748
|
-
*
|
|
1749
|
-
*
|
|
1750
|
-
*
|
|
1751
|
-
*
|
|
1752
|
-
*
|
|
1753
|
-
*
|
|
1754
|
-
*
|
|
1492
|
+
* ...defaultActions,
|
|
1493
|
+
* {
|
|
1494
|
+
* id: 'custom.save',
|
|
1495
|
+
* label: 'Save',
|
|
1496
|
+
* handler: async () => {
|
|
1497
|
+
* const doc = await editor.currentDocument().saveDocument();
|
|
1498
|
+
* await fetch('/api/save', { method: 'POST', body: JSON.stringify(doc) });
|
|
1499
|
+
* },
|
|
1500
|
+
* },
|
|
1755
1501
|
* ]);
|
|
1756
1502
|
* editor.setToolbarConfig({
|
|
1757
|
-
*
|
|
1758
|
-
*
|
|
1759
|
-
*
|
|
1760
|
-
*
|
|
1761
|
-
*
|
|
1762
|
-
*
|
|
1503
|
+
* ...defaultToolbarConfig,
|
|
1504
|
+
* items: [
|
|
1505
|
+
* ...defaultToolbarConfig.items,
|
|
1506
|
+
* { type: 'separator', id: 'sep-custom' },
|
|
1507
|
+
* { type: 'action', id: 'save-btn', actionId: 'custom.save' },
|
|
1508
|
+
* ],
|
|
1763
1509
|
* });
|
|
1764
1510
|
*
|
|
1765
1511
|
* // Create a minimal toolbar with essential formatting
|
|
1766
1512
|
* editor.setToolbarConfig({
|
|
1767
|
-
*
|
|
1768
|
-
*
|
|
1769
|
-
*
|
|
1770
|
-
*
|
|
1771
|
-
*
|
|
1772
|
-
*
|
|
1773
|
-
*
|
|
1774
|
-
*
|
|
1775
|
-
*
|
|
1776
|
-
*
|
|
1777
|
-
*
|
|
1778
|
-
*
|
|
1513
|
+
* ...defaultToolbarConfig,
|
|
1514
|
+
* items: [
|
|
1515
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
1516
|
+
* { type: 'built-in', id: 'redo', builtInType: 'redo' },
|
|
1517
|
+
* { type: 'separator', id: 'sep-1' },
|
|
1518
|
+
* { type: 'built-in', id: 'bold', builtInType: 'bold' },
|
|
1519
|
+
* { type: 'built-in', id: 'italic', builtInType: 'italic' },
|
|
1520
|
+
* { type: 'built-in', id: 'underline', builtInType: 'underline' },
|
|
1521
|
+
* { type: 'separator', id: 'sep-2' },
|
|
1522
|
+
* { type: 'built-in', id: 'align-left', builtInType: 'align-left' },
|
|
1523
|
+
* { type: 'built-in', id: 'align-center', builtInType: 'align-center' },
|
|
1524
|
+
* { type: 'built-in', id: 'align-right', builtInType: 'align-right' },
|
|
1525
|
+
* ],
|
|
1779
1526
|
* });
|
|
1780
1527
|
*
|
|
1781
1528
|
* // Customize default toolbar by filtering/adding items
|
|
1782
1529
|
* const customItems = [
|
|
1783
|
-
*
|
|
1784
|
-
*
|
|
1785
|
-
*
|
|
1530
|
+
* ...defaultToolbarConfig.items.filter((item) => item.id !== 'download-menu'),
|
|
1531
|
+
* { type: 'separator', id: 'custom-sep' },
|
|
1532
|
+
* { type: 'action', id: 'save-btn', actionId: 'custom.save' },
|
|
1786
1533
|
* ];
|
|
1787
1534
|
* editor.setToolbarConfig({ ...defaultToolbarConfig, items: customItems });
|
|
1788
1535
|
* ```
|
|
1789
1536
|
*
|
|
1790
|
-
* @since 1.9.0
|
|
1791
1537
|
* @public
|
|
1792
1538
|
* @sidebarGroup toolbar
|
|
1793
1539
|
* @sidebarGroupOrder 2
|
|
1794
|
-
* @see {@
|
|
1795
|
-
* @see {@
|
|
1540
|
+
* @see {@linkcode ToolbarItem} for the different types of toolbar items.
|
|
1541
|
+
* @see {@linkcode UIOptions.toolbar} for setting toolbar during editor creation.
|
|
1796
1542
|
*/
|
|
1797
1543
|
export declare type ToolbarConfig = {
|
|
1798
1544
|
/**
|
|
@@ -1803,6 +1549,7 @@ export declare type ToolbarConfig = {
|
|
|
1803
1549
|
|
|
1804
1550
|
/**
|
|
1805
1551
|
* Union type for all toolbar items
|
|
1552
|
+
*
|
|
1806
1553
|
* @since 1.9.0
|
|
1807
1554
|
* @public
|
|
1808
1555
|
* @sidebarGroup toolbar
|
|
@@ -1815,27 +1562,31 @@ export declare type ToolbarItem = ToolbarActionItem | ToolbarBuiltInItem | Toolb
|
|
|
1815
1562
|
*
|
|
1816
1563
|
* Use separators to visually group related toolbar items.
|
|
1817
1564
|
*
|
|
1565
|
+
* @since 1.9.0
|
|
1818
1566
|
* @example
|
|
1567
|
+
*
|
|
1819
1568
|
* ```ts
|
|
1569
|
+
* import { defaultToolbarConfig } from '@nutrient-sdk/document-authoring';
|
|
1570
|
+
*
|
|
1820
1571
|
* editor.setToolbarConfig({
|
|
1821
|
-
*
|
|
1822
|
-
*
|
|
1823
|
-
*
|
|
1824
|
-
*
|
|
1825
|
-
*
|
|
1826
|
-
*
|
|
1827
|
-
*
|
|
1828
|
-
*
|
|
1829
|
-
*
|
|
1830
|
-
*
|
|
1572
|
+
* ...defaultToolbarConfig,
|
|
1573
|
+
* items: [
|
|
1574
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
1575
|
+
* { type: 'built-in', id: 'redo', builtInType: 'redo' },
|
|
1576
|
+
* { type: 'separator', id: 'sep-1' }, // Separate undo/redo from formatting
|
|
1577
|
+
* { type: 'built-in', id: 'bold', builtInType: 'bold' },
|
|
1578
|
+
* { type: 'built-in', id: 'italic', builtInType: 'italic' },
|
|
1579
|
+
* { type: 'separator', id: 'sep-2' }, // Separate formatting from alignment
|
|
1580
|
+
* { type: 'built-in', id: 'align-left', builtInType: 'align-left' },
|
|
1581
|
+
* { type: 'built-in', id: 'align-center', builtInType: 'align-center' },
|
|
1582
|
+
* ],
|
|
1831
1583
|
* });
|
|
1832
1584
|
* ```
|
|
1833
1585
|
*
|
|
1834
|
-
* @since 1.9.0
|
|
1835
1586
|
* @public
|
|
1836
1587
|
* @sidebarGroup toolbar
|
|
1837
1588
|
* @sidebarGroupOrder 6
|
|
1838
|
-
* @see {@
|
|
1589
|
+
* @see {@linkcode ToolbarConfig} for full toolbar configuration.
|
|
1839
1590
|
*/
|
|
1840
1591
|
export declare type ToolbarSeparatorItem = {
|
|
1841
1592
|
type: 'separator';
|
|
@@ -1843,28 +1594,6 @@ export declare type ToolbarSeparatorItem = {
|
|
|
1843
1594
|
id: string;
|
|
1844
1595
|
};
|
|
1845
1596
|
|
|
1846
|
-
/**
|
|
1847
|
-
* @alpha
|
|
1848
|
-
* @sidebarGroup programmatic api
|
|
1849
|
-
* @see {@link DocAuthDocument.transaction} for running transactions with this callback type.
|
|
1850
|
-
*/
|
|
1851
|
-
export declare type TransactionCallback<T = void> = (context: {
|
|
1852
|
-
draft: Programmatic.Document;
|
|
1853
|
-
}) => Promise<TransactionResult<T>>;
|
|
1854
|
-
|
|
1855
|
-
/**
|
|
1856
|
-
* @alpha
|
|
1857
|
-
* @sidebarGroup programmatic api
|
|
1858
|
-
* @see {@link TransactionCallback} for the callback signature that returns this result type.
|
|
1859
|
-
*/
|
|
1860
|
-
export declare type TransactionResult<T = void> = undefined | boolean | {
|
|
1861
|
-
commit: boolean;
|
|
1862
|
-
result: T;
|
|
1863
|
-
} | Promise<undefined | boolean | {
|
|
1864
|
-
commit: boolean;
|
|
1865
|
-
result: T;
|
|
1866
|
-
}>;
|
|
1867
|
-
|
|
1868
1597
|
/**
|
|
1869
1598
|
* Configuration options for the user interface.
|
|
1870
1599
|
*
|
|
@@ -1872,13 +1601,14 @@ export declare type TransactionResult<T = void> = undefined | boolean | {
|
|
|
1872
1601
|
* @public
|
|
1873
1602
|
* @sidebarGroup ui
|
|
1874
1603
|
* @sidebarGroupOrder 1
|
|
1875
|
-
* @see {@
|
|
1604
|
+
* @see {@linkcode CreateEditorOptions} for all available options when creating an editor.
|
|
1876
1605
|
*/
|
|
1877
1606
|
export declare type UIOptions = {
|
|
1878
1607
|
/**
|
|
1879
1608
|
* The locale to use for displaying text, formatting numbers etc.
|
|
1880
1609
|
*
|
|
1881
|
-
* `auto` will automatically detect the user's locale based on their browser settings. If this doesn't match a supported locale, it will
|
|
1610
|
+
* `auto` will automatically detect the user's locale based on their browser settings. If this doesn't match a supported locale, it will
|
|
1611
|
+
* fall back to `en`.
|
|
1882
1612
|
*
|
|
1883
1613
|
* @defaultValue `auto`
|
|
1884
1614
|
*/
|
|
@@ -1900,112 +1630,104 @@ export declare type UIOptions = {
|
|
|
1900
1630
|
*/
|
|
1901
1631
|
enabled: boolean;
|
|
1902
1632
|
};
|
|
1903
|
-
|
|
1904
|
-
* @internal
|
|
1905
|
-
*
|
|
1906
|
-
* Initial zoom level for the editor.
|
|
1907
|
-
*
|
|
1908
|
-
* Valid range is 0.5 to 4.0, which any values provided will be clamped to.
|
|
1909
|
-
*
|
|
1910
|
-
* @defaultValue `1`
|
|
1911
|
-
*/
|
|
1912
|
-
initialZoom?: number;
|
|
1633
|
+
|
|
1913
1634
|
/**
|
|
1914
1635
|
* Initial toolbar configuration.
|
|
1915
1636
|
*
|
|
1916
|
-
* The toolbar can also be customized at runtime using
|
|
1637
|
+
* The toolbar can also be customized at runtime using {@linkcode DocAuthEditor#setToolbarConfig | editor.setToolbarConfig()}.
|
|
1917
1638
|
*
|
|
1639
|
+
* @since 1.9.0
|
|
1918
1640
|
* @example
|
|
1641
|
+
*
|
|
1919
1642
|
* ```ts
|
|
1920
1643
|
* import { defaultToolbarConfig, defaultActions } from '@nutrient-sdk/document-authoring';
|
|
1921
1644
|
*
|
|
1922
1645
|
* // Add a separator and custom action to the default toolbar
|
|
1923
1646
|
* const editor = await system.createEditor(target, {
|
|
1924
|
-
*
|
|
1925
|
-
*
|
|
1926
|
-
*
|
|
1927
|
-
*
|
|
1928
|
-
*
|
|
1929
|
-
*
|
|
1930
|
-
*
|
|
1931
|
-
*
|
|
1932
|
-
*
|
|
1933
|
-
*
|
|
1934
|
-
*
|
|
1935
|
-
* },
|
|
1936
|
-
* },
|
|
1647
|
+
* ui: {
|
|
1648
|
+
* actions: [...defaultActions, { id: 'custom.hello', label: 'Say Hello', handler: () => alert('Hello!') }],
|
|
1649
|
+
* toolbar: {
|
|
1650
|
+
* ...defaultToolbarConfig,
|
|
1651
|
+
* items: [
|
|
1652
|
+
* ...defaultToolbarConfig.items,
|
|
1653
|
+
* { type: 'separator', id: 'sep-custom' },
|
|
1654
|
+
* { type: 'action', id: 'custom-action', actionId: 'custom.hello' },
|
|
1655
|
+
* ],
|
|
1656
|
+
* },
|
|
1657
|
+
* },
|
|
1937
1658
|
* });
|
|
1938
1659
|
* ```
|
|
1939
1660
|
*
|
|
1940
1661
|
* @example
|
|
1662
|
+
*
|
|
1941
1663
|
* ```ts
|
|
1942
1664
|
* // Create a minimal toolbar with just undo/redo and bold/italic
|
|
1943
1665
|
* const editor = await system.createEditor(target, {
|
|
1944
|
-
*
|
|
1945
|
-
*
|
|
1946
|
-
*
|
|
1947
|
-
*
|
|
1948
|
-
*
|
|
1949
|
-
*
|
|
1950
|
-
*
|
|
1951
|
-
*
|
|
1952
|
-
*
|
|
1953
|
-
*
|
|
1954
|
-
*
|
|
1666
|
+
* ui: {
|
|
1667
|
+
* toolbar: {
|
|
1668
|
+
* items: [
|
|
1669
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
1670
|
+
* { type: 'built-in', id: 'redo', builtInType: 'redo' },
|
|
1671
|
+
* { type: 'separator', id: 'sep-1' },
|
|
1672
|
+
* { type: 'built-in', id: 'bold', builtInType: 'bold' },
|
|
1673
|
+
* { type: 'built-in', id: 'italic', builtInType: 'italic' },
|
|
1674
|
+
* ],
|
|
1675
|
+
* },
|
|
1676
|
+
* },
|
|
1955
1677
|
* });
|
|
1956
1678
|
* ```
|
|
1957
1679
|
*
|
|
1958
1680
|
* @example
|
|
1681
|
+
*
|
|
1959
1682
|
* ```ts
|
|
1960
1683
|
* // Mix built-in items with custom actions
|
|
1961
1684
|
* const editor = await system.createEditor(target, {
|
|
1962
|
-
*
|
|
1963
|
-
*
|
|
1964
|
-
*
|
|
1965
|
-
*
|
|
1966
|
-
*
|
|
1967
|
-
*
|
|
1968
|
-
*
|
|
1969
|
-
*
|
|
1970
|
-
*
|
|
1971
|
-
*
|
|
1972
|
-
*
|
|
1973
|
-
*
|
|
1974
|
-
*
|
|
1975
|
-
*
|
|
1976
|
-
*
|
|
1685
|
+
* ui: {
|
|
1686
|
+
* toolbar: {
|
|
1687
|
+
* items: [
|
|
1688
|
+
* { type: 'built-in', id: 'undo', builtInType: 'undo' },
|
|
1689
|
+
* { type: 'action', id: 'custom-btn', actionId: 'custom.my-action' },
|
|
1690
|
+
* ],
|
|
1691
|
+
* },
|
|
1692
|
+
* actions: [
|
|
1693
|
+
* {
|
|
1694
|
+
* id: 'custom.my-action',
|
|
1695
|
+
* label: 'My Action',
|
|
1696
|
+
* handler: () => console.log('clicked!'),
|
|
1697
|
+
* },
|
|
1698
|
+
* ],
|
|
1699
|
+
* },
|
|
1977
1700
|
* });
|
|
1978
1701
|
* ```
|
|
1979
1702
|
*
|
|
1980
|
-
* @
|
|
1981
|
-
* @see {@
|
|
1982
|
-
* @see {@link defaultToolbarConfig} for the default toolbar configuration.
|
|
1703
|
+
* @see {@linkcode ToolbarConfig} for the toolbar configuration type.
|
|
1704
|
+
* @see {@linkcode defaultToolbarConfig} for the default toolbar configuration.
|
|
1983
1705
|
*/
|
|
1984
1706
|
toolbar?: ToolbarConfig;
|
|
1985
1707
|
/**
|
|
1986
1708
|
* Initial actions configuration.
|
|
1987
1709
|
*
|
|
1988
|
-
* Actions can also be customized at runtime using
|
|
1710
|
+
* Actions can also be customized at runtime using {@linkcode DocAuthEditor#setActions | editor.setActions()}.
|
|
1989
1711
|
*
|
|
1712
|
+
* @since 1.9.0
|
|
1990
1713
|
* @example
|
|
1714
|
+
*
|
|
1991
1715
|
* ```ts
|
|
1992
1716
|
* import { defaultActions } from '@nutrient-sdk/document-authoring';
|
|
1993
1717
|
*
|
|
1994
1718
|
* const editor = await system.createEditor(target, {
|
|
1995
|
-
*
|
|
1996
|
-
*
|
|
1997
|
-
*
|
|
1998
|
-
*
|
|
1999
|
-
*
|
|
2000
|
-
*
|
|
2001
|
-
*
|
|
2002
|
-
*
|
|
2003
|
-
*
|
|
2004
|
-
*
|
|
1719
|
+
* ui: {
|
|
1720
|
+
* actions: [
|
|
1721
|
+
* ...defaultActions,
|
|
1722
|
+
* {
|
|
1723
|
+
* id: 'custom.hello',
|
|
1724
|
+
* label: 'Say Hello',
|
|
1725
|
+
* handler: () => alert('Hello!'),
|
|
1726
|
+
* },
|
|
1727
|
+
* ],
|
|
1728
|
+
* },
|
|
2005
1729
|
* });
|
|
2006
1730
|
* ```
|
|
2007
|
-
*
|
|
2008
|
-
* @since 1.9.0
|
|
2009
1731
|
*/
|
|
2010
1732
|
actions?: Action[];
|
|
2011
1733
|
};
|
|
@@ -2013,7 +1735,7 @@ export declare type UIOptions = {
|
|
|
2013
1735
|
/**
|
|
2014
1736
|
* The list of supported units in Document Authoring.
|
|
2015
1737
|
*
|
|
2016
|
-
* See {@
|
|
1738
|
+
* See {@linkcode UIOptions#unit | UIOptions.unit}
|
|
2017
1739
|
*
|
|
2018
1740
|
* @since 1.5.0
|
|
2019
1741
|
* @public
|