@ckeditor/ckeditor5-editor-multi-root 39.0.1 → 40.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,573 +1,573 @@
1
- /**
2
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
- */
5
- /**
6
- * @module editor-multi-root/multirooteditor
7
- */
8
- import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core';
9
- import { type DecoratedMethodEvent } from 'ckeditor5/src/utils';
10
- import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog';
11
- import MultiRootEditorUI from './multirooteditorui';
12
- import { type RootElement } from 'ckeditor5/src/engine';
13
- declare const MultiRootEditor_base: import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").DataApi>;
14
- /**
15
- * The {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor} implementation.
16
- *
17
- * The multi-root editor provides multiple inline editable elements and a toolbar. All editable areas are controlled by one editor
18
- * instance, which means that they share common configuration, document ID, or undo stack.
19
- *
20
- * This type of editor is dedicated to integrations which require a customized UI with an open structure, featuring multiple editable areas,
21
- * allowing developers to have a control over the exact location of these editable areas.
22
- *
23
- * In order to create a multi-root editor instance, use the static
24
- * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method.
25
- *
26
- * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
27
- *
28
- * # Multi-root editor and multi-root editor build
29
- *
30
- * The multi-root editor can be used directly from source (if you installed the
31
- * [`@ckeditor/ckeditor5-editor-multi-root`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-multi-root) package)
32
- * but it is also available in the
33
- * {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor build}.
34
- *
35
- * {@glink installation/getting-started/predefined-builds Builds} are ready-to-use editors with plugins bundled in.
36
- *
37
- * When using the editor from source you need to take care of loading all plugins by yourself
38
- * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
39
- * Using the editor from source gives much better flexibility and allows for easier customization.
40
- *
41
- * Read more about initializing the editor from source or as a build in
42
- * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
43
- */
44
- export default class MultiRootEditor extends MultiRootEditor_base {
45
- /**
46
- * @inheritDoc
47
- */
48
- readonly ui: MultiRootEditorUI;
49
- /**
50
- * The elements on which the editor has been initialized.
51
- */
52
- readonly sourceElements: Record<string, HTMLElement>;
53
- /**
54
- * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
55
- * config property and should be returned by {@link #getRootsAttributes}.
56
- */
57
- private readonly _registeredRootsAttributesKeys;
58
- /**
59
- * A set of lock IDs for enabling or disabling particular root.
60
- */
61
- private readonly _readOnlyRootLocks;
62
- /**
63
- * Creates an instance of the multi-root editor.
64
- *
65
- * **Note:** Do not use the constructor to create editor instances. Use the static
66
- * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
67
- *
68
- * @param sourceElementsOrData The DOM elements that will be the source for the created editor
69
- * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
70
- * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
71
- * @param config The editor configuration.
72
- */
73
- protected constructor(sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config?: EditorConfig);
74
- /**
75
- * Destroys the editor instance, releasing all resources used by it.
76
- *
77
- * Updates the original editor element with the data if the
78
- * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
79
- * configuration option is set to `true`.
80
- *
81
- * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
82
- * do that yourself in the destruction chain, if you need to:
83
- *
84
- * ```ts
85
- * editor.destroy().then( () => {
86
- * // Remove the toolbar from DOM.
87
- * editor.ui.view.toolbar.element.remove();
88
- *
89
- * // Remove editable elements from DOM.
90
- * for ( const editable of Object.values( editor.ui.view.editables ) ) {
91
- * editable.element.remove();
92
- * }
93
- *
94
- * console.log( 'Editor was destroyed' );
95
- * } );
96
- * ```
97
- */
98
- destroy(): Promise<unknown>;
99
- /**
100
- * Adds a new root to the editor.
101
- *
102
- * ```ts
103
- * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
104
- * ```
105
- *
106
- * After a root is added, you will be able to modify and retrieve its data.
107
- *
108
- * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
109
- * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
110
- *
111
- * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
112
- * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
113
- *
114
- * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
115
- * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
116
- * be changed only using the editor API.
117
- *
118
- * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
119
- * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
120
- *
121
- * ```ts
122
- * editor.on( 'addRoot', ( evt, root ) => {
123
- * const editableElement = editor.createEditable( root );
124
- *
125
- * // You may want to create a more complex DOM structure here.
126
- * //
127
- * // Alternatively, you may want to create a DOM structure before
128
- * // calling `editor.addRoot()` and only append `editableElement` at
129
- * // a proper place.
130
- *
131
- * document.querySelector( '#editors' ).appendChild( editableElement );
132
- * } );
133
- *
134
- * // ...
135
- *
136
- * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
137
- * ```
138
- *
139
- * You can set root attributes on the new root while you add it:
140
- *
141
- * ```ts
142
- * // Add a collapsed root at fourth position from top.
143
- * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
144
- * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
145
- * ```
146
- *
147
- * See also {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes` configuration option}.
148
- *
149
- * Note that attributes keys of attributes added in `attributes` option are also included in {@link #getRootsAttributes} return value.
150
- *
151
- * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
152
- *
153
- * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
154
- * combined into one, bigger UI element, and want them all to be undone together.
155
- *
156
- * ```ts
157
- * let rowId = 0;
158
- *
159
- * editor.model.change( () => {
160
- * editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
161
- * editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
162
- * editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
163
- *
164
- * rowId++;
165
- * } );
166
- * ```
167
- *
168
- * @param rootName Name of the root to add.
169
- * @param options Additional options for the added root.
170
- */
171
- addRoot(rootName: string, { data, attributes, elementName, isUndoable }?: AddRootOptions): void;
172
- /**
173
- * Detaches a root from the editor.
174
- *
175
- * ```ts
176
- * editor.detachRoot( 'myRoot' );
177
- * ```
178
- *
179
- * A detached root is not entirely removed from the editor model, however it can be considered removed.
180
- *
181
- * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
182
- * it is automatically removed as well. Finally, a detached root is not returned by
183
- * {@link module:engine/model/document~Document#getRootNames} by default.
184
- *
185
- * It is possible to re-add a previously detached root calling {@link #addRoot}.
186
- *
187
- * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
188
- * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
189
- *
190
- * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
191
- * the root and it **does not** remove the DOM element from the DOM structure of your application.
192
- *
193
- * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
194
- * and call {@link #detachEditable}. Then, remove the DOM element from your application.
195
- *
196
- * ```ts
197
- * editor.on( 'detachRoot', ( evt, root ) => {
198
- * const editableElement = editor.detachEditable( root );
199
- *
200
- * // You may want to do an additional DOM clean-up here.
201
- *
202
- * editableElement.remove();
203
- * } );
204
- *
205
- * // ...
206
- *
207
- * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
208
- * ```
209
- *
210
- * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
211
- *
212
- * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
213
- * bigger UI element, and you want them all to be re-added together.
214
- *
215
- * ```ts
216
- * editor.model.change( () => {
217
- * editor.detachRoot( 'left-row-3', true );
218
- * editor.detachRoot( 'center-row-3', true );
219
- * editor.detachRoot( 'right-row-3', true );
220
- * } );
221
- * ```
222
- *
223
- * @param rootName Name of the root to detach.
224
- * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
225
- */
226
- detachRoot(rootName: string, isUndoable?: boolean): void;
227
- /**
228
- * Creates and returns a new DOM editable element for the given root element.
229
- *
230
- * The new DOM editable is attached to the model root and can be used to modify the root content.
231
- *
232
- * @param root Root for which the editable element should be created.
233
- * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
234
- * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
235
- * @returns The created DOM element. Append it in a desired place in your application.
236
- */
237
- createEditable(root: RootElement, placeholder?: string): HTMLElement;
238
- /**
239
- * Detaches the DOM editable element that was attached to the given root.
240
- *
241
- * @param root Root for which the editable element should be detached.
242
- * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
243
- */
244
- detachEditable(root: RootElement): HTMLElement;
245
- /**
246
- * Loads a root that has been previously declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
247
- * configuration option.
248
- *
249
- * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
250
- * loading a root cannot be reverted using the undo feature.
251
- *
252
- * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among other, means that all
253
- * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
254
- * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
255
- *
256
- * Until the root becomes loaded, all above mechanisms are suppressed.
257
- *
258
- * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
259
- *
260
- * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
261
- * with the remote editing session, before the root is added to the editor.
262
- *
263
- * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
264
- *
265
- * @param rootName Name of the root to load.
266
- * @param options Additional options for the loaded root.
267
- * @fires loadRoot
268
- */
269
- loadRoot(rootName: string, { data, attributes }?: LoadRootOptions): void;
270
- /**
271
- * Returns the document data for all attached roots.
272
- *
273
- * @param options Additional configuration for the retrieved data.
274
- * Editor features may introduce more configuration options that can be set through this parameter.
275
- * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
276
- * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
277
- * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
278
- * @returns The full document data.
279
- */
280
- getFullData(options?: Record<string, unknown>): Record<string, string>;
281
- /**
282
- * Returns attributes for all attached roots.
283
- *
284
- * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
285
- * configuration option will be returned.
286
- *
287
- * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
288
- */
289
- getRootsAttributes(): Record<string, RootAttributes>;
290
- /**
291
- * Returns attributes for the specified root.
292
- *
293
- * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
294
- * configuration option will be returned.
295
- *
296
- * @param rootName
297
- */
298
- getRootAttributes(rootName: string): RootAttributes;
299
- /**
300
- * Switches given editor root to the read-only mode.
301
- *
302
- * In contrary to {@link module:core/editor/editor~Editor#enableReadOnlyMode `enableReadOnlyMode()`}, which switches the whole editor
303
- * to the read-only mode, this method turns only a particular root to the read-only mode. This can be useful when you want to prevent
304
- * editing only a part of the editor content.
305
- *
306
- * When you switch a root to the read-only mode, you need provide a unique identifier (`lockId`) that will identify this request. You
307
- * will need to provide the same `lockId` when you will want to
308
- * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot re-enable} the root.
309
- *
310
- * ```ts
311
- * const model = editor.model;
312
- * const myRoot = model.document.getRoot( 'myRoot' );
313
- *
314
- * editor.disableRoot( 'myRoot', 'my-lock' );
315
- * model.canEditAt( myRoot ); // `false`
316
- *
317
- * editor.disableRoot( 'myRoot', 'other-lock' );
318
- * editor.disableRoot( 'myRoot', 'other-lock' ); // Multiple locks with the same ID have no effect.
319
- * model.canEditAt( myRoot ); // `false`
320
- *
321
- * editor.enableRoot( 'myRoot', 'my-lock' );
322
- * model.canEditAt( myRoot ); // `false`
323
- *
324
- * editor.enableRoot( 'myRoot', 'other-lock' );
325
- * model.canEditAt( myRoot ); // `true`
326
- * ```
327
- *
328
- * See also {@link module:core/editor/editor~Editor#enableReadOnlyMode `Editor#enableReadOnlyMode()`} and
329
- * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot `MultiRootEditor#enableRoot()`}.
330
- *
331
- * @param rootName Name of the root to switch to read-only mode.
332
- * @param lockId A unique ID for setting the editor to the read-only state.
333
- */
334
- disableRoot(rootName: string, lockId: string | symbol): void;
335
- /**
336
- * Removes given read-only lock from the given root.
337
- *
338
- * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor#disableRoot `disableRoot()`}.
339
- *
340
- * @param rootName Name of the root to switch back from the read-only mode.
341
- * @param lockId A unique ID for setting the editor to the read-only state.
342
- */
343
- enableRoot(rootName: string, lockId: string | symbol): void;
344
- /**
345
- * Creates a new multi-root editor instance.
346
- *
347
- * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
348
- * after the editor has been initialized.
349
- *
350
- * There are a few different ways to initialize the multi-root editor.
351
- *
352
- * # Using existing DOM elements:
353
- *
354
- * ```ts
355
- * MultiRootEditor.create( {
356
- * intro: document.querySelector( '#editor-intro' ),
357
- * content: document.querySelector( '#editor-content' ),
358
- * sidePanelLeft: document.querySelector( '#editor-side-left' ),
359
- * sidePanelRight: document.querySelector( '#editor-side-right' ),
360
- * outro: document.querySelector( '#editor-outro' )
361
- * } )
362
- * .then( editor => {
363
- * console.log( 'Editor was initialized', editor );
364
- *
365
- * // Append the toolbar inside a provided DOM element.
366
- * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
367
- * } )
368
- * .catch( err => {
369
- * console.error( err.stack );
370
- * } );
371
- * ```
372
- *
373
- * The elements' content will be used as the editor data and elements will become editable elements.
374
- *
375
- * # Creating a detached editor
376
- *
377
- * Alternatively, you can initialize the editor by passing the initial data directly as strings.
378
- * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
379
- *
380
- * ```ts
381
- * MultiRootEditor.create( {
382
- * intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
383
- * content: '<p>Lorem ipsum dolor sit amet.</p>',
384
- * sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
385
- * sidePanelRight: '<p>List of similar articles...</p>',
386
- * outro: '<p>Closing text.</p>'
387
- * } )
388
- * .then( editor => {
389
- * console.log( 'Editor was initialized', editor );
390
- *
391
- * // Append the toolbar inside a provided DOM element.
392
- * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
393
- *
394
- * // Append DOM editable elements created by the editor.
395
- * const editables = editor.ui.view.editables;
396
- * const container = document.querySelector( '#editable-container' );
397
- *
398
- * container.appendChild( editables.intro.element );
399
- * container.appendChild( editables.content.element );
400
- * container.appendChild( editables.outro.element );
401
- * } )
402
- * .catch( err => {
403
- * console.error( err.stack );
404
- * } );
405
- * ```
406
- *
407
- * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
408
- * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
409
- *
410
- * # Using an existing DOM element (and data provided in `config.initialData`)
411
- *
412
- * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
413
- *
414
- * ```ts
415
- * MultiRootEditor.create( {
416
- * intro: document.querySelector( '#editor-intro' ),
417
- * content: document.querySelector( '#editor-content' ),
418
- * sidePanelLeft: document.querySelector( '#editor-side-left' ),
419
- * sidePanelRight: document.querySelector( '#editor-side-right' ),
420
- * outro: document.querySelector( '#editor-outro' )
421
- * }, {
422
- * initialData: {
423
- * intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
424
- * content: '<p>Lorem ipsum dolor sit amet.</p>',
425
- * sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
426
- * sidePanelRight '<p>List of similar articles...</p>':
427
- * outro: '<p>Closing text.</p>'
428
- * }
429
- * } )
430
- * .then( editor => {
431
- * console.log( 'Editor was initialized', editor );
432
- *
433
- * // Append the toolbar inside a provided DOM element.
434
- * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
435
- * } )
436
- * .catch( err => {
437
- * console.error( err.stack );
438
- * } );
439
- * ```
440
- *
441
- * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
442
- * makes it difficult to set the content of the source element.
443
- *
444
- * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
445
- *
446
- * # Configuring the editor
447
- *
448
- * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
449
- * customizing plugins, toolbar and more.
450
- *
451
- * # Using the editor from source
452
- *
453
- * The code samples listed in the previous sections of this documentation assume that you are using an
454
- * {@glink installation/getting-started/predefined-builds editor build}
455
- * (for example – `@ckeditor/ckeditor5-build-multi-root`).
456
- *
457
- * If you want to use the multi-root editor from source (`@ckeditor/ckeditor5-editor-multi-root-editor/src/multirooteditor`),
458
- * you need to define the list of
459
- * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
460
- * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
461
- * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
462
- *
463
- * @param sourceElementsOrData The DOM elements that will be the source for the created editor
464
- * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
465
- *
466
- * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
467
- * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed if the
468
- * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy} option
469
- * is set to `true`.
470
- *
471
- * If the initial data is passed, a detached editor will be created. For each entry in the passed object, one editor root and one
472
- * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
473
- * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
474
- * method.
475
- * @param config The editor configuration.
476
- * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
477
- */
478
- static create(sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config?: EditorConfig): Promise<MultiRootEditor>;
479
- /**
480
- * The {@link module:core/context~Context} class.
481
- *
482
- * Exposed as static editor field for easier access in editor builds.
483
- */
484
- static Context: typeof Context;
485
- /**
486
- * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
487
- *
488
- * Exposed as static editor field for easier access in editor builds.
489
- */
490
- static EditorWatchdog: typeof EditorWatchdog;
491
- /**
492
- * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
493
- *
494
- * Exposed as static editor field for easier access in editor builds.
495
- */
496
- static ContextWatchdog: typeof ContextWatchdog;
497
- /**
498
- * @internal
499
- */
500
- private _verifyRootsWithInitialData;
501
- }
502
- /**
503
- * Fired whenever a root is {@link ~MultiRootEditor#addRoot added or re-added} to the editor model.
504
- *
505
- * Use this event to {@link ~MultiRootEditor#createEditable create a DOM editable} for the added root and append the DOM element
506
- * in a desired place in your application.
507
- *
508
- * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was added and detached
509
- * in the same batch.
510
- *
511
- * @eventName ~MultiRootEditor#addRoot
512
- * @param root The root that was added.
513
- */
514
- export type AddRootEvent = {
515
- name: 'addRoot';
516
- args: [root: RootElement];
517
- };
518
- /**
519
- * Fired whenever a root is {@link ~MultiRootEditor#detachRoot detached} from the editor model.
520
- *
521
- * Use this event to {@link ~MultiRootEditor#detachEditable destroy a DOM editable} for the detached root and remove the DOM element
522
- * from your application.
523
- *
524
- * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was detached and re-added
525
- * in the same batch.
526
- *
527
- * @eventName ~MultiRootEditor#detachRoot
528
- * @param root The root that was detached.
529
- */
530
- export type DetachRootEvent = {
531
- name: 'detachRoot';
532
- args: [root: RootElement];
533
- };
534
- /**
535
- * Event fired when {@link ~MultiRootEditor#loadRoot} method is called.
536
- *
537
- * The {@link ~MultiRootEditor#loadRoot default action of that method} is implemented as a
538
- * listener to this event, so it can be fully customized by the features.
539
- *
540
- * @eventName ~MultiRootEditor#loadRoot
541
- * @param args The arguments passed to the original method.
542
- */
543
- export type LoadRootEvent = DecoratedMethodEvent<MultiRootEditor, 'loadRoot'>;
544
- /**
545
- * Additional options available when adding a root.
546
- */
547
- export type AddRootOptions = {
548
- /**
549
- * Initial data for the root.
550
- */
551
- data?: string;
552
- /**
553
- * Initial attributes for the root.
554
- */
555
- attributes?: RootAttributes;
556
- /**
557
- * Element name for the root element in the model. It can be used to set different schema rules for different roots.
558
- */
559
- elementName?: string;
560
- /**
561
- * Whether creating the root can be undone (using the undo feature) or not.
562
- */
563
- isUndoable?: boolean;
564
- };
565
- /**
566
- * Additional options available when loading a root.
567
- */
568
- export type LoadRootOptions = Omit<AddRootOptions, 'elementName' | 'isUndoable'>;
569
- /**
570
- * Attributes set on a model root element.
571
- */
572
- export type RootAttributes = Record<string, unknown>;
573
- export {};
1
+ /**
2
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
3
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4
+ */
5
+ /**
6
+ * @module editor-multi-root/multirooteditor
7
+ */
8
+ import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core';
9
+ import { type DecoratedMethodEvent } from 'ckeditor5/src/utils';
10
+ import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog';
11
+ import MultiRootEditorUI from './multirooteditorui';
12
+ import { type RootElement } from 'ckeditor5/src/engine';
13
+ declare const MultiRootEditor_base: import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").DataApi>;
14
+ /**
15
+ * The {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor} implementation.
16
+ *
17
+ * The multi-root editor provides multiple inline editable elements and a toolbar. All editable areas are controlled by one editor
18
+ * instance, which means that they share common configuration, document ID, or undo stack.
19
+ *
20
+ * This type of editor is dedicated to integrations which require a customized UI with an open structure, featuring multiple editable areas,
21
+ * allowing developers to have a control over the exact location of these editable areas.
22
+ *
23
+ * In order to create a multi-root editor instance, use the static
24
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method.
25
+ *
26
+ * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
27
+ *
28
+ * # Multi-root editor and multi-root editor build
29
+ *
30
+ * The multi-root editor can be used directly from source (if you installed the
31
+ * [`@ckeditor/ckeditor5-editor-multi-root`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-multi-root) package)
32
+ * but it is also available in the
33
+ * {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor build}.
34
+ *
35
+ * {@glink installation/getting-started/predefined-builds Builds} are ready-to-use editors with plugins bundled in.
36
+ *
37
+ * When using the editor from source you need to take care of loading all plugins by yourself
38
+ * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
39
+ * Using the editor from source gives much better flexibility and allows for easier customization.
40
+ *
41
+ * Read more about initializing the editor from source or as a build in
42
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
43
+ */
44
+ export default class MultiRootEditor extends MultiRootEditor_base {
45
+ /**
46
+ * @inheritDoc
47
+ */
48
+ readonly ui: MultiRootEditorUI;
49
+ /**
50
+ * The elements on which the editor has been initialized.
51
+ */
52
+ readonly sourceElements: Record<string, HTMLElement>;
53
+ /**
54
+ * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
55
+ * config property and should be returned by {@link #getRootsAttributes}.
56
+ */
57
+ private readonly _registeredRootsAttributesKeys;
58
+ /**
59
+ * A set of lock IDs for enabling or disabling particular root.
60
+ */
61
+ private readonly _readOnlyRootLocks;
62
+ /**
63
+ * Creates an instance of the multi-root editor.
64
+ *
65
+ * **Note:** Do not use the constructor to create editor instances. Use the static
66
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
67
+ *
68
+ * @param sourceElementsOrData The DOM elements that will be the source for the created editor
69
+ * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
70
+ * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
71
+ * @param config The editor configuration.
72
+ */
73
+ protected constructor(sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config?: EditorConfig);
74
+ /**
75
+ * Destroys the editor instance, releasing all resources used by it.
76
+ *
77
+ * Updates the original editor element with the data if the
78
+ * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
79
+ * configuration option is set to `true`.
80
+ *
81
+ * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
82
+ * do that yourself in the destruction chain, if you need to:
83
+ *
84
+ * ```ts
85
+ * editor.destroy().then( () => {
86
+ * // Remove the toolbar from DOM.
87
+ * editor.ui.view.toolbar.element.remove();
88
+ *
89
+ * // Remove editable elements from DOM.
90
+ * for ( const editable of Object.values( editor.ui.view.editables ) ) {
91
+ * editable.element.remove();
92
+ * }
93
+ *
94
+ * console.log( 'Editor was destroyed' );
95
+ * } );
96
+ * ```
97
+ */
98
+ destroy(): Promise<unknown>;
99
+ /**
100
+ * Adds a new root to the editor.
101
+ *
102
+ * ```ts
103
+ * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
104
+ * ```
105
+ *
106
+ * After a root is added, you will be able to modify and retrieve its data.
107
+ *
108
+ * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
109
+ * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
110
+ *
111
+ * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
112
+ * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
113
+ *
114
+ * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
115
+ * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
116
+ * be changed only using the editor API.
117
+ *
118
+ * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
119
+ * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
120
+ *
121
+ * ```ts
122
+ * editor.on( 'addRoot', ( evt, root ) => {
123
+ * const editableElement = editor.createEditable( root );
124
+ *
125
+ * // You may want to create a more complex DOM structure here.
126
+ * //
127
+ * // Alternatively, you may want to create a DOM structure before
128
+ * // calling `editor.addRoot()` and only append `editableElement` at
129
+ * // a proper place.
130
+ *
131
+ * document.querySelector( '#editors' ).appendChild( editableElement );
132
+ * } );
133
+ *
134
+ * // ...
135
+ *
136
+ * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
137
+ * ```
138
+ *
139
+ * You can set root attributes on the new root while you add it:
140
+ *
141
+ * ```ts
142
+ * // Add a collapsed root at fourth position from top.
143
+ * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
144
+ * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
145
+ * ```
146
+ *
147
+ * See also {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes` configuration option}.
148
+ *
149
+ * Note that attributes keys of attributes added in `attributes` option are also included in {@link #getRootsAttributes} return value.
150
+ *
151
+ * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
152
+ *
153
+ * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
154
+ * combined into one, bigger UI element, and want them all to be undone together.
155
+ *
156
+ * ```ts
157
+ * let rowId = 0;
158
+ *
159
+ * editor.model.change( () => {
160
+ * editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
161
+ * editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
162
+ * editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
163
+ *
164
+ * rowId++;
165
+ * } );
166
+ * ```
167
+ *
168
+ * @param rootName Name of the root to add.
169
+ * @param options Additional options for the added root.
170
+ */
171
+ addRoot(rootName: string, { data, attributes, elementName, isUndoable }?: AddRootOptions): void;
172
+ /**
173
+ * Detaches a root from the editor.
174
+ *
175
+ * ```ts
176
+ * editor.detachRoot( 'myRoot' );
177
+ * ```
178
+ *
179
+ * A detached root is not entirely removed from the editor model, however it can be considered removed.
180
+ *
181
+ * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
182
+ * it is automatically removed as well. Finally, a detached root is not returned by
183
+ * {@link module:engine/model/document~Document#getRootNames} by default.
184
+ *
185
+ * It is possible to re-add a previously detached root calling {@link #addRoot}.
186
+ *
187
+ * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
188
+ * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
189
+ *
190
+ * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
191
+ * the root and it **does not** remove the DOM element from the DOM structure of your application.
192
+ *
193
+ * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
194
+ * and call {@link #detachEditable}. Then, remove the DOM element from your application.
195
+ *
196
+ * ```ts
197
+ * editor.on( 'detachRoot', ( evt, root ) => {
198
+ * const editableElement = editor.detachEditable( root );
199
+ *
200
+ * // You may want to do an additional DOM clean-up here.
201
+ *
202
+ * editableElement.remove();
203
+ * } );
204
+ *
205
+ * // ...
206
+ *
207
+ * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
208
+ * ```
209
+ *
210
+ * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
211
+ *
212
+ * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
213
+ * bigger UI element, and you want them all to be re-added together.
214
+ *
215
+ * ```ts
216
+ * editor.model.change( () => {
217
+ * editor.detachRoot( 'left-row-3', true );
218
+ * editor.detachRoot( 'center-row-3', true );
219
+ * editor.detachRoot( 'right-row-3', true );
220
+ * } );
221
+ * ```
222
+ *
223
+ * @param rootName Name of the root to detach.
224
+ * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
225
+ */
226
+ detachRoot(rootName: string, isUndoable?: boolean): void;
227
+ /**
228
+ * Creates and returns a new DOM editable element for the given root element.
229
+ *
230
+ * The new DOM editable is attached to the model root and can be used to modify the root content.
231
+ *
232
+ * @param root Root for which the editable element should be created.
233
+ * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
234
+ * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
235
+ * @returns The created DOM element. Append it in a desired place in your application.
236
+ */
237
+ createEditable(root: RootElement, placeholder?: string): HTMLElement;
238
+ /**
239
+ * Detaches the DOM editable element that was attached to the given root.
240
+ *
241
+ * @param root Root for which the editable element should be detached.
242
+ * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
243
+ */
244
+ detachEditable(root: RootElement): HTMLElement;
245
+ /**
246
+ * Loads a root that has previously been declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
247
+ * configuration option.
248
+ *
249
+ * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
250
+ * loading a root cannot be reverted using the undo feature.
251
+ *
252
+ * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among others, means that all
253
+ * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
254
+ * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
255
+ *
256
+ * Until the root becomes loaded, all above mechanisms are suppressed.
257
+ *
258
+ * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
259
+ *
260
+ * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
261
+ * with the remote editing session, before the root is added to the editor.
262
+ *
263
+ * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
264
+ *
265
+ * @param rootName Name of the root to load.
266
+ * @param options Additional options for the loaded root.
267
+ * @fires loadRoot
268
+ */
269
+ loadRoot(rootName: string, { data, attributes }?: LoadRootOptions): void;
270
+ /**
271
+ * Returns the document data for all attached roots.
272
+ *
273
+ * @param options Additional configuration for the retrieved data.
274
+ * Editor features may introduce more configuration options that can be set through this parameter.
275
+ * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
276
+ * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
277
+ * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
278
+ * @returns The full document data.
279
+ */
280
+ getFullData(options?: Record<string, unknown>): Record<string, string>;
281
+ /**
282
+ * Returns attributes for all attached roots.
283
+ *
284
+ * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
285
+ * configuration option will be returned.
286
+ *
287
+ * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
288
+ */
289
+ getRootsAttributes(): Record<string, RootAttributes>;
290
+ /**
291
+ * Returns attributes for the specified root.
292
+ *
293
+ * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
294
+ * configuration option will be returned.
295
+ *
296
+ * @param rootName
297
+ */
298
+ getRootAttributes(rootName: string): RootAttributes;
299
+ /**
300
+ * Switches given editor root to the read-only mode.
301
+ *
302
+ * In contrary to {@link module:core/editor/editor~Editor#enableReadOnlyMode `enableReadOnlyMode()`}, which switches the whole editor
303
+ * to the read-only mode, this method turns only a particular root to the read-only mode. This can be useful when you want to prevent
304
+ * editing only a part of the editor content.
305
+ *
306
+ * When you switch a root to the read-only mode, you need provide a unique identifier (`lockId`) that will identify this request. You
307
+ * will need to provide the same `lockId` when you will want to
308
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot re-enable} the root.
309
+ *
310
+ * ```ts
311
+ * const model = editor.model;
312
+ * const myRoot = model.document.getRoot( 'myRoot' );
313
+ *
314
+ * editor.disableRoot( 'myRoot', 'my-lock' );
315
+ * model.canEditAt( myRoot ); // `false`
316
+ *
317
+ * editor.disableRoot( 'myRoot', 'other-lock' );
318
+ * editor.disableRoot( 'myRoot', 'other-lock' ); // Multiple locks with the same ID have no effect.
319
+ * model.canEditAt( myRoot ); // `false`
320
+ *
321
+ * editor.enableRoot( 'myRoot', 'my-lock' );
322
+ * model.canEditAt( myRoot ); // `false`
323
+ *
324
+ * editor.enableRoot( 'myRoot', 'other-lock' );
325
+ * model.canEditAt( myRoot ); // `true`
326
+ * ```
327
+ *
328
+ * See also {@link module:core/editor/editor~Editor#enableReadOnlyMode `Editor#enableReadOnlyMode()`} and
329
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#enableRoot `MultiRootEditor#enableRoot()`}.
330
+ *
331
+ * @param rootName Name of the root to switch to read-only mode.
332
+ * @param lockId A unique ID for setting the editor to the read-only state.
333
+ */
334
+ disableRoot(rootName: string, lockId: string | symbol): void;
335
+ /**
336
+ * Removes given read-only lock from the given root.
337
+ *
338
+ * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor#disableRoot `disableRoot()`}.
339
+ *
340
+ * @param rootName Name of the root to switch back from the read-only mode.
341
+ * @param lockId A unique ID for setting the editor to the read-only state.
342
+ */
343
+ enableRoot(rootName: string, lockId: string | symbol): void;
344
+ /**
345
+ * Creates a new multi-root editor instance.
346
+ *
347
+ * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
348
+ * after the editor has been initialized.
349
+ *
350
+ * There are a few different ways to initialize the multi-root editor.
351
+ *
352
+ * # Using existing DOM elements:
353
+ *
354
+ * ```ts
355
+ * MultiRootEditor.create( {
356
+ * intro: document.querySelector( '#editor-intro' ),
357
+ * content: document.querySelector( '#editor-content' ),
358
+ * sidePanelLeft: document.querySelector( '#editor-side-left' ),
359
+ * sidePanelRight: document.querySelector( '#editor-side-right' ),
360
+ * outro: document.querySelector( '#editor-outro' )
361
+ * } )
362
+ * .then( editor => {
363
+ * console.log( 'Editor was initialized', editor );
364
+ *
365
+ * // Append the toolbar inside a provided DOM element.
366
+ * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
367
+ * } )
368
+ * .catch( err => {
369
+ * console.error( err.stack );
370
+ * } );
371
+ * ```
372
+ *
373
+ * The elements' content will be used as the editor data and elements will become editable elements.
374
+ *
375
+ * # Creating a detached editor
376
+ *
377
+ * Alternatively, you can initialize the editor by passing the initial data directly as strings.
378
+ * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
379
+ *
380
+ * ```ts
381
+ * MultiRootEditor.create( {
382
+ * intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
383
+ * content: '<p>Lorem ipsum dolor sit amet.</p>',
384
+ * sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
385
+ * sidePanelRight: '<p>List of similar articles...</p>',
386
+ * outro: '<p>Closing text.</p>'
387
+ * } )
388
+ * .then( editor => {
389
+ * console.log( 'Editor was initialized', editor );
390
+ *
391
+ * // Append the toolbar inside a provided DOM element.
392
+ * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
393
+ *
394
+ * // Append DOM editable elements created by the editor.
395
+ * const editables = editor.ui.view.editables;
396
+ * const container = document.querySelector( '#editable-container' );
397
+ *
398
+ * container.appendChild( editables.intro.element );
399
+ * container.appendChild( editables.content.element );
400
+ * container.appendChild( editables.outro.element );
401
+ * } )
402
+ * .catch( err => {
403
+ * console.error( err.stack );
404
+ * } );
405
+ * ```
406
+ *
407
+ * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
408
+ * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
409
+ *
410
+ * # Using an existing DOM element (and data provided in `config.initialData`)
411
+ *
412
+ * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
413
+ *
414
+ * ```ts
415
+ * MultiRootEditor.create( {
416
+ * intro: document.querySelector( '#editor-intro' ),
417
+ * content: document.querySelector( '#editor-content' ),
418
+ * sidePanelLeft: document.querySelector( '#editor-side-left' ),
419
+ * sidePanelRight: document.querySelector( '#editor-side-right' ),
420
+ * outro: document.querySelector( '#editor-outro' )
421
+ * }, {
422
+ * initialData: {
423
+ * intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
424
+ * content: '<p>Lorem ipsum dolor sit amet.</p>',
425
+ * sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
426
+ * sidePanelRight '<p>List of similar articles...</p>':
427
+ * outro: '<p>Closing text.</p>'
428
+ * }
429
+ * } )
430
+ * .then( editor => {
431
+ * console.log( 'Editor was initialized', editor );
432
+ *
433
+ * // Append the toolbar inside a provided DOM element.
434
+ * document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
435
+ * } )
436
+ * .catch( err => {
437
+ * console.error( err.stack );
438
+ * } );
439
+ * ```
440
+ *
441
+ * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
442
+ * makes it difficult to set the content of the source element.
443
+ *
444
+ * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
445
+ *
446
+ * # Configuring the editor
447
+ *
448
+ * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
449
+ * customizing plugins, toolbar and more.
450
+ *
451
+ * # Using the editor from source
452
+ *
453
+ * The code samples listed in the previous sections of this documentation assume that you are using an
454
+ * {@glink installation/getting-started/predefined-builds editor build}
455
+ * (for example – `@ckeditor/ckeditor5-build-multi-root`).
456
+ *
457
+ * If you want to use the multi-root editor from source (`@ckeditor/ckeditor5-editor-multi-root-editor/src/multirooteditor`),
458
+ * you need to define the list of
459
+ * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
460
+ * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
461
+ * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
462
+ *
463
+ * @param sourceElementsOrData The DOM elements that will be the source for the created editor
464
+ * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
465
+ *
466
+ * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
467
+ * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed if the
468
+ * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy} option
469
+ * is set to `true`.
470
+ *
471
+ * If the initial data is passed, a detached editor will be created. For each entry in the passed object, one editor root and one
472
+ * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
473
+ * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
474
+ * method.
475
+ * @param config The editor configuration.
476
+ * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
477
+ */
478
+ static create(sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config?: EditorConfig): Promise<MultiRootEditor>;
479
+ /**
480
+ * The {@link module:core/context~Context} class.
481
+ *
482
+ * Exposed as static editor field for easier access in editor builds.
483
+ */
484
+ static Context: typeof Context;
485
+ /**
486
+ * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
487
+ *
488
+ * Exposed as static editor field for easier access in editor builds.
489
+ */
490
+ static EditorWatchdog: typeof EditorWatchdog;
491
+ /**
492
+ * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
493
+ *
494
+ * Exposed as static editor field for easier access in editor builds.
495
+ */
496
+ static ContextWatchdog: typeof ContextWatchdog;
497
+ /**
498
+ * @internal
499
+ */
500
+ private _verifyRootsWithInitialData;
501
+ }
502
+ /**
503
+ * Fired whenever a root is {@link ~MultiRootEditor#addRoot added or re-added} to the editor model.
504
+ *
505
+ * Use this event to {@link ~MultiRootEditor#createEditable create a DOM editable} for the added root and append the DOM element
506
+ * in a desired place in your application.
507
+ *
508
+ * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was added and detached
509
+ * in the same batch.
510
+ *
511
+ * @eventName ~MultiRootEditor#addRoot
512
+ * @param root The root that was added.
513
+ */
514
+ export type AddRootEvent = {
515
+ name: 'addRoot';
516
+ args: [root: RootElement];
517
+ };
518
+ /**
519
+ * Fired whenever a root is {@link ~MultiRootEditor#detachRoot detached} from the editor model.
520
+ *
521
+ * Use this event to {@link ~MultiRootEditor#detachEditable destroy a DOM editable} for the detached root and remove the DOM element
522
+ * from your application.
523
+ *
524
+ * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was detached and re-added
525
+ * in the same batch.
526
+ *
527
+ * @eventName ~MultiRootEditor#detachRoot
528
+ * @param root The root that was detached.
529
+ */
530
+ export type DetachRootEvent = {
531
+ name: 'detachRoot';
532
+ args: [root: RootElement];
533
+ };
534
+ /**
535
+ * Event fired when {@link ~MultiRootEditor#loadRoot} method is called.
536
+ *
537
+ * The {@link ~MultiRootEditor#loadRoot default action of that method} is implemented as a
538
+ * listener to this event, so it can be fully customized by the features.
539
+ *
540
+ * @eventName ~MultiRootEditor#loadRoot
541
+ * @param args The arguments passed to the original method.
542
+ */
543
+ export type LoadRootEvent = DecoratedMethodEvent<MultiRootEditor, 'loadRoot'>;
544
+ /**
545
+ * Additional options available when adding a root.
546
+ */
547
+ export type AddRootOptions = {
548
+ /**
549
+ * Initial data for the root.
550
+ */
551
+ data?: string;
552
+ /**
553
+ * Initial attributes for the root.
554
+ */
555
+ attributes?: RootAttributes;
556
+ /**
557
+ * Element name for the root element in the model. It can be used to set different schema rules for different roots.
558
+ */
559
+ elementName?: string;
560
+ /**
561
+ * Whether creating the root can be undone (using the undo feature) or not.
562
+ */
563
+ isUndoable?: boolean;
564
+ };
565
+ /**
566
+ * Additional options available when loading a root.
567
+ */
568
+ export type LoadRootOptions = Omit<AddRootOptions, 'elementName' | 'isUndoable'>;
569
+ /**
570
+ * Attributes set on a model root element.
571
+ */
572
+ export type RootAttributes = Record<string, unknown>;
573
+ export {};