ckeditor5-livewire 1.12.2 → 1.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-livewire",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "CKEditor 5 integration for Laravel Livewire",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",

package/src/hooks/editable.test.ts

@@ -71,6 +71,40 @@ describe('editable component', () => {
       expect(root.getAttribute('data-test')).toBe('initial');
     });
 
+    it('should set proper root element name on initial added root', async () => {
+      livewireStub.$internal.appendComponentToDOM({
+        name: 'ckeditor5-editable',
+        el: createEditableHtmlElement(),
+        canonical: {
+          ...createEditableSnapshot('foo', '<p>Initial foo component</p>'),
+          modelElement: '$inlineRoot',
+        },
+      });
+
+      appendMultirootEditor();
+
+      const editor = await waitForTestEditor();
+
+      expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+    });
+
+    it('should set proper root element name on lazy added root', async () => {
+      appendMultirootEditor();
+
+      const editor = await waitForTestEditor();
+
+      livewireStub.$internal.appendComponentToDOM({
+        name: 'ckeditor5-editable',
+        el: createEditableHtmlElement(),
+        canonical: {
+          ...createEditableSnapshot('foo', '<p>Initial foo component</p>'),
+          modelElement: '$inlineRoot',
+        },
+      });
+
+      expect(editor.model.document.getRoot('foo')?.name).to.be.equal('$inlineRoot');
+    });
+
     it('should update root attributes after commit', async () => {
       appendMultirootEditor();
 

package/src/hooks/editable.ts

@@ -26,7 +26,7 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
    * Mounts the editable component.
    */
   override mounted() {
-    const { editorId, rootName, content } = this.canonical;
+    const { editorId, rootName, content, modelElement } = this.canonical;
 
     const unmountEffect = EditorsRegistry.the.mountEffect(editorId, (editor: MultiRootEditor | DecoupledEditor) => {
       /* v8 ignore next if -- @preserve */
@@ -56,6 +56,7 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
 
         editor.addRoot(rootName, {
           isUndoable: false,
+          modelElement: modelElement ?? '$root',
           ...content !== null && {
             initialData: content,
           },
@@ -267,6 +268,11 @@ export type Snapshot = {
    */
   rootName: string;
 
+  /**
+   * The name of the model element.
+   */
+  modelElement: string | null;
+
   /**
    * The initial content value for the editable.
    */

package/src/hooks/editor/editor.test.ts

@@ -28,6 +28,7 @@ import {
 import type { Snapshot as EditorSnapshot } from './editor';
 
 import { timeout } from '../../shared/timeout';
+import { EditableComponentHook } from '../editable';
 import { registerLivewireComponentHook } from '../hook';
 import { CustomEditorPluginsRegistry } from './custom-editor-plugins';
 import { EditorComponentHook } from './editor';
@@ -42,6 +43,7 @@ describe('editor component', () => {
     livewireStub = window.Livewire = new LivewireStub();
 
     registerLivewireComponentHook('ckeditor5', EditorComponentHook);
+    registerLivewireComponentHook('ckeditor5-editable', EditableComponentHook);
   });
 
   afterEach(async () => {
@@ -135,6 +137,20 @@ describe('editor component', () => {
 
         expect(editor.getData()).toBe('');
       });
+
+      it('should be possible to specify root element name', async () => {
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement(),
+          canonical: createEditorSnapshot({
+            modelElement: '$inlineRoot',
+          }),
+        });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot()?.name).toBe('$inlineRoot');
+      });
     });
 
     describe('inline', () => {
@@ -234,10 +250,86 @@ describe('editor component', () => {
           },
         });
 
-        await expect(waitForTestEditor()).rejects.toThrowError(
+        await expect(waitForTestEditor()).rejects.toThrow(
           /It looks like not all required root elements are present yet/,
         );
       });
+
+      it('should be possible to specify root element name using editable config alone', async () => {
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
+          canonical: {
+            ...createEditorSnapshot(),
+            preset: createEditorPreset('decoupled'),
+          },
+        });
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('main'),
+            modelElement: '$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 () => {
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
+          canonical: createEditorSnapshot({
+            preset: createEditorPreset('decoupled'),
+            modelElement: '$miaMia',
+          }),
+        });
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('main'),
+            modelElement: '$inlineRoot',
+          },
+        });
+
+        const editor = await waitForTestEditor<DecoupledEditor>();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+        });
+      });
+
+      it('should use root editor element if editable root name is not specified', async () => {
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
+          canonical: createEditorSnapshot({
+            preset: createEditorPreset('decoupled'),
+            modelElement: '$inlineRoot',
+            content: {},
+          }),
+        });
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: createEditableSnapshot('main'),
+        });
+
+        const editor = await waitForTestEditor<DecoupledEditor>();
+
+        await vi.waitFor(() => {
+          expect(editor.model.document.getRoot()?.name).toEqual('$inlineRoot');
+        });
+      });
     });
 
     describe('balloon', () => {
@@ -275,6 +367,78 @@ describe('editor component', () => {
         expect(editor).toBeInstanceOf(MultiRootEditor);
       });
 
+      it('should create a multiroot editor with lazy added inline editables', async () => {
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
+          canonical: {
+            ...createEditorSnapshot(),
+            preset: createEditorPreset('multiroot'),
+            content: {},
+          },
+        });
+
+        const editor = await waitForTestEditor();
+
+        await timeout(500); // Simulate some delay before adding the root.
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('header', 'Head'),
+            modelElement: '$inlineRoot',
+          },
+        });
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('footer', 'Footer'),
+            modelElement: '$inlineRoot',
+          },
+        });
+
+        expect(editor.model.document.getRoot('header')?.name).toEqual('$inlineRoot');
+        expect(editor.model.document.getRoot('footer')?.name).toEqual('$inlineRoot');
+      });
+
+      it('should create a multiroot editor with initially added inline editables', async () => {
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('header', 'Head'),
+            modelElement: '$inlineRoot',
+          },
+        });
+
+        livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement(),
+          canonical: {
+            ...createEditableSnapshot('footer', 'Footer'),
+            modelElement: '$inlineRoot',
+          },
+        });
+
+        livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
+          canonical: {
+            ...createEditorSnapshot(),
+            preset: createEditorPreset('multiroot'),
+            content: {},
+          },
+        });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor.model.document.getRoot('header')?.name).toEqual('$inlineRoot');
+        expect(editor.model.document.getRoot('footer')?.name).toEqual('$inlineRoot');
+      });
+
       it('should wait and for root elements to be present in DOM if they are not (with content=null value)', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',

package/src/hooks/editor/editor.ts

@@ -356,6 +356,11 @@ export type Snapshot = {
    */
   editableHeight: number | null;
 
+  /**
+   * Root element name.
+   */
+  modelElement: string | null;
+
   /**
    * The language of the editor UI and content.
    */

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

@@ -34,6 +34,7 @@ export function assignEditorRootsToConfig<C extends EditorConfig>(
       ...rootKey === 'main' ? config.root : {},
       ...rootKey in editables
         ? {
+            modelElement: editables[rootKey]!.modelElement || '$root',
             ...editables[rootKey]!.content !== null && {
               initialData: editables[rootKey]!.content,
             },

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

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

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

@@ -18,14 +18,16 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
     .filter(({ name, canonical }) => name === 'ckeditor5-editable' && canonical['editorId'] === editorId)
     .reduce<Record<string, EditableItem>>((acc, { canonical, el }) => {
       const rootName = canonical['rootName'] as string;
+      const modelElement = (canonical['modelElement'] || null) as string | null;
 
       acc[rootName] = {
         element: el.querySelector<HTMLElement>('[data-cke-editable-content]'),
         content: canonical['content'],
+        modelElement,
       };
 
       return acc;
-    }, Object.create({}));
+    }, Object.create(null));
 
   const rootHook = window.Livewire
     .all()
@@ -38,12 +40,17 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
 
   // v8 ignore next -- @preserve
   const editorContent: Record<string, string> = (rootHook.canonical.content as Record<string, string>) ?? {};
+  const rootEditorModelElement = (rootHook.canonical.modelElement || null) as string || null;
   const classicMainElement = document.querySelector<HTMLElement>(`#${editorId}_editor`);
 
-  if (classicMainElement && !acc['main']) {
+  if ('main' in acc) {
+    acc['main'].modelElement ??= rootEditorModelElement;
+  }
+  else if (classicMainElement) {
     acc['main'] = {
       element: classicMainElement,
       content: editorContent['main'] ?? '',
+      modelElement: rootEditorModelElement,
     };
   }
 
@@ -53,6 +60,7 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
       acc[rootName] = {
         ...acc[rootName],
         content: acc[rootName].content ?? rootContent,
+        modelElement: acc[rootName].modelElement ?? rootEditorModelElement,
       };
     }
     else {
@@ -60,6 +68,7 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
       acc[rootName] = {
         element: null,
         content: rootContent,
+        modelElement: rootEditorModelElement,
       };
     }
   }
@@ -74,4 +83,5 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
 export type EditableItem = {
   element: HTMLElement | null;
   content: string | null;
+  modelElement: string | null;
 };