@ckeditor/ckeditor5-editor-multi-root 0.0.1 → 37.0.0-alpha.2

package/CHANGELOG.md

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

package/LICENSE.md

@@ -1,6 +1,7 @@
 Software License Agreement
 ==========================
 
+**Multi-root editor implementation** – https://github.com/ckeditor/ckeditor5-editor-multi-root <br>
 Copyright (c) 2003-2023, [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).

package/README.md

@@ -1,4 +1,21 @@
 CKEditor 5 multi-root editor implementation
-===========================================
+========================================
 
-This is an initial package for development purposes. It does not contain code yet.
+[![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-editor-multi-root.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-multi-root)
+[![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)
+![Dependency Status](https://img.shields.io/librariesio/release/npm/@ckeditor/ckeditor5-editor-multi-root)
+
+The multi-root editor implementation for CKEditor 5. Read more about the [multi-root editor build](https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/predefined-builds.html#multi-root-editor) and see the [demo](https://ckeditor.com/docs/ckeditor5/latest/examples/builds/multi-root-editor.html).
+
+This package contains the [`MultiRootEditor`](https://ckeditor.com/docs/ckeditor5/latest/api/module_editor-multi-root_multirooteditor-MultiRootEditor.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 multi-root editor. Read more about [CKEditor 5 predefined builds](https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/alternative-setups/predefined-builds.html) in the CKEditor 5 documentation.
+
+## Documentation
+
+See the [`@ckeditor/ckeditor5-editor-multi-root` package](https://ckeditor.com/docs/ckeditor5/latest/api/editor-multi-root.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+
+## 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-multi-root.js

@@ -0,0 +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,{MultiRootEditor:()=>R});var t=o(704),e=o(209),r=o(273),n=o(492);class s extends r.EditorUI{constructor(t,e){super(t),this.view=e}init(){const t=this.view,e=this.editor.editing.view;let o;for(const e of Object.keys(t.editables))t.editables[e].name=e;t.render(),this.focusTracker.on("change:focusedElement",((t,e,i)=>{for(const t of Object.values(this.view.editables))i===t.element&&(o=t.element)})),this.focusTracker.on("change:isFocused",((t,e,i)=>{i||(o=null)}));for(const t of Object.values(this.view.editables)){const i=t.element;this.setEditableElement(t.name,i),t.bind("isFocused").to(this.focusTracker,"isFocused",this.focusTracker,"focusedElement",((t,e)=>!!t&&(e===i||o===i))),e.attachDomRoot(i,t.name)}this._initPlaceholder(),this._initToolbar(),this.fire("ready")}destroy(){super.destroy();const t=this.view,e=this.editor.editing.view;for(const t of Object.values(this.view.editables))e.detachDomRoot(t.name);t.destroy()}_initToolbar(){const t=this.editor,e=this.view;e.toolbar.fillFromConfig(t.config.get("toolbar"),this.componentFactory),this.addToolbar(e.toolbar)}_initPlaceholder(){const t=this.editor,e=t.editing.view,o=t.config.get("placeholder");if(o)for(const t of Object.values(this.view.editables)){const i=e.document.getRoot(t.name),r="string"==typeof o?o:o[t.name];r&&(0,n.enablePlaceholder)({view:e,element:i,text:r,isDirectHost:!1,keepOnFocus:!0})}}}class c extends r.EditorUIView{constructor(t,e,o,i={}){super(t);const n=t.t;this.toolbar=new r.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull}),this.editables={};for(const s of o){const o=new r.InlineEditableUIView(t,e,i.editableElements?i.editableElements[s]:void 0,{label:t=>n("Rich Text Editor. Editing area: %0",t.name)});this.editables[s]=o}this.editable=Object.values(this.editables)[0],this.toolbar.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:t.uiLanguageDirection}})}render(){super.render(),this.registerChild(Object.values(this.editables)),this.registerChild([this.toolbar])}}const l=function(t){return null!=t&&"object"==typeof t};const a="object"==typeof global&&global&&global.Object===Object&&global;var u="object"==typeof self&&self&&self.Object===Object&&self;const d=(a||u||Function("return this")()).Symbol;var h=Object.prototype,f=h.hasOwnProperty,b=h.toString,g=d?d.toStringTag:void 0;const p=function(t){var e=f.call(t,g),o=t[g];try{t[g]=void 0;var i=!0}catch(t){}var r=b.call(t);return i&&(e?t[g]=o:delete t[g]),r};var v=Object.prototype.toString;const m=function(t){return v.call(t)};var y="[object Null]",j="[object Undefined]",w=d?d.toStringTag:void 0;const E=function(t){return null==t?void 0===t?j:y:w&&w in Object(t)?p(t):m(t)};const O=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var T="[object Object]",x=Function.prototype,D=Object.prototype,F=x.toString,S=D.hasOwnProperty,P=F.call(Object);const k=function(t){if(!l(t)||E(t)!=T)return!1;var e=O(t);if(null===e)return!0;var o=S.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&F.call(o)==P};const C=function(t){return l(t)&&1===t.nodeType&&!k(t)};class R extends((0,t.DataApiMixin)(t.Editor)){constructor(o,i={}){const r=Object.keys(o),n=0===r.length||"string"==typeof o[r[0]];if(n&&void 0!==i.initialData)throw new e.CKEditorError("editor-create-initial-data",null);if(super(i),n||(this.sourceElements=o),void 0===this.config.get("initialData")){const t={};for(const i of r)t[i]=_(l=o[i])?(0,e.getDataFromElement)(l):l;this.config.set("initialData",t)}var l;if(!n)for(const e of r)(0,t.secureSourceElement)(this,o[e]);for(const t of r)this.model.document.createRoot("$root",t);const a={shouldToolbarGroupWhenFull:!this.config.get("toolbar.shouldNotGroupWhenFull"),editableElements:n?void 0:o},u=new c(this.locale,this.editing.view,r,a);this.ui=new s(this,u)}destroy(){const t=this.config.get("updateSourceElementOnDestroy"),o={};if(this.sourceElements)for(const e of Object.keys(this.sourceElements))o[e]=t?this.getData({rootName:e}):"";return this.ui.destroy(),super.destroy().then((()=>{if(this.sourceElements)for(const t of Object.keys(this.sourceElements))(0,e.setDataInElement)(this.sourceElements[t],o[t])}))}static create(t,o={}){return new Promise((i=>{for(const o of Object.values(t))if(_(o)&&"TEXTAREA"===o.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 _(t){return C(t)}})(),(window.CKEditor5=window.CKEditor5||{}).editorMultiRoot=i})();

package/package.json

@@ -1,19 +1,62 @@
 {
   "name": "@ckeditor/ckeditor5-editor-multi-root",
-  "version": "0.0.1",
+  "version": "37.0.0-alpha.2",
   "description": "Multi-root editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
     "ckeditor5",
     "ckeditor 5",
-    "ckeditor5-lib"
+    "ckeditor5-editor",
+    "ckeditor5-dll"
   ],
+  "main": "src/index.js",
+  "dependencies": {
+    "ckeditor5": "^37.0.0-alpha.2",
+    "lodash-es": "^4.17.15"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-core": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-dev-utils": "^35.0.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-alpha.2",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-alpha.2",
+    "typescript": "^4.8.4",
+    "webpack": "^5.58.1",
+    "webpack-cli": "^4.9.0"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=5.7.1"
+  },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
   "homepage": "https://ckeditor.com/ckeditor-5",
   "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ckeditor/ckeditor5-editor-multi-root.git"
-  }
+    "url": "https://github.com/ckeditor/ckeditor5.git",
+    "directory": "packages/ckeditor5-editor-multi-root"
+  },
+  "files": [
+    "lang",
+    "src/**/*.js",
+    "src/**/*.d.ts",
+    "theme",
+    "build",
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "dll:build": "webpack",
+    "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-multi-root
+ */
+export { default as MultiRootEditor } from './multirooteditor';

package/src/index.js

@@ -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-multi-root
+ */
+export { default as MultiRootEditor } from './multirooteditor';

package/src/multirooteditor.d.ts

@@ -0,0 +1,223 @@
+/**
+ * @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-multi-root/multirooteditor
+ */
+import { Editor, type EditorConfig } from 'ckeditor5/src/core';
+import MultiRootEditorUI from './multirooteditorui';
+declare const MultiRootEditor_base: import("ckeditor5/src/utils").Mixed<typeof Editor, import("ckeditor5/src/core").DataApi>;
+/**
+ * The {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor} implementation.
+ *
+ * The multi-root editor provides multiple inline editable elements and a toolbar. All editable areas are controlled by one editor
+ * instance, which means that they share common configuration, document ID, or undo stack.
+ *
+ * This type of editor is dedicated to integrations which require a customized UI with an open structure, featuring multiple editable areas,
+ * allowing developers to have a control over the exact location of these editable areas.
+ *
+ * In order to create a multi-root editor instance, use the static
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method.
+ *
+ * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
+ *
+ * # Multi-root editor and multi-root editor build
+ *
+ * The multi-root editor can be used directly from source (if you installed the
+ * [`@ckeditor/ckeditor5-editor-multi-root`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-multi-root) package)
+ * but it is also available in the
+ * {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor 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 for easier customization.
+ *
+ * Read more about initializing the editor from source or as a build in
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
+ */
+export default class MultiRootEditor extends MultiRootEditor_base {
+    /**
+     * @inheritDoc
+     */
+    readonly ui: MultiRootEditorUI;
+    /**
+     * The elements on which the editor has been initialized.
+     */
+    readonly sourceElements: Record<string, HTMLElement> | undefined;
+    /**
+     * Creates an instance of the multi-root editor.
+     *
+     * **Note:** Do not use the constructor to create editor instances. Use the static
+     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
+     *
+     * @param sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
+     * @param config The editor configuration.
+     */
+    protected constructor(sourceElementsOrData: Record<string, HTMLElement> | Record<string, 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`.
+     *
+     * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
+     * do that yourself in the destruction chain, if you need to:
+     *
+     * ```ts
+     * editor.destroy().then( () => {
+     * 	// Remove the toolbar from DOM.
+     * 	editor.ui.view.toolbar.element.remove();
+     *
+     * 	// Remove editable elements from DOM.
+     * 	for ( const editable of Object.values( editor.ui.view.editables ) ) {
+     * 	    editable.element.remove();
+     * 	}
+     *
+     * 	console.log( 'Editor was destroyed' );
+     * } );
+     * ```
+     */
+    destroy(): Promise<unknown>;
+    /**
+     * Creates a new multi-root editor instance.
+     *
+     * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
+     * after the editor has been initialized.
+     *
+     * There are a few different ways to initialize the multi-root editor.
+     *
+     * # Using existing DOM elements:
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .catch( err => {
+     * 	console.error( err.stack );
+     * } );
+     * ```
+     *
+     * The elements' content will be used as the editor data and elements will become editable elements.
+     *
+     * # Creating a detached editor
+     *
+     * Alternatively, you can initialize the editor by passing the initial data directly as strings.
+     * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 	content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 	sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
+     * 	sidePanelRight: '<p>List of similar articles...</p>',
+     * 	outro: '<p>Closing text.</p>'
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     *
+     * 	// Append DOM editable elements created by the editor.
+     * 	const editables = editor.ui.view.editables;
+     * 	const container = document.querySelector( '#editable-container' );
+     *
+     * 	container.appendChild( editables.intro.element );
+     * 	container.appendChild( editables.content.element );
+     * 	container.appendChild( editables.outro.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
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * }, {
+     * 	initialData: {
+     * 		intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 		content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 		sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
+     * 		sidePanelRight '<p>List of similar articles...</p>':
+     * 		outro: '<p>Closing text.</p>'
+     * 	}
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .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-multi-root`).
+     *
+     * If you want to use the multi-root editor from source (`@ckeditor/ckeditor5-editor-multi-root-editor/src/multirooteditor`),
+     * 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 sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     *
+     * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
+     * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed 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. For each entry in the passed object, one editor root and one
+     * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
+     * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
+     * method.
+     * @param config The editor configuration.
+     * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
+     */
+    static create(sourceElementsOrData: Record<string, HTMLElement> | Record<string, string>, config?: EditorConfig): Promise<MultiRootEditor>;
+}
+export {};

package/src/multirooteditor.js

@@ -0,0 +1,293 @@
+/**
+ * @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-multi-root/multirooteditor
+ */
+import { Editor, DataApiMixin, secureSourceElement } from 'ckeditor5/src/core';
+import { CKEditorError, getDataFromElement, setDataInElement } from 'ckeditor5/src/utils';
+import MultiRootEditorUI from './multirooteditorui';
+import MultiRootEditorUIView from './multirooteditoruiview';
+import { isElement as _isElement } from 'lodash-es';
+/**
+ * The {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor} implementation.
+ *
+ * The multi-root editor provides multiple inline editable elements and a toolbar. All editable areas are controlled by one editor
+ * instance, which means that they share common configuration, document ID, or undo stack.
+ *
+ * This type of editor is dedicated to integrations which require a customized UI with an open structure, featuring multiple editable areas,
+ * allowing developers to have a control over the exact location of these editable areas.
+ *
+ * In order to create a multi-root editor instance, use the static
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method.
+ *
+ * Note that you will need to attach the editor toolbar to your web page manually, in a desired place, after the editor is initialized.
+ *
+ * # Multi-root editor and multi-root editor build
+ *
+ * The multi-root editor can be used directly from source (if you installed the
+ * [`@ckeditor/ckeditor5-editor-multi-root`](https://www.npmjs.com/package/@ckeditor/ckeditor5-editor-multi-root) package)
+ * but it is also available in the
+ * {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor 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 for easier customization.
+ *
+ * Read more about initializing the editor from source or as a build in
+ * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
+ */
+export default class MultiRootEditor extends DataApiMixin(Editor) {
+    /**
+     * Creates an instance of the multi-root editor.
+     *
+     * **Note:** Do not use the constructor to create editor instances. Use the static
+     * {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`} method instead.
+     *
+     * @param sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     * For more information see {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}.
+     * @param config The editor configuration.
+     */
+    constructor(sourceElementsOrData, config = {}) {
+        const rootNames = Object.keys(sourceElementsOrData);
+        const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[rootNames[0]] === 'string';
+        if (sourceIsData && 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);
+        if (!sourceIsData) {
+            this.sourceElements = sourceElementsOrData;
+        }
+        if (this.config.get('initialData') === undefined) {
+            // Create initial data object containing data from all roots.
+            const initialData = {};
+            for (const rootName of rootNames) {
+                initialData[rootName] = getInitialData(sourceElementsOrData[rootName]);
+            }
+            this.config.set('initialData', initialData);
+        }
+        if (!sourceIsData) {
+            for (const rootName of rootNames) {
+                secureSourceElement(this, sourceElementsOrData[rootName]);
+            }
+        }
+        for (const rootName of rootNames) {
+            // Create root and `UIView` element for each editable container.
+            this.model.document.createRoot('$root', rootName);
+        }
+        const options = {
+            shouldToolbarGroupWhenFull: !this.config.get('toolbar.shouldNotGroupWhenFull'),
+            editableElements: sourceIsData ? undefined : sourceElementsOrData
+        };
+        const view = new MultiRootEditorUIView(this.locale, this.editing.view, rootNames, options);
+        this.ui = new MultiRootEditorUI(this, view);
+    }
+    /**
+     * Destroys the editor instance, releasing all resources used by it.
+     *
+     * Updates the original editor element with the data if the
+     * {@link module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy `updateSourceElementOnDestroy`}
+     * configuration option is set to `true`.
+     *
+     * **Note**: The multi-root editor does not remove the toolbar and editable when destroyed. You can
+     * do that yourself in the destruction chain, if you need to:
+     *
+     * ```ts
+     * editor.destroy().then( () => {
+     * 	// Remove the toolbar from DOM.
+     * 	editor.ui.view.toolbar.element.remove();
+     *
+     * 	// Remove editable elements from DOM.
+     * 	for ( const editable of Object.values( editor.ui.view.editables ) ) {
+     * 	    editable.element.remove();
+     * 	}
+     *
+     * 	console.log( 'Editor was destroyed' );
+     * } );
+     * ```
+     */
+    destroy() {
+        const shouldUpdateSourceElement = this.config.get('updateSourceElementOnDestroy');
+        // Cache the data and editable DOM elements, then destroy.
+        // It's safe to assume that the model->view conversion will not work after `super.destroy()`,
+        // same as `ui.getEditableElement()` method will not return editables.
+        const data = {};
+        if (this.sourceElements) {
+            for (const rootName of Object.keys(this.sourceElements)) {
+                data[rootName] = shouldUpdateSourceElement ? this.getData({ rootName }) : '';
+            }
+        }
+        this.ui.destroy();
+        return super.destroy()
+            .then(() => {
+            if (this.sourceElements) {
+                for (const rootName of Object.keys(this.sourceElements)) {
+                    setDataInElement(this.sourceElements[rootName], data[rootName]);
+                }
+            }
+        });
+    }
+    /**
+     * Creates a new multi-root editor instance.
+     *
+     * **Note:** remember that `MultiRootEditor` does not append the toolbar element to your web page, so you have to do it manually
+     * after the editor has been initialized.
+     *
+     * There are a few different ways to initialize the multi-root editor.
+     *
+     * # Using existing DOM elements:
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .catch( err => {
+     * 	console.error( err.stack );
+     * } );
+     * ```
+     *
+     * The elements' content will be used as the editor data and elements will become editable elements.
+     *
+     * # Creating a detached editor
+     *
+     * Alternatively, you can initialize the editor by passing the initial data directly as strings.
+     * In this case, you will have to manually append both the toolbar element and the editable elements to your web page.
+     *
+     * ```ts
+     * MultiRootEditor.create( {
+     * 	intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 	content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 	sidePanelLeft: '<blockquote>Strong quotation from article.</blockquote>',
+     * 	sidePanelRight: '<p>List of similar articles...</p>',
+     * 	outro: '<p>Closing text.</p>'
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     *
+     * 	// Append DOM editable elements created by the editor.
+     * 	const editables = editor.ui.view.editables;
+     * 	const container = document.querySelector( '#editable-container' );
+     *
+     * 	container.appendChild( editables.intro.element );
+     * 	container.appendChild( editables.content.element );
+     * 	container.appendChild( editables.outro.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
+     * MultiRootEditor.create( {
+     * 	intro: document.querySelector( '#editor-intro' ),
+     * 	content: document.querySelector( '#editor-content' ),
+     * 	sidePanelLeft: document.querySelector( '#editor-side-left' ),
+     * 	sidePanelRight: document.querySelector( '#editor-side-right' ),
+     * 	outro: document.querySelector( '#editor-outro' )
+     * }, {
+     * 	initialData: {
+     * 		intro: '<p><strong>Exciting</strong> intro text to an article.</p>',
+     * 		content: '<p>Lorem ipsum dolor sit amet.</p>',
+     * 		sidePanelLeft '<blockquote>Strong quotation from article.</blockquote>':
+     * 		sidePanelRight '<p>List of similar articles...</p>':
+     * 		outro: '<p>Closing text.</p>'
+     * 	}
+     * } )
+     * .then( editor => {
+     * 	console.log( 'Editor was initialized', editor );
+     *
+     * 	// Append the toolbar inside a provided DOM element.
+     * 	document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );
+     * } )
+     * .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-multi-root`).
+     *
+     * If you want to use the multi-root editor from source (`@ckeditor/ckeditor5-editor-multi-root-editor/src/multirooteditor`),
+     * 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 sourceElementsOrData The DOM elements that will be the source for the created editor
+     * or the editor's initial data. The editor will initialize multiple roots with names according to the keys in the passed object.
+     *
+     * If DOM elements are passed, their content will be automatically loaded to the editor upon initialization and the elements will be
+     * used as the editor's editable areas. The editor data will be set back to the original element once the editor is destroyed 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. For each entry in the passed object, one editor root and one
+     * editable DOM element will be created. You will need to attach the editable elements into the DOM manually. The elements are available
+     * through the {@link module:editor-multi-root/multirooteditorui~MultiRootEditorUI#getEditableElement `editor.ui.getEditableElement()`}
+     * method.
+     * @param config The editor configuration.
+     * @returns A promise resolved once the editor is ready. The promise resolves with the created editor instance.
+     */
+    static create(sourceElementsOrData, config = {}) {
+        return new Promise(resolve => {
+            for (const sourceItem of Object.values(sourceElementsOrData)) {
+                if (isElement(sourceItem) && sourceItem.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(sourceElementsOrData, 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/multirooteditorui.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @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-multi-root/multirooteditorui
+ */
+import { type Editor } from 'ckeditor5/src/core';
+import { EditorUI } from 'ckeditor5/src/ui';
+import type MultiRootEditorUIView from './multirooteditoruiview';
+/**
+ * The multi-root editor UI class.
+ */
+export default class MultiRootEditorUI extends EditorUI {
+    /**
+     * The main (top–most) view of the editor UI.
+     */
+    readonly view: MultiRootEditorUIView;
+    /**
+     * Creates an instance of the multi-root editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor: Editor, view: MultiRootEditorUIView);
+    /**
+     * Initializes the UI.
+     */
+    init(): void;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+    /**
+     * Initializes the editor main toolbar and its panel.
+     */
+    private _initToolbar;
+    /**
+     * Enable the placeholder text on the editing roots, if any was configured.
+     */
+    private _initPlaceholder;
+}

package/src/multirooteditorui.js

@@ -0,0 +1,143 @@
+/**
+ * @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
+ */
+import { EditorUI } from 'ckeditor5/src/ui';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
+/**
+ * The multi-root editor UI class.
+ */
+export default class MultiRootEditorUI extends EditorUI {
+    /**
+     * Creates an instance of the multi-root editor UI class.
+     *
+     * @param editor The editor instance.
+     * @param view The view of the UI.
+     */
+    constructor(editor, view) {
+        super(editor);
+        this.view = view;
+    }
+    /**
+     * Initializes the UI.
+     */
+    init() {
+        const view = this.view;
+        const editor = this.editor;
+        const editingView = editor.editing.view;
+        let lastFocusedEditableElement;
+        for (const editableName of Object.keys(view.editables)) {
+            view.editables[editableName].name = editableName;
+        }
+        view.render();
+        // Keep track of the last focused editable element. Knowing which one was focused
+        // is useful when the focus moves from editable to other UI components like balloons
+        // (especially inputs) but the editable remains the "focus context" (e.g. link balloon
+        // attached to a link in an editable). In this case, the editable should preserve visual
+        // focus styles.
+        this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
+            for (const editable of Object.values(this.view.editables)) {
+                if (focusedElement === editable.element) {
+                    lastFocusedEditableElement = editable.element;
+                }
+            }
+        });
+        // If the focus tracker loses focus, stop tracking the last focused editable element.
+        // Wherever the focus is restored, it will no longer be in the context of that editable
+        // because the focus "came from the outside", as opposed to the focus moving from one element
+        // to another within the editor UI.
+        this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
+            if (!isFocused) {
+                lastFocusedEditableElement = null;
+            }
+        });
+        for (const editable of Object.values(this.view.editables)) {
+            // 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 `MultiRootEditor.create()`.
+            const editableElement = editable.element;
+            // Register each editable UI view in the editor.
+            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, 'isFocused', this.focusTracker, 'focusedElement', (isFocused, focusedElement) => {
+                // When the focus tracker is blurred, it means the focus moved out of the editor UI.
+                // No editable will maintain focus then.
+                if (!isFocused) {
+                    return false;
+                }
+                // If the focus tracker says the editor UI is focused and currently focused element
+                // is the editable, then the editable should be visually marked as focused too.
+                if (focusedElement === editableElement) {
+                    return true;
+                }
+                // If the focus tracker says the editor UI is focused but the focused element is
+                // not an editable, it is possible that the editable is still (context–)focused.
+                // For instance, the focused element could be an input inside of a balloon attached
+                // to the content in the editable. In such case, the editable should remain _visually_
+                // focused even though technically the focus is somewhere else. The focus moved from
+                // the editable to the input but the focus context remained the same.
+                else {
+                    return lastFocusedEditableElement === editableElement;
+                }
+            });
+            // 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, editable.name);
+        }
+        this._initPlaceholder();
+        this._initToolbar();
+        this.fire('ready');
+    }
+    /**
+     * @inheritDoc
+     */
+    destroy() {
+        super.destroy();
+        const view = this.view;
+        const editingView = this.editor.editing.view;
+        for (const editable of Object.values(this.view.editables)) {
+            editingView.detachDomRoot(editable.name);
+        }
+        view.destroy();
+    }
+    /**
+     * Initializes the editor main toolbar and its panel.
+     */
+    _initToolbar() {
+        const editor = this.editor;
+        const view = this.view;
+        const toolbar = view.toolbar;
+        toolbar.fillFromConfig(editor.config.get('toolbar'), this.componentFactory);
+        // Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+        this.addToolbar(view.toolbar);
+    }
+    /**
+     * Enable the placeholder text on the editing roots, if any was configured.
+     */
+    _initPlaceholder() {
+        const editor = this.editor;
+        const editingView = editor.editing.view;
+        const placeholder = editor.config.get('placeholder');
+        if (!placeholder) {
+            return;
+        }
+        for (const editable of Object.values(this.view.editables)) {
+            const editingRoot = editingView.document.getRoot(editable.name);
+            const placeholderText = typeof placeholder === 'string' ? placeholder : placeholder[editable.name];
+            if (placeholderText) {
+                enablePlaceholder({
+                    view: editingView,
+                    element: editingRoot,
+                    text: placeholderText,
+                    isDirectHost: false,
+                    keepOnFocus: true
+                });
+            }
+        }
+    }
+}

package/src/multirooteditoruiview.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @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-multi-root/multirooteditoruiview
+ */
+import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+import type { Locale } from 'ckeditor5/src/utils';
+import type { View } from 'ckeditor5/src/engine';
+/**
+ * The multi-root editor UI view. It is a virtual view providing an inline
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
+ * specific arrangement of the components in the DOM.
+ *
+ * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
+ * to learn more about this view.
+ */
+export default class MultiRootEditorUIView extends EditorUIView {
+    /**
+     * The main toolbar of the multi-root editor UI.
+     */
+    readonly toolbar: ToolbarView;
+    /**
+     * Editable elements used by the multi-root editor UI.
+     */
+    readonly editables: Record<string, InlineEditableUIView>;
+    readonly editable: InlineEditableUIView;
+    /**
+     * Creates an instance of the multi-root 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 editableNames Names for all editable views. For each name, one
+     * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
+     * @param options Configuration options for the view instance.
+     * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
+     * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
+     * instances.
+     * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
+     * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale: Locale, editingView: View, editableNames: Array<string>, options?: {
+        editableElements?: Record<string, HTMLElement>;
+        shouldToolbarGroupWhenFull?: boolean;
+    });
+    /**
+     * @inheritDoc
+     */
+    render(): void;
+}

package/src/multirooteditoruiview.js

@@ -0,0 +1,73 @@
+/**
+ * @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-multi-root/multirooteditoruiview
+ */
+import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui';
+/**
+ * The multi-root editor UI view. It is a virtual view providing an inline
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#editable} and a
+ * {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar}, but without any
+ * specific arrangement of the components in the DOM.
+ *
+ * See {@link module:editor-multi-root/multirooteditor~MultiRootEditor.create `MultiRootEditor.create()`}
+ * to learn more about this view.
+ */
+export default class MultiRootEditorUIView extends EditorUIView {
+    /**
+     * Creates an instance of the multi-root 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 editableNames Names for all editable views. For each name, one
+     * {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`} instance will be initialized.
+     * @param options Configuration options for the view instance.
+     * @param options.editableElements The editable elements to be used, assigned to their names. If not specified, they will be
+     * automatically created by {@link module:ui/editableui/inline/inlineeditableuiview~InlineEditableUIView `InlineEditableUIView`}
+     * instances.
+     * @param options.shouldToolbarGroupWhenFull When set to `true` enables automatic items grouping
+     * in the main {@link module:editor-multi-root/multirooteditoruiview~MultiRootEditorUIView#toolbar toolbar}.
+     * See {@link module:ui/toolbar/toolbarview~ToolbarOptions#shouldGroupWhenFull} to learn more.
+     */
+    constructor(locale, editingView, editableNames, options = {}) {
+        super(locale);
+        const t = locale.t;
+        this.toolbar = new ToolbarView(locale, {
+            shouldGroupWhenFull: options.shouldToolbarGroupWhenFull
+        });
+        this.editables = {};
+        // Create `InlineEditableUIView` instance for each editable.
+        for (const editableName of editableNames) {
+            const editable = new InlineEditableUIView(locale, editingView, options.editableElements ? options.editableElements[editableName] : undefined, {
+                label: editable => {
+                    return t('Rich Text Editor. Editing area: %0', editable.name);
+                }
+            });
+            this.editables[editableName] = editable;
+        }
+        this.editable = Object.values(this.editables)[0];
+        // This toolbar may be placed anywhere in the page so things like font size need to be reset in it.
+        // Because of the above, make sure the toolbar supports rounded corners.
+        // Also, make sure the toolbar has the proper dir attribute because its ancestor may not have one
+        // and some toolbar item styles depend on this attribute.
+        this.toolbar.extendTemplate({
+            attributes: {
+                class: [
+                    'ck-reset_all',
+                    'ck-rounded-corners'
+                ],
+                dir: locale.uiLanguageDirection
+            }
+        });
+    }
+    /**
+     * @inheritDoc
+     */
+    render() {
+        super.render();
+        this.registerChild(Object.values(this.editables));
+        this.registerChild([this.toolbar]);
+    }
+}