@ckeditor/ckeditor5-editor-inline 41.4.1 → 42.0.0-alpha.0

package/README.md

@@ -9,12 +9,18 @@ The inline editor implementation for CKEditor 5.
 
 This package exposes the [`InlineEditor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-inline_inlineeditor-InlineEditor.html) class. Follow there to learn more about this type of editor and how to initialize it.
 
-This package contains the source version of the inline editor. This kind of editor implementation is also available as a ready-to-use [inline build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline). Read more about [CKEditor 5 predefined builds](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-builds.html) in the CKEditor 5 documentation.
+This package contains the source version of the inline editor. This kind of editor implementation is also available as a ready-to-use [inline build](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-inline). Read more about [CKEditor 5 predefined builds](https://ckeditor.com/docs/ckeditor5/latest/getting-started/legacy/advanced/alternative-setups/predefined-builds.html) in the CKEditor 5 documentation.
 
 ## Documentation
 
 See the [`@ckeditor/ckeditor5-editor-inline` package](https://ckeditor.com/docs/ckeditor5/latest/api/editor-inline.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
 
+## Installation
+
+```bash
+npm install ckeditor5
+```
+
 ## License
 
 Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html). For full details about the license, please check the `LICENSE.md` file or [https://ckeditor.com/legal/ckeditor-oss-license](https://ckeditor.com/legal/ckeditor-oss-license).

package/build/editor-inline.js

@@ -1,4 +1,4 @@
 /*!
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var t={782:(t,e,o)=>{t.exports=o(237)("./src/core.js")},783:(t,e,o)=>{t.exports=o(237)("./src/engine.js")},311:(t,e,o)=>{t.exports=o(237)("./src/ui.js")},584:(t,e,o)=>{t.exports=o(237)("./src/utils.js")},602:(t,e,o)=>{t.exports=o(237)("./src/watchdog.js")},237:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function o(i){var r=e[i];if(void 0!==r)return r.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{InlineEditor:()=>W});var t=o(782),e=o(584),r=o(602),n=o(311),s=o(783);class l extends n.EditorUI{constructor(t,e){super(t),this.view=e,this._toolbarConfig=(0,n.normalizeToolbarConfig)(t.config.get("toolbar"))}get element(){return this.view.editable.element}init(){const t=this.editor,e=this.view,o=t.editing.view,i=e.editable,r=o.document.getRoot();i.name=r.rootName,e.render();const n=i.element;this.setEditableElement(i.name,n),i.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),this.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_initToolbar(){const t=this.editor,e=this.view,o=e.editable.element,i=e.toolbar;e.panel.bind("isVisible").to(this.focusTracker,"isFocused"),e.bind("viewportTopOffset").to(this,"viewportOffset",(({top:t})=>t||0)),e.listenTo(t.ui,"update",(()=>{e.panel.isVisible&&e.panel.pin({target:o,positions:e.panelPositions})})),i.fillFromConfig(this._toolbarConfig,this.componentFactory),this.addToolbar(i)}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),i=t.config.get("placeholder");if(i){const t="string"==typeof i?i:i[o.rootName];t&&(o.placeholder=t)}(0,s.enablePlaceholder)({view:e,element:o,isDirectHost:!1,keepOnFocus:!0})}}const a=(0,e.toUnit)("px");class c extends n.EditorUIView{constructor(t,e,o,i={}){super(t);const r=t.t;this.toolbar=new n.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),this.set("viewportTopOffset",0),this.panel=new n.BalloonPanelView(t),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new n.InlineEditableUIView(t,e,o,{label:t=>r("Rich Text Editor. Editing area: %0",t.name)}),this._resizeObserver=null}render(){super.render(),this.body.add(this.panel),this.registerChild(this.editable),this.panel.content.add(this.toolbar);if(this.toolbar.options.shouldGroupWhenFull){const t=this.editable.element;this._resizeObserver=new e.ResizeObserver(t,(()=>{this.toolbar.maxWidth=a(new e.Rect(t).width)}))}}destroy(){super.destroy(),this._resizeObserver&&this._resizeObserver.destroy()}_getPanelPositionTop(t,e){let o;return o=t.top>e.height+this.viewportTopOffset?t.top-e.height:t.bottom>e.height+this.viewportTopOffset+50?this.viewportTopOffset:t.bottom,o}_getPanelPositions(){const t=[(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left,name:"toolbar_west",config:{withArrow:!1}}),(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left+t.width-e.width,name:"toolbar_east",config:{withArrow:!1}})];return"ltr"===this.locale.uiLanguageDirection?t:t.reverse()}}const d=function(t){return null!=t&&"object"==typeof t};const h="object"==typeof global&&global&&global.Object===Object&&global;var u="object"==typeof self&&self&&self.Object===Object&&self;const p=(h||u||Function("return this")()).Symbol;var b=Object.prototype,f=b.hasOwnProperty,g=b.toString,w=p?p.toStringTag:void 0;const v=function(t){var e=f.call(t,w),o=t[w];try{t[w]=void 0;var i=!0}catch(t){}var r=g.call(t);return i&&(e?t[w]=o:delete t[w]),r};var m=Object.prototype.toString;const y=function(t){return m.call(t)};var O=p?p.toStringTag:void 0;const T=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":O&&O in Object(t)?v(t):y(t)};const j=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var E=Function.prototype,P=Object.prototype,x=E.toString,_=P.hasOwnProperty,F=x.call(Object);const C=function(t){if(!d(t)||"[object Object]"!=T(t))return!1;var e=j(t);if(null===e)return!0;var o=_.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&x.call(o)==F};const S=function(t){return d(t)&&1===t.nodeType&&!C(t)};class D extends((0,t.ElementApiMixin)(t.Editor)){constructor(o,i={}){if(!R(o)&&void 0!==i.initialData)throw new e.CKEditorError("editor-create-initial-data",null);super(i),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return R(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),R(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new c(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r});this.ui=new l(this,n),(0,t.attachToForm)(this)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,o={}){return new Promise((i=>{if(R(t)&&"TEXTAREA"===t.tagName)throw new e.CKEditorError("editor-wrong-element",null);const r=new this(t,o);i(r.initPlugins().then((()=>r.ui.init())).then((()=>r.data.init(r.config.get("initialData")))).then((()=>r.fire("ready"))).then((()=>r)))}))}}D.Context=t.Context,D.EditorWatchdog=r.EditorWatchdog,D.ContextWatchdog=r.ContextWatchdog;const W=D;function R(t){return S(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();
+ */(()=>{var t={782:(t,e,o)=>{t.exports=o(237)("./src/core.js")},783:(t,e,o)=>{t.exports=o(237)("./src/engine.js")},311:(t,e,o)=>{t.exports=o(237)("./src/ui.js")},584:(t,e,o)=>{t.exports=o(237)("./src/utils.js")},237:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function o(i){var r=e[i];if(void 0!==r)return r.exports;var n=e[i]={exports:{}};return t[i](n,n.exports,o),n.exports}o.d=(t,e)=>{for(var i in e)o.o(e,i)&&!o.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:e[i]})},o.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),o.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{InlineEditor:()=>C});var t=o(782),e=o(584),r=o(311),n=o(783);class s extends r.EditorUI{constructor(t,e){super(t),this.view=e,this._toolbarConfig=(0,r.normalizeToolbarConfig)(t.config.get("toolbar"))}get element(){return this.view.editable.element}init(){const t=this.editor,e=this.view,o=t.editing.view,i=e.editable,r=o.document.getRoot();i.name=r.rootName,e.render();const n=i.element;this.setEditableElement(i.name,n),i.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),this.fire("ready")}destroy(){super.destroy();const t=this.view;this.editor.editing.view.detachDomRoot(t.editable.name),t.destroy()}_initToolbar(){const t=this.editor,e=this.view,o=e.editable.element,i=e.toolbar;e.panel.bind("isVisible").to(this.focusTracker,"isFocused"),e.bind("viewportTopOffset").to(this,"viewportOffset",(({top:t})=>t||0)),e.listenTo(t.ui,"update",(()=>{e.panel.isVisible&&e.panel.pin({target:o,positions:e.panelPositions})})),i.fillFromConfig(this._toolbarConfig,this.componentFactory),this.addToolbar(i)}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),i=t.config.get("placeholder");if(i){const t="string"==typeof i?i:i[o.rootName];t&&(o.placeholder=t)}(0,n.enablePlaceholder)({view:e,element:o,isDirectHost:!1,keepOnFocus:!0})}}const l=(0,e.toUnit)("px");class a extends r.EditorUIView{constructor(t,e,o,i={}){super(t);const n=t.t;this.toolbar=new r.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),this.set("viewportTopOffset",0),this.panel=new r.BalloonPanelView(t),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new r.InlineEditableUIView(t,e,o,{label:t=>n("Rich Text Editor. Editing area: %0",t.name)}),this._resizeObserver=null}render(){super.render(),this.body.add(this.panel),this.registerChild(this.editable),this.panel.content.add(this.toolbar);if(this.toolbar.options.shouldGroupWhenFull){const t=this.editable.element;this._resizeObserver=new e.ResizeObserver(t,(()=>{this.toolbar.maxWidth=l(new e.Rect(t).width)}))}}destroy(){super.destroy(),this._resizeObserver&&this._resizeObserver.destroy()}_getPanelPositionTop(t,e){let o;return o=t.top>e.height+this.viewportTopOffset?t.top-e.height:t.bottom>e.height+this.viewportTopOffset+50?this.viewportTopOffset:t.bottom,o}_getPanelPositions(){const t=[(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left,name:"toolbar_west",config:{withArrow:!1}}),(t,e)=>({top:this._getPanelPositionTop(t,e),left:t.left+t.width-e.width,name:"toolbar_east",config:{withArrow:!1}})];return"ltr"===this.locale.uiLanguageDirection?t:t.reverse()}}const c=function(t){return null!=t&&"object"==typeof t};const d="object"==typeof global&&global&&global.Object===Object&&global;var h="object"==typeof self&&self&&self.Object===Object&&self;const u=(d||h||Function("return this")()).Symbol;var p=Object.prototype,b=p.hasOwnProperty,f=p.toString,g=u?u.toStringTag:void 0;const w=function(t){var e=b.call(t,g),o=t[g];try{t[g]=void 0;var i=!0}catch(t){}var r=f.call(t);return i&&(e?t[g]=o:delete t[g]),r};var v=Object.prototype.toString;const m=function(t){return v.call(t)};var y=u?u.toStringTag:void 0;const O=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":y&&y in Object(t)?w(t):m(t)};const T=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var j=Function.prototype,E=Object.prototype,P=j.toString,_=E.hasOwnProperty,x=P.call(Object);const F=function(t){if(!c(t)||"[object Object]"!=O(t))return!1;var e=T(t);if(null===e)return!0;var o=_.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&P.call(o)==x};const S=function(t){return c(t)&&1===t.nodeType&&!F(t)};class C extends((0,t.ElementApiMixin)(t.Editor)){constructor(o,i={}){if(!D(o)&&void 0!==i.initialData)throw new e.CKEditorError("editor-create-initial-data",null);super(i),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return D(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),D(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new a(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r});this.ui=new s(this,n),(0,t.attachToForm)(this)}destroy(){const t=this.getData();return this.ui.destroy(),super.destroy().then((()=>{this.sourceElement&&this.updateSourceElement(t)}))}static create(t,o={}){return new Promise((i=>{if(D(t)&&"TEXTAREA"===t.tagName)throw new e.CKEditorError("editor-wrong-element",null);const r=new this(t,o);i(r.initPlugins().then((()=>r.ui.init())).then((()=>r.data.init(r.config.get("initialData")))).then((()=>r.fire("ready"))).then((()=>r)))}))}}function D(t){return S(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();

package/dist/index.js

@@ -2,22 +2,41 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { ElementApiMixin, Editor, secureSourceElement, attachToForm, Context } from '@ckeditor/ckeditor5-core/dist/index.js';
-import { toUnit, ResizeObserver, Rect, CKEditorError, getDataFromElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
-import { EditorWatchdog, ContextWatchdog } from '@ckeditor/ckeditor5-watchdog/dist/index.js';
+import { ElementApiMixin, Editor, secureSourceElement, attachToForm } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { ResizeObserver, Rect, toUnit, CKEditorError, getDataFromElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { EditorUI, normalizeToolbarConfig, EditorUIView, ToolbarView, BalloonPanelView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { enablePlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
 import { isElement as isElement$1 } from 'lodash-es';
 
-class InlineEditorUI extends EditorUI {
+/**
+ * The inline editor UI class.
+ *
+ * @extends module:ui/editorui/editorui~EditorUI
+ */ class InlineEditorUI extends EditorUI {
+    /**
+	 * The main (top–most) view of the editor UI.
+	 */ view;
+    /**
+	 * A normalized `config.toolbar` object.
+	 */ _toolbarConfig;
     /**
-     * @inheritDoc
-     */ get element() {
+	 * Creates an instance of the inline editor UI class.
+	 *
+	 * @param editor The editor instance.
+	 * @param view The view of the UI.
+	 */ constructor(editor, view){
+        super(editor);
+        this.view = view;
+        this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
+    }
+    /**
+	 * @inheritDoc
+	 */ get element() {
         return this.view.editable.element;
     }
     /**
-     * Initializes the UI.
-     */ init() {
+	 * Initializes the UI.
+	 */ init() {
         const editor = this.editor;
         const view = this.view;
         const editingView = editor.editing.view;
@@ -49,8 +68,8 @@ class InlineEditorUI extends EditorUI {
         this.fire('ready');
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         const view = this.view;
         const editingView = this.editor.editing.view;
@@ -58,8 +77,8 @@ class InlineEditorUI extends EditorUI {
         view.destroy();
     }
     /**
-     * Initializes the inline editor toolbar and its panel.
-     */ _initToolbar() {
+	 * Initializes the inline editor toolbar and its panel.
+	 */ _initToolbar() {
         const editor = this.editor;
         const view = this.view;
         const editableElement = view.editable.element;
@@ -83,8 +102,8 @@ class InlineEditorUI extends EditorUI {
         this.addToolbar(toolbar);
     }
     /**
-     * Enable the placeholder text on the editing root.
-     */ _initPlaceholder() {
+	 * Enable the placeholder text on the editing root.
+	 */ _initPlaceholder() {
         const editor = this.editor;
         const editingView = editor.editing.view;
         const editingRoot = editingView.document.getRoot();
@@ -102,23 +121,111 @@ class InlineEditorUI extends EditorUI {
             keepOnFocus: true
         });
     }
-    /**
-     * Creates an instance of the inline editor UI class.
-     *
-     * @param editor The editor instance.
-     * @param view The view of the UI.
-     */ constructor(editor, view){
-        super(editor);
-        this.view = view;
-        this._toolbarConfig = normalizeToolbarConfig(editor.config.get('toolbar'));
-    }
 }
 
-const toPx = toUnit('px');
-class InlineEditorUIView extends EditorUIView {
+const toPx = /* #__PURE__ */ toUnit('px');
+/**
+ * Inline editor UI view. Uses an nline editable and a floating toolbar.
+ */ class InlineEditorUIView extends EditorUIView {
     /**
-     * @inheritDoc
-     */ render() {
+	 * A floating toolbar view instance.
+	 */ toolbar;
+    /**
+	 * A balloon panel view instance.
+	 */ panel;
+    /**
+	 * A set of positioning functions used by the {@link #panel} to float around
+	 * {@link #element editableElement}.
+	 *
+	 * The positioning functions are as follows:
+	 *
+	 * * West:
+	 *
+	 * ```
+	 * [ Panel ]
+	 * +------------------+
+	 * | #editableElement |
+	 * +------------------+
+	 *
+	 * +------------------+
+	 * | #editableElement |
+	 * |[ Panel ]         |
+	 * |                  |
+	 * +------------------+
+	 *
+	 * +------------------+
+	 * | #editableElement |
+	 * +------------------+
+	 * [ Panel ]
+	 * ```
+	 *
+	 * * East:
+	 *
+	 * ```
+	 *            [ Panel ]
+	 * +------------------+
+	 * | #editableElement |
+	 * +------------------+
+	 *
+	 * +------------------+
+	 * | #editableElement |
+	 * |         [ Panel ]|
+	 * |                  |
+	 * +------------------+
+	 *
+	 * +------------------+
+	 * | #editableElement |
+	 * +------------------+
+	 *            [ Panel ]
+	 * ```
+	 *
+	 * See: {@link module:utils/dom/position~Options#positions}.
+	 */ panelPositions;
+    /**
+	 * Editable UI view.
+	 */ editable;
+    /**
+	 * An instance of the resize observer that helps dynamically determine the geometry of the toolbar
+	 * and manage items that do not fit into a single row.
+	 *
+	 * **Note:** Created in {@link #render}.
+	 */ _resizeObserver;
+    /**
+	 * Creates an instance of the inline 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 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 Configuration options for the view instance.
+	 * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
+	 * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
+	 * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+	 */ constructor(locale, editingView, editableElement, options = {}){
+        super(locale);
+        const t = locale.t;
+        this.toolbar = new ToolbarView(locale, {
+            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
+            isFloating: true
+        });
+        this.set('viewportTopOffset', 0);
+        this.panel = new BalloonPanelView(locale);
+        this.panelPositions = this._getPanelPositions();
+        this.panel.extendTemplate({
+            attributes: {
+                class: 'ck-toolbar-container'
+            }
+        });
+        this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
+            label: (editableView)=>{
+                return t('Rich Text Editor. Editing area: %0', editableView.name);
+            }
+        });
+        this._resizeObserver = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
         super.render();
         this.body.add(this.panel);
         this.registerChild(this.editable);
@@ -134,19 +241,19 @@ class InlineEditorUIView extends EditorUIView {
         }
     }
     /**
-     * @inheritDoc
-     */ destroy() {
+	 * @inheritDoc
+	 */ destroy() {
         super.destroy();
         if (this._resizeObserver) {
             this._resizeObserver.destroy();
         }
     }
     /**
-     * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
-     *
-     * @param editableRect Rect of the {@link #element}.
-     * @param panelRect Rect of the {@link #panel}.
-     */ _getPanelPositionTop(editableRect, panelRect) {
+	 * Determines the panel top position of the {@link #panel} in {@link #panelPositions}.
+	 *
+	 * @param editableRect Rect of the {@link #element}.
+	 * @param panelRect Rect of the {@link #panel}.
+	 */ _getPanelPositionTop(editableRect, panelRect) {
         let top;
         if (editableRect.top > panelRect.height + this.viewportTopOffset) {
             top = editableRect.top - panelRect.height;
@@ -158,10 +265,10 @@ class InlineEditorUIView extends EditorUIView {
         return top;
     }
     /**
-     * Returns the positions for {@link #panelPositions}.
-     *
-     * See: {@link module:utils/dom/position~Options#positions}.
-     */ _getPanelPositions() {
+	 * Returns the positions for {@link #panelPositions}.
+	 *
+	 * See: {@link module:utils/dom/position~Options#positions}.
+	 */ _getPanelPositions() {
         const positions = [
             (editableRect, panelRect)=>{
                 return {
@@ -190,198 +297,29 @@ class InlineEditorUIView extends EditorUIView {
             return positions.reverse();
         }
     }
-    /**
-     * Creates an instance of the inline 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 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 Configuration options for the view instance.
-     * @param options.shouldToolbarGroupWhenFull When set `true` enables automatic items grouping
-     * in the main {@link module:editor-inline/inlineeditoruiview~InlineEditorUIView#toolbar toolbar}.
-     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
-     */ constructor(locale, editingView, editableElement, options = {}){
-        super(locale);
-        const t = locale.t;
-        this.toolbar = new ToolbarView(locale, {
-            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
-            isFloating: true
-        });
-        this.set('viewportTopOffset', 0);
-        this.panel = new BalloonPanelView(locale);
-        this.panelPositions = this._getPanelPositions();
-        this.panel.extendTemplate({
-            attributes: {
-                class: 'ck-toolbar-container'
-            }
-        });
-        this.editable = new InlineEditableUIView(locale, editingView, editableElement, {
-            label: (editableView)=>{
-                return t('Rich Text Editor. Editing area: %0', editableView.name);
-            }
-        });
-        this._resizeObserver = null;
-    }
 }
 
 /**
- * The {@glink installation/getting-started/predefined-builds#inline-editor inline editor} implementation.
- * It uses an inline editable and a floating toolbar.
+ * The inline editor implementation. It uses an inline editable and a floating toolbar.
  * See the {@glink examples/builds/inline-editor demo}.
  *
  * In order to create a inline editor instance, use the static
  * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method.
- *
- * # Inline editor and inline build
- *
- * The inline editor can be used directly from source (if you installed the
- * [`@ckeditor/ckeditor5-editor-inline`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline) package)
- * but it is also available in the {@glink installation/getting-started/predefined-builds#inline-editor inline build}.
- *
- * {@glink installation/getting-started/predefined-builds Builds}
- * are ready-to-use editors with plugins bundled in. When using the editor from
- * source you need to take care of loading all plugins by yourself
- * (through the {@link module:core/editor/editorconfig~EditorConfig#plugins `config.plugins`} option).
- * Using the editor from source gives much better flexibility and allows easier customization.
- *
- * Read more about initializing the editor from source or as a build in
- * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
- */ class InlineEditor extends ElementApiMixin(Editor) {
+ */ class InlineEditor extends /* #__PURE__ */ ElementApiMixin(Editor) {
     /**
-     * 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`.
-     */ 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();
-        return super.destroy().then(()=>{
-            if (this.sourceElement) {
-                this.updateSourceElement(data);
-            }
-        });
-    }
-    /**
-     * Creates a new inline editor instance.
-     *
-     * There are three general ways how the editor can be initialized.
-     *
-     * # Using an existing DOM element (and loading data from it)
-     *
-     * You can initialize the editor using an existing DOM element:
-     *
-     * ```ts
-     * InlineEditor
-     * 	.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 become the editable element.
-     *
-     * # 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 for the editor to work properly:
-     *
-     * ```ts
-     * InlineEditor
-     * 	.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.
-     *
-     * # Using an existing 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
-     * InlineEditor
-     * 	.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.
-     *
-     * # Using the editor from source
-     *
-     * The code samples listed in the previous sections of this documentation assume that you are using an
-     * {@glink installation/getting-started/predefined-builds editor build} (for example – `@ckeditor/ckeditor5-build-inline`).
-     *
-     * If you want to use the inline editor from source (`@ckeditor/ckeditor5-editor-inline/src/inlineeditor`),
-     * you need to define the list of
-     * {@link module:core/editor/editorconfig~EditorConfig#plugins plugins to be initialized} and
-     * {@link module:core/editor/editorconfig~EditorConfig#toolbar toolbar items}. Read more about using the editor from
-     * source in the {@glink installation/advanced/alternative-setups/integrating-from-source-webpack dedicated guide}.
-     *
-     * @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.
-     * The editor data will be set back to the original element once the editor is destroyed only if the
-     * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
-     * option is set to `true`.
-     *
-     * 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-inline/inlineeditorui~InlineEditorUI#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 = {}) {
-        return new Promise((resolve)=>{
-            if (isElement(sourceElementOrData) && sourceElementOrData.tagName === 'TEXTAREA') {
-                // Documented in core/editor/editor.js
-                // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-                throw new CKEditorError('editor-wrong-element', null);
-            }
-            const editor = new this(sourceElementOrData, config);
-            resolve(editor.initPlugins().then(()=>editor.ui.init()).then(()=>editor.data.init(editor.config.get('initialData'))).then(()=>editor.fire('ready')).then(()=>editor));
-        });
-    }
+	 * @inheritDoc
+	 */ ui;
     /**
-     * Creates an instance of the inline editor.
-     *
-     * **Note:** Do not use the constructor to create editor instances. Use the static
-     * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
-     *
-     * @param sourceElementOrData The DOM element that will be the source for the created editor
-     * (on which the editor will be initialized) or initial data for the editor. For more information see
-     * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
-     * @param config The editor configuration.
-     */ constructor(sourceElementOrData, config = {}){
+	 * Creates an instance of the inline editor.
+	 *
+	 * **Note:** Do not use the constructor to create editor instances. Use the static
+	 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`} method instead.
+	 *
+	 * @param sourceElementOrData The DOM element that will be the source for the created editor
+	 * (on which the editor will be initialized) or initial data for the editor. For more information see
+	 * {@link module:editor-inline/inlineeditor~InlineEditor.create `InlineEditor.create()`}.
+	 * @param config The editor configuration.
+	 */ constructor(sourceElementOrData, config = {}){
         // If both `config.initialData` and initial data parameter in `create()` are set, then throw.
         if (!isElement(sourceElementOrData) && config.initialData !== undefined) {
             // Documented in core/editor/editorconfig.jsdoc.
@@ -404,22 +342,119 @@ class InlineEditorUIView extends EditorUIView {
         this.ui = new InlineEditorUI(this, view);
         attachToForm(this);
     }
+    /**
+	 * 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`.
+	 */ 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();
+        return super.destroy().then(()=>{
+            if (this.sourceElement) {
+                this.updateSourceElement(data);
+            }
+        });
+    }
+    /**
+	 * Creates a new inline editor instance.
+	 *
+	 * There are three general ways how the editor can be initialized.
+	 *
+	 * # Using an existing DOM element (and loading data from it)
+	 *
+	 * You can initialize the editor using an existing DOM element:
+	 *
+	 * ```ts
+	 * InlineEditor
+	 * 	.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 become the editable element.
+	 *
+	 * # 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 for the editor to work properly:
+	 *
+	 * ```ts
+	 * InlineEditor
+	 * 	.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.
+	 *
+	 * # Using an existing 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
+	 * InlineEditor
+	 * 	.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.
+	 * The editor data will be set back to the original element once the editor is destroyed only if the
+	 * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy updateSourceElementOnDestroy}
+	 * option is set to `true`.
+	 *
+	 * 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-inline/inlineeditorui~InlineEditorUI#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 = {}) {
+        return new Promise((resolve)=>{
+            if (isElement(sourceElementOrData) && sourceElementOrData.tagName === 'TEXTAREA') {
+                // Documented in core/editor/editor.js
+                // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+                throw new CKEditorError('editor-wrong-element', null);
+            }
+            const editor = new this(sourceElementOrData, config);
+            resolve(editor.initPlugins().then(()=>editor.ui.init()).then(()=>editor.data.init(editor.config.get('initialData'))).then(()=>editor.fire('ready')).then(()=>editor));
+        });
+    }
 }
-/**
- * The {@link module:core/context~Context} class.
- *
- * Exposed as static editor field for easier access in editor builds.
- */ InlineEditor.Context = Context;
-/**
- * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
- *
- * Exposed as static editor field for easier access in editor builds.
- */ InlineEditor.EditorWatchdog = EditorWatchdog;
-/**
- * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
- *
- * Exposed as static editor field for easier access in editor builds.
- */ InlineEditor.ContextWatchdog = ContextWatchdog;
 function getInitialData(sourceElementOrData) {
     return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
 }