ckeditor5-blazor 1.9.1 → 1.10.0

package/src/interop/create-editor-blazor-interop.ts

@@ -20,7 +20,7 @@ export function createEditorBlazorInterop(element: HTMLElement, interop: DotNetI
   const editorId = element.getAttribute('data-cke-editor-id');
 
   let unmounted = false;
-  let unmountCKEditorListeners: VoidFunction | null = null;
+  let stopEffect: VoidFunction | null = null;
 
   let sync = createNoopSync<Record<string, string>>();
   let syncRootAttributes: RootAttributesUpdater | null = null;
@@ -39,12 +39,7 @@ export function createEditorBlazorInterop(element: HTMLElement, interop: DotNetI
     }
   };
 
-  /**
-   * Initializes the focus tracker and model listeners for the editor.
-   */
-  const initializeSynchronization = async () => {
-    const editor = await EditorsRegistry.the.waitFor(editorId);
-
+  stopEffect = EditorsRegistry.the.mountEffect(editorId, (editor) => {
     editorRef = globalThis.DotNet.createJSObjectReference(editor);
     sync = createEditorValueSync(editor, {
       getCurrentValue: () => getEditorRootsValues(editor),
@@ -70,13 +65,20 @@ export function createEditorBlazorInterop(element: HTMLElement, interop: DotNetI
     // that already exist on the .NET side.
     void interop.invokeMethodAsync('OnEditorReady', editorRef);
 
-    // When the Blazor component is disposed, clean up event listeners.
-    unmountCKEditorListeners = () => {
+    return () => {
       editor.ui.focusTracker.off('change:isFocused', onFocusChange);
+      sync.unmount();
+
+      /* v8 ignore else -- @preserve */
+      if (editorRef) {
+        globalThis.DotNet?.disposeJSObjectReference(editorRef);
+        editorRef = null;
+      }
+
+      syncRootAttributes = null;
     };
-  };
+  });
 
-  void initializeSynchronization();
   document.body.addEventListener(CKEditor5ChangeDataEvent.EVENT_NAME, onDataChange);
 
   ensureEditorElementsRegistered();
@@ -117,15 +119,10 @@ export function createEditorBlazorInterop(element: HTMLElement, interop: DotNetI
       }
 
       document.body.removeEventListener(CKEditor5ChangeDataEvent.EVENT_NAME, onDataChange);
-      sync.unmount();
-      unmountCKEditorListeners?.();
 
-      if (editorRef) {
-        globalThis.DotNet.disposeJSObjectReference(editorRef);
-        editorRef = null;
-      }
+      stopEffect?.();
+      stopEffect = null;
 
-      syncRootAttributes = null;
       unmounted = true;
     },
 

package/src/shared/are-maps-equal.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+
+import { areMapsEqual } from './are-maps-equal';
+
+describe('areMapsEqual', () => {
+  it('should return true for two empty maps', () => {
+    expect(areMapsEqual(new Map(), new Map())).toBe(true);
+  });
+
+  it('should return true for maps with identical keys and primitive values', () => {
+    const map1 = new Map([['a', 1], ['b', 2]]);
+    const map2 = new Map([['a', 1], ['b', 2]]);
+
+    expect(areMapsEqual(map1, map2)).toBe(true);
+  });
+
+  it('should return false if map sizes are different', () => {
+    const map1 = new Map([['a', 1]]);
+    const map2 = new Map([['a', 1], ['b', 2]]);
+
+    expect(areMapsEqual(map1, map2)).toBe(false);
+  });
+
+  it('should return false if the keys are different', () => {
+    const map1 = new Map([['a', 1], ['c', 2]]);
+    const map2 = new Map([['a', 1], ['b', 2]]);
+
+    expect(areMapsEqual(map1, map2)).toBe(false);
+  });
+
+  it('should return false if the values for the same keys are different', () => {
+    const map1 = new Map([['a', 1], ['b', 3]]);
+    const map2 = new Map([['a', 1], ['b', 2]]);
+
+    expect(areMapsEqual(map1, map2)).toBe(false);
+  });
+
+  it('should return false if the first map (map1) is null', () => {
+    const map2 = new Map([['a', 1]]);
+
+    expect(areMapsEqual(null, map2)).toBe(false);
+  });
+
+  it('should correctly handle objects as values using shallow comparison (reference equality)', () => {
+    const obj = { id: 1 };
+
+    const map1 = new Map([['key', obj]]);
+    const map2 = new Map([['key', obj]]);
+
+    expect(areMapsEqual(map1, map2)).toBe(true);
+
+    const map3 = new Map([['key', { id: 1 }]]);
+
+    expect(areMapsEqual(map1, map3)).toBe(false);
+  });
+});

package/src/shared/are-maps-equal.ts

@@ -0,0 +1,22 @@
+/**
+ * Compares two Map structures for equality based on their contents.
+ * The function checks if the maps have the same size, contain the exact same keys,
+ * and have strictly equal values (using shallow comparison).
+ *
+ * @param map1 - The first map to compare (can be null).
+ * @param map2 - The second map to compare.
+ * @returns Returns `true` if the maps are identical in terms of keys and values, otherwise `false`.
+ */
+export function areMapsEqual(map1: Map<any, any> | null, map2: Map<any, any>): boolean {
+  if (!map1 || map1.size !== map2.size) {
+    return false;
+  }
+
+  for (const [key, value] of map1) {
+    if (!map2.has(key) || map2.get(key) !== value) {
+      return false;
+    }
+  }
+
+  return true;
+}

package/src/shared/async-registry.test.ts

@@ -96,30 +96,6 @@ describe('async registry', () => {
       registry.unregister('item1');
       expect(registry.getItems()).not.toContain(item);
     });
-
-    it('should throw an error if trying to unregister an item that is not registered', () => {
-      expect(() => registry.unregister('nonexistent')).toThrow(
-        'Item with ID "nonexistent" is not registered.',
-      );
-    });
-
-    it('should also unregister the default item if the unregistered item was the default one', async () => {
-      const item1 = createMockItem('item1');
-
-      registry.register('item1', item1); // This also registers it as default
-
-      // Check it is the default
-      const promise = registry.execute(null, item => item);
-
-      await expect(promise).resolves.toBe(item1);
-
-      registry.unregister('item1');
-
-      // Now check that the default is also gone
-      expect(() => registry.unregister(null)).toThrow(
-        'Item with ID "null" is not registered.',
-      );
-    });
   });
 
   describe('execute', () => {
@@ -234,7 +210,7 @@ describe('async registry', () => {
     });
   });
 
-  describe('getitems', () => {
+  describe('getItems', () => {
     it('should return all registered items', () => {
       const item1 = createMockItem('item1');
       const item2 = createMockItem('item2');
@@ -244,7 +220,7 @@ describe('async registry', () => {
 
       const items = registry.getItems();
 
-      expect(items).toHaveLength(3); // item1, item2, and default (which is item1)
+      expect(items).toHaveLength(3);
       expect(items).toContain(item1);
       expect(items).toContain(item2);
     });
@@ -252,16 +228,30 @@ describe('async registry', () => {
     it('should return unique items if some point to the same instance', () => {
       const item1 = createMockItem('item1');
 
-      registry.register('item1', item1); // This also registers it as default
+      registry.register('item1', item1);
 
       const items = registry.getItems();
 
-      expect(items).toHaveLength(2); // item1 and default (which is item1)
+      expect(items).toHaveLength(2);
       expect(items.filter(e => e === item1)).toHaveLength(2);
     });
   });
 
-  describe('hasitem', () => {
+  describe('getItem', () => {
+    it('should return registered item', () => {
+      const item = createMockItem('item1');
+
+      registry.register('item1', item);
+
+      expect(registry.getItem('item1')).toBe(item);
+    });
+
+    it('should return undefined if item doesn\'t exist', () => {
+      expect(registry.getItem('item1')).toBeUndefined();
+    });
+  });
+
+  describe('hasItem', () => {
     it('should return true if an item with the given ID is registered', () => {
       const item = createMockItem('item1');
 
@@ -402,110 +392,222 @@ describe('async registry', () => {
     });
   });
 
-  describe('waitFor', () => {
-    it('should return a promise that resolves with the item instance', async () => {
+  describe('reset', () => {
+    it('should destroy all registered items', async () => {
       const item1 = createMockItem('item1');
+      const item2 = createMockItem('item2');
+
       registry.register('item1', item1);
+      registry.register('item2', item2);
 
-      const result = await registry.waitFor('item1');
+      await registry.reset();
 
-      expect(result).toBe(item1);
+      expect(registry.getItems()).toHaveLength(0);
     });
 
-    it('should wait for the item to be registered before resolving', async () => {
-      const promise = registry.waitFor('item1');
-      const item1 = createMockItem('item1');
+    it('should call destroy on each unique item', async () => {
+      const destroyMock1 = vi.fn().mockResolvedValue(undefined);
+      const destroyMock2 = vi.fn().mockResolvedValue(undefined);
+
+      const item1 = { name: 'item1', destroy: destroyMock1 } as unknown as Mockitem;
+      const item2 = { name: 'item2', destroy: destroyMock2 } as unknown as Mockitem;
 
       registry.register('item1', item1);
+      registry.register('item2', item2);
 
-      expect(await promise).toBe(item1);
+      await registry.reset();
+
+      expect(destroyMock1).toHaveBeenCalledOnce();
+      expect(destroyMock2).toHaveBeenCalledOnce();
     });
 
-    it('should reject if error is registered after waitFor call', async () => {
-      const promise = registry.waitFor('item1');
+    it('should clear watchers so they are no longer called after reset', async () => {
+      const watcher = vi.fn();
+      registry.watch(watcher);
 
-      registry.error('item1', 'Failed to initialize');
+      await registry.reset();
+      watcher.mockClear();
 
-      await expect(promise).rejects.toThrow('Failed to initialize');
+      const item = createMockItem('item1');
+      registry.register('item1', item);
+
+      expect(watcher).not.toHaveBeenCalled();
     });
+  });
 
-    it('should reject with timeout error if item is not registered within timeout', async () => {
-      vi.useFakeTimers();
-      const promise = registry.waitFor('item1', 100);
+  describe('mountEffect', () => {
+    it('should call onMount immediately when item is already registered', () => {
+      const item = createMockItem('item1');
+      registry.register('item1', item);
 
-      vi.advanceTimersByTime(100);
+      const onMount = vi.fn();
+      registry.mountEffect('item1', onMount);
 
-      await expect(promise).rejects.toThrow('Timeout waiting for item with ID "item1" to be registered.');
-      vi.useRealTimers();
+      expect(onMount).toHaveBeenCalledOnce();
+      expect(onMount).toHaveBeenCalledWith(item);
     });
 
-    it('should cleanup timer when item is registered before timeout', async () => {
-      vi.useFakeTimers();
-      const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
-      const promise = registry.waitFor('item1', 100);
+    it('should call onMount when item registers later', () => {
+      const onMount = vi.fn();
+      registry.mountEffect('item1', onMount);
+
+      expect(onMount).not.toHaveBeenCalled();
 
       const item = createMockItem('item1');
       registry.register('item1', item);
 
-      await promise;
+      expect(onMount).toHaveBeenCalledOnce();
+      expect(onMount).toHaveBeenCalledWith(item);
+    });
+
+    it('should call cleanup returned by onMount when item is unregistered', () => {
+      const item = createMockItem('item1');
+      registry.register('item1', item);
+
+      const cleanup = vi.fn();
+      registry.mountEffect('item1', () => cleanup);
+
+      registry.unregister('item1');
+
+      expect(cleanup).toHaveBeenCalledOnce();
+    });
+
+    it('should call cleanup and re-call onMount on re-registration', () => {
+      const item1a = createMockItem('item1');
+      registry.register('item1', item1a);
+
+      const cleanup = vi.fn();
+      const onMount = vi.fn(() => cleanup);
+      registry.mountEffect('item1', onMount);
+
+      expect(onMount).toHaveBeenCalledOnce();
+
+      registry.unregister('item1');
+      expect(cleanup).toHaveBeenCalledOnce();
+
+      const item1b = createMockItem('item1');
+      registry.register('item1', item1b);
+
+      expect(onMount).toHaveBeenCalledTimes(2);
+      expect(onMount).toHaveBeenLastCalledWith(item1b);
+    });
+
+    it('should not call onMount if item never registers', () => {
+      const onMount = vi.fn();
+      const stop = registry.mountEffect('item1', onMount);
+
+      stop();
 
-      expect(clearTimeoutSpy).toHaveBeenCalled();
-      vi.useRealTimers();
+      expect(onMount).not.toHaveBeenCalled();
     });
 
-    it('should cleanup timer when error occurs before timeout', async () => {
-      vi.useFakeTimers();
-      const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
-      const promise = registry.waitFor('item1', 100);
+    it('should run cleanup and stop watching when stop is called with item mounted', () => {
+      const item = createMockItem('item1');
+      registry.register('item1', item);
+
+      const cleanup = vi.fn();
+      const stop = registry.mountEffect('item1', () => cleanup);
+
+      stop();
+
+      expect(cleanup).toHaveBeenCalledOnce();
+
+      // Watcher should be gone — unregistering should not trigger cleanup again.
+      registry.unregister('item1');
+
+      expect(cleanup).toHaveBeenCalledOnce();
+    });
+
+    it('should not call cleanup when stop is called before item registers', () => {
+      const cleanup = vi.fn();
+      const onMount = vi.fn(() => cleanup);
+      const stop = registry.mountEffect('item1', onMount);
+
+      stop();
+
+      expect(onMount).not.toHaveBeenCalled();
+      expect(cleanup).not.toHaveBeenCalled();
+    });
+
+    it('should call onMount and immediately run cleanup when item registers after stop', () => {
+      const cleanup = vi.fn();
+      const onMount = vi.fn(() => cleanup);
+      const stop = registry.mountEffect('item1', onMount);
 
-      registry.error('item1', new Error('fail'));
+      stop();
 
-      await expect(promise).rejects.toThrow('fail');
+      const item = createMockItem('item1');
+      registry.register('item1', item);
 
-      expect(clearTimeoutSpy).toHaveBeenCalled();
-      vi.useRealTimers();
+      expect(onMount).toHaveBeenCalledOnce();
+      expect(onMount).toHaveBeenCalledWith(item);
+      expect(cleanup).toHaveBeenCalledOnce();
     });
 
-    it('should not try to clear timer if timeout exceeded before item registration', async () => {
-      vi.useFakeTimers();
-      const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
-      const promise = registry.waitFor('item1', 100);
+    it('should stop watching after late cleanup fires', () => {
+      const onMount = vi.fn();
+      const stop = registry.mountEffect('item1', onMount);
 
-      // Trigger timeout
-      vi.advanceTimersByTime(100);
+      stop();
 
-      await expect(promise).rejects.toThrow('Timeout');
+      const item1 = createMockItem('item1');
+      registry.register('item1', item1);
+
+      expect(onMount).toHaveBeenCalledOnce();
+
+      // Watcher should have been removed after late cleanup — further changes are ignored.
+      registry.unregister('item1');
+      registry.register('item1', createMockItem('item1'));
 
-      // Clear spy to reset calls made by internal mechanisms
-      clearTimeoutSpy.mockClear();
+      expect(onMount).toHaveBeenCalledOnce();
+    });
 
-      // Now register item - verify logic in success callback
+    it('should not throw when onMount returns void and stop is called', () => {
       const item = createMockItem('item1');
       registry.register('item1', item);
 
-      expect(clearTimeoutSpy).not.toHaveBeenCalled();
+      const stop = registry.mountEffect('item1', () => {});
+
+      expect(() => stop()).not.toThrow();
+    });
+
+    it('should work with the default null ID', () => {
+      const item = createMockItem('item1');
+      registry.register('item1', item); // also registered as default
+
+      const onMount = vi.fn();
+      registry.mountEffect(null, onMount);
 
-      vi.useRealTimers();
+      expect(onMount).toHaveBeenCalledOnce();
+      expect(onMount).toHaveBeenCalledWith(item);
     });
+  });
+
+  describe('waitFor', () => {
+    it('should return a promise that resolves with the item instance', async () => {
+      const item1 = createMockItem('item1');
+      registry.register('item1', item1);
+
+      const result = await registry.waitFor('item1');
 
-    it('should not try to clear timer if timeout exceeded before error registration', async () => {
-      vi.useFakeTimers();
-      const clearTimeoutSpy = vi.spyOn(globalThis, 'clearTimeout');
-      const promise = registry.waitFor('item1', 100);
+      expect(result).toBe(item1);
+    });
 
-      // Trigger timeout
-      vi.advanceTimersByTime(100);
+    it('should wait for the item to be registered before resolving', async () => {
+      const promise = registry.waitFor('item1');
+      const item1 = createMockItem('item1');
 
-      await expect(promise).rejects.toThrow('Timeout');
+      registry.register('item1', item1);
 
-      clearTimeoutSpy.mockClear();
+      expect(await promise).toBe(item1);
+    });
 
-      // Now register error - verify logic in error callback
-      registry.error('item1', new Error('late fail'));
+    it('should reject if error is registered after waitFor call', async () => {
+      const promise = registry.waitFor('item1');
 
-      expect(clearTimeoutSpy).not.toHaveBeenCalled();
+      registry.error('item1', 'Failed to initialize');
 
-      vi.useRealTimers();
+      await expect(promise).rejects.toThrow('Failed to initialize');
     });
   });
 
@@ -597,7 +699,7 @@ describe('async registry', () => {
       const item1 = createMockItem('item1');
       registry.register('item1', item1);
 
-      expect(watcher).toHaveBeenCalledTimes(3);
+      expect(watcher).toHaveBeenCalledTimes(2);
     });
 
     it('should call watcher when item is unregistered', () => {
@@ -610,7 +712,7 @@ describe('async registry', () => {
       watcher.mockClear();
       registry.unregister('item1');
 
-      expect(watcher).toHaveBeenCalledTimes(2); // Unregister + default unregister
+      expect(watcher).toHaveBeenCalledTimes(1);
     });
 
     it('should call watcher when all items are destroyed', async () => {