@ckeditor/ckeditor5-editor-decoupled 47.6.1 → 48.0.0-alpha.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.
Files changed (15) hide show
  1. package/LICENSE.md +1 -1
  2. package/{src → dist}/decouplededitor.d.ts +119 -6
  3. package/{src → dist}/decouplededitorui.d.ts +2 -2
  4. package/{src → dist}/decouplededitoruiview.d.ts +3 -3
  5. package/dist/index.css +3 -0
  6. package/dist/index.css.map +1 -0
  7. package/dist/index.js +25 -139
  8. package/dist/index.js.map +1 -1
  9. package/package.json +23 -44
  10. package/build/editor-decoupled.js +0 -4
  11. package/src/decouplededitor.js +0 -229
  12. package/src/decouplededitorui.js +0 -104
  13. package/src/decouplededitoruiview.js +0 -85
  14. package/src/index.js +0 -10
  15. /package/{src → dist}/index.d.ts +0 -0
package/LICENSE.md CHANGED
@@ -18,7 +18,7 @@ Where not otherwise indicated, all CKEditor 5 content is authored by CKSour
18
18
 
19
19
  The following libraries are included in CKEditor 5 under the [MIT license](https://opensource.org/licenses/MIT):
20
20
 
21
- * es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
21
+ * es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
22
22
 
23
23
  Trademarks
24
24
  ----------
package/{src → dist}/decouplededitor.d.ts RENAMED
@@ -5,9 +5,9 @@
5
5
  /**
6
6
  * @module editor-decoupled/decouplededitor
7
7
  */
8
- import { Editor, type EditorConfig } from 'ckeditor5/src/core.js';
8
+ import { Editor, type EditorConfig } from '@ckeditor/ckeditor5-core';
9
9
  import { DecoupledEditorUI } from './decouplededitorui.js';
10
- declare const DecoupledEditor_base: import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").ElementApi>;
10
+ declare const DecoupledEditor_base: import("@ckeditor/ckeditor5-utils").Mixed<typeof Editor, import("@ckeditor/ckeditor5-core").ElementApi>;
11
11
  /**
12
12
  * The decoupled editor implementation. It provides an inline editable and a toolbar. However, unlike other editors,
13
13
  * it does not render these components anywhere in the DOM unless configured.
@@ -39,12 +39,24 @@ export declare class DecoupledEditor extends /* #__PURE__ */ DecoupledEditor_bas
39
39
  * **Note:** Do not use the constructor to create editor instances. Use the static
40
40
  * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead.
41
41
  *
42
+ * @param config The editor configuration.
43
+ */
44
+ protected constructor(config: EditorConfig);
45
+ /**
46
+ * Creates an instance of the decoupled editor.
47
+ *
48
+ * **Note:** Do not use the constructor to create editor instances. Use the static
49
+ * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead.
50
+ *
51
+ * **Note**: This constructor signature is deprecated and will be removed in the future release.
52
+ *
53
+ * @deprecated
42
54
  * @param sourceElementOrData The DOM element that will be the source for the created editor
43
55
  * (on which the editor will be initialized) or initial data for the editor. For more information see
44
56
  * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
45
57
  * @param config The editor configuration.
46
58
  */
47
- protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
59
+ protected constructor(sourceElementOrData: HTMLElement | string, config: EditorConfig);
48
60
  /**
49
61
  * Destroys the editor instance, releasing all resources used by it.
50
62
  *
@@ -83,6 +95,104 @@ export declare class DecoupledEditor extends /* #__PURE__ */ DecoupledEditor_bas
83
95
  *
84
96
  * ```ts
85
97
  * DecoupledEditor
98
+ * .create( {
99
+ * root: {
100
+ * element: document.querySelector( '#editor' )
101
+ * }
102
+ * } )
103
+ * .then( editor => {
104
+ * console.log( 'Editor was initialized', editor );
105
+ *
106
+ * // Append the toolbar to the <body> element.
107
+ * document.body.appendChild( editor.ui.view.toolbar.element );
108
+ * } )
109
+ * .catch( err => {
110
+ * console.error( err.stack );
111
+ * } );
112
+ * ```
113
+ *
114
+ * The element's content will be used as the editor data and the element will become the editable element.
115
+ *
116
+ * # Creating a detached editor
117
+ *
118
+ * Alternatively, you can initialize the editor by passing the initial data directly as a string.
119
+ * In this case, you will have to manually append both the toolbar element and the editable element to your web page.
120
+ *
121
+ * ```ts
122
+ * DecoupledEditor
123
+ * .create( {
124
+ * root: {
125
+ * initialData: '<p>Hello world!</p>'
126
+ * }
127
+ * } )
128
+ * .then( editor => {
129
+ * console.log( 'Editor was initialized', editor );
130
+ *
131
+ * // Append the toolbar to the <body> element.
132
+ * document.body.appendChild( editor.ui.view.toolbar.element );
133
+ *
134
+ * // Initial data was provided so the editor UI element needs to be added manually to the DOM.
135
+ * document.body.appendChild( editor.ui.getEditableElement() );
136
+ * } )
137
+ * .catch( err => {
138
+ * console.error( err.stack );
139
+ * } );
140
+ * ```
141
+ *
142
+ * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
143
+ * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
144
+ *
145
+ * # Using an existing DOM element (and data provided in `config.root.initialData`)
146
+ *
147
+ * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
148
+ *
149
+ * ```ts
150
+ * DecoupledEditor
151
+ * .create( {
152
+ * root: {
153
+ * element: document.querySelector( '#editor' ),
154
+ * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
155
+ * }
156
+ * } )
157
+ * .then( editor => {
158
+ * console.log( 'Editor was initialized', editor );
159
+ *
160
+ * // Append the toolbar to the <body> element.
161
+ * document.body.appendChild( editor.ui.view.toolbar.element );
162
+ * } )
163
+ * .catch( err => {
164
+ * console.error( err.stack );
165
+ * } );
166
+ * ```
167
+ *
168
+ * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
169
+ * makes it difficult to set the content of the source element.
170
+ *
171
+ * # Configuring the editor
172
+ *
173
+ * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
174
+ * customizing plugins, toolbar and more.
175
+ *
176
+ * @param config The editor configuration.
177
+ * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
178
+ */
179
+ static create(config: EditorConfig): Promise<DecoupledEditor>;
180
+ /**
181
+ * Creates a new decoupled editor instance.
182
+ *
183
+ * **Note**: This method signature is deprecated and will be removed in the future release.
184
+ *
185
+ * **Note:** remember that `DecoupledEditor` does not append the toolbar element to your web page, so you have to do it manually
186
+ * after the editor has been initialized.
187
+ *
188
+ * There are two ways how the editor can be initialized.
189
+ *
190
+ * # Using an existing DOM element (and loading data from it)
191
+ *
192
+ * You can initialize the editor using an existing DOM element:
193
+ *
194
+ * ```ts
195
+ * DecoupledEditor
86
196
  * .create( document.querySelector( '#editor' ) )
87
197
  * .then( editor => {
88
198
  * console.log( 'Editor was initialized', editor );
@@ -122,14 +232,16 @@ export declare class DecoupledEditor extends /* #__PURE__ */ DecoupledEditor_bas
122
232
  * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
123
233
  * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
124
234
  *
125
- * # Using an existing DOM element (and data provided in `config.initialData`)
235
+ * # Using an existing DOM element (and data provided in `config.root.initialData`)
126
236
  *
127
237
  * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
128
238
  *
129
239
  * ```ts
130
240
  * DecoupledEditor
131
241
  * .create( document.querySelector( '#editor' ), {
132
- * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
242
+ * root: {
243
+ * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
244
+ * }
133
245
  * } )
134
246
  * .then( editor => {
135
247
  * console.log( 'Editor was initialized', editor );
@@ -152,6 +264,7 @@ export declare class DecoupledEditor extends /* #__PURE__ */ DecoupledEditor_bas
152
264
  * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
153
265
  * customizing plugins, toolbar and more.
154
266
  *
267
+ * @deprecated
155
268
  * @param sourceElementOrData The DOM element that will be the source for the created editor
156
269
  * or the editor's initial data.
157
270
  *
@@ -167,6 +280,6 @@ export declare class DecoupledEditor extends /* #__PURE__ */ DecoupledEditor_bas
167
280
  * @param config The editor configuration.
168
281
  * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
169
282
  */
170
- static create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<DecoupledEditor>;
283
+ static create(sourceElementOrData: HTMLElement | string, config: EditorConfig): Promise<DecoupledEditor>;
171
284
  }
172
285
  export {};
package/{src → dist}/decouplededitorui.d.ts RENAMED
@@ -5,8 +5,8 @@
5
5
  /**
6
6
  * @module editor-decoupled/decouplededitorui
7
7
  */
8
- import { type Editor } from 'ckeditor5/src/core.js';
9
- import { EditorUI } from 'ckeditor5/src/ui.js';
8
+ import { type Editor } from '@ckeditor/ckeditor5-core';
9
+ import { EditorUI } from '@ckeditor/ckeditor5-ui';
10
10
  import { type DecoupledEditorUIView } from './decouplededitoruiview.js';
11
11
  /**
12
12
  * The decoupled editor UI class.
package/{src → dist}/decouplededitoruiview.d.ts RENAMED
@@ -5,9 +5,9 @@
5
5
  /**
6
6
  * @module editor-decoupled/decouplededitoruiview
7
7
  */
8
- import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
9
- import type { Locale } from 'ckeditor5/src/utils.js';
10
- import type { EditingView } from 'ckeditor5/src/engine.js';
8
+ import { EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from '@ckeditor/ckeditor5-ui';
9
+ import type { Locale } from '@ckeditor/ckeditor5-utils';
10
+ import type { EditingView } from '@ckeditor/ckeditor5-engine';
11
11
  /**
12
12
  * The decoupled editor UI view. It is a virtual view providing an inline
13
13
  * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
package/dist/index.css CHANGED
@@ -2,3 +2,6 @@
2
2
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
4
  */
5
+
6
+
7
+ /*# sourceMappingURL=index.css.map */
package/dist/index.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["index.css"],"names":[],"mappings":";;;;;;AAEA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["\n\n/*# sourceMappingURL=index.css.map */"]}
package/dist/index.js CHANGED
@@ -2,8 +2,8 @@
2
2
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
3
3
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
4
4
  */
5
- import { ElementApiMixin, Editor, secureSourceElement } from '@ckeditor/ckeditor5-core/dist/index.js';
6
- import { CKEditorError, getDataFromElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
5
+ import { ElementApiMixin, Editor, normalizeSingleRootEditorConstructorParams, normalizeRootsConfig, secureSourceElement } from '@ckeditor/ckeditor5-core/dist/index.js';
6
+ import { logWarning, CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
7
7
  import { EditorUI, EditorUIView, ToolbarView, MenuBarView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
8
8
  import { enableViewPlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
9
9
  import { isElement as isElement$1 } from 'es-toolkit/compat';
@@ -84,12 +84,9 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
84
84
  const editor = this.editor;
85
85
  const editingView = editor.editing.view;
86
86
  const editingRoot = editingView.document.getRoot();
87
- const placeholder = editor.config.get('placeholder');
87
+ const placeholder = editor.config.get('roots')[editingRoot.rootName].placeholder;
88
88
  if (placeholder) {
89
- const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
90
- if (placeholderText) {
91
- editingRoot.placeholder = placeholderText;
92
- }
89
+ editingRoot.placeholder = placeholder;
93
90
  }
94
91
  enableViewPlaceholder({
95
92
  view: editingView,
@@ -200,37 +197,31 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
200
197
  /**
201
198
  * @inheritDoc
202
199
  */ ui;
203
- /**
204
- * Creates an instance of the decoupled editor.
205
- *
206
- * **Note:** Do not use the constructor to create editor instances. Use the static
207
- * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method instead.
208
- *
209
- * @param sourceElementOrData The DOM element that will be the source for the created editor
210
- * (on which the editor will be initialized) or initial data for the editor. For more information see
211
- * {@link module:editor-balloon/ballooneditor~BalloonEditor.create `BalloonEditor.create()`}.
212
- * @param config The editor configuration.
213
- */ constructor(sourceElementOrData, config = {}){
214
- // If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
215
- if (!isElement(sourceElementOrData) && config.initialData !== undefined) {
216
- // Documented in core/editor/editorconfig.jsdoc.
217
- // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
218
- throw new CKEditorError('editor-create-initial-data', null);
200
+ constructor(sourceElementOrDataOrConfig, config = {}){
201
+ const { sourceElementOrData, editorConfig } = normalizeSingleRootEditorConstructorParams(sourceElementOrDataOrConfig, config);
202
+ super(editorConfig);
203
+ normalizeRootsConfig(sourceElementOrData, this.config);
204
+ if (isElement(this.config.get('attachTo'))) {
205
+ // Documented in core/editor/editorconfig.ts.
206
+ logWarning('editor-create-attachto-ignored');
219
207
  }
220
- super(config);
221
- if (this.config.get('initialData') === undefined) {
222
- this.config.set('initialData', getInitialData(sourceElementOrData));
223
- }
224
- if (isElement(sourceElementOrData)) {
225
- this.sourceElement = sourceElementOrData;
226
- secureSourceElement(this, sourceElementOrData);
208
+ // From this point use only normalized `roots.main.element`.
209
+ const sourceElement = this.config.get('roots').main.element;
210
+ if (isElement(sourceElement)) {
211
+ if (sourceElement.tagName === 'TEXTAREA') {
212
+ // Documented in core/editor/editor.js
213
+ // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
214
+ throw new CKEditorError('editor-wrong-element', null);
215
+ }
216
+ this.sourceElement = sourceElement;
217
+ secureSourceElement(this, sourceElement);
227
218
  }
228
219
  this.model.document.createRoot();
229
220
  const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
230
221
  const view = new DecoupledEditorUIView(this.locale, this.editing.view, {
231
222
  editableElement: this.sourceElement,
232
223
  shouldToolbarGroupWhenFull,
233
- label: this.config.get('label')
224
+ label: this.config.get('roots').main.label
234
225
  });
235
226
  this.ui = new DecoupledEditorUI(this, view);
236
227
  }
@@ -267,118 +258,13 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
267
258
  }
268
259
  });
269
260
  }
270
- /**
271
- * Creates a new decoupled editor instance.
272
- *
273
- * **Note:** remember that `DecoupledEditor` does not append the toolbar element to your web page, so you have to do it manually
274
- * after the editor has been initialized.
275
- *
276
- * There are two ways how the editor can be initialized.
277
- *
278
- * # Using an existing DOM element (and loading data from it)
279
- *
280
- * You can initialize the editor using an existing DOM element:
281
- *
282
- * ```ts
283
- * DecoupledEditor
284
- * .create( document.querySelector( '#editor' ) )
285
- * .then( editor => {
286
- * console.log( 'Editor was initialized', editor );
287
- *
288
- * // Append the toolbar to the <body> element.
289
- * document.body.appendChild( editor.ui.view.toolbar.element );
290
- * } )
291
- * .catch( err => {
292
- * console.error( err.stack );
293
- * } );
294
- * ```
295
- *
296
- * The element's content will be used as the editor data and the element will become the editable element.
297
- *
298
- * # Creating a detached editor
299
- *
300
- * Alternatively, you can initialize the editor by passing the initial data directly as a string.
301
- * In this case, you will have to manually append both the toolbar element and the editable element to your web page.
302
- *
303
- * ```ts
304
- * DecoupledEditor
305
- * .create( '<p>Hello world!</p>' )
306
- * .then( editor => {
307
- * console.log( 'Editor was initialized', editor );
308
- *
309
- * // Append the toolbar to the <body> element.
310
- * document.body.appendChild( editor.ui.view.toolbar.element );
311
- *
312
- * // Initial data was provided so the editor UI element needs to be added manually to the DOM.
313
- * document.body.appendChild( editor.ui.getEditableElement() );
314
- * } )
315
- * .catch( err => {
316
- * console.error( err.stack );
317
- * } );
318
- * ```
319
- *
320
- * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
321
- * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
322
- *
323
- * # Using an existing DOM element (and data provided in `config.initialData`)
324
- *
325
- * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
326
- *
327
- * ```ts
328
- * DecoupledEditor
329
- * .create( document.querySelector( '#editor' ), {
330
- * initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
331
- * } )
332
- * .then( editor => {
333
- * console.log( 'Editor was initialized', editor );
334
- *
335
- * // Append the toolbar to the <body> element.
336
- * document.body.appendChild( editor.ui.view.toolbar.element );
337
- * } )
338
- * .catch( err => {
339
- * console.error( err.stack );
340
- * } );
341
- * ```
342
- *
343
- * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
344
- * makes it difficult to set the content of the source element.
345
- *
346
- * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
347
- *
348
- * # Configuring the editor
349
- *
350
- * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
351
- * customizing plugins, toolbar and more.
352
- *
353
- * @param sourceElementOrData The DOM element that will be the source for the created editor
354
- * or the editor's initial data.
355
- *
356
- * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization.
357
- * The editor data will be set back to the original element once the editor is destroyed only if the
358
- * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
359
- * option is set to `true`.
360
- *
361
- * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
362
- * It is available via
363
- * {@link module:editor-decoupled/decouplededitorui~DecoupledEditorUI#getEditableElement `editor.ui.getEditableElement()`}.
364
- *
365
- * @param config The editor configuration.
366
- * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
367
- */ static create(sourceElementOrData, config = {}) {
261
+ static create(sourceElementOrDataOrConfig, config = {}) {
368
262
  return new Promise((resolve)=>{
369
- if (isElement(sourceElementOrData) && sourceElementOrData.tagName === 'TEXTAREA') {
370
- // Documented in core/editor/editor.js
371
- // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
372
- throw new CKEditorError('editor-wrong-element', null);
373
- }
374
- const editor = new this(sourceElementOrData, config);
375
- resolve(editor.initPlugins().then(()=>editor.ui.init()).then(()=>editor.data.init(editor.config.get('initialData'))).then(()=>editor.fire('ready')).then(()=>editor));
263
+ const editor = new this(sourceElementOrDataOrConfig, config);
264
+ resolve(editor.initPlugins().then(()=>editor.ui.init()).then(()=>editor.data.init(editor.config.get('roots').main.initialData)).then(()=>editor.fire('ready')).then(()=>editor));
376
265
  });
377
266
  }
378
267
  }
379
- function getInitialData(sourceElementOrData) {
380
- return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
381
- }
382
268
  function isElement(value) {
383
269
  return isElement$1(value);
384
270
  }