ckeditor5-blazor 1.11.1 → 1.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-blazor",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "description": "CKEditor 5 integration for Blazor",
   "license": "MIT",
   "repository": {
@@ -28,8 +28,8 @@
   ],
   "devDependencies": {
     "@vitest/coverage-v8": "^4.0.18",
-    "ckeditor5": "^48.1.0",
-    "ckeditor5-premium-features": "^48.1.0",
+    "ckeditor5": "^48.2.0",
+    "ckeditor5-premium-features": "^48.2.0",
     "happy-dom": "^20.8.9",
     "typescript": "^5.9.3",
     "vite": "^7.3.2",

package/src/elements/editable.test.ts

@@ -233,6 +233,42 @@ describe('editable component', () => {
 
       expect(editor.model.document.getRoot('foo')).toBe(null);
     });
+
+    it('should set proper root element name on initial added root', async () => {
+      renderTestEditable({
+        content: '<p>Foo</p>',
+        rootName: 'foo',
+        rootModelElementName: '$inlineRoot',
+      });
+
+      renderTestEditor({
+        preset: createEditorPreset('multiroot'),
+        content: {},
+      });
+
+      const editor = await waitForTestEditor<MultiRootEditor>();
+
+      expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+    });
+
+    it('should set proper root element name on lazy added root', async () => {
+      renderTestEditor({
+        preset: createEditorPreset('multiroot'),
+        content: {},
+      });
+
+      const editor = await waitForTestEditor<MultiRootEditor>();
+
+      renderTestEditable({
+        content: '<p>Foo</p>',
+        rootName: 'foo',
+        rootModelElementName: '$inlineRoot',
+      });
+
+      await vi.waitFor(() => {
+        expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+      });
+    });
   });
 
   describe('input value synchronization', () => {
@@ -252,7 +288,8 @@ describe('editable component', () => {
       renderTestEditable({
         rootName: 'foo',
         content: '<p>Initial foo component</p>',
-      }, { withInput: false });
+        withInput: false,
+      });
 
       await vi.waitFor(() => {
         expect(editor.getData({ rootName: 'foo' })).toBe('<p>Initial foo component</p>');
@@ -263,7 +300,8 @@ describe('editable component', () => {
       const element = renderTestEditable({
         rootName: 'foo',
         content: '<p>Initial foo component</p>',
-      }, { withInput: true });
+        withInput: true,
+      });
 
       const input = element.querySelector('input')!;
 
@@ -277,7 +315,8 @@ describe('editable component', () => {
         rootName: 'foo',
         content: '<p>Initial foo component</p>',
         saveDebounceMs: 500,
-      }, { withInput: true });
+        withInput: true,
+      });
 
       const input = element.querySelector('input')!;
 

package/src/elements/editable.ts

@@ -42,6 +42,7 @@ export class EditableComponentElement extends HTMLElement {
     const editorId = this.getAttribute('data-cke-editor-id');
     const rootName = this.getAttribute('data-cke-root-name');
     const rootAttributes = JSON.parse(this.getAttribute('data-cke-root-attributes') || '{}');
+    const rootModelElement = this.getAttribute('data-cke-root-model-element-name') || '$root';
     const content = this.getAttribute('data-cke-content');
     const saveDebounceMs = Number.parseInt(this.getAttribute('data-cke-save-debounce-ms')!, 10);
 
@@ -89,6 +90,7 @@ export class EditableComponentElement extends HTMLElement {
       editor.addRoot(rootName, {
         isUndoable: false,
         modelAttributes: { ...rootAttributes },
+        modelElement: rootModelElement,
         ...content !== null && {
           initialData: content,
         },

package/src/elements/editor/editor.test.ts

@@ -12,7 +12,6 @@ import {
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
-  createEditableSnapshot,
   createEditorPreset,
   getTestEditorInput,
   html,
@@ -118,6 +117,16 @@ describe('editor component', () => {
         expect(root.getAttribute('data-test-attr')).toBe('123');
         expect(root.getAttribute('data-another-attr')).toBe('abc');
       });
+
+      it('should be possible to specify root element name', async () => {
+        renderTestEditor({
+          rootModelElementName: '$inlineRoot',
+        });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).toBe('$inlineRoot');
+      });
     });
 
     describe('inline', () => {
@@ -134,7 +143,7 @@ describe('editor component', () => {
     describe('decoupled', () => {
       it('should create a decoupled editor with `main` editable and default preset', async () => {
         renderTestEditor({ preset: createEditorPreset('decoupled') });
-        renderTestEditable(createEditableSnapshot('main', null));
+        renderTestEditable();
 
         const editor = await waitForTestEditor();
 
@@ -146,7 +155,7 @@ describe('editor component', () => {
         const initialEditableContent = '<p>Initial editable content</p>';
 
         renderTestEditor({ preset: createEditorPreset('decoupled') });
-        renderTestEditable(createEditableSnapshot('main', initialEditableContent));
+        renderTestEditable({ content: initialEditableContent });
 
         const editor = await waitForTestEditor();
 
@@ -159,13 +168,64 @@ describe('editor component', () => {
 
         await timeout(200);
 
-        renderTestEditable(createEditableSnapshot('main', null));
+        renderTestEditable({});
 
         const editor = await waitForTestEditor();
 
         expect(editor).to.toBeInstanceOf(DecoupledEditor);
         expect(isEditorShown()).toBe(true);
       });
+
+      it('should be possible to specify root element name using editable config alone', async () => {
+        renderTestEditor({
+          preset: createEditorPreset('decoupled'),
+          content: {},
+        });
+
+        renderTestEditable({
+          rootModelElementName: '$inlineRoot',
+        });
+
+        const editor = await waitForTestEditor<DecoupledEditor>();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+        });
+      });
+
+      it('should use editable root element name config if both specified', async () => {
+        renderTestEditor({
+          preset: createEditorPreset('decoupled'),
+          content: {},
+          rootModelElementName: '$miamia',
+        });
+
+        renderTestEditable({
+          rootModelElementName: '$inlineRoot',
+        });
+
+        const editor = await waitForTestEditor<DecoupledEditor>();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+        });
+      });
+
+      it('should use `main` root element name if editable root name is not specified', async () => {
+        renderTestEditor({
+          preset: createEditorPreset('decoupled'),
+          content: {},
+          rootModelElementName: '$inlineRoot',
+        });
+
+        renderTestEditable();
+
+        const editor = await waitForTestEditor<DecoupledEditor>();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+        });
+      });
     });
 
     describe('balloon', () => {
@@ -201,7 +261,7 @@ describe('editor component', () => {
 
         await timeout(500); // Simulate some delay before adding the root.
 
-        renderTestEditable(createEditableSnapshot('header'));
+        renderTestEditable({ rootName: 'header' });
 
         const editor = await waitForTestEditor();
 
@@ -219,7 +279,10 @@ describe('editor component', () => {
 
         await timeout(500); // Simulate some delay before adding the root.
 
-        renderTestEditable(createEditableSnapshot('header', ''));
+        renderTestEditable({
+          rootName: 'header',
+          content: '',
+        });
 
         const editor = await waitForTestEditor();
 
@@ -235,9 +298,10 @@ describe('editor component', () => {
           },
         });
 
-        renderTestEditable(
-          createEditableSnapshot('header', '<p>Editable content overrides snapshot content</p>'),
-        );
+        renderTestEditable({
+          rootName: 'header',
+          content: '<p>Editable content overrides snapshot content</p>',
+        });
 
         const editor = await waitForTestEditor();
 
@@ -270,14 +334,34 @@ describe('editor component', () => {
 
         const editor = await waitForTestEditor<MultiRootEditor>();
 
-        editor.addRoot('existingRoot', { data: '<p>Old content</p>' });
+        editor.addRoot('existingRoot', { initialData: '<p>Old content</p>' });
 
-        renderTestEditable(createEditableSnapshot('existingRoot', '<p>New content</p>'));
+        renderTestEditable({
+          rootName: 'existingRoot',
+          content: '<p>New content</p>',
+        });
 
         await vi.waitFor(() => {
           expect(editor.getData({ rootName: 'existingRoot' })).toBe('<p>New content</p>');
         });
       });
+
+      it('should create a multiroot editor with inline editables', async () => {
+        renderTestEditor({
+          preset: createEditorPreset('multiroot'),
+          content: {},
+        });
+
+        renderTestEditable({ rootName: 'second', rootModelElementName: '$inlineRoot' });
+        renderTestEditable({ rootName: 'third', rootModelElementName: '$inlineRoot' });
+
+        const editor = await waitForTestEditor();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot('second')?.name).toEqual('$inlineRoot');
+          expect(editor.model.document.getRoot('third')?.name).toEqual('$inlineRoot');
+        });
+      });
     });
   });
 
@@ -537,8 +621,8 @@ describe('editor component', () => {
 
       component.addEventListener('ckeditor5:change:data', changeSpy);
 
-      renderTestEditable(createEditableSnapshot('header'));
-      renderTestEditable(createEditableSnapshot('footer'));
+      renderTestEditable({ rootName: 'header' });
+      renderTestEditable({ rootName: 'footer' });
 
       const editor = await waitForTestEditor<MultiRootEditor>();
 

package/src/elements/editor/utils/assign-editor-roots-to-config.ts

@@ -32,19 +32,20 @@ export function assignEditorRootsToConfig<C extends EditorConfig>(
       ...config.roots?.[rootKey],
       ...rootKey === 'main' ? config.root : {},
 
-      /* v8 ignore next 11 */
+      /* v8 ignore next 12 */
       ...rootKey in editables
         ? {
             ...editables[rootKey]!.content !== null && {
               initialData: editables[rootKey]!.content,
             },
+            modelElement: editables[rootKey]!.modelElement || '$root',
             ...!isClassicEditor && editables[rootKey]!.element !== null && {
               element: editables[rootKey]!.element,
             },
           }
         : {},
     },
-  }), Object.create(config.roots || {}));
+  }), { ...config.roots || {} });
 
   const mappedConfig: C = {
     ...config,

package/src/elements/editor/utils/get-editor-roots-values.ts

@@ -17,5 +17,5 @@ export function getEditorRootsValues(editor: Editor): Record<string, string> {
       acc[root.rootName] = editor.getData({ rootName: root.rootName });
 
       return acc;
-    }, Object.create({}));
+    }, Object.create(null));
 }

package/src/elements/editor/utils/query-all-editor-editables.ts

@@ -17,14 +17,16 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
     .from(document.querySelectorAll<HTMLElement>(`cke5-editable[data-cke-editor-id="${editorId}"]`))
     .reduce<Record<string, EditableItem>>((acc, element) => {
       const rootName = element.getAttribute('data-cke-root-name')!;
+      const modelElement = element.getAttribute('data-cke-root-model-element-name') || null;
 
       acc[rootName] = {
         element: element.querySelector<HTMLElement>('[data-cke-editable-content]'),
         content: element.getAttribute('data-cke-content'),
+        modelElement,
       };
 
       return acc;
-    }, Object.create({}));
+    }, Object.create(null));
 
   const rootEditorElement = document.querySelector<HTMLElement>(`cke5-editor[data-cke-editor-id="${editorId}"]`);
 
@@ -36,11 +38,16 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
   // v8 ignore next -- @preserve
   const editorContent: Record<string, string> = JSON.parse(rootEditorElement.getAttribute('data-cke-content')!) ?? {};
   const classicMainElement = document.querySelector<HTMLElement>(`#${editorId}_editor`);
+  const rootEditorModelElement = rootEditorElement.getAttribute('data-cke-root-model-element-name');
 
-  if (classicMainElement && !acc['main']) {
+  if ('main' in acc) {
+    acc['main'].modelElement ??= rootEditorModelElement;
+  }
+  else if (classicMainElement) {
     acc['main'] = {
       element: classicMainElement,
       content: editorContent['main'] || '',
+      modelElement: rootEditorModelElement,
     };
   }
 
@@ -50,6 +57,7 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
       acc[rootName] = {
         ...acc[rootName],
         content: acc[rootName].content ?? rootContent,
+        modelElement: acc[rootName].modelElement ?? rootEditorModelElement,
       };
     }
     else {
@@ -57,6 +65,7 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
       acc[rootName] = {
         element: null,
         content: rootContent,
+        modelElement: rootEditorModelElement,
       };
     }
   }
@@ -71,4 +80,5 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
 export type EditableItem = {
   element: HTMLElement | null;
   content: string | null;
+  modelElement: string | null;
 };

package/src/elements/ui-part.test.ts

@@ -2,7 +2,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
   createEditorPreset,
-  createUIPartSnapshot,
   renderTestEditor,
   renderTestUIPart,
   waitForDestroyAllEditors,
@@ -34,7 +33,7 @@ describe('ui-part component', () => {
       const editor = await waitForTestEditor();
       const toolbarElement = editor.ui.view.toolbar?.element;
 
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
 
       await vi.waitFor(() => {
         expect(el.contains(toolbarElement!)).toBe(true);
@@ -49,7 +48,7 @@ describe('ui-part component', () => {
       const editor = await waitForTestEditor();
       const menubarElement = (editor.ui.view as any).menuBarView.element;
 
-      const el = renderTestUIPart(createUIPartSnapshot('menubar'));
+      const el = renderTestUIPart({ name: 'menubar' });
 
       await vi.waitFor(() => {
         expect(el.children.length).toBeGreaterThan(0);
@@ -59,7 +58,7 @@ describe('ui-part component', () => {
     });
 
     it('should mount UI part before editor is created', async () => {
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
 
       appendMultirootEditor();
 
@@ -80,7 +79,7 @@ describe('ui-part component', () => {
       const toolbarElement = editor.ui.view.toolbar?.element;
 
       // Render UI part without editorId
-      const el = renderTestUIPart({ editorId: undefined } as any);
+      const el = renderTestUIPart({ editorId: null });
 
       await vi.waitFor(() => {
         expect(el.contains(toolbarElement!)).toBe(true);
@@ -90,7 +89,7 @@ describe('ui-part component', () => {
     });
 
     it('should not mount UI part if element is disconnected before editor is ready', async () => {
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
       el.remove();
 
       appendMultirootEditor();
@@ -109,7 +108,7 @@ describe('ui-part component', () => {
     });
 
     it('should clear UI part element on destruction', async () => {
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
 
       await vi.waitFor(() => {
         expect(el.children.length).toBeGreaterThan(0);
@@ -125,7 +124,7 @@ describe('ui-part component', () => {
     });
 
     it('should hide element during destruction', async () => {
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
 
       // If we remove immediately, disconnectedCallback should hide it.
       el.remove();
@@ -138,7 +137,7 @@ describe('ui-part component', () => {
       document.body.innerHTML = '';
       await EditorsRegistry.the.reset();
 
-      const el = renderTestUIPart(createUIPartSnapshot('toolbar'));
+      const el = renderTestUIPart();
 
       el.remove();
 

package/src/interop/create-editable-blazor-interop.test.ts

@@ -28,7 +28,7 @@ describe('createEditableBlazorInterop', () => {
     dotnetInterop = createDotNetInteropMock();
     globalThis.DotNet = createDotnet();
 
-    element = renderTestEditable({}, {
+    element = renderTestEditable({
       interactive: false,
     });
 
@@ -120,7 +120,10 @@ describe('createEditableBlazorInterop', () => {
   });
 
   it('should ignore events for an unknown root name', async () => {
-    const custom = renderTestEditable({ rootName: 'other' }, { interactive: false });
+    const custom = renderTestEditable({
+      rootName: 'other',
+      interactive: false,
+    });
 
     const interop = createEditableBlazorInterop(custom, dotnetInterop);
     const editor = await waitForTestEditor();