ckeditor5-livewire 1.2.3 → 1.2.5

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

@@ -213,7 +213,7 @@ describe('editor component', () => {
         });
 
         await expect(waitForTestEditor()).rejects.toThrowError(
-          `No "main" editable found for editor with ID "test-editor".`,
+          /It looks like not all required root elements are present yet/,
         );
       });
     });
@@ -627,6 +627,49 @@ describe('editor component', () => {
 
         vi.useRealTimers();
       });
+
+      it('should not crash if content is null in snapshot', async () => {
+        vi.useFakeTimers();
+
+        const { $wire } = livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement(),
+          canonical: {
+            ...createEditorSnapshot(),
+            content: null as any,
+            saveDebounceMs: 0,
+          },
+        });
+
+        const editor = await waitForTestEditor();
+
+        $wire.set.mockClear();
+        editor.setData('<p>New content</p>');
+
+        await vi.advanceTimersByTimeAsync(1);
+
+        expect($wire.set).toHaveBeenCalledWith('content', { main: '<p>New content</p>' });
+        vi.useRealTimers();
+      });
+
+      it('should not crash on focus change if content is null in snapshot', async () => {
+        const { $wire } = livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement(),
+          canonical: {
+            ...createEditorSnapshot(),
+            content: null as any,
+          },
+        });
+
+        const { ui: { focusTracker } } = await waitForTestEditor();
+
+        // Focus the editor.
+        $wire.set.mockClear();
+        focusTracker.isFocused = true;
+
+        expect($wire.set).toHaveBeenCalledWith('focused', true);
+      });
     });
 
     describe('dispatch / receive events', () => {

package/src/hooks/editor/editor.ts

@@ -13,7 +13,7 @@ import {
 } from './plugins';
 import {
   createEditorInContext,
-  isSingleEditingLikeEditor,
+  isSingleRootEditor,
   loadAllEditorTranslations,
   loadEditorConstructor,
   loadEditorPlugins,
@@ -171,7 +171,7 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       ),
     );
 
-    if (isSingleEditingLikeEditor(editorType)) {
+    if (isSingleRootEditor(editorType)) {
       loadedPlugins.push(
         await createSyncEditorWithInputPlugin(saveDebounceMs),
       );
@@ -188,31 +188,40 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
     // Let's query all elements, and create basic configuration.
     let initialData: string | Record<string, string> = {
       ...content,
-      ...queryEditablesSnapshotContent(editorId, editorType),
+      ...queryEditablesSnapshotContent(editorId),
     };
 
-    if (isSingleEditingLikeEditor(editorType)) {
+    if (isSingleRootEditor(editorType)) {
       initialData = initialData['main'] || '';
     }
 
     // Depending of the editor type, and parent lookup for nearest context or initialize it without it.
     const editor = await (async () => {
-      let sourceElementOrData = queryEditablesElements(editorId, editorType);
+      let sourceElementOrData: HTMLElement | Record<string, HTMLElement> = queryEditablesElements(editorId, editorType);
 
       // 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 (shouldWaitForRoots(sourceElementOrData, editorType)) {
-        const requiredRoots = Object.keys(initialData as Record<string, string>);
+      if (!(sourceElementOrData instanceof HTMLElement) && !('main' in sourceElementOrData)) {
+        const requiredRoots = (
+          editorType === 'decoupled'
+            ? ['main']
+            : Object.keys(initialData as Record<string, string>)
+        );
 
         if (!checkIfAllRootsArePresent(sourceElementOrData, requiredRoots)) {
           sourceElementOrData = await waitForAllRootsToBePresent(editorId, editorType, requiredRoots);
           initialData = {
             ...content,
-            ...queryEditablesSnapshotContent(editorId, editorType),
+            ...queryEditablesSnapshotContent(editorId),
           };
         }
       }
 
+      // If single root editor, unwrap the element from the object.
+      if (isSingleRootEditor(editorType) && 'main' in sourceElementOrData) {
+        sourceElementOrData = sourceElementOrData['main'];
+      }
+
       // Construct parsed config.
       const parsedConfig = {
         ...resolveEditorConfigElementReferences(config),
@@ -239,7 +248,7 @@ export class EditorComponentHook extends ClassHook<Snapshot> {
       return result.editor;
     })();
 
-    if (isSingleEditingLikeEditor(editorType) && editableHeight) {
+    if (isSingleRootEditor(editorType) && editableHeight) {
       setEditorEditableHeight(editor, editableHeight);
     }
 
@@ -293,24 +302,6 @@ async function waitForAllRootsToBePresent(
   return queryEditablesElements(editorId, editorType) as unknown as Record<string, HTMLElement>;
 }
 
-/**
- * Type guard to check if we should wait for multiple root elements.
- *
- * @param elements The elements retrieved for the editor.
- * @param editorType The type of the editor.
- * @returns True if we should wait for multiple root elements, false otherwise.
- */
-function shouldWaitForRoots(
-  elements: HTMLElement | Record<string, HTMLElement>,
-  editorType: EditorType,
-): elements is Record<string, HTMLElement> {
-  return (
-    !isSingleEditingLikeEditor(editorType)
-    && typeof elements === 'object'
-    && !(elements instanceof HTMLElement)
-  );
-}
-
 /**
  * A snapshot of the Livewire component's state relevant to the CKEditor5 hook.
  */

package/src/hooks/editor/plugins/livewire-sync.ts

@@ -101,7 +101,7 @@ export async function createLivewireSyncPlugin(
         const values = this.getEditorRootsValues();
 
         // Prevent looping when editor changed content from Livewire.
-        if (!shallowEqual(values, component.canonical.content)) {
+        if (!shallowEqual(values, component.canonical.content ?? {})) {
           $wire.set('content', values);
           $wire.dispatch('editor-content-changed', {
             editorId: component.canonical.editorId,
@@ -127,7 +127,7 @@ export async function createLivewireSyncPlugin(
         $wire.set('focused', ui.focusTracker.isFocused);
 
         // Only push content if it has changed compared to canonical
-        if (!shallowEqual(values, component.canonical.content)) {
+        if (!shallowEqual(values, component.canonical.content ?? {})) {
           $wire.set('content', values);
         }
       };

package/src/hooks/editor/utils/index.ts

@@ -1,6 +1,6 @@
 export * from './create-editor-in-context';
 export * from './get-editor-roots-values';
-export * from './is-single-editing-like-editor';
+export * from './is-single-root-editor';
 export * from './is-wire-model-connected';
 export * from './load-editor-constructor';
 export * from './load-editor-plugins';

package/src/hooks/editor/utils/{is-single-editing-like-editor.test.ts → is-single-root-editor.test.ts}

@@ -2,27 +2,27 @@ import { describe, expect, it } from 'vitest';
 
 import type { EditorType } from '../typings';
 
-import { isSingleEditingLikeEditor } from './is-single-editing-like-editor';
+import { isSingleRootEditor } from './is-single-root-editor';
 
-describe('isSingleEditingLikeEditor', () => {
+describe('isSingleRootEditor', () => {
   it('should return true for inline editor', () => {
-    expect(isSingleEditingLikeEditor('inline')).toBe(true);
+    expect(isSingleRootEditor('inline')).toBe(true);
   });
 
   it('should return true for classic editor', () => {
-    expect(isSingleEditingLikeEditor('classic')).toBe(true);
+    expect(isSingleRootEditor('classic')).toBe(true);
   });
 
   it('should return true for balloon editor', () => {
-    expect(isSingleEditingLikeEditor('balloon')).toBe(true);
+    expect(isSingleRootEditor('balloon')).toBe(true);
   });
 
   it('should return false for decoupled editor', () => {
-    expect(isSingleEditingLikeEditor('decoupled')).toBe(true);
+    expect(isSingleRootEditor('decoupled')).toBe(true);
   });
 
   it('should return false for multiroot editor', () => {
-    expect(isSingleEditingLikeEditor('multiroot')).toBe(false);
+    expect(isSingleRootEditor('multiroot')).toBe(false);
   });
 
   it('should handle all valid editor types', () => {
@@ -30,11 +30,11 @@ describe('isSingleEditingLikeEditor', () => {
     const multiEditingTypes: EditorType[] = ['multiroot'];
 
     singleEditingTypes.forEach((type) => {
-      expect(isSingleEditingLikeEditor(type)).toBe(true);
+      expect(isSingleRootEditor(type)).toBe(true);
     });
 
     multiEditingTypes.forEach((type) => {
-      expect(isSingleEditingLikeEditor(type)).toBe(false);
+      expect(isSingleRootEditor(type)).toBe(false);
     });
   });
 });

package/src/hooks/editor/utils/{is-single-editing-like-editor.ts → is-single-root-editor.ts}

@@ -6,6 +6,6 @@ import type { EditorType } from '../typings';
  * @param editorType - The type of the editor to check.
  * @returns `true` if the editor type is 'inline', 'classic', or 'balloon', otherwise `false`.
  */
-export function isSingleEditingLikeEditor(editorType: EditorType): boolean {
+export function isSingleRootEditor(editorType: EditorType): boolean {
   return ['inline', 'classic', 'balloon', 'decoupled'].includes(editorType);
 }

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

@@ -1,7 +1,24 @@
 import type { EditorId, EditorType } from '../typings';
 
 import { filterObjectValues, mapObjectValues } from '../../../shared';
-import { isSingleEditingLikeEditor } from './is-single-editing-like-editor';
+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`)!;
+  }
+
+  const editables = queryAllEditorEditables(editorId);
+
+  return mapObjectValues(editables, ({ element }) => element);
+}
 
 /**
  * Queries all editable elements within a specific editor instance.
@@ -24,75 +41,21 @@ export function queryAllEditorEditables(editorId: EditorId): Record<string, Edit
   );
 }
 
-/**
- * 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) {
-  // While the `decoupled` editor is a single editing-like editor, it has a different structure
-  // and requires special handling to get the main editable.
-  if (type === 'decoupled') {
-    const { element } = queryDecoupledMainEditableOrThrow(editorId);
-
-    return element;
-  }
-
-  if (isSingleEditingLikeEditor(type)) {
-    return document.getElementById(`${editorId}_editor`)!;
-  }
-
-  const editables = queryAllEditorEditables(editorId);
-
-  return mapObjectValues(editables, ({ element }) => element);
-}
-
 /**
  * Gets the initial data for the roots of the editor. If the editor is a single editing-like editor,
  * it retrieves the initial value from the element's attribute. Otherwise, it returns an object mapping
  * editable names to their initial values.
  *
  * @param editorId The editor's ID.
- * @param type The type of the editor.
  * @returns The initial values for the editor's roots.
  */
-export function queryEditablesSnapshotContent(editorId: EditorId, type: EditorType) {
-  // While the `decoupled` editor is a single editing-like editor, it has a different structure
-  // and requires special handling to get the main editable.
-  if (type === 'decoupled') {
-    const { content } = queryDecoupledMainEditableOrThrow(editorId);
-
-    // If initial value is not set, then pick it from the editor element.
-    if (typeof content === 'string') {
-      return {
-        main: content,
-      };
-    }
-  }
-
+export function queryEditablesSnapshotContent(editorId: EditorId) {
   const editables = queryAllEditorEditables(editorId);
   const values = mapObjectValues(editables, ({ content }) => content);
 
   return filterObjectValues(values, value => typeof value === 'string') as Record<string, string>;
 }
 
-/**
- * Queries the main editable for a decoupled editor and throws an error if not found.
- *
- * @param editorId The ID of the editor to query.
- */
-function queryDecoupledMainEditableOrThrow(editorId: EditorId) {
-  const mainEditable = queryAllEditorEditables(editorId)['main'];
-
-  if (!mainEditable) {
-    throw new Error(`No "main" editable found for editor with ID "${editorId}".`);
-  }
-
-  return mainEditable;
-}
-
 /**
  * Type representing an editable item within an editor.
  */

package/dist/hooks/editor/utils/is-single-editing-like-editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"is-single-editing-like-editor.d.ts","sourceRoot":"","sources":["../../../../../src/hooks/editor/utils/is-single-editing-like-editor.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAE7C;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,UAAU,EAAE,UAAU,GAAG,OAAO,CAEzE"}