ckeditor5-livewire 1.2.5 → 1.2.7

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

@@ -159,7 +159,7 @@ describe('editor component', () => {
       it('should create a decoupled editor with `main` editable and default preset', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('decoupled'),
@@ -183,7 +183,7 @@ describe('editor component', () => {
 
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('decoupled'),
@@ -202,10 +202,32 @@ describe('editor component', () => {
         expect(editor.getData()).toBe(initialEditableContent);
       });
 
+      it('should pick initial content from root editor element if editable has null content', 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'),
+        });
+
+        const editor = await waitForTestEditor();
+
+        expect(editor).to.toBeInstanceOf(DecoupledEditor);
+        expect(editor.getData()).toBe('<p>Initial content</p>');
+      });
+
       it('should throw error if `main` editable is not found in the DOM', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'decoupled' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('decoupled'),
@@ -240,7 +262,7 @@ describe('editor component', () => {
       it('should create a multiroot editor without editables in the DOM and initial content', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('multiroot'),
@@ -256,7 +278,7 @@ describe('editor component', () => {
       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',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('multiroot'),
@@ -283,7 +305,7 @@ describe('editor component', () => {
       it('should wait and for root elements to be present in DOM if they are not (with content=\'\' value)', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('multiroot'),
@@ -310,7 +332,7 @@ describe('editor component', () => {
       it('should wait and for root elements to be present in DOM if they are not (with set content value)', async () => {
         livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
           name: 'ckeditor5',
-          el: createEditorHtmlElement(),
+          el: createEditorHtmlElement({ editorType: 'multiroot' }),
           canonical: {
             ...createEditorSnapshot(),
             preset: createEditorPreset('multiroot'),

package/src/hooks/editor/editor.ts

@@ -1,6 +1,6 @@
 import type { Editor } from 'ckeditor5';
 
-import type { EditorId, EditorLanguage, EditorPreset, EditorType } from './typings';
+import type { EditorId, EditorLanguage, EditorPreset } from './typings';
 import type { EditorCreator } from './utils';
 
 import { ContextsRegistry } from '../../hooks/context';
@@ -197,19 +197,19 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
 
     // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
     const editor = await (async () => {
-      let sourceElementOrData: HTMLElement | Record<string, HTMLElement> = queryEditablesElements(editorId, editorType);
+      let sourceElements: HTMLElement | Record<string, HTMLElement> = queryEditablesElements(editorId);
 
       // Handle special case when user specified `initialData` of several root elements, but editable components
       // are not yet present in the DOM. In other words - editor is initialized before attaching root elements.
-      if (!(sourceElementOrData instanceof HTMLElement) && !('main' in sourceElementOrData)) {
+      if (!(sourceElements instanceof HTMLElement) && !('main' in sourceElements)) {
         const requiredRoots = (
           editorType === 'decoupled'
             ? ['main']
             : Object.keys(initialData as Record<string, string>)
         );
 
-        if (!checkIfAllRootsArePresent(sourceElementOrData, requiredRoots)) {
-          sourceElementOrData = await waitForAllRootsToBePresent(editorId, editorType, requiredRoots);
+        if (!checkIfAllRootsArePresent(sourceElements, requiredRoots)) {
+          sourceElements = await waitForAllRootsToBePresent(editorId, requiredRoots);
           initialData = {
             ...content,
             ...queryEditablesSnapshotContent(editorId),
@@ -218,8 +218,8 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       }
 
       // If single root editor, unwrap the element from the object.
-      if (isSingleRootEditor(editorType) && 'main' in sourceElementOrData) {
-        sourceElementOrData = sourceElementOrData['main'];
+      if (isSingleRootEditor(editorType) && 'main' in sourceElements) {
+        sourceElements = sourceElements['main'];
       }
 
       // Construct parsed config.
@@ -234,13 +234,13 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
         },
       };
 
-      if (!context || !(sourceElementOrData instanceof HTMLElement)) {
-        return Constructor.create(sourceElementOrData as any, parsedConfig);
+      if (!context || !(sourceElements instanceof HTMLElement)) {
+        return Constructor.create(sourceElements as any, parsedConfig);
       }
 
       const result = await createEditorInContext({
         context,
-        element: sourceElementOrData,
+        element: sourceElements,
         creator: Constructor,
         config: parsedConfig,
       });
@@ -271,18 +271,16 @@ function checkIfAllRootsArePresent(elements: Record<string, HTMLElement>, requir
  * Waits for all required root elements to be present in the DOM.
  *
  * @param editorId The editor's ID.
- * @param editorType The type of the editor.
  * @param requiredRoots The list of required root IDs.
  * @returns A promise that resolves to the record of root elements.
  */
 async function waitForAllRootsToBePresent(
   editorId: EditorId,
-  editorType: EditorType,
   requiredRoots: string[],
 ): Promise<Record<string, HTMLElement>> {
-  await waitFor(
+  return waitFor(
     () => {
-      const elements = queryEditablesElements(editorId, editorType) as unknown as Record<string, HTMLElement>;
+      const elements = queryEditablesElements(editorId) as unknown as Record<string, HTMLElement>;
 
       if (!checkIfAllRootsArePresent(elements, requiredRoots)) {
         throw new Error(
@@ -294,12 +292,10 @@ async function waitForAllRootsToBePresent(
         );
       }
 
-      return true;
+      return elements;
     },
     { timeOutAfter: 2000, retryAfter: 100 },
   );
-
-  return queryEditablesElements(editorId, editorType) as unknown as Record<string, HTMLElement>;
 }
 
 /**

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

@@ -1,20 +1,14 @@
-import type { EditorId, EditorType } from '../typings';
+import type { EditorId } from '../typings';
 
 import { filterObjectValues, mapObjectValues } from '../../../shared';
-import { isSingleRootEditor } from './is-single-root-editor';
 
 /**
  * Gets the initial root elements for the editor based on its type.
  *
  * @param editorId The editor's ID.
- * @param type The type of the editor.
  * @returns The root element(s) for the editor.
  */
-export function queryEditablesElements(editorId: EditorId, type: EditorType) {
-  if (isSingleRootEditor(type) && type !== 'decoupled') {
-    return document.getElementById(`${editorId}_editor`)!;
-  }
-
+export function queryEditablesElements(editorId: EditorId) {
   const editables = queryAllEditorEditables(editorId);
 
   return mapObjectValues(editables, ({ element }) => element);
@@ -27,7 +21,7 @@ export function queryEditablesElements(editorId: EditorId, type: EditorType) {
  * @returns An object mapping editable names to their corresponding elements and initial values.
  */
 export function queryAllEditorEditables(editorId: EditorId): Record<string, EditableItem> {
-  return (
+  const acc = (
     window.Livewire
       .all()
       .filter(({ name, canonical }) => name === 'ckeditor5-editable' && canonical['editorId'] === editorId)
@@ -39,6 +33,38 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
         },
       }), Object.create({}))
   );
+
+  const rootHook = (
+    window.Livewire
+      .all()
+      .find(({ name, canonical }) => name === 'ckeditor5' && canonical['editorId'] === editorId)
+  );
+
+  const initialRootEditableValue = rootHook?.canonical.content as Record<string, string> | null;
+  const contentElement = document.querySelector<HTMLElement>(`#${editorId}_editor `);
+  const currentMain = acc['main'];
+
+  if (currentMain && initialRootEditableValue?.['main']) {
+    return {
+      ...acc,
+      main: {
+        ...currentMain,
+        content: currentMain.content || initialRootEditableValue['main'],
+      },
+    };
+  }
+
+  if (contentElement) {
+    return {
+      ...acc,
+      main: {
+        element: contentElement,
+        content: initialRootEditableValue?.['main'] || null,
+      },
+    };
+  }
+
+  return acc;
 }
 
 /**

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

@@ -150,7 +150,7 @@ describe('ui-part component', () => {
   function appendMultirootEditor(initialContent: Record<string, string> = {}) {
     livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
       name: 'ckeditor5',
-      el: createEditorHtmlElement(),
+      el: createEditorHtmlElement({ editorType: 'multiroot' }),
       canonical: {
         ...createEditorSnapshot(),
         preset: createEditorPreset('multiroot'),