@ckeditor/ckeditor5-editor-inline 36.0.1 → 37.0.0-alpha.1

package/build/editor-inline.js

@@ -1,4 +1,4 @@
 /*!
  * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md.
- */(()=>{var t={704:(t,e,o)=>{t.exports=o(79)("./src/core.js")},492:(t,e,o)=>{t.exports=o(79)("./src/engine.js")},273:(t,e,o)=>{t.exports=o(79)("./src/ui.js")},209:(t,e,o)=>{t.exports=o(79)("./src/utils.js")},79: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:()=>A});var t=o(704),e=o(209);const r=function(t){return null!=t&&"object"==typeof t};const n="object"==typeof global&&global&&global.Object===Object&&global;var s="object"==typeof self&&self&&self.Object===Object&&self;const l=(n||s||Function("return this")()).Symbol;var a=Object.prototype,c=a.hasOwnProperty,d=a.toString,h=l?l.toStringTag:void 0;const u=function(t){var e=c.call(t,h),o=t[h];try{t[h]=void 0;var i=!0}catch(t){}var r=d.call(t);return i&&(e?t[h]=o:delete t[h]),r};var p=Object.prototype.toString;const b=function(t){return p.call(t)};var f="[object Null]",g="[object Undefined]",w=l?l.toStringTag:void 0;const v=function(t){return null==t?void 0===t?g:f:w&&w in Object(t)?u(t):b(t)};const m=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var y="[object Object]",O=Function.prototype,T=Object.prototype,j=O.toString,E=T.hasOwnProperty,P=j.call(Object);const x=function(t){if(!r(t)||v(t)!=y)return!1;var e=m(t);if(null===e)return!0;var o=E.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&j.call(o)==P};const _=function(t){return r(t)&&1===t.nodeType&&!x(t)};var F=o(273),S=o(492);class C extends F.EditorUI{constructor(t,e){super(t),this.view=e,this._toolbarConfig=(0,F.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.sourceElement,r=t.config.get("placeholder")||i&&"textarea"===i.tagName.toLowerCase()&&i.getAttribute("placeholder");r&&(0,S.enablePlaceholder)({view:e,element:o,text:r,isDirectHost:!1,keepOnFocus:!0})}}const D=(0,e.toUnit)("px");class R extends F.EditorUIView{constructor(t,e,o,i={}){super(t);const r=t.t;this.toolbar=new F.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),this.set("viewportTopOffset",0),this.panel=new F.BalloonPanelView(t),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new F.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=D(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()}}class A extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,i={}){if(!z(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 z(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),z(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new R(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r});this.ui=new C(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(z(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 z(t){return _(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();
+ */(()=>{var t={704:(t,e,o)=>{t.exports=o(79)("./src/core.js")},492:(t,e,o)=>{t.exports=o(79)("./src/engine.js")},273:(t,e,o)=>{t.exports=o(79)("./src/ui.js")},209:(t,e,o)=>{t.exports=o(79)("./src/utils.js")},79: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:()=>z});var t=o(704),e=o(209);const r=function(t){return null!=t&&"object"==typeof t};const n="object"==typeof global&&global&&global.Object===Object&&global;var s="object"==typeof self&&self&&self.Object===Object&&self;const l=(n||s||Function("return this")()).Symbol;var a=Object.prototype,c=a.hasOwnProperty,d=a.toString,h=l?l.toStringTag:void 0;const u=function(t){var e=c.call(t,h),o=t[h];try{t[h]=void 0;var i=!0}catch(t){}var r=d.call(t);return i&&(e?t[h]=o:delete t[h]),r};var p=Object.prototype.toString;const b=function(t){return p.call(t)};var f="[object Null]",g="[object Undefined]",w=l?l.toStringTag:void 0;const v=function(t){return null==t?void 0===t?g:f:w&&w in Object(t)?u(t):b(t)};const m=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var y="[object Object]",O=Function.prototype,T=Object.prototype,j=O.toString,E=T.hasOwnProperty,P=j.call(Object);const x=function(t){if(!r(t)||v(t)!=y)return!1;var e=m(t);if(null===e)return!0;var o=E.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&j.call(o)==P};const _=function(t){return r(t)&&1===t.nodeType&&!x(t)};var F=o(273),S=o(492);class D extends F.EditorUI{constructor(t,e){super(t),this.view=e,this._toolbarConfig=(0,F.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.sourceElement,t.config.get("placeholder"));if(i){const t="string"==typeof i?i:i[o.rootName];t&&(0,S.enablePlaceholder)({view:e,element:o,text:t,isDirectHost:!1,keepOnFocus:!0})}}}const C=(0,e.toUnit)("px");class R extends F.EditorUIView{constructor(t,e,o,i={}){super(t);const r=t.t;this.toolbar=new F.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull,isFloating:!0}),this.set("viewportTopOffset",0),this.panel=new F.BalloonPanelView(t),this.panelPositions=this._getPanelPositions(),this.panel.extendTemplate({attributes:{class:"ck-toolbar-container"}}),this.editable=new F.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=C(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()}}class z extends((0,t.DataApiMixin)((0,t.ElementApiMixin)(t.Editor))){constructor(o,i={}){if(!A(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 A(t)?(0,e.getDataFromElement)(t):t}(o)),this.model.document.createRoot(),A(o)&&(this.sourceElement=o,(0,t.secureSourceElement)(this,o));const r=!this.config.get("toolbar.shouldNotGroupWhenFull"),n=new R(this.locale,this.editing.view,this.sourceElement,{shouldToolbarGroupWhenFull:r});this.ui=new D(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(A(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 A(t){return _(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorInline=i})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-inline",
-  "version": "36.0.1",
+  "version": "37.0.0-alpha.1",
   "description": "Inline editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,23 +11,23 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^36.0.1",
+    "ckeditor5": "^37.0.0-alpha.1",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^36.0.1",
-    "@ckeditor/ckeditor5-core": "^36.0.1",
-    "@ckeditor/ckeditor5-dev-utils": "^32.0.0",
-    "@ckeditor/ckeditor5-engine": "^36.0.1",
-    "@ckeditor/ckeditor5-enter": "^36.0.1",
-    "@ckeditor/ckeditor5-heading": "^36.0.1",
-    "@ckeditor/ckeditor5-image": "^36.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^36.0.1",
-    "@ckeditor/ckeditor5-theme-lark": "^36.0.1",
-    "@ckeditor/ckeditor5-typing": "^36.0.1",
-    "@ckeditor/ckeditor5-ui": "^36.0.1",
-    "@ckeditor/ckeditor5-undo": "^36.0.1",
-    "@ckeditor/ckeditor5-utils": "^36.0.1",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-dev-utils": "^35.0.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-image": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.1",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.1",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
@@ -56,7 +56,8 @@
   ],
   "scripts": {
     "dll:build": "webpack",
-    "build": "tsc -p ./tsconfig.release.json",
+    "build": "tsc -p ./tsconfig.json",
     "postversion": "npm run build"
-  }
+  },
+  "types": "src/index.d.ts"
 }

package/src/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license Copyright (c) 2003-2023, 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';

package/src/inlineeditor.d.ts

@@ -0,0 +1,157 @@
+/**
+ * @license Copyright (c) 2003-2023, 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/inlineeditor
+ */
+import { Editor, type EditorConfig } from 'ckeditor5/src/core';
+import InlineEditorUI from './inlineeditorui';
+declare const InlineEditor_base: import("ckeditor5/src/utils").Mixed<import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").ElementApi>, import("ckeditor5/src/core").DataApi>;
+/**
+ * The {@glink installation/getting-started/predefined-builds#inline-editor 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()`}.
+ */
+export default class InlineEditor extends InlineEditor_base {
+    /**
+     * @inheritDoc
+     */
+    readonly ui: InlineEditorUI;
+    /**
+     * 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.
+     */
+    protected constructor(sourceElementOrData: HTMLElement | string, config?: EditorConfig);
+    /**
+     * 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(): Promise<unknown>;
+    /**
+     * 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: HTMLElement | string, config?: EditorConfig): Promise<InlineEditor>;
+}
+export {};

package/src/inlineeditor.js

@@ -59,7 +59,7 @@ export default class InlineEditor extends DataApiMixin(ElementApiMixin(Editor))
         this.model.document.createRoot();
         if (isElement(sourceElementOrData)) {
             this.sourceElement = sourceElementOrData;
-            secureSourceElement(this);
+            secureSourceElement(this, sourceElementOrData);
         }
         const shouldToolbarGroupWhenFull = !this.config.get('toolbar.shouldNotGroupWhenFull');
         const view = new InlineEditorUIView(this.locale, this.editing.view, this.sourceElement, {
@@ -167,7 +167,7 @@ export default class InlineEditor extends DataApiMixin(ElementApiMixin(Editor))
      * 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 dedicated guide}.
+     * 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.

package/src/inlineeditorui.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @license Copyright (c) 2003-2023, 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/inlineeditorui
+ */
+import { type Editor } from 'ckeditor5/src/core';
+import { EditorUI } from 'ckeditor5/src/ui';
+import type InlineEditorUIView from './inlineeditoruiview';
+/**
+ * The inline editor UI class.
+ *
+ * @extends module:ui/editorui/editorui~EditorUI
+ */
+export default class InlineEditorUI extends EditorUI {
+    /**
+     * The main (top–most) view of the editor UI.
+     */
+    readonly view: InlineEditorUIView;
+    /**
+     * A normalized `config.toolbar` object.
+     */
+    private readonly _toolbarConfig;
+    /**
+     * Creates an instance of the inline editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor: Editor, view: InlineEditorUIView);
+    /**
+     * @inheritDoc
+     */
+    get element(): HTMLElement | null;
+    /**
+     * Initializes the UI.
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Initializes the inline editor toolbar and its panel.
+     */
+    private _initToolbar;
+    /**
+     * Enable the placeholder text on the editing root, if any was configured.
+     */
+    private _initPlaceholder;
+}

package/src/inlineeditorui.js

@@ -7,7 +7,7 @@ import { enablePlaceholder } from 'ckeditor5/src/engine';
 /**
  * The inline editor UI class.
  *
- * @extends module:core/editor/editorui~EditorUI
+ * @extends module:ui/editorui/editorui~EditorUI
  */
 export default class InlineEditorUI extends EditorUI {
     /**
@@ -105,16 +105,18 @@ export default class InlineEditorUI extends EditorUI {
         const editingView = editor.editing.view;
         const editingRoot = editingView.document.getRoot();
         const sourceElement = editor.sourceElement;
-        const placeholderText = editor.config.get('placeholder') ||
-            sourceElement && sourceElement.tagName.toLowerCase() === 'textarea' && sourceElement.getAttribute('placeholder');
-        if (placeholderText) {
-            enablePlaceholder({
-                view: editingView,
-                element: editingRoot,
-                text: placeholderText,
-                isDirectHost: false,
-                keepOnFocus: true
-            });
+        const placeholder = editor.config.get('placeholder');
+        if (placeholder) {
+            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editingRoot.rootName];
+            if (placeholderText) {
+                enablePlaceholder({
+                    view: editingView,
+                    element: editingRoot,
+                    text: placeholderText,
+                    isDirectHost: false,
+                    keepOnFocus: true
+                });
+            }
         }
     }
 }

package/src/inlineeditoruiview.d.ts

@@ -0,0 +1,137 @@
+/**
+ * @license Copyright (c) 2003-2023, 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/inlineeditoruiview
+ */
+import { BalloonPanelView, EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import { type PositioningFunction, type Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+/**
+ * Inline editor UI view. Uses an nline editable and a floating toolbar.
+ */
+export default class InlineEditorUIView extends EditorUIView {
+    /**
+     * A floating toolbar view instance.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * The offset from the top edge of the web browser's viewport which makes the
+     * UI become sticky. The default value is `0`, which means that the UI becomes
+     * sticky when its upper edge touches the top of the page viewport.
+     *
+     * This attribute is useful when the web page has UI elements positioned to the top
+     * either using `position: fixed` or `position: sticky`, which would cover the
+     * UI or vice–versa (depending on the `z-index` hierarchy).
+     *
+     * Bound to {@link module:ui/editorui/editorui~EditorUI#viewportOffset `EditorUI#viewportOffset`}.
+     *
+     * If {@link module:core/editor/editorconfig~EditorConfig#ui `EditorConfig#ui.viewportOffset.top`} is defined, then
+     * it will override the default value.
+     *
+     * @observable
+     * @default 0
+     */
+    viewportTopOffset: number;
+    /**
+     * A balloon panel view instance.
+     */
+    readonly panel: BalloonPanelView;
+    /**
+     * 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}.
+     */
+    readonly panelPositions: Array<PositioningFunction>;
+    /**
+     * Editable UI view.
+     */
+    readonly editable: InlineEditableUIView;
+    /**
+     * 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}.
+     */
+    private _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: Locale, editingView: View, editableElement?: HTMLElement, options?: {
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * 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}.
+     */
+    private _getPanelPositionTop;
+    /**
+     * Returns the positions for {@link #panelPositions}.
+     *
+     * See: {@link module:utils/dom/position~Options#positions}.
+     */
+    private _getPanelPositions;
+}