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

package/package.json

@@ -1,26 +1,9 @@
 {
   "name": "@ckeditor/ckeditor5-editor-inline",
-  "version": "47.6.1",
+  "version": "48.0.0-alpha.1",
   "description": "Inline editor implementation for CKEditor 5.",
-  "keywords": [
-    "ckeditor",
-    "ckeditor5",
-    "ckeditor 5",
-    "ckeditor5-editor",
-    "ckeditor5-dll"
-  ],
-  "type": "module",
-  "main": "src/index.js",
-  "dependencies": {
-    "@ckeditor/ckeditor5-core": "47.6.1",
-    "@ckeditor/ckeditor5-engine": "47.6.1",
-    "@ckeditor/ckeditor5-ui": "47.6.1",
-    "@ckeditor/ckeditor5-utils": "47.6.1",
-    "ckeditor5": "47.6.1",
-    "es-toolkit": "1.39.5"
-  },
-  "author": "CKSource (http://cksource.com/)",
   "license": "SEE LICENSE IN LICENSE.md",
+  "author": "CKSource (http://cksource.com/)",
   "homepage": "https://ckeditor.com/ckeditor-5",
   "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
@@ -28,34 +11,29 @@
     "url": "https://github.com/ckeditor/ckeditor5.git",
     "directory": "packages/ckeditor5-editor-inline"
   },
+  "keywords": [
+    "ckeditor",
+    "ckeditor5",
+    "ckeditor 5",
+    "ckeditor5-editor"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@ckeditor/ckeditor5-core": "48.0.0-alpha.1",
+    "@ckeditor/ckeditor5-engine": "48.0.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "48.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "48.0.0-alpha.1",
+    "es-toolkit": "1.45.1"
+  },
   "files": [
     "dist",
-    "lang",
-    "src/**/*.js",
-    "src/**/*.d.ts",
-    "theme",
-    "build",
     "CHANGELOG.md"
   ],
-  "types": "src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./src/index.d.ts",
-      "import": "./src/index.js",
-      "default": "./src/index.js"
-    },
-    "./dist/*": {
-      "types": "./src/index.d.ts",
-      "import": "./dist/*",
-      "default": "./dist/*"
-    },
-    "./src/*": {
-      "types": "./src/*.d.ts",
-      "import": "./src/*",
-      "default": "./src/*"
-    },
-    "./build/*": "./build/*",
-    "./theme/*": "./theme/*",
-    "./package.json": "./package.json"
-  }
+  "types": "./dist/index.d.ts"
 }

package/build/editor-inline.js

@@ -1,4 +0,0 @@
-/*!
- * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md.
- */(()=>{var e={163:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},237:e=>{"use strict";e.exports=CKEditor5.dll},305:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map(function(t){var o="",i=void 0!==t[5];return t[4]&&(o+="@supports (".concat(t[4],") {")),t[2]&&(o+="@media ".concat(t[2]," {")),i&&(o+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),o+=e(t),i&&(o+="}"),t[2]&&(o+="}"),t[4]&&(o+="}"),o}).join("")},t.i=function(e,o,i,r,n){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(i)for(var a=0;a<this.length;a++){var l=this[a][0];null!=l&&(s[l]=!0)}for(var c=0;c<e.length;c++){var u=[].concat(e[c]);i&&s[u[0]]||(void 0!==n&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=n),o&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=o):u[2]=o),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),t.push(u))}},t}},311:(e,t,o)=>{e.exports=o(237)("./src/ui.js")},424:e=>{"use strict";var t={};e.exports=function(e,o){var i=function(e){if(void 0===t[e]){var o=document.querySelector(e);if(window.HTMLIFrameElement&&o instanceof window.HTMLIFrameElement)try{o=o.contentDocument.head}catch(e){o=null}t[e]=o}return t[e]}(e);if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(o)}},435:(e,t,o)=>{"use strict";o.d(t,{A:()=>a});var i=o(792),r=o.n(i),n=o(305),s=o.n(n)()(r());s.push([e.id,".ck.ck-menu-bar{border:none;border-bottom:1px solid var(--ck-color-toolbar-border)}",""]);const a=s},517:e=>{"use strict";e.exports=function(e,t){Object.keys(t).forEach(function(o){e.setAttribute(o,t[o])})}},584:(e,t,o)=>{e.exports=o(237)("./src/utils.js")},719:e=>{"use strict";var t=[];function o(e){for(var o=-1,i=0;i<t.length;i++)if(t[i].identifier===e){o=i;break}return o}function i(e,i){for(var n={},s=[],a=0;a<e.length;a++){var l=e[a],c=i.base?l[0]+i.base:l[0],u=n[c]||0,d="".concat(c," ").concat(u);n[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)t[h].references++,t[h].updater(p);else{var f=r(p,i);i.byIndex=a,t.splice(a,0,{identifier:d,updater:f,references:1})}s.push(d)}return s}function r(e,t){var o=t.domAPI(t);o.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;o.update(e=t)}else o.remove()}}e.exports=function(e,r){var n=i(e=e||[],r=r||{});return function(e){e=e||[];for(var s=0;s<n.length;s++){var a=o(n[s]);t[a].references--}for(var l=i(e,r),c=0;c<n.length;c++){var u=o(n[c]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}n=l}}},782:(e,t,o)=>{e.exports=o(237)("./src/core.js")},783:(e,t,o)=>{e.exports=o(237)("./src/engine.js")},792:e=>{"use strict";e.exports=function(e){return e[1]}},863:e=>{"use strict";var t,o=(t=[],function(e,o){return t[e]=o,t.filter(Boolean).join("\n")});function i(e,t,i,r){var n;if(i)n="";else{n="",r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var s=void 0!==r.layer;s&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,s&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}")}if(e.styleSheet)e.styleSheet.cssText=o(t,n);else{var a=document.createTextNode(n),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(a,l[t]):e.appendChild(a)}}var r={singleton:null,singletonCounter:0};e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=r.singletonCounter++,o=r.singleton||(r.singleton=e.insertStyleElement(e));return{update:function(e){i(o,t,!1,e)},remove:function(e){i(o,t,!0,e)}}}}},t={};function o(i){var r=t[i];if(void 0!==r)return r.exports;var n=t[i]={id:i,exports:{}};return e[i](n,n.exports,o),n.exports}o.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return o.d(t,{a:t}),t},o.d=(e,t)=>{for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};(()=>{"use strict";o.r(i),o.d(i,{InlineEditor:()=>T,InlineEditorUI:()=>s,InlineEditorUIView:()=>y});var e=o(782),t=o(584),r=o(311),n=o(783);class s extends r.EditorUI{view;_toolbarConfig;constructor(e,t){super(e),this.view=t,this._toolbarConfig=(0,r.normalizeToolbarConfig)(e.config.get("toolbar"))}get element(){return this.view.editable.element}init(){const e=this.editor,t=this.view,o=e.editing.view,i=t.editable,r=o.document.getRoot();i.name=r.rootName,t.render();const n=i.element;this.setEditableElement(i.name,n),i.bind("isFocused").to(this.focusTracker),o.attachDomRoot(n),this._initPlaceholder(),this._initToolbar(),t.menuBarView&&this.initMenuBar(t.menuBarView),this.fire("ready")}destroy(){super.destroy();const e=this.view,t=this.editor.editing.view;t.getDomRoot(e.editable.name)&&t.detachDomRoot(e.editable.name),e.destroy()}_initToolbar(){const e=this.editor,t=this.view,o=t.editable.element,i=t.toolbar;t.panel.bind("isVisible").to(this.focusTracker,"isFocused"),t.bind("viewportTopOffset").to(this,"viewportOffset",({visualTop:e})=>e||0),t.listenTo(e.ui,"update",()=>{t.panel.isVisible&&t.panel.pin({target:o,positions:t.panelPositions})}),i.fillFromConfig(this._toolbarConfig,this.componentFactory),this.addToolbar(i)}_initPlaceholder(){const e=this.editor,t=e.editing.view,o=t.document.getRoot(),i=e.config.get("placeholder");if(i){const e="string"==typeof i?i:i[o.rootName];e&&(o.placeholder=e)}(0,n.enableViewPlaceholder)({view:t,element:o,isDirectHost:!1,keepOnFocus:!0})}}var a=o(719),l=o.n(a),c=o(863),u=o.n(c),d=o(424),h=o.n(d),p=o(517),f=o.n(p),b=o(163),m=o.n(b),g=o(435),v={attributes:{"data-cke":!0}};v.setAttributes=f(),v.insert=h().bind(null,"head"),v.domAPI=u(),v.insertStyleElement=m();l()(g.A,v);g.A&&g.A.locals&&g.A.locals;const w=(0,t.toUnit)("px");class y extends r.EditorUIView{toolbar;panel;panelPositions;editable;_resizeObserver;constructor(e,t,o,i={}){super(e),this.toolbar=new r.ToolbarView(e,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),i.useMenuBar&&(this.menuBarView=new r.MenuBarView(e)),this.set("viewportTopOffset",0),this.panel=new r.BalloonPanelView(e),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new r.InlineEditableUIView(e,t,o,{label:i.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 e=this.editable.element;this._resizeObserver=new t.ResizeObserver(e,()=>{this.toolbar.maxWidth=w(new t.Rect(e).width)})}}destroy(){super.destroy(),this._resizeObserver&&this._resizeObserver.destroy()}_getPanelPositionTop(e,t){let o;return o=e.top>t.height+this.viewportTopOffset?e.top-t.height:e.bottom>t.height+this.viewportTopOffset+50?this.viewportTopOffset:e.bottom,o}_getPanelPositions(){const e=[(e,t)=>({top:this._getPanelPositionTop(e,t),left:e.left,name:"toolbar_west",config:{withArrow:!1}}),(e,t)=>({top:this._getPanelPositionTop(e,t),left:e.left+e.width-t.width,name:"toolbar_east",config:{withArrow:!1}})];return"ltr"===this.locale.uiLanguageDirection?e:e.reverse()}}function E(e){return function(e){return"object"==typeof e&&null!==e}(e)&&1===e.nodeType&&!function(e){if("object"!=typeof e)return!1;if(null==e)return!1;if(null===Object.getPrototypeOf(e))return!0;if("[object Object]"!==Object.prototype.toString.call(e)){const t=e[Symbol.toStringTag];return null!=t&&(!!Object.getOwnPropertyDescriptor(e,Symbol.toStringTag)?.writable&&e.toString()===`[object ${t}]`)}let t=e;for(;null!==Object.getPrototypeOf(t);)t=Object.getPrototypeOf(t);return Object.getPrototypeOf(e)===t}(e)}class T extends((0,e.ElementApiMixin)(e.Editor)){static get editorName(){return"InlineEditor"}ui;constructor(o,i={}){if(!O(o)&&void 0!==i.initialData)throw new t.CKEditorError("editor-create-initial-data",null);super(i),this.config.define("menuBar.isVisible",!1),void 0===this.config.get("initialData")&&this.config.set("initialData",function(e){return O(e)?(0,t.getDataFromElement)(e):e}(o)),this.model.document.createRoot(),O(o)&&(this.sourceElement=o,(0,e.secureSourceElement)(this,o));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=this.config.get("menuBar"),a=new y(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r,useMenuBar:n.isVisible,label:this.config.get("label")});this.ui=new s(this,a),(0,e.attachToForm)(this)}destroy(){const e=this.getData();return this.ui.destroy(),super.destroy().then(()=>{this.sourceElement&&this.updateSourceElement(e)})}static create(e,o={}){return new Promise(i=>{if(O(e)&&"TEXTAREA"===e.tagName)throw new t.CKEditorError("editor-wrong-element",null);const r=new this(e,o);i(r.initPlugins().then(()=>r.ui.init()).then(()=>r.data.init(r.config.get("initialData"))).then(()=>r.fire("ready")).then(()=>r))})}}function O(e){return E(e)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();

package/src/index.js

@@ -1,10 +0,0 @@
-/**
- * @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-inline
- */
-export { InlineEditor } from './inlineeditor.js';
-export { InlineEditorUI } from './inlineeditorui.js';
-export { InlineEditorUIView } from './inlineeditoruiview.js';

package/src/inlineeditor.js

@@ -1,194 +0,0 @@
-/**
- * @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-inline/inlineeditor
- */
-import { Editor, ElementApiMixin, attachToForm, secureSourceElement } from 'ckeditor5/src/core.js';
-import { getDataFromElement, CKEditorError } from 'ckeditor5/src/utils.js';
-import { InlineEditorUI } from './inlineeditorui.js';
-import { InlineEditorUIView } from './inlineeditoruiview.js';
-import { isElement as _isElement } from 'es-toolkit/compat';
-/**
- * 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.
- */
-export 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(value);
-}

package/src/inlineeditorui.js

@@ -1,134 +0,0 @@
-/**
- * @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 { EditorUI, normalizeToolbarConfig } from 'ckeditor5/src/ui.js';
-import { enableViewPlaceholder } from 'ckeditor5/src/engine.js';
-/**
- * The inline editor UI class.
- *
- * @extends module:ui/editorui/editorui~EditorUI
- */
-export 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;
-        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 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', ({ visualTop }) => visualTop || 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;
-            }
-        }
-        enableViewPlaceholder({
-            view: editingView,
-            element: editingRoot,
-            isDirectHost: false,
-            keepOnFocus: true
-        });
-    }
-}

package/src/inlineeditoruiview.js

@@ -1,207 +0,0 @@
-/**
- * @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-inline/inlineeditoruiview
- */
-import { BalloonPanelView, EditorUIView, InlineEditableUIView, MenuBarView, ToolbarView } from 'ckeditor5/src/ui.js';
-import { Rect, ResizeObserver, toUnit } from 'ckeditor5/src/utils.js';
-import '../theme/inlineeditor.css';
-const toPx = /* #__PURE__ */ toUnit('px');
-/**
- * Inline editor UI view. Uses an nline editable and a floating toolbar.
- */
-export 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~DomOptimalPositionOptions#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~DomOptimalPositionOptions#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();
-        }
-    }
-}

package/theme/inlineeditor.css

@@ -1,9 +0,0 @@
-/*
- * Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-menu-bar {
-	border: none;
-	border-bottom: 1px solid var(--ck-color-toolbar-border);
-}