@ckeditor/ckeditor5-editor-multi-root 48.1.1 → 48.2.0-alpha.1

package/dist/index.js

@@ -2,7 +2,7 @@
  * @license Copyright (c) 2003-2026, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
-import { Editor, normalizeMultiRootEditorConstructorParams, normalizeRootsConfig, secureSourceElement, registerAndInitializeRootConfigAttributes, verifyRootElements } from '@ckeditor/ckeditor5-core/dist/index.js';
+import { rootAcceptsBlocks, Editor, normalizeMultiRootEditorConstructorParams, normalizeRootsConfig, secureSourceElement, registerAndInitializeRootConfigAttributes, normalizeViewRootElementDefinition, verifyRootElements } from '@ckeditor/ckeditor5-core/dist/index.js';
 import { CKEditorError, logWarning, decodeLicenseKey, isFeatureBlockedByLicenseKey, setDataInElement } from '@ckeditor/ckeditor5-utils/dist/index.js';
 import { EditorUI, EditorUIView, ToolbarView, MenuBarView, InlineEditableUIView } from '@ckeditor/ckeditor5-ui/dist/index.js';
 import { enableViewPlaceholder } from '@ckeditor/ckeditor5-engine/dist/index.js';
@@ -31,6 +31,14 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
 	 * Initializes the UI.
 	 */ init() {
         const view = this.view;
+        const editor = this.editor;
+        // Resolved during UI init rather than in the editor constructor: by this point the plugin
+        // initialization phase has finished, so the schema is fully populated and the check below
+        // reflects any plugin-registered root types or additional content rules.
+        // Done before `view.render()` so the CSS class lands on the DOM from the start.
+        for (const editable of Object.values(this.view.editables)){
+            editable.isInlineRoot = !rootAcceptsBlocks(editor, editable.name);
+        }
         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
@@ -157,7 +165,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         enableViewPlaceholder({
             view: editingView,
             element: editingRoot,
-            isDirectHost: false,
+            isDirectHost: editable.isInlineRoot,
             keepOnFocus: true
         });
     }
@@ -318,6 +326,7 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         super(editorConfig);
         normalizeRootsConfig(sourceElementsOrData, this.config, false);
         normalizeRootsAttributesConfig(this.config);
+        normalizeRootEditableOptionsConfig(this.config);
         if (this.config.get('lazyRoots')) {
             /**
 			 * Using deprecated `config.lazyRoots` configuration option.
@@ -329,16 +338,17 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         // From this point use only normalized `roots.<rootName>.element`, etc.
         const rootsConfig = Object.entries(this.config.get('roots'));
         this.sourceElements = {};
-        for (const [rootName, { element }] of rootsConfig){
-            if (isElement(element)) {
-                if (element.tagName === 'TEXTAREA') {
-                    // Documented in core/editor/editor.js
-                    // eslint-disable-next-line ckeditor5-rules/ckeditor-error-message
-                    throw new CKEditorError('editor-wrong-element', null);
-                }
-                this.sourceElements[rootName] = element;
-                secureSourceElement(this, element);
+        const editableElements = {};
+        for (const [rootName, rootConfig] of rootsConfig){
+            const editableElement = getRootEditableElement(rootConfig);
+            if (!editableElement) {
+                continue;
+            }
+            if (isElement(editableElement)) {
+                this.sourceElements[rootName] = editableElement;
+                secureSourceElement(this, editableElement);
             }
+            editableElements[rootName] = editableElement;
         }
         this.editing.view.document.roots.on('add', (evt, viewRoot)=>{
             // Here we change the standard binding of readOnly flag by adding
@@ -366,37 +376,14 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
                 root._isLoaded = false;
             }
         }
+        // Register `$rootEditableOptions` unconditionally, so it is always returned by `getRootAttributes()` (e.g. for RH).
+        // The value is set via `config.roots.<rootName>.modelAttributes.$rootEditableOptions` (see `normalizeRootEditableOptionsConfig`),
+        // which also makes it round-trip through RTC's initial-data path.
+        this.registerRootAttribute('$rootEditableOptions');
         registerAndInitializeRootConfigAttributes(this);
-        // Registering `$rootEditableOptions` attribute to make it available in the editor model.
-        // This allows to store editable options for each root in the model, and make them available on other RTC clients.
-        // We do not use `registerRootAttribute()` method here, as this attribute is used internally
-        // and should not be returned by `getRootsAttributes()` method.
-        this.editing.model.schema.extend('$root', {
-            allowAttributes: '$rootEditableOptions'
-        });
-        this.data.on('init', ()=>{
-            this.model.enqueueChange({
-                isUndoable: false
-            }, (writer)=>{
-                for (const [rootName, rootConfig] of rootsConfig){
-                    const root = this.model.document.getRoot(rootName);
-                    // Set editable config for consistency with `addRoot()` method. This will allow features
-                    // to use the same configuration for both initially loaded and dynamically added roots.
-                    const rootEditableOptions = {
-                        ...rootConfig.placeholder && {
-                            placeholder: rootConfig.placeholder
-                        },
-                        ...rootConfig.label && {
-                            label: rootConfig.label
-                        }
-                    };
-                    writer.setAttribute('$rootEditableOptions', rootEditableOptions, root);
-                }
-            });
-        });
         const options = {
             shouldToolbarGroupWhenFull: !this.config.get('toolbar.shouldNotGroupWhenFull'),
-            editableElements: this.sourceElements,
+            editableElements,
             label: extractRootsConfigField(this.config.get('roots'), 'label')
         };
         const view = new MultiRootEditorUIView(this.locale, this.editing.view, getNonLazyLoadRootsNames(rootsConfig), options);
@@ -524,12 +511,16 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
     }
     addRoot(rootName, options = {}) {
         const initialData = options.initialData || options.data || '';
-        const modelAttributes = options.modelAttributes || options.attributes || {};
+        const modelAttributes = {
+            ...options.modelAttributes || options.attributes
+        };
+        // eslint-disable-next-line ckeditor5-rules/no-literal-dollar-root -- public API default for `addRoot()`
         const modelElement = options.modelElement || options.elementName || '$root';
         if (!this.model.schema.isLimit(modelElement)) {
             /**
 			 * The model root element must be a {@link module:engine/model/schema~ModelSchemaItemDefinition#isLimit limit element}.
-			 * The element name specified in {@link ~MultiRootEditor#addRoot `addRoot()`} options must be registered in the schema
+			 * The element name specified in {@link module:editor-multi-root/multirooteditor~MultiRootEditor#addRoot:ROOT_CONFIG addRoot()}
+			 * options must be registered in the schema
 			 * with `isLimit` set to `true`.
 			 *
 			 * @error multi-root-editor-add-root-element-is-not-limit
@@ -542,9 +533,20 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         }
         if (isElement(options.element)) {
             /**
-			 * The `element` option is not supported in {@link #addRoot `addRoot()`} method, and will be ignored.
+			 * Passing an existing DOM element as the `element` option of
+			 * {@link ~MultiRootEditor#addRoot:ROOT_CONFIG `addRoot()`} is not supported and will be ignored. The
+			 * `addRoot()` method only registers the model root; the DOM editable is created later by
+			 * {@link ~MultiRootEditor#createEditable `createEditable()`}.
+			 *
+			 * Pass a tag name string (e.g. `'h1'`) or a
+			 * {@link module:engine/view/elementdefinition~ViewElementDefinition view element definition}
+			 * instead, or omit the option to create a default `<div>`.
+			 *
+			 * @error multi-root-editor-add-root-element-option-ignored
 			 */ logWarning('multi-root-editor-add-root-element-option-ignored');
         }
+        // Persist editable options as a root attribute so they are available on other RTC clients.
+        setRootEditableOptions(modelAttributes, options);
         const _addRoot = (writer)=>{
             const root = writer.addRoot(rootName, modelElement);
             if (initialData) {
@@ -554,16 +556,6 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
                 this.registerRootAttribute(key);
                 writer.setAttribute(key, modelAttributes[key], root);
             }
-            // Storing editable options as a root attribute to make them available on other RTC clients.
-            const rootEditableOptions = {
-                ...options.placeholder && {
-                    placeholder: options.placeholder
-                },
-                ...options.label && {
-                    label: options.label
-                }
-            };
-            writer.setAttribute('$rootEditableOptions', rootEditableOptions, root);
         };
         if (options.isUndoable) {
             this.model.change(_addRoot);
@@ -637,14 +629,21 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
     }
     createEditable(root, optionsOrPlaceholder, label) {
         let placeholder;
+        let element;
         if (!optionsOrPlaceholder || typeof optionsOrPlaceholder === 'string') {
             placeholder = optionsOrPlaceholder;
         } else {
             placeholder = optionsOrPlaceholder?.placeholder;
             label = optionsOrPlaceholder?.label;
+            element = optionsOrPlaceholder?.element;
         }
         const rootEditableConfig = root.getAttribute('$rootEditableOptions') || {};
-        const editable = this.ui.view.createEditable(root.rootName, undefined, label || rootEditableConfig.label);
+        // Both the call-site `element` and the stored `rootEditableConfig.element` may be a tag name string
+        // or an `HTMLElement` and need normalization - `setRootEditableOptions()` does this at write time, but
+        // callers can also pre-supply `$rootEditableOptions` directly without going through it.
+        const editableElement = normalizeViewRootElementDefinition(element || rootEditableConfig.element);
+        const editable = this.ui.view.createEditable(root.rootName, editableElement, label || rootEditableConfig.label);
+        editable.isInlineRoot = !rootAcceptsBlocks(this, root.rootName);
         this.ui.addEditable(editable, placeholder || rootEditableConfig.placeholder);
         this.editing.view.forceRender();
         return editable.element;
@@ -920,9 +919,69 @@ import { isElement as isElement$1 } from 'es-toolkit/compat';
         }
     }
 }
+/**
+ * Normalize `placeholder` and `label` from `config.roots.<rootName>` into the `$rootEditableOptions` root model attribute,
+ * stored under `config.roots.<rootName>.modelAttributes`. This way the attribute is registered, set on initial data load
+ * and shipped through RTC initial-data path together with the rest of `modelAttributes`.
+ *
+ * This is also required by the revision history feature: on editor load, RH compares the latest revision data against
+ * `initialData` and `modelAttributes` passed to the editor and logs a warning if they do not match. Because `$rootEditableOptions`
+ * ends up in the revision data, it must also be present in `modelAttributes` (even as an empty object when no options
+ * are configured), otherwise the comparison reports a spurious mismatch.
+ */ function normalizeRootEditableOptionsConfig(config) {
+    const rootsConfig = config.get('roots');
+    for (const [rootName, rootConfig] of Object.entries(rootsConfig)){
+        if (rootConfig.modelAttributes?.$rootEditableOptions) {
+            continue;
+        }
+        const modelAttributes = {
+            ...rootConfig.modelAttributes
+        };
+        setRootEditableOptions(modelAttributes, rootConfig);
+        config.set(`roots.${rootName}.modelAttributes`, modelAttributes);
+    }
+}
+/**
+ * Mutates the given `modelAttributes` map by adding the `$rootEditableOptions` entry derived from `placeholder`, `label`
+ * and `element`. If `$rootEditableOptions` is already present, the map is left untouched.
+ *
+ * The `element` is normalized into canonical form ({@link module:core/editor/editorconfig~ViewRootElementDefinition})
+ * before being persisted. A raw DOM element is local to this editor instance - it cannot be replicated through
+ * RTC, so it is silently dropped here. Callers that want to surface a warning (e.g. `addRoot()`) should do so before
+ * invoking this function.
+ */ function setRootEditableOptions(modelAttributes, { placeholder, label, element }) {
+    if ('$rootEditableOptions' in modelAttributes) {
+        return;
+    }
+    // In the `else` branch `element` cannot be an `HTMLElement`, but the normalizer's return type still
+    // includes it — the cast narrows it back to the canonical descriptor form.
+    const storageElement = isElement(element) ? undefined : normalizeViewRootElementDefinition(element);
+    modelAttributes.$rootEditableOptions = {
+        ...placeholder && {
+            placeholder
+        },
+        ...label && {
+            label
+        },
+        ...storageElement && {
+            element: storageElement
+        }
+    };
+}
 function isElement(value) {
     return isElement$1(value);
 }
+/**
+ * Returns the canonical editable element descriptor for the given root config.
+ *
+ * Falls back to `$rootEditableOptions.element` so remote RTC clients - which do not see the originator's
+ * `config.roots.<name>.element` - can recreate the configured editable shape from the model attributes
+ * they receive. The result is normalized here in case the attribute was pre-supplied without going
+ * through `setRootEditableOptions()` (e.g. a caller writing `modelAttributes.$rootEditableOptions` directly).
+ */ function getRootEditableElement(rootConfig) {
+    const rootEditableOptions = rootConfig.modelAttributes?.$rootEditableOptions;
+    return normalizeViewRootElementDefinition(rootConfig.element || rootEditableOptions?.element);
+}
 
 export { MultiRootEditor, MultiRootEditorUI, MultiRootEditorUIView };
 //# sourceMappingURL=index.js.map