@ckeditor/ckeditor5-editor-classic 47.6.1 → 48.0.0-alpha.1

package/LICENSE.md

@@ -18,7 +18,7 @@ Where not otherwise indicated, all CKEditor 5 content is authored by CKSour
 
 The following libraries are included in CKEditor 5 under the [MIT license](https://opensource.org/licenses/MIT):
 
-* es-toolkit - Copyright (c) 2024 Viva Republica, Inc.
+* es-toolkit - Copyright (c) 2024 Viva Republica, Inc and Copyright OpenJS Foundation and other contributors.
 
 Trademarks
 ----------

package/{src → dist}/classiceditor.d.ts

@@ -6,8 +6,8 @@
  * @module editor-classic/classiceditor
  */
 import { ClassicEditorUI } from './classiceditorui.js';
-import { Editor, type EditorConfig } from 'ckeditor5/src/core.js';
-declare const ClassicEditor_base: import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").ElementApi>;
+import { Editor, type EditorConfig } from '@ckeditor/ckeditor5-core';
+declare const ClassicEditor_base: import("@ckeditor/ckeditor5-utils").Mixed<typeof Editor, import("@ckeditor/ckeditor5-core").ElementApi>;
 /**
  * The classic editor implementation. It uses an inline editable and a sticky toolbar, all enclosed in a boxed UI.
  * See the {@glink examples/builds/classic-editor demo}.
@@ -30,12 +30,24 @@ export declare class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
      * **Note:** do not use the constructor to create editor instances. Use the static
      * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method instead.
      *
+     * @param config The editor configuration.
+     */
+    protected constructor(config: EditorConfig);
+    /**
+     * Creates an instance of the classic editor.
+     *
+     * **Note:** do not use the constructor to create editor instances. Use the static
+     * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method instead.
+     *
+     * **Note**: This constructor signature is deprecated and will be removed in the future release.
+     *
+     * @deprecated
      * @param sourceElementOrData The DOM element that will be the source for the created editor
      * or the editor's initial data. For more information see
      * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
      * @param config The editor configuration.
      */
-    protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
+    protected constructor(sourceElementOrData: HTMLElement | string, config: EditorConfig);
     /**
      * Destroys the editor instance, releasing all resources used by it.
      *
@@ -55,6 +67,90 @@ export declare class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
      *
      * ```ts
      * ClassicEditor
+     * 	.create( {
+     * 		attachTo: document.querySelector( '#editor' )
+     * 	} )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * The element's content will be used as the editor data and the element will be replaced by the editor UI.
+     *
+     * # Creating a detached editor
+     *
+     * Alternatively, you can initialize the editor by passing the initial data directly as a string.
+     * In this case, the editor will render an element that must be inserted into the DOM:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		root: {
+     * 			initialData: '<p>Hello world!</p>'
+     * 		}
+     * 	} )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     *
+     * 		// Initial data was provided so the editor UI element needs to be added manually to the DOM.
+     * 		document.body.appendChild( editor.ui.element );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
+     * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
+     *
+     * # Replacing a DOM element (and data provided in `config.root.initialData`)
+     *
+     * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
+     *
+     * ```ts
+     * ClassicEditor
+     * 	.create( {
+     * 		attachTo: document.querySelector( '#editor' ),
+     * 		root: {
+     * 			initialData: '<p>Hello world!</p>'
+     * 		}
+     * 	} )
+     * 	.then( editor => {
+     * 		console.log( 'Editor was initialized', editor );
+     * 	} )
+     * 	.catch( err => {
+     * 		console.error( err.stack );
+     * 	} );
+     * ```
+     *
+     * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
+     * makes it difficult to set the content of the source element.
+     *
+     * # Configuring the editor
+     *
+     * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
+     * customizing plugins, toolbar and more.
+     *
+     * @param config The editor configuration.
+     * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
+     */
+    static create(config: EditorConfig): Promise<ClassicEditor>;
+    /**
+     * Creates a new classic editor instance.
+     *
+     * **Note**: This method signature is deprecated and will be removed in the future release.
+     *
+     * There are three ways how the editor can be initialized.
+     *
+     * # Replacing a DOM element (and loading data from it)
+     *
+     * You can initialize the editor using an existing DOM element:
+     *
+     * ```ts
+     * ClassicEditor
      * 	.create( document.querySelector( '#editor' ) )
      * 	.then( editor => {
      * 		console.log( 'Editor was initialized', editor );
@@ -88,14 +184,16 @@ export declare class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
      * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
      * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
      *
-     * # Replacing a DOM element (and data provided in `config.initialData`)
+     * # Replacing a DOM element (and data provided in `config.root.initialData`)
      *
      * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
      *
      * ```ts
      * ClassicEditor
      * 	.create( document.querySelector( '#editor' ), {
-     * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
+     * 		root: {
+     * 			initialData: '<p>Hello world!</p>'
+     * 		}
      * 	} )
      * 	.then( editor => {
      * 		console.log( 'Editor was initialized', editor );
@@ -115,6 +213,7 @@ export declare class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
      * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
      * customizing plugins, toolbar and more.
      *
+     * @deprecated
      * @param sourceElementOrData The DOM element that will be the source for the created editor
      * or the editor's initial data.
      *
@@ -133,6 +232,6 @@ export declare class ClassicEditor extends /* #__PURE__ */ ClassicEditor_base {
      * @param config The editor configuration.
      * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
      */
-    static create(sourceElementOrData: HTMLElement | string, config?: EditorConfig): Promise<ClassicEditor>;
+    static create(sourceElementOrData: HTMLElement | string, config: EditorConfig): Promise<ClassicEditor>;
 }
 export {};

package/{src → dist}/classiceditorui.d.ts

@@ -5,8 +5,8 @@
 /**
  * @module editor-classic/classiceditorui
  */
-import type { Editor } from 'ckeditor5/src/core.js';
-import { EditorUI } from 'ckeditor5/src/ui.js';
+import type { Editor } from '@ckeditor/ckeditor5-core';
+import { EditorUI } from '@ckeditor/ckeditor5-ui';
 import { type ClassicEditorUIView } from './classiceditoruiview.js';
 /**
  * The classic editor UI class.

package/{src → dist}/classiceditoruiview.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module editor-classic/classiceditoruiview
  */
-import { BoxedEditorUIView, InlineEditableUIView, StickyPanelView, ToolbarView } from 'ckeditor5/src/ui.js';
-import type { Locale } from 'ckeditor5/src/utils.js';
-import type { EditingView } from 'ckeditor5/src/engine.js';
+import { BoxedEditorUIView, InlineEditableUIView, StickyPanelView, ToolbarView } from '@ckeditor/ckeditor5-ui';
+import type { Locale } from '@ckeditor/ckeditor5-utils';
+import type { EditingView } from '@ckeditor/ckeditor5-engine';
 import '../theme/classiceditor.css';
 /**
  * Classic editor UI view. Uses an inline editable and a sticky toolbar, all

package/dist/index-editor.css

@@ -2,10 +2,21 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
+.ck.ck-editor__main > .ck-editor__editable{
+  background:var(--ck-color-base-background);
+  border-radius:var(--ck-rounded-corners-radius);
+  border-top-left-radius:0;
+  border-top-right-radius:0;
+}
+
+.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused){
+  border-color:var(--ck-color-base-border);
+}
+
 .ck.ck-editor{
-	position:relative;
+  position:relative;
 }
 
 .ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar{
-		z-index:var(--ck-z-panel);
-	}
+  z-index:var(--ck-z-panel);
+}

package/dist/index.css

@@ -2,21 +2,23 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
+.ck.ck-editor__main > .ck-editor__editable {
+  background: var(--ck-color-base-background);
+  border-radius: var(--ck-rounded-corners-radius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {
+  border-color: var(--ck-color-base-border);
+}
 
 .ck.ck-editor {
-	/* All the elements within `.ck-editor` are positioned relatively to it.
-	 If any element needs to be positioned with respect to the <body>, etc.,
-	 it must land outside of the `.ck-editor` in DOM. */
-	position: relative;
+  position: relative;
 }
 
 .ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar {
-		/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */
-		z-index: var(--ck-z-panel);
-	}
+  z-index: var(--ck-z-panel);
+}
 
 /*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../theme/classiceditor.css","index.css"],"names":[],"mappings":";;;;AAAA,CAAA;ACCA,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ;AAC3E,CAAC,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC;AAClF,CAAC,CDAC;;AAEF,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA;ACCA,CDAC,CAAA,CAAA,CAAA,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,MAAA,CAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,UAAA,CAAA,UAAA,CAAA,EAAA,CAAA,EAAA;ACCD,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;AACxE,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CDAC;ACCpD,CDAC,QAAA,CAAA,CAAA,QAAkB;AAMnB;;AAJC,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CAAA,WAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA;ACED,CAAC,CDDC,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,MAAA,CAAA,GAAA,CAAA,QAAA,CAAA,SAAA,CAAA,MAAA,CAAA,OAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAmE;ACErE,CAAC,CDDC,CAAA,CAAA,KAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,KAAA,CAA0B;ACE5B,CDDC;;ACGD,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n.ck.ck-editor {\n\t/* All the elements within `.ck-editor` are positioned relatively to it.\n\t If any element needs to be positioned with respect to the <body>, etc.,\n\t it must land outside of the `.ck-editor` in DOM. */\n\tposition: relative;\n\n\t& .ck-editor__top .ck-sticky-panel .ck-toolbar {\n\t\t/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */\n\t\tz-index: var(--ck-z-panel);\n\t}\n}\n","/*\n * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n.ck.ck-editor {\n\t/* All the elements within `.ck-editor` are positioned relatively to it.\n\t If any element needs to be positioned with respect to the <body>, etc.,\n\t it must land outside of the `.ck-editor` in DOM. */\n\tposition: relative;\n}\n\n.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar {\n\t\t/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */\n\t\tz-index: var(--ck-z-panel);\n\t}\n\n/*# sourceMappingURL=index.css.map */"]}
+{"version":3,"sources":["../theme/classiceditor.css","index.css"],"names":[],"mappings":";;;;AAOA,CAAA,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,gBAAA,CAAA;ACNA,CAAC,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC;AAC7C,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC;AACjD,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AAC3B,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AAC5B;;ADSC,CAAA,EAAA,CAAA,EAAA,CAAA,YAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,gBAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA,CAAA;ACND,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC;AAC3C;;ADUA,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA;ACPA,CAAC,CAAC,QAAQ,CAAC,CAAC,QAAQ;AACpB;;ADYC,CAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CAAA,WAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,KAAA,CAAA,CAAA,EAAA,CAAA,OAAA,CAAA;ACTD,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;AAC5B;;AAEA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options\n */\n\n/* Note: Use ck-editor__main to make sure these styles don't apply to other editor types */\n\n.ck.ck-editor__main > .ck-editor__editable {\n\t/* https://github.com/ckeditor/ckeditor5/issues/3384 */\n\tbackground: var(--ck-color-base-background);\n\tborder-radius: var(--ck-rounded-corners-radius);\n\tborder-top-left-radius: 0;\n\tborder-top-right-radius: 0;\n\n\t&:not(.ck-focused) {\n\t\tborder-color: var(--ck-color-base-border);\n\t}\n}\n\n.ck.ck-editor {\n\t/* All the elements within `.ck-editor` are positioned relatively to it.\n\t If any element needs to be positioned with respect to the <body>, etc.,\n\t it must land outside of the `.ck-editor` in DOM. */\n\tposition: relative;\n\n\t& .ck-editor__top .ck-sticky-panel .ck-toolbar {\n\t\t/* https://github.com/ckeditor/ckeditor5-editor-classic/issues/62 */\n\t\tz-index: var(--ck-z-panel);\n\t}\n}\n",".ck.ck-editor__main > .ck-editor__editable {\n  background: var(--ck-color-base-background);\n  border-radius: var(--ck-rounded-corners-radius);\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.ck.ck-editor__main > .ck-editor__editable:not(.ck-focused) {\n  border-color: var(--ck-color-base-border);\n}\n\n.ck.ck-editor {\n  position: relative;\n}\n\n.ck.ck-editor .ck-editor__top .ck-sticky-panel .ck-toolbar {\n  z-index: var(--ck-z-panel);\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/dist/index.js

@@ -4,8 +4,8 @@
  */
 import { EditorUI, normalizeToolbarConfig, DialogView, BoxedEditorUIView, StickyPanelView, ToolbarView, MenuBarView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { enableViewPlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { ElementReplacer, Rect, CKEditorError, getDataFromElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { ElementApiMixin, Editor, attachToForm } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { ElementReplacer, Rect, logWarning } from '@ckeditor/ckeditor5-utils/dist/index.js';
+import { ElementApiMixin, Editor, normalizeSingleRootEditorConstructorParams, normalizeRootsConfig, attachToForm } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { isElement as isElement$1 } from 'es-toolkit/compat';
 
 /**
@@ -115,9 +115,9 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         const editingRoot = editingView.document.getRoot();
         const sourceElement = editor.sourceElement;
         let placeholderText;
-        const placeholder = editor.config.get('placeholder');
+        const placeholder = editor.config.get('roots')[this.view.editable.name].placeholder;
         if (placeholder) {
-            placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[this.view.editable.name];
+            placeholderText = placeholder;
         }
         if (!placeholderText && sourceElement && sourceElement.tagName.toLowerCase() === 'textarea') {
             placeholderText = sourceElement.getAttribute('placeholder');
@@ -314,30 +314,24 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
     /**
 	 * @inheritDoc
 	 */ ui;
-    /**
-	 * Creates an instance of the classic editor.
-	 *
-	 * **Note:** do not use the constructor to create editor instances. Use the static
-	 * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`} method instead.
-	 *
-	 * @param sourceElementOrData The DOM element that will be the source for the created editor
-	 * or the editor's initial data. For more information see
-	 * {@link module:editor-classic/classiceditor~ClassicEditor.create `ClassicEditor.create()`}.
-	 * @param config The editor configuration.
-	 */ constructor(sourceElementOrData, config = {}){
-        // If both `config.initialData` is set and initial data is passed as the constructor parameter, then throw.
-        if (!isElement(sourceElementOrData) && config.initialData !== undefined) {
-            // Documented in core/editor/editorconfig.jsdoc.
-            // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-            throw new CKEditorError('editor-create-initial-data', null);
+    constructor(sourceElementOrDataOrConfig, config = {}){
+        const { sourceElementOrData, editorConfig } = normalizeSingleRootEditorConstructorParams(sourceElementOrDataOrConfig, config);
+        super(editorConfig);
+        normalizeRootsConfig(sourceElementOrData, this.config, 'main', true);
+        if (isElement(this.config.get('roots').main.element)) {
+            /**
+			 * The `config.attachTo` option is not compatible with the `root.element` option.
+			 * Please use {@link module:core/editor/editorconfig~EditorConfig#attachTo `config.attachTo`}
+			 * to specify the source element for the {@link module:editor-classic/classiceditor~ClassicEditor}.
+			 *
+			 * @error editor-create-attachto-conflict
+			 */ logWarning('editor-create-attachto-conflict');
         }
-        super(config);
+        // From this point use only normalized `roots.main.element`.
+        const sourceElement = this.config.get('attachTo');
         this.config.define('menuBar.isVisible', false);
-        if (this.config.get('initialData') === undefined) {
-            this.config.set('initialData', getInitialData(sourceElementOrData));
-        }
-        if (isElement(sourceElementOrData)) {
-            this.sourceElement = sourceElementOrData;
+        if (isElement(sourceElement)) {
+            this.sourceElement = sourceElement;
         }
         this.model.document.createRoot();
         const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
@@ -345,7 +339,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         const view = new ClassicEditorUIView(this.locale, this.editing.view, {
             shouldToolbarGroupWhenFull,
             useMenuBar: menuBarConfig.isVisible,
-            label: this.config.get('label')
+            label: this.config.get('roots').main.label
         });
         this.ui = new ClassicEditorUI(this, view);
         attachToForm(this);
@@ -363,104 +357,13 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         this.ui.destroy();
         return super.destroy();
     }
-    /**
-	 * Creates a new classic editor instance.
-	 *
-	 * There are three ways how the editor can be initialized.
-	 *
-	 * # Replacing a DOM element (and loading data from it)
-	 *
-	 * You can initialize the editor using an existing DOM element:
-	 *
-	 * ```ts
-	 * ClassicEditor
-	 * 	.create( document.querySelector( '#editor' ) )
-	 * 	.then( editor => {
-	 * 		console.log( 'Editor was initialized', editor );
-	 * 	} )
-	 * 	.catch( err => {
-	 * 		console.error( err.stack );
-	 * 	} );
-	 * ```
-	 *
-	 * The element's content will be used as the editor data and the element will be replaced by the editor UI.
-	 *
-	 * # Creating a detached editor
-	 *
-	 * Alternatively, you can initialize the editor by passing the initial data directly as a string.
-	 * In this case, the editor will render an element that must be inserted into the DOM:
-	 *
-	 * ```ts
-	 * ClassicEditor
-	 * 	.create( '<p>Hello world!</p>' )
-	 * 	.then( editor => {
-	 * 		console.log( 'Editor was initialized', editor );
-	 *
-	 * 		// Initial data was provided so the editor UI element needs to be added manually to the DOM.
-	 * 		document.body.appendChild( editor.ui.element );
-	 * 	} )
-	 * 	.catch( err => {
-	 * 		console.error( err.stack );
-	 * 	} );
-	 * ```
-	 *
-	 * This lets you dynamically append the editor to your web page whenever it is convenient for you. You may use this method if your
-	 * web page content is generated on the client side and the DOM structure is not ready at the moment when you initialize the editor.
-	 *
-	 * # Replacing a DOM element (and data provided in `config.initialData`)
-	 *
-	 * You can also mix these two ways by providing a DOM element to be used and passing the initial data through the configuration:
-	 *
-	 * ```ts
-	 * ClassicEditor
-	 * 	.create( document.querySelector( '#editor' ), {
-	 * 		initialData: '<h2>Initial data</h2><p>Foo bar.</p>'
-	 * 	} )
-	 * 	.then( editor => {
-	 * 		console.log( 'Editor was initialized', editor );
-	 * 	} )
-	 * 	.catch( err => {
-	 * 		console.error( err.stack );
-	 * 	} );
-	 * ```
-	 *
-	 * This method can be used to initialize the editor on an existing element with the specified content in case if your integration
-	 * makes it difficult to set the content of the source element.
-	 *
-	 * Note that an error will be thrown if you pass the initial data both as the first parameter and also in the configuration.
-	 *
-	 * # Configuring the editor
-	 *
-	 * See the {@link module:core/editor/editorconfig~EditorConfig editor configuration documentation} to learn more about
-	 * customizing plugins, toolbar and more.
-	 *
-	 * @param sourceElementOrData The DOM element that will be the source for the created editor
-	 * or the editor's initial data.
-	 *
-	 * If a DOM element is passed, its content will be automatically loaded to the editor upon initialization
-	 * and the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element editor element} will replace the passed element
-	 * in the DOM (the original one will be hidden and the editor will be injected next to it).
-	 *
-	 * If the {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
-	 * option is set to `true`, the editor data will be set back to the original element once the editor is destroyed and when a form,
-	 * in which this element is contained, is submitted (if the original element is a `<textarea>`). This ensures seamless integration
-	 * with native web forms.
-	 *
-	 * If the initial data is passed, a detached editor will be created. In this case you need to insert it into the DOM manually.
-	 * It is available under the {@link module:editor-classic/classiceditorui~ClassicEditorUI#element `editor.ui.element`} property.
-	 *
-	 * @param config The editor configuration.
-	 * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
-	 */ static create(sourceElementOrData, config = {}) {
+    static create(sourceElementOrDataOrConfig, config = {}) {
         return new Promise((resolve)=>{
-            const editor = new this(sourceElementOrData, config);
-            resolve(editor.initPlugins().then(()=>editor.ui.init(isElement(sourceElementOrData) ? sourceElementOrData : null)).then(()=>editor.data.init(editor.config.get('initialData'))).then(()=>editor.fire('ready')).then(()=>editor));
+            const editor = new this(sourceElementOrDataOrConfig, config);
+            resolve(editor.initPlugins().then(()=>editor.ui.init(editor.config.get('attachTo') || null)).then(()=>editor.data.init(editor.config.get('roots').main.initialData)).then(()=>editor.fire('ready')).then(()=>editor));
         });
     }
 }
-function getInitialData(sourceElementOrData) {
-    return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
-}
 function isElement(value) {
     return isElement$1(value);
 }