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

package/build/editor-multi-root.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,{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})();
+ */(()=>{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")},434:(t,e,o)=>{t.exports=o(79)("./src/watchdog.js")},79:t=>{"use strict";t.exports=CKEditor5.dll}},e={};function o(i){var s=e[i];if(void 0!==s)return s.exports;var r=e[i]={exports:{}};return t[i](r,r.exports,o),r.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:()=>A});var t=o(704),e=o(209),s=o(434),r=o(273),n=o(492);class a extends r.EditorUI{constructor(t,e){super(t),this.view=e,this._lastFocusedEditableElement=null}init(){this.view.render(),this.focusTracker.on("change:focusedElement",((t,e,o)=>{for(const t of Object.values(this.view.editables))o===t.element&&(this._lastFocusedEditableElement=t.element)})),this.focusTracker.on("change:isFocused",((t,e,o)=>{o||(this._lastFocusedEditableElement=null)}));for(const t of Object.values(this.view.editables))this.addEditable(t);this._initToolbar(),this.fire("ready")}addEditable(t,e){const o=t.element;this.editor.editing.view.attachDomRoot(o,t.name),this.setEditableElement(t.name,o),t.bind("isFocused").to(this.focusTracker,"isFocused",this.focusTracker,"focusedElement",((t,e)=>!!t&&(e===o||this._lastFocusedEditableElement===o))),this._initPlaceholder(t,e)}removeEditable(t){this.editor.editing.view.detachDomRoot(t.name),t.unbind("isFocused"),this.removeEditableElement(t.name)}destroy(){super.destroy();for(const t of Object.values(this.view.editables))this.removeEditable(t);this.view.destroy()}_initToolbar(){const t=this.editor,e=this.view;e.toolbar.fillFromConfig(t.config.get("toolbar"),this.componentFactory),this.addToolbar(e.toolbar)}_initPlaceholder(t,e){if(!e){const o=this.editor.config.get("placeholder");o&&(e="string"==typeof o?o:o[t.name])}if(!e)return;const o=this.editor.editing.view,i=o.document.getRoot(t.name);(0,n.enablePlaceholder)({view:o,element:i,text:e,isDirectHost:!1,keepOnFocus:!0})}}class c extends r.EditorUIView{constructor(t,e,o,i={}){super(t),this._editingView=e,this.toolbar=new r.ToolbarView(t,{shouldGroupWhenFull:i.shouldToolbarGroupWhenFull}),this.editables={};for(const t of o){const e=i.editableElements?i.editableElements[t]:void 0;this.createEditable(t,e)}this.editable=Object.values(this.editables)[0],this.toolbar.extendTemplate({attributes:{class:["ck-reset_all","ck-rounded-corners"],dir:t.uiLanguageDirection}})}createEditable(t,e){const o=this.locale.t,i=new r.InlineEditableUIView(this.locale,this._editingView,e,{label:t=>o("Rich Text Editor. Editing area: %0",t.name)});return this.editables[t]=i,i.name=t,this.isRendered&&this.registerChild(i),i}removeEditable(t){const e=this.editables[t];this.isRendered&&this.deregisterChild(e),delete this.editables[t],e.destroy()}render(){super.render(),this.registerChild(Object.values(this.editables)),this.registerChild(this.toolbar)}}const l=function(t){return null!=t&&"object"==typeof t};const d="object"==typeof global&&global&&global.Object===Object&&global;var u="object"==typeof self&&self&&self.Object===Object&&self;const h=(d||u||Function("return this")()).Symbol;var b=Object.prototype,f=b.hasOwnProperty,m=b.toString,g=h?h.toStringTag:void 0;const E=function(t){var e=f.call(t,g),o=t[g];try{t[g]=void 0;var i=!0}catch(t){}var s=m.call(t);return i&&(e?t[g]=o:delete t[g]),s};var v=Object.prototype.toString;const p=function(t){return v.call(t)};var y=h?h.toStringTag:void 0;const w=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":y&&y in Object(t)?E(t):p(t)};const j=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var O=Function.prototype,R=Object.prototype,x=O.toString,C=R.hasOwnProperty,F=x.call(Object);const T=function(t){if(!l(t)||"[object Object]"!=w(t))return!1;var e=j(t);if(null===e)return!0;var o=C.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&x.call(o)==F};const _=function(t){return l(t)&&1===t.nodeType&&!T(t)};class A extends((0,t.DataApiMixin)(t.Editor)){constructor(o,i={}){const s=Object.keys(o),r=0===s.length||"string"==typeof o[s[0]];if(r&&void 0!==i.initialData)throw new e.CKEditorError("editor-create-initial-data",null);if(super(i),this._registeredRootsAttributesKeys=new Set,this.sourceElements=r?{}:o,void 0===this.config.get("initialData")){const t={};for(const i of s)t[i]=D(n=o[i])?(0,e.getDataFromElement)(n):n;this.config.set("initialData",t)}var n;if(!r)for(const e of s)(0,t.secureSourceElement)(this,o[e]);for(const t of s)this.model.document.createRoot("$root",t);if(this.config.get("rootsAttributes")){const t=this.config.get("rootsAttributes");for(const[o,i]of Object.entries(t)){if(!s.includes(o))throw new e.CKEditorError("multi-root-editor-root-attributes-no-root",null);for(const t of Object.keys(i))this._registeredRootsAttributesKeys.add(t)}this.data.on("init",(()=>{this.model.enqueueChange({isUndoable:!1},(e=>{for(const[o,i]of Object.entries(t)){const t=this.model.document.getRoot(o);for(const[o,s]of Object.entries(i))null!==s&&e.setAttribute(o,s,t)}}))}))}const l={shouldToolbarGroupWhenFull:!this.config.get("toolbar.shouldNotGroupWhenFull"),editableElements:r?void 0:o},d=new c(this.locale,this.editing.view,s,l);this.ui=new a(this,d),this.model.document.on("change:data",(()=>{const t=this.model.document.differ.getChangedRoots();for(const e of t){const t=this.model.document.getRoot(e.name);"attached"==e.state?this.fire("addRoot",t):"detached"==e.state&&this.fire("detachRoot",t)}}))}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])}))}addRoot(t,{data:e="",attributes:o={},elementName:i="$root",isUndoable:s=!1}={}){const r=this.data,n=this._registeredRootsAttributesKeys;function a(s){const a=s.addRoot(t,i);e&&s.insert(r.parse(e,a),a,0);for(const t of Object.keys(o))n.add(t),s.setAttribute(t,o[t],a)}s?this.model.change(a):this.model.enqueueChange({isUndoable:!1},a)}detachRoot(t,e=!1){e?this.model.change((e=>e.detachRoot(t))):this.model.enqueueChange({isUndoable:!1},(e=>e.detachRoot(t)))}createEditable(t,e){const o=this.ui.view.createEditable(t.rootName);return this.ui.addEditable(o,e),this.editing.view.forceRender(),o.element}detachEditable(t){const e=t.rootName,o=this.ui.view.editables[e];return this.ui.removeEditable(o),this.ui.view.removeEditable(e),o.element}getFullData(t){const e={};for(const o of this.model.document.getRootNames())e[o]=this.data.get({...t,rootName:o});return e}getRootsAttributes(){const t={},e=Array.from(this._registeredRootsAttributesKeys);for(const o of this.model.document.getRootNames()){t[o]={};const i=this.model.document.getRoot(o);for(const s of e)t[o][s]=i.hasAttribute(s)?i.getAttribute(s):null}return t}static create(t,o={}){return new Promise((i=>{for(const o of Object.values(t))if(D(o)&&"TEXTAREA"===o.tagName)throw new e.CKEditorError("editor-wrong-element",null);const s=new this(t,o);i(s.initPlugins().then((()=>s.ui.init())).then((()=>s.data.init(s.config.get("initialData")))).then((()=>s.fire("ready"))).then((()=>s)))}))}}function D(t){return _(t)}A.Context=t.Context,A.EditorWatchdog=s.EditorWatchdog,A.ContextWatchdog=s.ContextWatchdog})(),(window.CKEditor5=window.CKEditor5||{}).editorMultiRoot=i})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-multi-root",
-  "version": "37.0.0-alpha.2",
+  "version": "37.0.0-rc.0",
   "description": "Multi-root editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -11,28 +11,29 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "^37.0.0-alpha.2",
+    "ckeditor5": "^37.0.0-rc.0",
     "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",
+    "@ckeditor/ckeditor5-basic-styles": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-core": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-dev-utils": "^36.0.0",
+    "@ckeditor/ckeditor5-engine": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-enter": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-heading": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-paragraph": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-theme-lark": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-typing": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-ui": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-undo": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-utils": "^37.0.0-rc.0",
+    "@ckeditor/ckeditor5-watchdog": "^37.0.0-rc.0",
     "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },
   "engines": {
-    "node": ">=14.0.0",
+    "node": ">=16.0.0",
     "npm": ">=5.7.1"
   },
   "author": "CKSource (http://cksource.com/)",

package/src/augmentation.d.ts

@@ -0,0 +1,80 @@
+/**
+ * @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 { type RootAttributes } from './multirooteditor';
+declare module '@ckeditor/ckeditor5-core' {
+    interface EditorConfig {
+        /**
+         * Initial roots attributes for the document roots.
+         *
+         * **Note: This configuration option is supported only by the
+         * {@link module:editor-multi-root/multirooteditor~MultiRootEditor multi-root} editor type.**
+         *
+         * **Note: You must provide full set of attributes for each root. If an attribute is not set on a root, set the value to `null`.
+         * Only provided attribute keys will be returned by
+         * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#getRootsAttributes}.**
+         *
+         * Roots attributes hold additional data related to the document roots, in addition to the regular document data (which usually is
+         * HTML). In roots attributes, for each root, you can store arbitrary key-value pairs with attributes connected with that root.
+         * Use it to store any custom data that is specific to your integration or custom features.
+         *
+         * Currently, roots attributes are not used only by any official plugins. This is a mechanism that is prepared for custom features
+         * and non-standard integrations. If you do not provide any custom feature that would use root attributes, you do not need to
+         * handle (save and load) this property.
+         *
+         * ```ts
+         * MultiRootEditor.create(
+         * 	// Roots for the editor:
+         * 	{
+         * 		uid1: document.querySelector( '#uid1' ),
+         * 		uid2: document.querySelector( '#uid2' ),
+         * 		uid3: document.querySelector( '#uid3' ),
+         * 		uid4: document.querySelector( '#uid4' )
+         * 	},
+         * 	// Config:
+         * 	{
+         * 		rootsAttributes: {
+         * 			uid1: { order: 20, isLocked: false }, // Third, unlocked.
+         * 			uid2: { order: 10, isLocked: true }, // Second, locked.
+         * 			uid3: { order: 30, isLocked: true }, // Fourth, locked.
+         * 			uid4: { order: 0, isLocked: false } // First, unlocked.
+         * 		}
+         * 	}
+         * )
+         * .then( ... )
+         * .catch( ... );
+         * ```
+         *
+         * Note, that the above code snippet is only an example. You need to implement your own features that will use these attributes.
+         *
+         * Roots attributes can be changed the same way as attributes set on other model nodes:
+         *
+         * ```ts
+         * editor.model.change( writer => {
+         * 	const root = editor.model.getRoot( 'uid3' );
+         *
+         * 	writer.setAttribute( 'order', 40, root );
+         * } );
+         * ```
+         *
+         * You can react to root attributes changes by listening to
+         * {@link module:engine/model/document~Document#event:change:data document `change:data` event}:
+         *
+         * ```ts
+         * editor.model.document.on( 'change:data', () => {
+         * 	const changedRoots = editor.model.document.differ.getChangedRoots();
+         *
+         * 	for ( const change of changedRoots ) {
+         * 		if ( change.attributes ) {
+         * 			const root = editor.model.getRoot( change.name );
+         *
+         * 			// ...
+         * 		}
+         * 	}
+         * } );
+         * ```
+         */
+        rootsAttributes?: Record<string, RootAttributes>;
+    }
+}

package/src/augmentation.js

@@ -0,0 +1,5 @@
+/**
+ * @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
+ */
+export {};

package/src/index.d.ts

@@ -6,3 +6,4 @@
  * @module editor-multi-root
  */
 export { default as MultiRootEditor } from './multirooteditor';
+import './augmentation';

package/src/index.js

@@ -6,3 +6,4 @@
  * @module editor-multi-root
  */
 export { default as MultiRootEditor } from './multirooteditor';
+import './augmentation';

package/src/multirooteditor.d.ts

@@ -5,8 +5,10 @@
 /**
  * @module editor-multi-root/multirooteditor
  */
-import { Editor, type EditorConfig } from 'ckeditor5/src/core';
+import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core';
+import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog';
 import MultiRootEditorUI from './multirooteditorui';
+import { type RootElement } from 'ckeditor5/src/engine';
 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.
@@ -46,7 +48,12 @@ export default class MultiRootEditor extends MultiRootEditor_base {
     /**
      * The elements on which the editor has been initialized.
      */
-    readonly sourceElements: Record<string, HTMLElement> | undefined;
+    readonly sourceElements: Record<string, HTMLElement>;
+    /**
+     * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+     * config property and should be returned by {@link #getRootsAttributes}.
+     */
+    private readonly _registeredRootsAttributesKeys;
     /**
      * Creates an instance of the multi-root editor.
      *
@@ -84,6 +91,170 @@ export default class MultiRootEditor extends MultiRootEditor_base {
      * ```
      */
     destroy(): Promise<unknown>;
+    /**
+     * Adds a new root to the editor.
+     *
+     * ```ts
+     * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
+     * ```
+     *
+     * After a root is added, you will be able to modify and retrieve its data.
+     *
+     * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
+     * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
+     *
+     * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
+     * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
+     * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
+     * be changed only using the editor API.
+     *
+     * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
+     * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
+     *
+     * ```ts
+     * editor.on( 'addRoot', ( evt, root ) => {
+     * 	const editableElement = editor.createEditable( root );
+     *
+     * 	// You may want to create a more complex DOM structure here.
+     * 	//
+     * 	// Alternatively, you may want to create a DOM structure before
+     * 	// calling `editor.addRoot()` and only append `editableElement` at
+     * 	// a proper place.
+     *
+     * 	document.querySelector( '#editors' ).appendChild( editableElement );
+     * } );
+     *
+     * // ...
+     *
+     * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
+     * ```
+     *
+     * You can set root attributes on the new root while you add it:
+     *
+     * ```ts
+     * // Add a collapsed root at fourth position from top.
+     * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
+     * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
+     * ```
+     *
+     * See also {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes` configuration option}.
+     *
+     * Note that attributes keys of attributes added in `attributes` option are also included in {@link #getRootsAttributes} return value.
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
+     *
+     * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
+     * combined into one, bigger UI element, and want them all to be undone together.
+     *
+     * ```ts
+     * let rowId = 0;
+     *
+     * editor.model.change( () => {
+     * 	editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
+     *
+     * 	rowId++;
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to add.
+     * @param options Additional options for the added root.
+     */
+    addRoot(rootName: string, { data, attributes, elementName, isUndoable }?: AddRootOptions): void;
+    /**
+     * Detaches a root from the editor.
+     *
+     * ```ts
+     * editor.detachRoot( 'myRoot' );
+     * ```
+     *
+     * A detached root is not entirely removed from the editor model, however it can be considered removed.
+     *
+     * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
+     * it is automatically removed as well. Finally, a detached root is not returned by
+     * {@link module:engine/model/document~Document#getRootNames} by default.
+     *
+     * It is possible to re-add a previously detached root calling {@link #addRoot}.
+     *
+     * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
+     * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
+     * the root and it **does not** remove the DOM element from the DOM structure of your application.
+     *
+     * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
+     * and call {@link #detachEditable}. Then, remove the DOM element from your application.
+     *
+     * ```ts
+     * editor.on( 'detachRoot', ( evt, root ) => {
+     * 	const editableElement = editor.detachEditable( root );
+     *
+     * 	// You may want to do an additional DOM clean-up here.
+     *
+     * 	editableElement.remove();
+     * } );
+     *
+     * // ...
+     *
+     * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
+     * ```
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
+     *
+     * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
+     * bigger UI element, and you want them all to be re-added together.
+     *
+     * ```ts
+     * editor.model.change( () => {
+     * 	editor.detachRoot( 'left-row-3', true );
+     * 	editor.detachRoot( 'center-row-3', true );
+     * 	editor.detachRoot( 'right-row-3', true );
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to detach.
+     * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
+     */
+    detachRoot(rootName: string, isUndoable?: boolean): void;
+    /**
+     * Creates and returns a new DOM editable element for the given root element.
+     *
+     * The new DOM editable is attached to the model root and can be used to modify the root content.
+     *
+     * @param root Root for which the editable element should be created.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @returns The created DOM element. Append it in a desired place in your application.
+     */
+    createEditable(root: RootElement, placeholder?: string): HTMLElement;
+    /**
+     * Detaches the DOM editable element that was attached to the given root.
+     *
+     * @param root Root for which the editable element should be detached.
+     * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
+     */
+    detachEditable(root: RootElement): HTMLElement;
+    /**
+     * Returns the document data for all attached roots.
+     *
+     * @param options Additional configuration for the retrieved data.
+     * Editor features may introduce more configuration options that can be set through this parameter.
+     * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
+     * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
+     * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
+     * @returns The full document data.
+     */
+    getFullData(options?: Record<string, unknown>): Record<string, string>;
+    /**
+     * Returns currently set roots attributes for attributes specified in
+     * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`} configuration option.
+     *
+     * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
+     */
+    getRootsAttributes(): Record<string, RootAttributes>;
     /**
      * Creates a new multi-root editor instance.
      *
@@ -219,5 +390,80 @@ export default class MultiRootEditor extends MultiRootEditor_base {
      * @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>;
+    /**
+     * The {@link module:core/context~Context} class.
+     *
+     * Exposed as static editor field for easier access in editor builds.
+     */
+    static Context: typeof Context;
+    /**
+     * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
+     *
+     * Exposed as static editor field for easier access in editor builds.
+     */
+    static EditorWatchdog: typeof EditorWatchdog;
+    /**
+     * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
+     *
+     * Exposed as static editor field for easier access in editor builds.
+     */
+    static ContextWatchdog: typeof ContextWatchdog;
 }
+/**
+ * Fired whenever a root is {@link ~MultiRootEditor#addRoot added or re-added} to the editor model.
+ *
+ * Use this event to {@link ~MultiRootEditor#createEditable create a DOM editable} for the added root and append the DOM element
+ * in a desired place in your application.
+ *
+ * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was added and detached
+ * in the same batch.
+ *
+ * @eventName ~MultiRootEditor#addRoot
+ * @param root The root that was added.
+ */
+export type AddRootEvent = {
+    name: 'addRoot';
+    args: [root: RootElement];
+};
+/**
+ * Fired whenever a root is {@link ~MultiRootEditor#detachRoot detached} from the editor model.
+ *
+ * Use this event to {@link ~MultiRootEditor#detachEditable destroy a DOM editable} for the detached root and remove the DOM element
+ * from your application.
+ *
+ * The event is fired after all changes from a given batch are applied. The event is not fired, if the root was detached and re-added
+ * in the same batch.
+ *
+ * @eventName ~MultiRootEditor#detachRoot
+ * @param root The root that was detached.
+ */
+export type DetachRootEvent = {
+    name: 'detachRoot';
+    args: [root: RootElement];
+};
+/**
+ * Additional options available when adding a root.
+ */
+export type AddRootOptions = {
+    /**
+     * Initial data for the root.
+     */
+    data?: string;
+    /**
+     * Initial attributes for the root.
+     */
+    attributes?: RootAttributes;
+    /**
+     * Element name for the root element in the model. It can be used to set different schema rules for different roots.
+     */
+    elementName?: string;
+    /**
+     * Whether creating the root can be undone (using the undo feature) or not.
+     */
+    isUndoable?: boolean;
+};
+/**
+ * Attributes set on a model root element.
+ */
+export type RootAttributes = Record<string, unknown>;
 export {};

package/src/multirooteditor.js

@@ -5,8 +5,9 @@
 /**
  * @module editor-multi-root/multirooteditor
  */
-import { Editor, DataApiMixin, secureSourceElement } from 'ckeditor5/src/core';
+import { Editor, Context, DataApiMixin, secureSourceElement } from 'ckeditor5/src/core';
 import { CKEditorError, getDataFromElement, setDataInElement } from 'ckeditor5/src/utils';
+import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog';
 import MultiRootEditorUI from './multirooteditorui';
 import MultiRootEditorUIView from './multirooteditoruiview';
 import { isElement as _isElement } from 'lodash-es';
@@ -61,9 +62,17 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
             throw new CKEditorError('editor-create-initial-data', null);
         }
         super(config);
+        /**
+         * Holds attributes keys that were passed in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+         * config property and should be returned by {@link #getRootsAttributes}.
+         */
+        this._registeredRootsAttributesKeys = new Set();
         if (!sourceIsData) {
             this.sourceElements = sourceElementsOrData;
         }
+        else {
+            this.sourceElements = {};
+        }
         if (this.config.get('initialData') === undefined) {
             // Create initial data object containing data from all roots.
             const initialData = {};
@@ -81,12 +90,55 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
             // Create root and `UIView` element for each editable container.
             this.model.document.createRoot('$root', rootName);
         }
+        if (this.config.get('rootsAttributes')) {
+            const rootsAttributes = this.config.get('rootsAttributes');
+            for (const [rootName, attributes] of Object.entries(rootsAttributes)) {
+                if (!rootNames.includes(rootName)) {
+                    /**
+                     * Trying to set attributes on a non-existing root.
+                     *
+                     * Roots specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes} do not match initial
+                     * editor roots.
+                     *
+                     * @error multi-root-editor-root-attributes-no-root
+                     */
+                    throw new CKEditorError('multi-root-editor-root-attributes-no-root', null);
+                }
+                for (const key of Object.keys(attributes)) {
+                    this._registeredRootsAttributesKeys.add(key);
+                }
+            }
+            this.data.on('init', () => {
+                this.model.enqueueChange({ isUndoable: false }, writer => {
+                    for (const [name, attributes] of Object.entries(rootsAttributes)) {
+                        const root = this.model.document.getRoot(name);
+                        for (const [key, value] of Object.entries(attributes)) {
+                            if (value !== null) {
+                                writer.setAttribute(key, value, root);
+                            }
+                        }
+                    }
+                });
+            });
+        }
         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);
+        this.model.document.on('change:data', () => {
+            const changedRoots = this.model.document.differ.getChangedRoots();
+            for (const changes of changedRoots) {
+                const root = this.model.document.getRoot(changes.name);
+                if (changes.state == 'attached') {
+                    this.fire('addRoot', root);
+                }
+                else if (changes.state == 'detached') {
+                    this.fire('detachRoot', root);
+                }
+            }
+        });
     }
     /**
      * Destroys the editor instance, releasing all resources used by it.
@@ -133,6 +185,224 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
             }
         });
     }
+    /**
+     * Adds a new root to the editor.
+     *
+     * ```ts
+     * editor.addRoot( 'myRoot', { data: '<p>Initial root data.</p>' } );
+     * ```
+     *
+     * After a root is added, you will be able to modify and retrieve its data.
+     *
+     * All root names must be unique. An error will be thrown if you will try to create a root with the name same as
+     * an already existing, attached root. However, you can call this method for a detached root. See also {@link #detachRoot}.
+     *
+     * Whenever a root is added, the editor instance will fire {@link #event:addRoot `addRoot` event}. The event is also called when
+     * the root is added indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only adds a root to the editor model. It **does not** create a DOM editable element for the new root.
+     * Until such element is created (and attached to the root), the root is "virtual": it is not displayed anywhere and its data can
+     * be changed only using the editor API.
+     *
+     * To create a DOM editable element for the root, listen to {@link #event:addRoot `addRoot` event} and call {@link #createEditable}.
+     * Then, insert the DOM element in a desired place, that will depend on the integration with your application and your requirements.
+     *
+     * ```ts
+     * editor.on( 'addRoot', ( evt, root ) => {
+     * 	const editableElement = editor.createEditable( root );
+     *
+     * 	// You may want to create a more complex DOM structure here.
+     * 	//
+     * 	// Alternatively, you may want to create a DOM structure before
+     * 	// calling `editor.addRoot()` and only append `editableElement` at
+     * 	// a proper place.
+     *
+     * 	document.querySelector( '#editors' ).appendChild( editableElement );
+     * } );
+     *
+     * // ...
+     *
+     * editor.addRoot( 'myRoot' ); // Will create a root, a DOM editable element and append it to `#editors` container element.
+     * ```
+     *
+     * You can set root attributes on the new root while you add it:
+     *
+     * ```ts
+     * // Add a collapsed root at fourth position from top.
+     * // Keep in mind that these are just examples of attributes. You need to provide your own features that will handle the attributes.
+     * editor.addRoot( 'myRoot', { attributes: { isCollapsed: true, index: 4 } } );
+     * ```
+     *
+     * See also {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes` configuration option}.
+     *
+     * Note that attributes keys of attributes added in `attributes` option are also included in {@link #getRootsAttributes} return value.
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for detaching the root using the undo feature.
+     *
+     * Additionally, you can group adding multiple roots in one undo step. This can be useful if you add multiple roots that are
+     * combined into one, bigger UI element, and want them all to be undone together.
+     *
+     * ```ts
+     * let rowId = 0;
+     *
+     * editor.model.change( () => {
+     * 	editor.addRoot( 'left-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'center-row-' + rowId, { isUndoable: true } );
+     * 	editor.addRoot( 'right-row-' + rowId, { isUndoable: true } );
+     *
+     * 	rowId++;
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to add.
+     * @param options Additional options for the added root.
+     */
+    addRoot(rootName, { data = '', attributes = {}, elementName = '$root', isUndoable = false } = {}) {
+        const dataController = this.data;
+        const registeredKeys = this._registeredRootsAttributesKeys;
+        if (isUndoable) {
+            this.model.change(_addRoot);
+        }
+        else {
+            this.model.enqueueChange({ isUndoable: false }, _addRoot);
+        }
+        function _addRoot(writer) {
+            const root = writer.addRoot(rootName, elementName);
+            if (data) {
+                writer.insert(dataController.parse(data, root), root, 0);
+            }
+            for (const key of Object.keys(attributes)) {
+                registeredKeys.add(key);
+                writer.setAttribute(key, attributes[key], root);
+            }
+        }
+    }
+    /**
+     * Detaches a root from the editor.
+     *
+     * ```ts
+     * editor.detachRoot( 'myRoot' );
+     * ```
+     *
+     * A detached root is not entirely removed from the editor model, however it can be considered removed.
+     *
+     * After a root is detached all its children are removed, all markers inside it are removed, and whenever something is inserted to it,
+     * it is automatically removed as well. Finally, a detached root is not returned by
+     * {@link module:engine/model/document~Document#getRootNames} by default.
+     *
+     * It is possible to re-add a previously detached root calling {@link #addRoot}.
+     *
+     * Whenever a root is detached, the editor instance will fire {@link #event:detachRoot `detachRoot` event}. The event is also
+     * called when the root is detached indirectly, e.g. by the undo feature or on a remote client during real-time collaboration.
+     *
+     * Note, that this method only detached a root in the editor model. It **does not** destroy the DOM editable element linked with
+     * the root and it **does not** remove the DOM element from the DOM structure of your application.
+     *
+     * To properly remove a DOM editable element after a root was detached, listen to {@link #event:detachRoot `detachRoot` event}
+     * and call {@link #detachEditable}. Then, remove the DOM element from your application.
+     *
+     * ```ts
+     * editor.on( 'detachRoot', ( evt, root ) => {
+     * 	const editableElement = editor.detachEditable( root );
+     *
+     * 	// You may want to do an additional DOM clean-up here.
+     *
+     * 	editableElement.remove();
+     * } );
+     *
+     * // ...
+     *
+     * editor.detachRoot( 'myRoot' ); // Will detach the root, and remove the DOM editable element.
+     * ```
+     *
+     * By setting `isUndoable` flag to `true`, you can allow for re-adding the root using the undo feature.
+     *
+     * Additionally, you can group detaching multiple roots in one undo step. This can be useful if the roots are combined into one,
+     * bigger UI element, and you want them all to be re-added together.
+     *
+     * ```ts
+     * editor.model.change( () => {
+     * 	editor.detachRoot( 'left-row-3', true );
+     * 	editor.detachRoot( 'center-row-3', true );
+     * 	editor.detachRoot( 'right-row-3', true );
+     * } );
+     * ```
+     *
+     * @param rootName Name of the root to detach.
+     * @param isUndoable Whether detaching the root can be undone (using the undo feature) or not.
+     */
+    detachRoot(rootName, isUndoable = false) {
+        if (isUndoable) {
+            this.model.change(writer => writer.detachRoot(rootName));
+        }
+        else {
+            this.model.enqueueChange({ isUndoable: false }, writer => writer.detachRoot(rootName));
+        }
+    }
+    /**
+     * Creates and returns a new DOM editable element for the given root element.
+     *
+     * The new DOM editable is attached to the model root and can be used to modify the root content.
+     *
+     * @param root Root for which the editable element should be created.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     * @returns The created DOM element. Append it in a desired place in your application.
+     */
+    createEditable(root, placeholder) {
+        const editable = this.ui.view.createEditable(root.rootName);
+        this.ui.addEditable(editable, placeholder);
+        this.editing.view.forceRender();
+        return editable.element;
+    }
+    /**
+     * Detaches the DOM editable element that was attached to the given root.
+     *
+     * @param root Root for which the editable element should be detached.
+     * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
+     */
+    detachEditable(root) {
+        const rootName = root.rootName;
+        const editable = this.ui.view.editables[rootName];
+        this.ui.removeEditable(editable);
+        this.ui.view.removeEditable(rootName);
+        return editable.element;
+    }
+    /**
+     * Returns the document data for all attached roots.
+     *
+     * @param options Additional configuration for the retrieved data.
+     * Editor features may introduce more configuration options that can be set through this parameter.
+     * @param options.trim Whether returned data should be trimmed. This option is set to `'empty'` by default,
+     * which means that whenever editor content is considered empty, an empty string is returned. To turn off trimming
+     * use `'none'`. In such cases exact content will be returned (for example `'<p>&nbsp;</p>'` for an empty editor).
+     * @returns The full document data.
+     */
+    getFullData(options) {
+        const data = {};
+        for (const rootName of this.model.document.getRootNames()) {
+            data[rootName] = this.data.get({ ...options, rootName });
+        }
+        return data;
+    }
+    /**
+     * Returns currently set roots attributes for attributes specified in
+     * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`} configuration option.
+     *
+     * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
+     */
+    getRootsAttributes() {
+        const rootsAttributes = {};
+        const keys = Array.from(this._registeredRootsAttributesKeys);
+        for (const rootName of this.model.document.getRootNames()) {
+            rootsAttributes[rootName] = {};
+            const root = this.model.document.getRoot(rootName);
+            for (const key of keys) {
+                rootsAttributes[rootName][key] = root.hasAttribute(key) ? root.getAttribute(key) : null;
+            }
+        }
+        return rootsAttributes;
+    }
     /**
      * Creates a new multi-root editor instance.
      *
@@ -285,6 +555,24 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
         });
     }
 }
+/**
+ * The {@link module:core/context~Context} class.
+ *
+ * Exposed as static editor field for easier access in editor builds.
+ */
+MultiRootEditor.Context = Context;
+/**
+ * The {@link module:watchdog/editorwatchdog~EditorWatchdog} class.
+ *
+ * Exposed as static editor field for easier access in editor builds.
+ */
+MultiRootEditor.EditorWatchdog = EditorWatchdog;
+/**
+ * The {@link module:watchdog/contextwatchdog~ContextWatchdog} class.
+ *
+ * Exposed as static editor field for easier access in editor builds.
+ */
+MultiRootEditor.ContextWatchdog = ContextWatchdog;
 function getInitialData(sourceElementOrData) {
     return isElement(sourceElementOrData) ? getDataFromElement(sourceElementOrData) : sourceElementOrData;
 }

package/src/multirooteditorui.d.ts

@@ -6,7 +6,7 @@
  * @module editor-multi-root/multirooteditorui
  */
 import { type Editor } from 'ckeditor5/src/core';
-import { EditorUI } from 'ckeditor5/src/ui';
+import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui';
 import type MultiRootEditorUIView from './multirooteditoruiview';
 /**
  * The multi-root editor UI class.
@@ -16,6 +16,10 @@ export default class MultiRootEditorUI extends EditorUI {
      * The main (top–most) view of the editor UI.
      */
     readonly view: MultiRootEditorUIView;
+    /**
+     * The editable element that was focused the last time when any of the editables had focus.
+     */
+    private _lastFocusedEditableElement;
     /**
      * Creates an instance of the multi-root editor UI class.
      *
@@ -27,6 +31,30 @@ export default class MultiRootEditorUI extends EditorUI {
      * Initializes the UI.
      */
     init(): void;
+    /**
+     * Adds the editable to the editor UI.
+     *
+     * After the editable is added to the editor UI it can be considered "active".
+     *
+     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
+     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
+     *
+     * @param editable The editable instance to add.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    addEditable(editable: InlineEditableUIView, placeholder?: string): void;
+    /**
+     * Removes the editable instance from the editor UI.
+     *
+     * Removed editable can be considered "deactivated".
+     *
+     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
+     * {@link #addEditable} is removed.
+     *
+     * @param editable Editable to remove from the editor UI.
+     */
+    removeEditable(editable: InlineEditableUIView): void;
     /**
      * @inheritDoc
      */
@@ -36,7 +64,11 @@ export default class MultiRootEditorUI extends EditorUI {
      */
     private _initToolbar;
     /**
-     * Enable the placeholder text on the editing roots, if any was configured.
+     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     *
+     * @param editable Editable on which the placeholder should be set.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
      */
     private _initPlaceholder;
 }

package/src/multirooteditorui.js

@@ -17,18 +17,13 @@ export default class MultiRootEditorUI extends EditorUI {
     constructor(editor, view) {
         super(editor);
         this.view = view;
+        this._lastFocusedEditableElement = null;
     }
     /**
      * 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
@@ -38,7 +33,7 @@ export default class MultiRootEditorUI extends EditorUI {
         this.focusTracker.on('change:focusedElement', (evt, name, focusedElement) => {
             for (const editable of Object.values(this.view.editables)) {
                 if (focusedElement === editable.element) {
-                    lastFocusedEditableElement = editable.element;
+                    this._lastFocusedEditableElement = editable.element;
                 }
             }
         });
@@ -48,62 +43,90 @@ export default class MultiRootEditorUI extends EditorUI {
         // to another within the editor UI.
         this.focusTracker.on('change:isFocused', (evt, name, isFocused) => {
             if (!isFocused) {
-                lastFocusedEditableElement = null;
+                this._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.addEditable(editable);
         }
-        this._initPlaceholder();
         this._initToolbar();
         this.fire('ready');
     }
+    /**
+     * Adds the editable to the editor UI.
+     *
+     * After the editable is added to the editor UI it can be considered "active".
+     *
+     * The editable is attached to the editor editing pipeline, which means that it will be updated as the editor model updates and
+     * changing its content will be reflected in the editor model. Keystrokes, focus handling and placeholder are initialized.
+     *
+     * @param editable The editable instance to add.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
+     */
+    addEditable(editable, placeholder) {
+        // 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;
+        // 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.
+        this.editor.editing.view.attachDomRoot(editableElement, editable.name);
+        // 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 this._lastFocusedEditableElement === editableElement;
+            }
+        });
+        this._initPlaceholder(editable, placeholder);
+    }
+    /**
+     * Removes the editable instance from the editor UI.
+     *
+     * Removed editable can be considered "deactivated".
+     *
+     * The editable is detached from the editing pipeline, so model changes are no longer reflected in it. All handling added in
+     * {@link #addEditable} is removed.
+     *
+     * @param editable Editable to remove from the editor UI.
+     */
+    removeEditable(editable) {
+        this.editor.editing.view.detachDomRoot(editable.name);
+        editable.unbind('isFocused');
+        this.removeEditableElement(editable.name);
+    }
     /**
      * @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);
+            this.removeEditable(editable);
         }
-        view.destroy();
+        this.view.destroy();
     }
     /**
      * Initializes the editor main toolbar and its panel.
@@ -113,31 +136,34 @@ export default class MultiRootEditorUI extends EditorUI {
         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.
+        // 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.
+     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     *
+     * @param editable Editable on which the placeholder should be set.
+     * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
+     * {@link module:core/editor/editorconfig~EditorConfig#placeholder editor configuration} will be used (if it was provided).
      */
-    _initPlaceholder() {
-        const editor = this.editor;
-        const editingView = editor.editing.view;
-        const placeholder = editor.config.get('placeholder');
+    _initPlaceholder(editable, 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
-                });
+            const configPlaceholder = this.editor.config.get('placeholder');
+            if (configPlaceholder) {
+                placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
             }
         }
+        if (!placeholder) {
+            return;
+        }
+        const editingView = this.editor.editing.view;
+        const editingRoot = editingView.document.getRoot(editable.name);
+        enablePlaceholder({
+            view: editingView,
+            element: editingRoot,
+            text: placeholder,
+            isDirectHost: false,
+            keepOnFocus: true
+        });
     }
 }

package/src/multirooteditoruiview.d.ts

@@ -27,6 +27,10 @@ export default class MultiRootEditorUIView extends EditorUIView {
      */
     readonly editables: Record<string, InlineEditableUIView>;
     readonly editable: InlineEditableUIView;
+    /**
+     * The editing view instance this view is related to.
+     */
+    private readonly _editingView;
     /**
      * Creates an instance of the multi-root editor UI view.
      *
@@ -46,6 +50,23 @@ export default class MultiRootEditorUIView extends EditorUIView {
         editableElements?: Record<string, HTMLElement>;
         shouldToolbarGroupWhenFull?: boolean;
     });
+    /**
+     * Creates an editable instance with given name and registers it in the editor UI view.
+     *
+     * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
+     * DOM element and use it instead.
+     *
+     * @param editableName The name for the editable.
+     * @param editableElement DOM element for which the editable should be created.
+     * @returns The created editable instance.
+     */
+    createEditable(editableName: string, editableElement?: HTMLElement): InlineEditableUIView;
+    /**
+     * Destroys and removes the editable from the editor UI view.
+     *
+     * @param editableName The name of the editable that should be removed.
+     */
+    removeEditable(editableName: string): void;
     /**
      * @inheritDoc
      */

package/src/multirooteditoruiview.js

@@ -33,19 +33,15 @@ export default class MultiRootEditorUIView extends EditorUIView {
      */
     constructor(locale, editingView, editableNames, options = {}) {
         super(locale);
-        const t = locale.t;
+        this._editingView = editingView;
         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;
+            const editableElement = options.editableElements ? options.editableElements[editableName] : undefined;
+            this.createEditable(editableName, editableElement);
         }
         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.
@@ -62,12 +58,49 @@ export default class MultiRootEditorUIView extends EditorUIView {
             }
         });
     }
+    /**
+     * Creates an editable instance with given name and registers it in the editor UI view.
+     *
+     * If `editableElement` is provided, the editable instance will be created on top of it. Otherwise, the editor will create a new
+     * DOM element and use it instead.
+     *
+     * @param editableName The name for the editable.
+     * @param editableElement DOM element for which the editable should be created.
+     * @returns The created editable instance.
+     */
+    createEditable(editableName, editableElement) {
+        const t = this.locale.t;
+        const editable = new InlineEditableUIView(this.locale, this._editingView, editableElement, {
+            label: editable => {
+                return t('Rich Text Editor. Editing area: %0', editable.name);
+            }
+        });
+        this.editables[editableName] = editable;
+        editable.name = editableName;
+        if (this.isRendered) {
+            this.registerChild(editable);
+        }
+        return editable;
+    }
+    /**
+     * Destroys and removes the editable from the editor UI view.
+     *
+     * @param editableName The name of the editable that should be removed.
+     */
+    removeEditable(editableName) {
+        const editable = this.editables[editableName];
+        if (this.isRendered) {
+            this.deregisterChild(editable);
+        }
+        delete this.editables[editableName];
+        editable.destroy();
+    }
     /**
      * @inheritDoc
      */
     render() {
         super.render();
         this.registerChild(Object.values(this.editables));
-        this.registerChild([this.toolbar]);
+        this.registerChild(this.toolbar);
     }
 }