@ckeditor/ckeditor5-editor-decoupled 48.8.1-alpha.3 → 49.0.0-alpha.0

package/dist/index.js

@@ -2,277 +2,266 @@
  * @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
  */
-import { ElementApiMixin, Editor, normalizeSingleRootEditorConstructorParams, normalizeRootsConfig, secureSourceElement, registerAndInitializeRootConfigAttributes, verifyRootElements } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { CKEditorError } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { EditorUI, EditorUIView, ToolbarView, MenuBarView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
-import { enableViewPlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
-import { isElement as isElement$1 } from 'es-toolkit/compat';
+import { Editor, ElementApiMixin, normalizeRootsConfig, normalizeSingleRootEditorConstructorParams, registerAndInitializeRootConfigAttributes, rootAcceptsBlocks, secureSourceElement, verifyRootElements } from "@ckeditor/ckeditor5-core";
+import { EditorUI, EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from "@ckeditor/ckeditor5-ui";
+import { enableViewPlaceholder } from "@ckeditor/ckeditor5-engine";
+import { isElement } from "es-toolkit/compat";
 
 /**
- * The decoupled editor UI class.
- */ class DecoupledEditorUI extends EditorUI {
-    /**
-	 * The main (top–most) view of the editor UI.
-	 */ view;
-    /**
-	 * Creates an instance of the decoupled editor UI class.
-	 *
-	 * @param editor The editor instance.
-	 * @param view The view of the UI.
-	 */ constructor(editor, view){
-        super(editor);
-        this.view = view;
-    }
-    /**
-	 * Initializes the UI.
-	 */ init() {
-        const editor = this.editor;
-        const view = this.view;
-        const editingView = editor.editing.view;
-        const editable = view.editable;
-        const editingRoot = editingView.document.getRoot();
-        // The editable UI and editing root should share the same name. Then name is used
-        // to recognize the particular editable, for instance in ARIA attributes.
-        editable.name = editingRoot.rootName;
-        view.render();
-        // The editable UI element in DOM is available for sure only after the editor UI view has been rendered.
-        // But it can be available earlier if a DOM element has been passed to DecoupledEditor.create().
-        const editableElement = editable.element;
-        // Register the editable UI view in the editor. A single editor instance can aggregate multiple
-        // editable areas (roots) but the decoupled editor has only one.
-        this.setEditableElement(editable.name, editableElement);
-        // Let the editable UI element respond to the changes in the global editor focus
-        // tracker. It has been added to the same tracker a few lines above but, in reality, there are
-        // many focusable areas in the editor, like balloons, toolbars or dropdowns and as long
-        // as they have focus, the editable should act like it is focused too (although technically
-        // it isn't), e.g. by setting the proper CSS class, visually announcing focus to the user.
-        // Doing otherwise will result in editable focus styles disappearing, once e.g. the
-        // toolbar gets focused.
-        view.editable.bind('isFocused').to(this.focusTracker);
-        // Bind the editable UI element to the editing view, making it an end– and entry–point
-        // of the editor's engine. This is where the engine meets the UI.
-        editingView.attachDomRoot(editableElement);
-        this._initPlaceholder();
-        this._initToolbar();
-        this.initMenuBar(this.view.menuBarView);
-        this.fire('ready');
-    }
-    /**
-	 * @inheritDoc
-	 */ destroy() {
-        super.destroy();
-        const view = this.view;
-        const editingView = this.editor.editing.view;
-        if (editingView.getDomRoot(view.editable.name)) {
-            editingView.detachDomRoot(view.editable.name);
-        }
-        view.destroy();
-    }
-    /**
-	 * Initializes the inline editor toolbar and its panel.
-	 */ _initToolbar() {
-        const editor = this.editor;
-        const view = this.view;
-        const toolbar = view.toolbar;
-        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
-        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
-        this.addToolbar(view.toolbar);
-    }
-    /**
-	 * Enable the placeholder text on the editing root.
-	 */ _initPlaceholder() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const editingRoot = editingView.document.getRoot();
-        const placeholder = editor.config.get('roots')[editingRoot.rootName].placeholder;
-        if (placeholder) {
-            editingRoot.placeholder = placeholder;
-        }
-        enableViewPlaceholder({
-            view: editingView,
-            element: editingRoot,
-            isDirectHost: false,
-            keepOnFocus: true
-        });
-    }
-}
+* @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
+*/
+/**
+* @module editor-decoupled/decouplededitorui
+*/
+/**
+* The decoupled editor UI class.
+*/
+var DecoupledEditorUI = class extends EditorUI {
+	/**
+	* The main (top–most) view of the editor UI.
+	*/
+	view;
+	/**
+	* Creates an instance of the decoupled editor UI class.
+	*
+	* @param editor The editor instance.
+	* @param view The view of the UI.
+	*/
+	constructor(editor, view) {
+		super(editor);
+		this.view = view;
+	}
+	/**
+	* Initializes the UI.
+	*/
+	init() {
+		const editor = this.editor;
+		const view = this.view;
+		const editingView = editor.editing.view;
+		const editable = view.editable;
+		const editingRoot = editingView.document.getRoot();
+		editable.name = editingRoot.rootName;
+		editable.isInlineRoot = !rootAcceptsBlocks(editor, editingRoot.rootName);
+		view.render();
+		const editableElement = editable.element;
+		this.setEditableElement(editable.name, editableElement);
+		view.editable.bind("isFocused").to(this.focusTracker);
+		editingView.attachDomRoot(editableElement);
+		this._initPlaceholder();
+		this._initToolbar();
+		this.initMenuBar(this.view.menuBarView);
+		this.fire("ready");
+	}
+	/**
+	* @inheritDoc
+	*/
+	destroy() {
+		super.destroy();
+		const view = this.view;
+		const editingView = this.editor.editing.view;
+		if (editingView.getDomRoot(view.editable.name)) editingView.detachDomRoot(view.editable.name);
+		view.destroy();
+	}
+	/**
+	* Initializes the inline editor toolbar and its panel.
+	*/
+	_initToolbar() {
+		const editor = this.editor;
+		const view = this.view;
+		view.toolbar.fillFromConfig(editor.config.get("toolbar"), this.componentFactory);
+		this.addToolbar(view.toolbar);
+	}
+	/**
+	* Enable the placeholder text on the editing root.
+	*/
+	_initPlaceholder() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+		const editingRoot = editingView.document.getRoot();
+		const placeholder = editor.config.get("roots")[editingRoot.rootName].placeholder;
+		if (placeholder) editingRoot.placeholder = placeholder;
+		enableViewPlaceholder({
+			view: editingView,
+			element: editingRoot,
+			isDirectHost: this.view.editable.isInlineRoot,
+			keepOnFocus: true
+		});
+	}
+};
 
 /**
- * The decoupled editor UI view. It is a virtual view providing an inline
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
- * {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
- * specific arrangement of the components in the DOM.
- *
- * See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
- * to learn more about this view.
- */ class DecoupledEditorUIView extends EditorUIView {
-    /**
-	 * The main toolbar of the decoupled editor UI.
-	 */ toolbar;
-    /**
-	 * The editable of the decoupled editor UI.
-	 */ editable;
-    /**
-	 * Menu bar view instance.
-	 */ menuBarView;
-    /**
-	 * Creates an instance of the decoupled editor UI view.
-	 *
-	 * @param locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param editingView The editing view instance this view is related to.
-	 * @param options Configuration options for the view instance.
-	 * @param options.editableElement The editable element. If not specified, it will be automatically created by
-	 * {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
-	 * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
-	 * in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
-	 * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-	 * @param options.label When set, this value will be used as an accessible `aria-label` of the
-	 * {@link module:ui/editableui/editableuiview~EditableUIView editable view}.
-	 */ constructor(locale, editingView, options = {}){
-        super(locale);
-        this.toolbar = new ToolbarView(locale, {
-            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
-        });
-        this.menuBarView = new MenuBarView(locale);
-        this.editable = new InlineEditableUIView(locale, editingView, options.editableElement, {
-            label: options.label
-        });
-        // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
-        // Because of the above, make sure the toolbar supports rounded corners.
-        // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
-        // and some toolbar item styles depend on this attribute.
-        this.toolbar.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-reset_all',
-                    'ck-rounded-corners'
-                ],
-                dir: locale.uiLanguageDirection
-            }
-        });
-        this.menuBarView.extendTemplate({
-            attributes: {
-                class: [
-                    'ck-reset_all',
-                    'ck-rounded-corners'
-                ],
-                dir: locale.uiLanguageDirection
-            }
-        });
-    }
-    /**
-	 * @inheritDoc
-	 */ render() {
-        super.render();
-        this.registerChild([
-            this.menuBarView,
-            this.toolbar,
-            this.editable
-        ]);
-    }
-}
+* @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
+*/
+/**
+* @module editor-decoupled/decouplededitoruiview
+*/
+/**
+* The decoupled editor UI view. It is a virtual view providing an inline
+* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#editable},
+* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar}, and a
+* {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#menuBarView} but without any
+* specific arrangement of the components in the DOM.
+*
+* See {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`}
+* to learn more about this view.
+*/
+var DecoupledEditorUIView = class extends EditorUIView {
+	/**
+	* The main toolbar of the decoupled editor UI.
+	*/
+	toolbar;
+	/**
+	* The editable of the decoupled editor UI.
+	*/
+	editable;
+	/**
+	* Menu bar view instance.
+	*/
+	menuBarView;
+	/**
+	* Creates an instance of the decoupled editor UI view.
+	*
+	* @param locale The {@link module:core/editor/editor~Editor#locale} instance.
+	* @param editingView The editing view instance this view is related to.
+	* @param options Configuration options for the view instance.
+	* @param options.editableElement The editable element. If not specified, it will be automatically created by
+	* {@link module:ui/editableui/editableuiview~EditableUIView}. Otherwise, the given element will be used.
+	* @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+	* in the main {@link module:editor-decoupled/decouplededitoruiview~DecoupledEditorUIView#toolbar toolbar}.
+	* See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+	* @param options.label When set, this value will be used as an accessible `aria-label` of the
+	* {@link module:ui/editableui/editableuiview~EditableUIView editable view}.
+	*/
+	constructor(locale, editingView, options = {}) {
+		super(locale);
+		this.toolbar = new ToolbarView(locale, { shouldGroupWhenFull: options.shouldToolbarGroupWhenFull });
+		this.menuBarView = new MenuBarView(locale);
+		this.editable = new InlineEditableUIView(locale, editingView, options.editableElement, { label: options.label });
+		this.toolbar.extendTemplate({ attributes: {
+			class: ["ck-reset_all", "ck-rounded-corners"],
+			dir: locale.uiLanguageDirection
+		} });
+		this.menuBarView.extendTemplate({ attributes: {
+			class: ["ck-reset_all", "ck-rounded-corners"],
+			dir: locale.uiLanguageDirection
+		} });
+	}
+	/**
+	* @inheritDoc
+	*/
+	render() {
+		super.render();
+		this.registerChild([
+			this.menuBarView,
+			this.toolbar,
+			this.editable
+		]);
+	}
+};
 
 /**
- * The decoupled editor implementation. It provides an inline editable and a toolbar. However, unlike other editors,
- * it does not render these components anywhere in the DOM unless configured.
- *
- * This type of an editor is dedicated to integrations which require a customized UI with an open
- * structure, allowing developers to specify the exact location of the interface.
- *
- * See the document editor {@glink examples/builds/document-editor demo} to learn about possible use cases
- * for the decoupled editor.
- *
- * In order to create a decoupled editor instance, use the static
- * {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
- *
- * Note that you will need to attach the editor toolbar and menu bar to your web page manually, in a desired place,
- * after the editor is initialized.
- */ class DecoupledEditor extends /* #__PURE__ */ ElementApiMixin(Editor) {
-    /**
-	 * @inheritDoc
-	 */ static get editorName() {
-        return 'DecoupledEditor';
-    }
-    /**
-	 * @inheritDoc
-	 */ ui;
-    constructor(sourceElementOrDataOrConfig, config = {}){
-        const { sourceElementOrData, editorConfig } = normalizeSingleRootEditorConstructorParams(sourceElementOrDataOrConfig, config);
-        super(editorConfig);
-        normalizeRootsConfig(sourceElementOrData, this.config);
-        // From this point use only normalized `roots.main.element`.
-        const sourceElement = this.config.get('roots').main.element;
-        if (isElement(sourceElement)) {
-            if (sourceElement.tagName === 'TEXTAREA') {
-                // Documented in core/editor/editor.js
-                // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-                throw new CKEditorError('editor-wrong-element', null);
-            }
-            this.sourceElement = sourceElement;
-            secureSourceElement(this, sourceElement);
-        }
-        this.model.document.createRoot(this.config.get('roots').main.modelElement);
-        registerAndInitializeRootConfigAttributes(this);
-        const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
-        const view = new DecoupledEditorUIView(this.locale, this.editing.view, {
-            editableElement: this.sourceElement,
-            shouldToolbarGroupWhenFull,
-            label: this.config.get('roots').main.label
-        });
-        this.ui = new DecoupledEditorUI(this, view);
-    }
-    /**
-	 * Destroys the editor instance, releasing all resources used by it.
-	 *
-	 * Updates the original editor element with the data if the
-	 * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
-	 * configuration option is set to `true`.
-	 *
-	 * **Note**: The decoupled editor does not remove the toolbar and editable when destroyed. You can
-	 * do that yourself in the destruction chain:
-	 *
-	 * ```ts
-	 * editor.destroy()
-	 * 	.then( () => {
-	 * 		// Remove the toolbar from DOM.
-	 * 		editor.ui.view.toolbar.element.remove();
-	 *
-	 * 		// Remove the editable from DOM.
-	 * 		editor.ui.view.editable.element.remove();
-	 *
-	 * 		console.log( 'Editor was destroyed' );
-	 * 	} );
-	 * ```
-	 */ async destroy() {
-        // Cache the data, then destroy.
-        // It's safe to assume that the model->view conversion will not work after super.destroy().
-        const data = this.getData();
-        this.ui.destroy();
-        await super.destroy();
-        if (this.sourceElement) {
-            this.updateSourceElement(data);
-        }
-        // To satisfy the return type and to keep it backward compatible.
-        // eslint-disable-next-line no-useless-return
-        return;
-    }
-    static async create(sourceElementOrDataOrConfig, config = {}) {
-        const editor = new this(sourceElementOrDataOrConfig, config);
-        await editor.initPlugins();
-        // Roots are created in the editor constructor (before plugins are loaded), but the schema is only fully
-        // built after plugins register their items during init(). Custom root element names (e.g. registered by a
-        // plugin) may not exist in the schema at construction time, so we defer this check until here.
-        verifyRootElements(editor);
-        await editor.ui.init();
-        await editor.data.init(editor.config.get('roots').main.initialData);
-        editor.fire('ready');
-        return editor;
-    }
-}
-function isElement(value) {
-    return isElement$1(value);
+* @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
+*/
+/**
+* @module editor-decoupled/decouplededitor
+*/
+const DecoupledEditorBase = /* #__PURE__ */ ElementApiMixin(Editor);
+/**
+* The decoupled editor implementation. It provides an inline editable and a toolbar. However, unlike other editors,
+* it does not render these components anywhere in the DOM unless configured.
+*
+* This type of an editor is dedicated to integrations which require a customized UI with an open
+* structure, allowing developers to specify the exact location of the interface.
+*
+* See the document editor {@glink examples/builds/document-editor demo} to learn about possible use cases
+* for the decoupled editor.
+*
+* In order to create a decoupled editor instance, use the static
+* {@link module:editor-decoupled/decouplededitor~DecoupledEditor.create `DecoupledEditor.create()`} method.
+*
+* Note that you will need to attach the editor toolbar and menu bar to your web page manually, in a desired place,
+* after the editor is initialized.
+*/
+var DecoupledEditor = class extends DecoupledEditorBase {
+	/**
+	* @inheritDoc
+	*/
+	static get editorName() {
+		return "DecoupledEditor";
+	}
+	/**
+	* @inheritDoc
+	*/
+	ui;
+	constructor(sourceElementOrDataOrConfig, config = {}) {
+		const { sourceElementOrData, editorConfig } = normalizeSingleRootEditorConstructorParams(sourceElementOrDataOrConfig, config);
+		super(editorConfig);
+		normalizeRootsConfig(sourceElementOrData, this.config);
+		const editableElement = this.config.get("roots").main.element;
+		if (isElement$1(editableElement)) {
+			this.sourceElement = editableElement;
+			secureSourceElement(this, editableElement);
+		}
+		this.model.document.createRoot(this.config.get("roots").main.modelElement);
+		registerAndInitializeRootConfigAttributes(this);
+		const shouldToolbarGroupWhenFull = !this.config.get("toolbar.shouldNotGroupWhenFull");
+		const view = new DecoupledEditorUIView(this.locale, this.editing.view, {
+			editableElement,
+			shouldToolbarGroupWhenFull,
+			label: this.config.get("roots").main.label
+		});
+		this.ui = new DecoupledEditorUI(this, view);
+	}
+	/**
+	* Destroys the editor instance, releasing all resources used by it.
+	*
+	* Updates the original editor element with the data if the
+	* {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
+	* configuration option is set to `true`.
+	*
+	* **Note**: The decoupled editor does not remove the toolbar and editable when destroyed. You can
+	* do that yourself in the destruction chain:
+	*
+	* ```ts
+	* editor.destroy()
+	* 	.then( () => {
+	* 		// Remove the toolbar from DOM.
+	* 		editor.ui.view.toolbar.element.remove();
+	*
+	* 		// Remove the editable from DOM.
+	* 		editor.ui.view.editable.element.remove();
+	*
+	* 		console.log( 'Editor was destroyed' );
+	* 	} );
+	* ```
+	*/
+	async destroy() {
+		const data = this.getData();
+		this.ui.destroy();
+		await super.destroy();
+		if (this.sourceElement) this.updateSourceElement(data);
+	}
+	static async create(sourceElementOrDataOrConfig, config = {}) {
+		const editor = new this(sourceElementOrDataOrConfig, config);
+		await editor.initPlugins();
+		verifyRootElements(editor);
+		await editor.ui.init();
+		await editor.data.init(editor.config.get("roots").main.initialData);
+		editor.fire("ready");
+		return editor;
+	}
+};
+function isElement$1(value) {
+	return isElement(value);
 }
 
+/**
+* @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
+*/
+
 export { DecoupledEditor, DecoupledEditorUI, DecoupledEditorUIView };
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map