@ckeditor/ckeditor5-editor-inline 0.0.0-internal-20241017.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+Changelog
+=========
+
+All changes in the package are documented in https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md.

package/LICENSE.md

@@ -0,0 +1,21 @@
+Software License Agreement
+==========================
+
+**Inline editor implementation** – https://github.com/ckeditor/ckeditor5-editor-inline <br>
+Copyright (c) 2003–2024, [CKSource Holding sp. z o.o.](https://cksource.com) All rights reserved.
+
+Licensed under the terms of [GNU General Public License Version 2 or later](http://www.gnu.org/licenses/gpl.html).
+
+Sources of Intellectual Property Included in CKEditor
+-----------------------------------------------------
+
+Where not otherwise indicated, all CKEditor content is authored by CKSource engineers and consists of CKSource-owned intellectual property. In some specific instances, CKEditor will incorporate work done by developers outside of CKSource with their express permission.
+
+The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
+
+* Lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+
+Trademarks
+----------
+
+**CKEditor** is a trademark of [CKSource Holding sp. z o.o.](https://cksource.com) All other brand and product names are trademarks, registered trademarks, or service marks of their respective holders.

package/README.md

@@ -0,0 +1,26 @@
+CKEditor 5 inline editor implementation
+========================================
+
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-editor-inline.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-inline)
+[![Coverage Status](https://coveralls.io/repos/github/ckeditor/ckeditor5/badge.svg?branch=master)](https://coveralls.io/github/ckeditor/ckeditor5?branch=master)
+[![Build Status](https://travis-ci.com/ckeditor/ckeditor5.svg?branch=master)](https://app.travis-ci.com/github/ckeditor/ckeditor5)
+
+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/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

@@ -0,0 +1,4 @@
+/*!
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */(()=>{var t={693:(t,e,o)=>{"use strict";o.d(e,{A:()=>a});var r=o(758),n=o.n(r),i=o(935),s=o.n(i)()(n());s.push([t.id,".ck.ck-menu-bar{border:none;border-bottom:1px solid var(--ck-color-toolbar-border)}",""]);const a=s},935:t=>{"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var o="",r=void 0!==e[5];return e[4]&&(o+="@supports (".concat(e[4],") {")),e[2]&&(o+="@media ".concat(e[2]," {")),r&&(o+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),o+=t(e),r&&(o+="}"),e[2]&&(o+="}"),e[4]&&(o+="}"),o})).join("")},e.i=function(t,o,r,n,i){"string"==typeof t&&(t=[[null,t,void 0]]);var s={};if(r)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(s[l]=!0)}for(var c=0;c<t.length;c++){var u=[].concat(t[c]);r&&s[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),o&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=o):u[2]=o),n&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=n):u[4]="".concat(n)),e.push(u))}},e}},758:t=>{"use strict";t.exports=function(t){return t[1]}},591:t=>{"use strict";var e=[];function o(t){for(var o=-1,r=0;r<e.length;r++)if(e[r].identifier===t){o=r;break}return o}function r(t,r){for(var i={},s=[],a=0;a<t.length;a++){var l=t[a],c=r.base?l[0]+r.base:l[0],u=i[c]||0,d="".concat(c," ").concat(u);i[c]=u+1;var h=o(d),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==h)e[h].references++,e[h].updater(p);else{var f=n(p,r);r.byIndex=a,e.splice(a,0,{identifier:d,updater:f,references:1})}s.push(d)}return s}function n(t,e){var o=e.domAPI(e);o.update(t);return function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap&&e.supports===t.supports&&e.layer===t.layer)return;o.update(t=e)}else o.remove()}}t.exports=function(t,n){var i=r(t=t||[],n=n||{});return function(t){t=t||[];for(var s=0;s<i.length;s++){var a=o(i[s]);e[a].references--}for(var l=r(t,n),c=0;c<i.length;c++){var u=o(i[c]);0===e[u].references&&(e[u].updater(),e.splice(u,1))}i=l}}},128:t=>{"use strict";var e={};t.exports=function(t,o){var r=function(t){if(void 0===e[t]){var o=document.querySelector(t);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(t){o=null}e[t]=o}return e[t]}(t);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(o)}},51:t=>{"use strict";t.exports=function(t){var e=document.createElement("style");return t.setAttributes(e,t.attributes),t.insert(e,t.options),e}},21:t=>{"use strict";t.exports=function(t,e){Object.keys(e).forEach((function(o){t.setAttribute(o,e[o])}))}},639:t=>{"use strict";var e,o=(e=[],function(t,o){return e[t]=o,e.filter(Boolean).join("\n")});function r(t,e,r,n){var i;if(r)i="";else{i="",n.supports&&(i+="@supports (".concat(n.supports,") {")),n.media&&(i+="@media ".concat(n.media," {"));var s=void 0!==n.layer;s&&(i+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),i+=n.css,s&&(i+="}"),n.media&&(i+="}"),n.supports&&(i+="}")}if(t.styleSheet)t.styleSheet.cssText=o(e,i);else{var a=document.createTextNode(i),l=t.childNodes;l[e]&&t.removeChild(l[e]),l.length?t.insertBefore(a,l[e]):t.appendChild(a)}}var n={singleton:null,singletonCounter:0};t.exports=function(t){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=n.singletonCounter++,o=n.singleton||(n.singleton=t.insertStyleElement(t));return{update:function(t){r(o,e,!1,t)},remove:function(t){r(o,e,!0,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(r){var n=e[r];if(void 0!==n)return n.exports;var i=e[r]={id:r,exports:{}};return t[r](i,i.exports,o),i.exports}o.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return o.d(e,{a:e}),e},o.d=(t,e)=>{for(var r in e)o.o(e,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},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 r={};(()=>{"use strict";o.r(r),o.d(r,{InlineEditor:()=>G});var t=o(782),e=o(584),n=o(311),i=o(783);class s 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,r=e.editable,n=o.document.getRoot();r.name=n.rootName,e.render();const i=r.element;this.setEditableElement(r.name,i),r.bind("isFocused").to(this.focusTracker),o.attachDomRoot(i),this._initPlaceholder(),this._initToolbar(),e.menuBarView&&this._initMenuBar(e.menuBarView),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,r=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})})),r.fillFromConfig(this._toolbarConfig,this.componentFactory),this.addToolbar(r)}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=e.document.getRoot(),r=t.config.get("placeholder");if(r){const t="string"==typeof r?r:r[o.rootName];t&&(o.placeholder=t)}(0,i.enablePlaceholder)({view:e,element:o,isDirectHost:!1,keepOnFocus:!0})}}var a=o(591),l=o.n(a),c=o(639),u=o.n(c),d=o(128),h=o.n(d),p=o(21),f=o.n(p),b=o(51),v=o.n(b),g=o(693),m={attributes:{"data-cke":!0}};m.setAttributes=f(),m.insert=h().bind(null,"head"),m.domAPI=u(),m.insertStyleElement=v();l()(g.A,m);g.A&&g.A.locals&&g.A.locals;const w=(0,e.toUnit)("px");class y extends n.EditorUIView{constructor(t,e,o,r={}){super(t),this.toolbar=new n.ToolbarView(t,{shouldGroupWhenFull:r.shouldToolbarGroupWhenFull,isFloating:!0}),r.useMenuBar&&(this.menuBarView=new n.MenuBarView(t)),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:r.label}),this._resizeObserver=null}render(){super.render(),this.body.add(this.panel),this.registerChild(this.editable),this.menuBarView?this.panel.content.addMany([this.menuBarView,this.toolbar]):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=w(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 O=function(t){return null!=t&&"object"==typeof t};const T="object"==typeof global&&global&&global.Object===Object&&global;var E="object"==typeof self&&self&&self.Object===Object&&self;const j=(T||E||Function("return this")()).Symbol;var x=Object.prototype,P=x.hasOwnProperty,_=x.toString,S=j?j.toStringTag:void 0;const F=function(t){var e=P.call(t,S),o=t[S];try{t[S]=void 0;var r=!0}catch(t){}var n=_.call(t);return r&&(e?t[S]=o:delete t[S]),n};var C=Object.prototype.toString;const A=function(t){return C.call(t)};var B=j?j.toStringTag:void 0;const M=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":B&&B in Object(t)?F(t):A(t)};const V=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var I=Function.prototype,D=Object.prototype,k=I.toString,N=D.hasOwnProperty,R=k.call(Object);const z=function(t){if(!O(t)||"[object Object]"!=M(t))return!1;var e=V(t);if(null===e)return!0;var o=N.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&k.call(o)==R};const W=function(t){return O(t)&&1===t.nodeType&&!z(t)};class G extends((0,t.ElementApiMixin)(t.Editor)){static get editorName(){return"InlineEditor"}constructor(o,r={}){if(!K(o)&&void 0!==r.initialData)throw new e.CKEditorError("editor-create-initial-data",null);super(r),this.config.define("menuBar.isVisible",!1),void 0===this.config.get("initialData")&&this.config.set("initialData",function(t){return K(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),K(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o));const n=!this.config.get("toolbar.shouldNotGroupWhenFull"),i=this.config.get("menuBar"),a=new y(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:n,useMenuBar:i.isVisible,label:this.config.get("label")});this.ui=new s(this,a),(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((r=>{if(K(t)&&"TEXTAREA"===t.tagName)throw new e.CKEditorError("editor-wrong-element",null);const n=new this(t,o);r(n.initPlugins().then((()=>n.ui.init())).then((()=>n.data.init(n.config.get("initialData")))).then((()=>n.fire("ready"))).then((()=>n)))}))}}function K(t){return W(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=r})();

package/dist/index-content.css

@@ -0,0 +1,4 @@
+/**
+ * @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
+ */

package/dist/index-editor.css

@@ -0,0 +1,8 @@
+/**
+ * @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
+ */
+.ck.ck-menu-bar{
+	border:none;
+	border-bottom:1px solid var(--ck-color-toolbar-border);
+}

package/dist/index.css

@@ -0,0 +1,15 @@
+/**
+ * @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
+ */
+/*
+ * 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
+ */
+
+.ck.ck-menu-bar {
+	border: none;
+	border-bottom: 1px solid var(--ck-color-toolbar-border);
+}
+
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../theme/inlineeditor.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,GAAG,CAAC;AAC5E,CAAC,CDAC;;AAEF,CAAA,EAAA,CAAA,EAAA,CAAA,IAAA,CAAA,GAAA,CAAA;ACCA,CDAC,MAAA,CAAA,CAAA,IAAY;ACCb,CDAC,MAAA,CAAA,MAAA,CAAA,CAAA,GAAA,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,KAAA,CAAA,OAAA,CAAA,MAAA,CAAuD;AACxD;;ACEA,CAAC,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC","file":"index.css.map","sourcesContent":["/*\n * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n.ck.ck-menu-bar {\n\tborder: none;\n\tborder-bottom: 1px solid var(--ck-color-toolbar-border);\n}\n","/*\n * Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.\n * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license\n */\n\n.ck.ck-menu-bar {\n\tborder: none;\n\tborder-bottom: 1px solid var(--ck-color-toolbar-border);\n}\n\n/*# sourceMappingURL=index.css.map */"]}

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @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
+ */
+/**
+ * @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
+ */
+/**
+ * @module editor-inline
+ */
+export { default as InlineEditor } from './inlineeditor.js';

package/dist/index.js

@@ -0,0 +1,488 @@
+/**
+ * @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 } 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, MenuBarView, 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';
+
+/**
+ * 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;
+    /**
+	 * 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() {
+        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 InlineEditor.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 inline 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.
+        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();
+        if (view.menuBarView) {
+            this._initMenuBar(view.menuBarView);
+        }
+        this.fire('ready');
+    }
+    /**
+	 * @inheritDoc
+	 */ destroy() {
+        super.destroy();
+        const view = this.view;
+        const editingView = this.editor.editing.view;
+        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 editableElement = view.editable.element;
+        const toolbar = view.toolbar;
+        // Set–up the view#panel.
+        view.panel.bind('isVisible').to(this.focusTracker, 'isFocused');
+        view.bind('viewportTopOffset').to(this, 'viewportOffset', ({ top })=>top || 0);
+        // https://github.com/ckeditor/ckeditor5-editor-inline/issues/4
+        view.listenTo(editor.ui, 'update', ()=>{
+            // Don't pin if the panel is not already visible. It prevents the panel
+            // showing up when there's no focus in the UI.
+            if (view.panel.isVisible) {
+                view.panel.pin({
+                    target: editableElement,
+                    positions: view.panelPositions
+                });
+            }
+        });
+        toolbar.fillFromConfig(this._toolbarConfig, this.componentFactory);
+        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(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('placeholder');
+        if (placeholder) {
+            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
+            if (placeholderText) {
+                editingRoot.placeholder = placeholderText;
+            }
+        }
+        enablePlaceholder({
+            view: editingView,
+            element: editingRoot,
+            isDirectHost: false,
+            keepOnFocus: true
+        });
+    }
+}
+
+const toPx = /* #__PURE__ */ toUnit('px');
+/**
+ * Inline editor UI view. Uses an nline editable and a floating toolbar.
+ */ class InlineEditorUIView extends EditorUIView {
+    /**
+	 * 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.
+	 * @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, editableElement, options = {}){
+        super(locale);
+        this.toolbar = new ToolbarView(locale, {
+            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull,
+            isFloating: true
+        });
+        if (options.useMenuBar) {
+            this.menuBarView = new MenuBarView(locale);
+        }
+        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: options.label
+        });
+        this._resizeObserver = null;
+    }
+    /**
+	 * @inheritDoc
+	 */ render() {
+        super.render();
+        this.body.add(this.panel);
+        this.registerChild(this.editable);
+        if (this.menuBarView) {
+            // Set toolbar as a child of a stickyPanel and makes toolbar sticky.
+            this.panel.content.addMany([
+                this.menuBarView,
+                this.toolbar
+            ]);
+        } else {
+            this.panel.content.add(this.toolbar);
+        }
+        const options = this.toolbar.options;
+        // Set toolbar's max-width on the initialization and update it on the editable resize,
+        // if 'shouldToolbarGroupWhenFull' in config is set to 'true'.
+        if (options.shouldGroupWhenFull) {
+            const editableElement = this.editable.element;
+            this._resizeObserver = new ResizeObserver(editableElement, ()=>{
+                this.toolbar.maxWidth = toPx(new Rect(editableElement).width);
+            });
+        }
+    }
+    /**
+	 * @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) {
+        let top;
+        if (editableRect.top > panelRect.height + this.viewportTopOffset) {
+            top = editableRect.top - panelRect.height;
+        } else if (editableRect.bottom > panelRect.height + this.viewportTopOffset + 50) {
+            top = this.viewportTopOffset;
+        } else {
+            top = editableRect.bottom;
+        }
+        return top;
+    }
+    /**
+	 * Returns the positions for {@link #panelPositions}.
+	 *
+	 * See: {@link module:utils/dom/position~Options#positions}.
+	 */ _getPanelPositions() {
+        const positions = [
+            (editableRect, panelRect)=>{
+                return {
+                    top: this._getPanelPositionTop(editableRect, panelRect),
+                    left: editableRect.left,
+                    name: 'toolbar_west',
+                    config: {
+                        withArrow: false
+                    }
+                };
+            },
+            (editableRect, panelRect)=>{
+                return {
+                    top: this._getPanelPositionTop(editableRect, panelRect),
+                    left: editableRect.left + editableRect.width - panelRect.width,
+                    name: 'toolbar_east',
+                    config: {
+                        withArrow: false
+                    }
+                };
+            }
+        ];
+        if (this.locale.uiLanguageDirection === 'ltr') {
+            return positions;
+        } else {
+            return positions.reverse();
+        }
+    }
+}
+
+/**
+ * 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.
+ */ class InlineEditor extends /* #__PURE__ */ ElementApiMixin(Editor) {
+    /**
+	 * @inheritdoc
+	 */ static get editorName() {
+        return 'InlineEditor';
+    }
+    /**
+	 * @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 = {}){
+        // 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.
+            // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
+            throw new CKEditorError('editor-create-initial-data', null);
+        }
+        super(config);
+        this.config.define('menuBar.isVisible', false);
+        if (this.config.get('initialData') === undefined) {
+            this.config.set('initialData', getInitialData(sourceElementOrData));
+        }
+        this.model.document.createRoot();
+        if (isElement(sourceElementOrData)) {
+            this.sourceElement = sourceElementOrData;
+            secureSourceElement(this, sourceElementOrData);
+        }
+        const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
+        const menuBarConfig = this.config.get('menuBar');
+        const view = new InlineEditorUIView(this.locale, this.editing.view, this.sourceElement, {
+            shouldToolbarGroupWhenFull,
+            useMenuBar: menuBarConfig.isVisible,
+            label: this.config.get('label')
+        });
+        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));
+        });
+    }
+}
+function getInitialData(sourceElementOrData) {
+    return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
+}
+function isElement(value) {
+    return isElement$1(value);
+}
+
+export { InlineEditor };
+//# sourceMappingURL=index.js.map