@ckeditor/ckeditor5-editor-multi-root 38.2.0-alpha.1 → 39.0.0

package/README.md

@@ -4,7 +4,6 @@ CKEditor 5 multi-root editor implementation
 [![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).
 

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")},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 d 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 c=function(t){return null!=t&&"object"==typeof t};const l="object"==typeof global&&global&&global.Object===Object&&global;var h="object"==typeof self&&self&&self.Object===Object&&self;const u=(l||h||Function("return this")()).Symbol;var f=Object.prototype,b=f.hasOwnProperty,m=f.toString,g=u?u.toStringTag:void 0;const y=function(t){var e=b.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 E=Object.prototype.toString;const v=function(t){return E.call(t)};var w=u?u.toStringTag:void 0;const R=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":w&&w in Object(t)?y(t):v(t)};const p=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var O=Function.prototype,j=Object.prototype,_=O.toString,C=j.hasOwnProperty,k=_.call(Object);const x=function(t){if(!c(t)||"[object Object]"!=R(t))return!1;var e=p(t);if(null===e)return!0;var o=C.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&_.call(o)==k};const T=function(t){return c(t)&&1===t.nodeType&&!x(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._readOnlyRootLocks=new Map,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]);this.editing.view.document.roots.on("add",((t,e)=>{e.unbind("isReadOnly"),e.bind("isReadOnly").to(this.editing.view.document,"isReadOnly",(t=>t||this._readOnlyRootLocks.has(e.rootName))),e.on("change:isReadOnly",((t,o,i)=>{const s=this.editing.view.createRangeIn(e);for(const t of s.getItems())t.is("editableElement")&&(t.unbind("isReadOnly"),t.isReadOnly=i)}))}));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 c={shouldToolbarGroupWhenFull:!this.config.get("toolbar.shouldNotGroupWhenFull"),editableElements:r?void 0:o},l=new d(this.locale,this.editing.view,s,c);this.ui=new a(this,l),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);"detached"==e.state&&this.fire("detachRoot",t)}for(const e of t){const t=this.model.document.getRoot(e.name);"attached"==e.state&&this.fire("addRoot",t)}})),this.listenTo(this.model,"canEditAt",((t,[e])=>{if(!e)return;let o=!1;for(const t of e.getRanges()){const e=t.root.rootName;if(this._readOnlyRootLocks.has(e)){o=!0;break}}o&&(t.return=!1,t.stop())}),{priority:"high"})}destroy(){const t=this.config.get("updateSourceElementOnDestroy"),o={};for(const e of Object.keys(this.sourceElements))o[e]=t?this.getData({rootName:e}):"";return this.ui.destroy(),super.destroy().then((()=>{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}disableRoot(t,o){if("$graveyard"==t)throw new e.CKEditorError("multi-root-editor-cannot-disable-graveyard-root",this);const i=this._readOnlyRootLocks.get(t);if(i)i.add(o);else{this._readOnlyRootLocks.set(t,new Set([o]));this.editing.view.document.getRoot(t).isReadOnly=!0,Array.from(this.commands.commands()).forEach((t=>t.affectsData&&t.refresh()))}}enableRoot(t,e){const o=this._readOnlyRootLocks.get(t);if(o&&o.has(e))if(1===o.size){this._readOnlyRootLocks.delete(t);this.editing.view.document.getRoot(t).isReadOnly=this.isReadOnly,Array.from(this.commands.commands()).forEach((t=>t.affectsData&&t.refresh()))}else o.delete(e)}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._verifyRootsWithInitialData(),s.data.init(s.config.get("initialData"))))).then((()=>s.fire("ready"))).then((()=>s)))}))}_verifyRootsWithInitialData(){const t=this.config.get("initialData");for(const o of this.model.document.getRootNames())if(!(o in t))throw new e.CKEditorError("multi-root-editor-root-initial-data-mismatch",null);for(const o of Object.keys(t)){const t=this.model.document.getRoot(o);if(!t||!t.isAttached())throw new e.CKEditorError("multi-root-editor-root-initial-data-mismatch",null)}}}function D(t){return T(t)}A.Context=t.Context,A.EditorWatchdog=s.EditorWatchdog,A.ContextWatchdog=s.ContextWatchdog})(),(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:()=>D});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])}const o=this.editor.editing.view,i=o.document.getRoot(t.name);e&&(i.placeholder=e),(0,n.enablePlaceholder)({view:o,element:i,isDirectHost:!1,keepOnFocus:!0})}}class d 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 c="object"==typeof global&&global&&global.Object===Object&&global;var h="object"==typeof self&&self&&self.Object===Object&&self;const u=(c||h||Function("return this")()).Symbol;var f=Object.prototype,m=f.hasOwnProperty,b=f.toString,g=u?u.toStringTag:void 0;const y=function(t){var e=m.call(t,g),o=t[g];try{t[g]=void 0;var i=!0}catch(t){}var s=b.call(t);return i&&(e?t[g]=o:delete t[g]),s};var E=Object.prototype.toString;const R=function(t){return E.call(t)};var v=u?u.toStringTag:void 0;const p=function(t){return null==t?void 0===t?"[object Undefined]":"[object Null]":v&&v in Object(t)?y(t):R(t)};const w=function(t,e){return function(o){return t(e(o))}}(Object.getPrototypeOf,Object);var O=Function.prototype,j=Object.prototype,_=O.toString,C=j.hasOwnProperty,k=_.call(Object);const A=function(t){if(!l(t)||"[object Object]"!=p(t))return!1;var e=w(t);if(null===e)return!0;var o=C.call(e,"constructor")&&e.constructor;return"function"==typeof o&&o instanceof o&&_.call(o)==k};const x=function(t){return l(t)&&1===t.nodeType&&!A(t)};class D 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&&Object.keys(i.initialData).length>0)throw new e.CKEditorError("editor-create-initial-data",null);if(super(i),this._registeredRootsAttributesKeys=new Set,this._readOnlyRootLocks=new Map,this.sourceElements=r?{}:o,void 0===this.config.get("initialData")){const t={};for(const i of s)t[i]=T(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]);this.editing.view.document.roots.on("add",((t,e)=>{e.unbind("isReadOnly"),e.bind("isReadOnly").to(this.editing.view.document,"isReadOnly",(t=>t||this._readOnlyRootLocks.has(e.rootName))),e.on("change:isReadOnly",((t,o,i)=>{const s=this.editing.view.createRangeIn(e);for(const t of s.getItems())t.is("editableElement")&&(t.unbind("isReadOnly"),t.isReadOnly=i)}))}));for(const t of s)this.model.document.createRoot("$root",t);if(this.config.get("lazyRoots"))for(const t of this.config.get("lazyRoots")){this.model.document.createRoot("$root",t)._isLoaded=!1}if(this.config.get("rootsAttributes")){const t=this.config.get("rootsAttributes");for(const[o,i]of Object.entries(t)){if(!this.model.document.getRoot(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},c=new d(this.locale,this.editing.view,s,l);this.ui=new a(this,c),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);"detached"==e.state&&this.fire("detachRoot",t)}for(const e of t){const t=this.model.document.getRoot(e.name);"attached"==e.state&&this.fire("addRoot",t)}})),this.listenTo(this.model,"canEditAt",((t,[e])=>{if(!e)return;let o=!1;for(const t of e.getRanges()){const e=t.root;if(this._readOnlyRootLocks.has(e.rootName)){o=!0;break}}o&&(t.return=!1,t.stop())}),{priority:"high"}),this.decorate("loadRoot"),this.on("loadRoot",((t,[o])=>{const i=this.model.document.getRoot(o);if(!i)throw new e.CKEditorError("multi-root-editor-load-root-no-root",this,{rootName:o});i._isLoaded&&((0,e.logWarning)("multi-root-editor-load-root-already-loaded"),t.stop())}),{priority:"highest"})}destroy(){const t=this.config.get("updateSourceElementOnDestroy"),o={};for(const e of Object.keys(this.sourceElements))o[e]=t?this.getData({rootName:e}):"";return this.ui.destroy(),super.destroy().then((()=>{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}loadRoot(t,{data:e="",attributes:o={}}={}){const i=this.model.document.getRoot(t);this.model.enqueueChange({isUndoable:!1},(t=>{e&&t.insert(this.data.parse(e,i),i,0);for(const e of Object.keys(o))this._registeredRootsAttributesKeys.add(e),t.setAttribute(e,o[e],i);i._isLoaded=!0,this.model.document.differ._bufferRootLoad(i)}))}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={};for(const e of this.model.document.getRootNames())t[e]=this.getRootAttributes(e);return t}getRootAttributes(t){const e={},o=this.model.document.getRoot(t);for(const t of this._registeredRootsAttributesKeys)e[t]=o.hasAttribute(t)?o.getAttribute(t):null;return e}disableRoot(t,o){if("$graveyard"==t)throw new e.CKEditorError("multi-root-editor-cannot-disable-graveyard-root",this);const i=this._readOnlyRootLocks.get(t);if(i)i.add(o);else{this._readOnlyRootLocks.set(t,new Set([o]));this.editing.view.document.getRoot(t).isReadOnly=!0,Array.from(this.commands.commands()).forEach((t=>t.affectsData&&t.refresh()))}}enableRoot(t,e){const o=this._readOnlyRootLocks.get(t);if(o&&o.has(e))if(1===o.size){this._readOnlyRootLocks.delete(t);this.editing.view.document.getRoot(t).isReadOnly=this.isReadOnly,Array.from(this.commands.commands()).forEach((t=>t.affectsData&&t.refresh()))}else o.delete(e)}static create(t,o={}){return new Promise((i=>{for(const o of Object.values(t))if(T(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._verifyRootsWithInitialData(),s.data.init(s.config.get("initialData"))))).then((()=>s.fire("ready"))).then((()=>s)))}))}_verifyRootsWithInitialData(){const t=this.config.get("initialData");for(const o of this.model.document.getRootNames())if(!(o in t))throw new e.CKEditorError("multi-root-editor-root-initial-data-mismatch",null);for(const o of Object.keys(t)){const t=this.model.document.getRoot(o);if(!t||!t.isAttached())throw new e.CKEditorError("multi-root-editor-root-initial-data-mismatch",null)}}}function T(t){return x(t)}D.Context=t.Context,D.EditorWatchdog=s.EditorWatchdog,D.ContextWatchdog=s.ContextWatchdog})(),(window.CKEditor5=window.CKEditor5||{}).editorMultiRoot=i})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-editor-multi-root",
-  "version": "38.2.0-alpha.1",
+  "version": "39.0.0",
   "description": "Multi-root editor implementation for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -10,10 +10,9 @@
     "ckeditor5-dll"
   ],
   "main": "src/index.js",
-  "type": "module",
   "dependencies": {
-    "ckeditor5": "38.2.0-alpha.1",
-    "lodash-es": "^4.17.15"
+    "ckeditor5": "39.0.0",
+    "lodash-es": "4.17.21"
   },
   "engines": {
     "node": ">=16.0.0",

package/src/augmentation.d.ts

@@ -2,7 +2,7 @@
  * @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.js';
+import { type RootAttributes } from './multirooteditor';
 declare module '@ckeditor/ckeditor5-core' {
     interface EditorConfig {
         /**
@@ -76,5 +76,15 @@ declare module '@ckeditor/ckeditor5-core' {
          * ```
          */
         rootsAttributes?: Record<string, RootAttributes>;
+        /**
+         * List of names of all the roots that exist in the document but are not initially loaded by the editor.
+         *
+         * These roots can be loaded at any time after the editor has been initialized, using
+         * {@link module:editor-multi-root/multirooteditor~MultiRootEditor#loadRoot `MultiRootEditor#lazyRoot()`}.
+         *
+         * This is useful for handling big documents that contain hundreds of roots, or contain very large roots, which may have
+         * impact editor performance if loaded all together.
+         */
+        lazyRoots?: Array<string>;
     }
 }

package/src/index.d.ts

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

package/src/index.js

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

package/src/multirooteditor.d.ts

@@ -5,11 +5,12 @@
 /**
  * @module editor-multi-root/multirooteditor
  */
-import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core.js';
-import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog.js';
-import MultiRootEditorUI from './multirooteditorui.js';
-import { type RootElement } from 'ckeditor5/src/engine.js';
-declare const MultiRootEditor_base: import("ckeditor5/src/utils.js").Mixed<typeof Editor, import("ckeditor5/src/core.js").DataApi>;
+import { Editor, Context, type EditorConfig } from 'ckeditor5/src/core';
+import { type DecoratedMethodEvent } from 'ckeditor5/src/utils';
+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.
  *
@@ -241,6 +242,31 @@ export default class MultiRootEditor extends MultiRootEditor_base {
      * @returns The DOM element that was detached. You may want to remove it from your application DOM structure.
      */
     detachEditable(root: RootElement): HTMLElement;
+    /**
+     * Loads a root that has been previously declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
+     * configuration option.
+     *
+     * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
+     * loading a root cannot be reverted using the undo feature.
+     *
+     * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among other, means that all
+     * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
+     * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
+     *
+     * Until the root becomes loaded, all above mechanisms are suppressed.
+     *
+     * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
+     *
+     * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
+     * with the remote editing session, before the root is added to the editor.
+     *
+     * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
+     *
+     * @param rootName Name of the root to load.
+     * @param options Additional options for the loaded root.
+     * @fires loadRoot
+     */
+    loadRoot(rootName: string, { data, attributes }?: LoadRootOptions): void;
     /**
      * Returns the document data for all attached roots.
      *
@@ -253,12 +279,23 @@ export default class MultiRootEditor extends MultiRootEditor_base {
      */
     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 attributes for all attached roots.
+     *
+     * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+     * configuration option will be returned.
      *
      * @returns Object with roots attributes. Keys are roots names, while values are attributes set on given root.
      */
     getRootsAttributes(): Record<string, RootAttributes>;
+    /**
+     * Returns attributes for the specified root.
+     *
+     * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+     * configuration option will be returned.
+     *
+     * @param rootName
+     */
+    getRootAttributes(rootName: string): RootAttributes;
     /**
      * Switches given editor root to the read-only mode.
      *
@@ -494,6 +531,16 @@ export type DetachRootEvent = {
     name: 'detachRoot';
     args: [root: RootElement];
 };
+/**
+ * Event fired when {@link ~MultiRootEditor#loadRoot} method is called.
+ *
+ * The {@link ~MultiRootEditor#loadRoot default action of that method} is implemented as a
+ * listener to this event, so it can be fully customized by the features.
+ *
+ * @eventName ~MultiRootEditor#loadRoot
+ * @param args The arguments passed to the original method.
+ */
+export type LoadRootEvent = DecoratedMethodEvent<MultiRootEditor, 'loadRoot'>;
 /**
  * Additional options available when adding a root.
  */
@@ -515,6 +562,10 @@ export type AddRootOptions = {
      */
     isUndoable?: boolean;
 };
+/**
+ * Additional options available when loading a root.
+ */
+export type LoadRootOptions = Omit<AddRootOptions, 'elementName' | 'isUndoable'>;
 /**
  * Attributes set on a model root element.
  */

package/src/multirooteditor.js

@@ -5,11 +5,11 @@
 /**
  * @module editor-multi-root/multirooteditor
  */
-import { Editor, Context, DataApiMixin, secureSourceElement } from 'ckeditor5/src/core.js';
-import { CKEditorError, getDataFromElement, setDataInElement } from 'ckeditor5/src/utils.js';
-import { ContextWatchdog, EditorWatchdog } from 'ckeditor5/src/watchdog.js';
-import MultiRootEditorUI from './multirooteditorui.js';
-import MultiRootEditorUIView from './multirooteditoruiview.js';
+import { Editor, Context, DataApiMixin, secureSourceElement } from 'ckeditor5/src/core';
+import { CKEditorError, getDataFromElement, setDataInElement, logWarning } 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';
 /**
  * The {@glink installation/getting-started/predefined-builds#multi-root-editor multi-root editor} implementation.
@@ -56,7 +56,7 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
     constructor(sourceElementsOrData, config = {}) {
         const rootNames = Object.keys(sourceElementsOrData);
         const sourceIsData = rootNames.length === 0 || typeof sourceElementsOrData[rootNames[0]] === 'string';
-        if (sourceIsData && config.initialData !== undefined) {
+        if (sourceIsData && config.initialData !== undefined && Object.keys(config.initialData).length > 0) {
             // Documented in core/editor/editorconfig.jsdoc.
             // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
             throw new CKEditorError('editor-create-initial-data', null);
@@ -113,10 +113,16 @@ 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('lazyRoots')) {
+            for (const rootName of this.config.get('lazyRoots')) {
+                const root = this.model.document.createRoot('$root', rootName);
+                root._isLoaded = false;
+            }
+        }
         if (this.config.get('rootsAttributes')) {
             const rootsAttributes = this.config.get('rootsAttributes');
             for (const [rootName, attributes] of Object.entries(rootsAttributes)) {
-                if (!rootNames.includes(rootName)) {
+                if (!this.model.document.getRoot(rootName)) {
                     /**
                      * Trying to set attributes on a non-existing root.
                      *
@@ -177,8 +183,8 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
             }
             let selectionInReadOnlyRoot = false;
             for (const range of selection.getRanges()) {
-                const rootName = range.root.rootName;
-                if (this._readOnlyRootLocks.has(rootName)) {
+                const root = range.root;
+                if (this._readOnlyRootLocks.has(root.rootName)) {
                     selectionInReadOnlyRoot = true;
                     break;
                 }
@@ -190,6 +196,27 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
                 evt.stop();
             }
         }, { priority: 'high' });
+        this.decorate('loadRoot');
+        this.on('loadRoot', (evt, [rootName]) => {
+            const root = this.model.document.getRoot(rootName);
+            if (!root) {
+                /**
+                 * The root to load does not exist.
+                 *
+                 * @error multi-root-editor-load-root-no-root
+                 */
+                throw new CKEditorError('multi-root-editor-load-root-no-root', this, { rootName });
+            }
+            if (root._isLoaded) {
+                /**
+                 * The root to load was already loaded before. The `loadRoot()` call has no effect.
+                 *
+                 * @error multi-root-editor-load-root-already-loaded
+                 */
+                logWarning('multi-root-editor-load-root-already-loaded');
+                evt.stop();
+            }
+        }, { priority: 'highest' });
     }
     /**
      * Destroys the editor instance, releasing all resources used by it.
@@ -415,6 +442,45 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
         this.ui.view.removeEditable(rootName);
         return editable.element;
     }
+    /**
+     * Loads a root that has been previously declared in {@link module:core/editor/editorconfig~EditorConfig#lazyRoots `lazyRoots`}
+     * configuration option.
+     *
+     * Only roots specified in the editor config can be loaded. A root cannot be loaded multiple times. A root cannot be unloaded and
+     * loading a root cannot be reverted using the undo feature.
+     *
+     * When a root becomes loaded, it will be treated by the editor as though it was just added. This, among other, means that all
+     * related events and mechanisms will be fired, including {@link ~MultiRootEditor#event:addRoot `addRoot` event},
+     * {@link module:engine/model/document~Document#event:change `model.Document` `change` event}, model post-fixers and conversion.
+     *
+     * Until the root becomes loaded, all above mechanisms are suppressed.
+     *
+     * This method is {@link module:utils/observablemixin~Observable#decorate decorated}.
+     *
+     * When this method is used in real-time collaboration environment, its effects become asynchronous as the editor will first synchronize
+     * with the remote editing session, before the root is added to the editor.
+     *
+     * If the root has been already loaded by any other client, the additional data passed in `loadRoot()` parameters will be ignored.
+     *
+     * @param rootName Name of the root to load.
+     * @param options Additional options for the loaded root.
+     * @fires loadRoot
+     */
+    loadRoot(rootName, { data = '', attributes = {} } = {}) {
+        // `root` will be defined as it is guaranteed by a check in a higher priority callback.
+        const root = this.model.document.getRoot(rootName);
+        this.model.enqueueChange({ isUndoable: false }, writer => {
+            if (data) {
+                writer.insert(this.data.parse(data, root), root, 0);
+            }
+            for (const key of Object.keys(attributes)) {
+                this._registeredRootsAttributesKeys.add(key);
+                writer.setAttribute(key, attributes[key], root);
+            }
+            root._isLoaded = true;
+            this.model.document.differ._bufferRootLoad(root);
+        });
+    }
     /**
      * Returns the document data for all attached roots.
      *
@@ -433,23 +499,36 @@ export default class MultiRootEditor extends DataApiMixin(Editor) {
         return data;
     }
     /**
-     * Returns currently set roots attributes for attributes specified in
-     * {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`} configuration option.
+     * Returns attributes for all attached roots.
+     *
+     * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+     * configuration option will be returned.
      *
      * @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;
-            }
+            rootsAttributes[rootName] = this.getRootAttributes(rootName);
         }
         return rootsAttributes;
     }
+    /**
+     * Returns attributes for the specified root.
+     *
+     * Note: only attributes specified in {@link module:core/editor/editorconfig~EditorConfig#rootsAttributes `rootsAttributes`}
+     * configuration option will be returned.
+     *
+     * @param rootName
+     */
+    getRootAttributes(rootName) {
+        const rootAttributes = {};
+        const root = this.model.document.getRoot(rootName);
+        for (const key of this._registeredRootsAttributesKeys) {
+            rootAttributes[key] = root.hasAttribute(key) ? root.getAttribute(key) : null;
+        }
+        return rootAttributes;
+    }
     /**
      * Switches given editor root to the read-only mode.
      *

package/src/multirooteditorui.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module editor-multi-root/multirooteditorui
  */
-import { type Editor } from 'ckeditor5/src/core.js';
-import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui.js';
-import type MultiRootEditorUIView from './multirooteditoruiview.js';
+import { type Editor } from 'ckeditor5/src/core';
+import { EditorUI, type InlineEditableUIView } from 'ckeditor5/src/ui';
+import type MultiRootEditorUIView from './multirooteditoruiview';
 /**
  * The multi-root editor UI class.
  */
@@ -64,7 +64,7 @@ export default class MultiRootEditorUI extends EditorUI {
      */
     private _initToolbar;
     /**
-     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     * Enables the placeholder text on a given editable.
      *
      * @param editable Editable on which the placeholder should be set.
      * @param placeholder Placeholder for the editable element. If not set, placeholder value from the

package/src/multirooteditorui.js

@@ -2,8 +2,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
  */
-import { EditorUI } from 'ckeditor5/src/ui.js';
-import { enablePlaceholder } from 'ckeditor5/src/engine.js';
+import { EditorUI } from 'ckeditor5/src/ui';
+import { enablePlaceholder } from 'ckeditor5/src/engine';
 /**
  * The multi-root editor UI class.
  */
@@ -140,7 +140,7 @@ export default class MultiRootEditorUI extends EditorUI {
         this.addToolbar(view.toolbar);
     }
     /**
-     * Enables the placeholder text on a given editable, if the placeholder was configured.
+     * Enables the placeholder text on a given editable.
      *
      * @param editable Editable on which the placeholder should be set.
      * @param placeholder Placeholder for the editable element. If not set, placeholder value from the
@@ -153,15 +153,14 @@ export default class MultiRootEditorUI extends EditorUI {
                 placeholder = typeof configPlaceholder === 'string' ? configPlaceholder : configPlaceholder[editable.name];
             }
         }
-        if (!placeholder) {
-            return;
-        }
         const editingView = this.editor.editing.view;
         const editingRoot = editingView.document.getRoot(editable.name);
+        if (placeholder) {
+            editingRoot.placeholder = placeholder;
+        }
         enablePlaceholder({
             view: editingView,
             element: editingRoot,
-            text: placeholder,
             isDirectHost: false,
             keepOnFocus: true
         });

package/src/multirooteditoruiview.d.ts

@@ -5,9 +5,9 @@
 /**
  * @module editor-multi-root/multirooteditoruiview
  */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
-import type { Locale } from 'ckeditor5/src/utils.js';
-import type { View } from 'ckeditor5/src/engine.js';
+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

package/src/multirooteditoruiview.js

@@ -5,7 +5,7 @@
 /**
  * @module editor-multi-root/multirooteditoruiview
  */
-import { EditorUIView, InlineEditableUIView, ToolbarView } from 'ckeditor5/src/ui.js';
+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