ckeditor5-livewire 1.9.0 → 1.11.0

package/dist/shared/are-maps-equal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 declare function areMapsEqual(map1: Map<any, any> | null, map2: Map<any, any>): boolean;
+//# sourceMappingURL=are-maps-equal.d.ts.map

package/dist/shared/are-maps-equal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"are-maps-equal.d.ts","sourceRoot":"","sources":["../../../src/shared/are-maps-equal.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,CAYrF"}

package/dist/shared/async-registry.d.ts

@@ -19,6 +19,15 @@ export declare class AsyncRegistry<T extends Destructible> {
      * Set of watchers that observe changes to the registry.
      */
     private readonly watchers;
+    /**
+     * Batch nesting depth. When > 0, watcher notifications are deferred.
+     */
+    private batchDepth;
+    /**
+     * Snapshot of the last state dispatched to watchers, used for change detection.
+     */
+    private lastNotifiedItems;
+    private lastNotifiedErrors;
     /**
      * Executes a function on an item.
      * If the item is not yet registered, it will wait for it to be registered.
@@ -29,6 +38,14 @@ export declare class AsyncRegistry<T extends Destructible> {
      * @returns A promise that resolves with the result of the function.
      */
     execute<R, E extends T = T>(id: RegistryId | null, onSuccess: (item: E) => R, onError?: (error: any) => void): Promise<Awaited<R>>;
+    /**
+     * Reactively binds a mount/unmount lifecycle to a single registry item.
+     *
+     * @param id The ID of the item to observe.
+     * @param onMount Function executed when the item mounts.
+     * @returns A function that stops observing and immediately runs any pending cleanup.
+     */
+    mountEffect<E extends T = T>(id: RegistryId | null, onMount: (item: E) => (() => void) | void): () => void;
     /**
      * Registers an item.
      *
@@ -53,14 +70,21 @@ export declare class AsyncRegistry<T extends Destructible> {
      * Un-registers an item.
      *
      * @param id The ID of the item.
+     * @param resetPendingCallbacks If true resets pending callbacks.
      */
-    unregister(id: RegistryId | null): void;
+    unregister(id: RegistryId | null, resetPendingCallbacks?: boolean): void;
     /**
      * Gets all registered items.
      *
      * @returns An array of all registered items.
      */
     getItems(): T[];
+    /**
+     * Returns single registered item.
+     *
+     * @returns Registered item.
+     */
+    getItem(id: RegistryId | null): T | undefined;
     /**
      * Checks if an item with the given ID is registered.
      *
@@ -81,6 +105,22 @@ export declare class AsyncRegistry<T extends Destructible> {
      * This will call the `destroy` method on each item.
      */
     destroyAll(): Promise<void>;
+    /**
+     * Destroys all registered editors and removes all watchers.
+     */
+    reset(): Promise<void>;
+    /**
+     * Executes a callback while deferring all watcher notifications.
+     * A single notification is fired synchronously after the callback returns,
+     * but only if the registry actually changed.
+     *
+     * Batches can be nested — watchers are notified only when the outermost
+     * batch completes.
+     *
+     * @param fn The callback to execute.
+     * @returns The return value of the callback.
+     */
+    batch<R>(fn: () => R): R;
     /**
      * Registers a watcher that will be called whenever the registry changes.
      *
@@ -95,9 +135,9 @@ export declare class AsyncRegistry<T extends Destructible> {
      */
     unwatch(watcher: RegistryWatcher<T>): void;
     /**
-     * Notifies all watchers about changes to the registry.
+     * Immediately dispatches the current state to all watchers if it changed.
      */
-    private notifyWatchers;
+    private flushWatchers;
     /**
      * Gets or creates pending callbacks for a specific ID.
      *
@@ -105,13 +145,6 @@ export declare class AsyncRegistry<T extends Destructible> {
      * @returns The pending callbacks structure.
      */
     private getPendingCallbacks;
-    /**
-     * Registers an item as the default (null ID) item if it's the first one.
-     *
-     * @param id The ID of the item being registered.
-     * @param item The item instance.
-     */
-    private registerAsDefault;
 }
 /**
  * Interface for objects that can be destroyed.

package/dist/shared/async-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"async-registry.d.ts","sourceRoot":"","sources":["../../../src/shared/async-registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,qBAAa,aAAa,CAAC,CAAC,SAAS,YAAY;IAC/C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmC;IAEzD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAqC;IAE1E;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqD;IAEtF;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiC;IAE1D;;;;;;;;OAQG;IACH,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EACxB,EAAE,EAAE,UAAU,GAAG,IAAI,EACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAgCtB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI;IAqB9C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAqB9C;;;;OAIG;IACH,WAAW,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAWxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAgBvC;;;;OAIG;IACH,QAAQ,IAAI,CAAC,EAAE;IAIf;;;;;OAKG;IACH,OAAO,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO;IAIvC;;;;;;OAMG;IACH,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC;IAM3D;;;OAGG;IACG,UAAU;IAehB;;;;;OAKG;IACH,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAY9C;;;;OAIG;IACH,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI;IAI1C;;OAEG;IACH,OAAO,CAAC,cAAc;IAStB;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;IAW3B;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;CAK1B;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,KAAK,UAAU,GAAG,MAAM,CAAC;AAUzB;;GAEG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CACxB,KAAK,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,CAAC,CAAC,EAChC,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,KAAK,CAAC,KAClC,IAAI,CAAC"}
+{"version":3,"file":"async-registry.d.ts","sourceRoot":"","sources":["../../../src/shared/async-registry.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,qBAAa,aAAa,CAAC,CAAC,SAAS,YAAY;IAC/C;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAmC;IAEzD;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAqC;IAE1E;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAqD;IAEtF;;OAEG;IACH,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAiC;IAE1D;;OAEG;IACH,OAAO,CAAC,UAAU,CAAK;IAEvB;;OAEG;IACH,OAAO,CAAC,iBAAiB,CAA8B;IAEvD,OAAO,CAAC,kBAAkB,CAA8B;IAExD;;;;;;;;OAQG;IACH,OAAO,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,EACxB,EAAE,EAAE,UAAU,GAAG,IAAI,EACrB,SAAS,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EACzB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,GAC7B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;IAgCtB;;;;;;OAMG;IACH,WAAW,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EACzB,EAAE,EAAE,UAAU,GAAG,IAAI,EACrB,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,GAAG,IAAI,GACxC,MAAM,IAAI;IAkDb;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI;IAwB9C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,KAAK,EAAE,GAAG,GAAG,IAAI;IAoB9C;;;;OAIG;IACH,WAAW,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAWxC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,qBAAqB,GAAE,OAAc,GAAG,IAAI;IAiB9E;;;;OAIG;IACH,QAAQ,IAAI,CAAC,EAAE;IAIf;;;;OAIG;IACH,OAAO,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,CAAC,GAAG,SAAS;IAI7C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO;IAIvC;;;;;;OAMG;IACH,OAAO,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC;IAM3D;;;OAGG;IACG,UAAU;IAehB;;OAEG;IACG,KAAK;IAKX;;;;;;;;;;OAUG;IACH,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,GAAG,CAAC;IAexB;;;;;OAKG;IACH,KAAK,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAY9C;;;;OAIG;IACH,OAAO,CAAC,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,IAAI;IAI1C;;OAEG;IACH,OAAO,CAAC,aAAa;IAiBrB;;;;;OAKG;IACH,OAAO,CAAC,mBAAmB;CAU5B;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,KAAK,UAAU,GAAG,MAAM,CAAC;AAUzB;;GAEG;AACH,KAAK,eAAe,CAAC,CAAC,IAAI,CACxB,KAAK,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,CAAC,CAAC,EAChC,MAAM,EAAE,GAAG,CAAC,UAAU,GAAG,IAAI,EAAE,KAAK,CAAC,KAClC,IAAI,CAAC"}

package/dist/shared/index.d.ts

@@ -1,3 +1,4 @@
+export * from './are-maps-equal';
 export * from './async-registry';
 export * from './camel-case';
 export * from './debounce';

package/dist/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-livewire",
-  "version": "1.9.0",
+  "version": "1.11.0",
   "description": "CKEditor 5 integration for Laravel Livewire",
   "author": "Mateusz Bagiński <cziken58@gmail.com>",
   "license": "MIT",
@@ -32,9 +32,9 @@
     "@vitest/coverage-v8": "^4.1.0",
     "ckeditor5": "^47.6.0",
     "ckeditor5-premium-features": "^47.6.0",
-    "happy-dom": "^20.0.1",
+    "happy-dom": "^20.8.9",
     "typescript": "^5.5.4",
-    "vite": "^8.0.0",
+    "vite": "^8.0.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.1.0"
   },

package/src/hooks/context/context.test.ts

@@ -342,7 +342,9 @@ describe('context component', () => {
 
       await livewireStub.$internal.unmountComponent(editorId);
 
-      expect(context?.editors.first).toBeNull();
+      await vi.waitFor(() => {
+        expect(context?.editors.first).toBeNull();
+      });
     });
 
     it('should remove the context instance from the registry on destroy', async () => {

package/src/hooks/editable.ts

@@ -1,9 +1,10 @@
-import type { MultiRootEditor } from 'ckeditor5';
+import type { DecoupledEditor, Editor, MultiRootEditor } from 'ckeditor5';
 
 import type { RootAttributesUpdater } from './utils';
 
 import { debounce } from '../shared';
 import { EditorsRegistry } from './editor/editors-registry';
+import { isMultirootEditorInstance } from './editor/utils';
 import { ClassHook } from './hook';
 import { createRootAttributesUpdater, isWireModelConnected } from './utils';
 
@@ -11,11 +12,6 @@ import { createRootAttributesUpdater, isWireModelConnected } from './utils';
  * Editable hook for Livewire. It allows you to create editables for multi-root editors.
  */
 export class EditableComponentHook extends ClassHook<Snapshot> {
-  /**
-   * The promise that resolves when the editable is mounted.
-   */
-  private editorPromise: Promise<MultiRootEditor | null> | null = null;
-
   /**
    * The root attributes updater for the editable's root.
    */
@@ -32,16 +28,15 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
   override mounted() {
     const { editorId, rootName, content } = this.canonical;
 
-    // If the editor is not registered yet, we will wait for it to be registered.
-    this.editorPromise = EditorsRegistry.the.execute(editorId, (editor: MultiRootEditor) => {
+    const unmountEffect = EditorsRegistry.the.mountEffect(editorId, (editor: MultiRootEditor | DecoupledEditor) => {
       /* v8 ignore next if -- @preserve */
       if (this.isBeingDestroyed()) {
-        return null;
+        return;
       }
 
-      const { ui, editing, model } = editor;
+      const root = editor.model.document.getRoot(rootName);
 
-      if (model.document.getRoot(rootName)) {
+      if (root?.isAttached()) {
         // If the newly added root already exists, but the newly added editable has content,
         // we need to update the root data with the editable content.
         if (content !== null) {
@@ -54,7 +49,11 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
           }
         }
       }
-      else {
+
+      /* v8 ignore next else -- @preserve */
+      if (!root && isMultirootEditorInstance(editor)) {
+        const { ui, editing } = editor;
+
         editor.addRoot(rootName, {
           isUndoable: false,
           ...content !== null && {
@@ -70,19 +69,56 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
       }
 
       // Add livewire sync.
-      this.syncTypingContentPush(editor);
-      this.setupPendingReceivedContentHandlers(editor);
+      const cleanupSync = this.syncTypingContentPush(editor);
+      const cleanupPending = this.setupPendingReceivedContentHandlers(editor);
+
       this.applyRootAttributes(editor);
 
-      return editor;
+      return () => {
+        cleanupSync();
+        cleanupPending();
+
+        // Remove root attributes we may have set on this root.
+        this.rootAttributesUpdater?.(null);
+
+        // Unmount root from the editor if editor is still registered.
+        /* v8 ignore next else -- @preserve */
+        if (editor.state !== 'destroyed') {
+          const root = editor.model.document.getRoot(rootName);
+
+          /* v8 ignore next if -- @preserve */
+          if (root && isMultirootEditorInstance(editor)) {
+            // Detaching editables seem to be buggy when something removed DOM element of the editable (e.g. Livewire re-render) before
+            // the editable is unmounted. To prevent errors in such cases, we will try to detach the editable if it exists, but ignore errors.
+            try {
+              /* v8 ignore else -- @preserve */
+              if (editor.ui.view.editables[rootName]) {
+                editor.detachEditable(root);
+              }
+            }
+            catch (err) {
+              // Ignore errors when detaching editable.
+              /* v8 ignore next -- @preserve */
+              console.error('Unable unmount editable from root:', err);
+            }
+
+            if (root.isAttached()) {
+              editor.detachRoot(rootName, false);
+            }
+          }
+        }
+      };
     });
+
+    this.onBeforeDestroy(unmountEffect);
   }
 
   /**
    * Called when the component is updated by Livewire.
    */
   override async afterCommitSynced(): Promise<void> {
-    const editor = (await this.editorPromise)!;
+    const { editorId } = this.canonical;
+    const editor = await EditorsRegistry.the.waitFor(editorId);
 
     this.applyCanonicalContentToEditor(editor);
     this.applyRootAttributes(editor);
@@ -91,35 +127,17 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
   /**
    * Destroys the editable component. Unmounts root from the editor.
    */
-  override async destroyed() {
-    const { rootName } = this.canonical;
-
+  override destroyed() {
     // Let's hide the element during destruction to prevent flickering.
+    // Root detachment and attribute cleanup are handled by the mountEffect cleanup function.
     this.element.style.display = 'none';
-
-    // Let's wait for the mounted promise to resolve before proceeding with destruction.
-    const editor = await this.editorPromise;
-    this.editorPromise = null;
-
-    // Remove root attributes we may have set on this root.
-    this.rootAttributesUpdater?.(null);
-
-    // Unmount root from the editor if editor is still registered.
-    if (editor && editor.state !== 'destroyed') {
-      const root = editor.model.document.getRoot(rootName);
-
-      /* v8 ignore next if -- @preserve */
-      if (root && 'detachEditable' in editor) {
-        editor.detachEditable(root);
-        editor.detachRoot(rootName, false);
-      }
-    }
   }
 
   /**
    * Setups the content sync from the editor to Livewire on user input with debounce.
+   * Returns a cleanup function that unregisters all event listeners.
    */
-  private syncTypingContentPush(editor: MultiRootEditor) {
+  private syncTypingContentPush(editor: MultiRootEditor | DecoupledEditor): () => void {
     const { rootName, saveDebounceMs } = this.canonical;
 
     const input = this.element.querySelector<HTMLInputElement>('input');
@@ -130,6 +148,12 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
         return;
       }
 
+      const root = editor.model.document.getRoot(rootName);
+
+      if (!root?.isAttached()) {
+        return;
+      }
+
       const html = editor.getData({ rootName });
 
       if (input) {
@@ -152,17 +176,18 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
     editor.model.document.on('change:data', onChangeData);
     sync();
 
-    this.onBeforeDestroy(() => {
+    return () => {
       isDestroyed = true;
       editor.model.document.off('change:data', onChangeData);
-    });
+    };
   }
 
   /**
    * Sets up handlers that manage pending incoming content (clears pending
    * content on user edits and applies pending content on blur).
+   * Returns a cleanup function that unregisters all event listeners.
    */
-  private setupPendingReceivedContentHandlers(editor: MultiRootEditor): void {
+  private setupPendingReceivedContentHandlers(editor: Editor): () => void {
     const { ui, model } = editor;
     const { focusTracker } = ui;
     const { rootName } = this.canonical;
@@ -184,16 +209,16 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
     model.document.on('change:data', onDataChange);
     focusTracker.on('change:isFocused', onFocusChange);
 
-    this.onBeforeDestroy(() => {
+    return () => {
       model.document.off('change:data', onDataChange);
       focusTracker.off('change:isFocused', onFocusChange);
-    });
+    };
   }
 
   /**
    * Applies canonical content to the editor while respecting focus/pending state.
    */
-  private applyCanonicalContentToEditor(editor: MultiRootEditor): void {
+  private applyCanonicalContentToEditor(editor: Editor): void {
     if (!isWireModelConnected(this.element)) {
       return;
     }
@@ -212,13 +237,15 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
       return;
     }
 
-    editor.setData({ [rootName]: content ?? '' });
+    editor.setData({
+      [rootName]: content ?? '',
+    });
   }
 
   /**
    * Applies root attributes from the Livewire snapshot to the editor root.
    */
-  private applyRootAttributes(editor: MultiRootEditor): void {
+  private applyRootAttributes(editor: Editor): void {
     const { rootName, rootAttributes } = this.canonical;
 
     this.rootAttributesUpdater ??= createRootAttributesUpdater(editor, rootName);

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

@@ -488,11 +488,11 @@ describe('editor component', () => {
       await vi.advanceTimersByTimeAsync(399);
       expect($wire.set).not.toHaveBeenCalled();
 
-      await vi.advanceTimersByTimeAsync(1);
+      await vi.advanceTimersByTimeAsync(20);
       expect($wire.set).toHaveBeenCalledExactlyOnceWith('content', { main: '<p>Debounce test</p>' });
     });
 
-    it('should immediately send `$wire.set` when editor is not focused', async () => {
+    it('should almost immediately send `$wire.set` when editor is not focused', async () => {
       const { $wire } = livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
         name: 'ckeditor5',
         el: createEditorHtmlElement(),
@@ -507,6 +507,8 @@ describe('editor component', () => {
       vi.mocked($wire.set).mockClear();
       editor.setData('<p>Debounce test</p>');
 
+      await vi.advanceTimersByTimeAsync(20);
+
       expect($wire.set).toHaveBeenCalledExactlyOnceWith('content', { main: '<p>Debounce test</p>' });
     });
 
@@ -531,7 +533,7 @@ describe('editor component', () => {
       await vi.advanceTimersByTimeAsync(399);
       expect(input.value).to.be.equal('<p>Initial content</p>');
 
-      await vi.advanceTimersByTimeAsync(1);
+      await vi.advanceTimersByTimeAsync(20);
       expect(input.value).to.be.equal('<p>Debounce test</p>');
     });
   });
@@ -667,6 +669,11 @@ describe('editor component', () => {
       const originalEditor = await waitForTestEditor('editor-with-watchdog');
       const watchdog = unwrapEditorWatchdog(originalEditor)!;
 
+      (watchdog as any)._fire('error', {
+        error: new Error('Mock'),
+        causesRestart: true,
+      });
+
       (watchdog as any)._restart();
 
       await vi.waitFor(async () => {
@@ -675,6 +682,34 @@ describe('editor component', () => {
         expect(newEditor).not.equals(originalEditor);
       });
     });
+
+    it('should not restart editor if only `causesRestart: false` error occurs', async () => {
+      livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+        name: 'ckeditor5',
+        el: createEditorHtmlElement({
+          id: 'editor-with-watchdog',
+        }),
+        canonical: {
+          ...createEditorSnapshot(),
+          editorId: 'editor-with-watchdog',
+          watchdog: true,
+        },
+      });
+
+      const originalEditor = await waitForTestEditor('editor-with-watchdog');
+      const watchdog = unwrapEditorWatchdog(originalEditor)!;
+
+      (watchdog as any)._fire('error', {
+        error: new Error('Mock'),
+        causesRestart: false,
+      });
+
+      await vi.waitFor(async () => {
+        const newEditor = await waitForTestEditor('editor-with-watchdog');
+
+        expect(newEditor).to.be.equal(originalEditor);
+      });
+    });
   });
 
   describe('livewire <> editor synchronization', () => {
@@ -718,7 +753,7 @@ describe('editor component', () => {
         vi.mocked($wire.set).mockClear();
         editor.setData('<p>New content</p>');
 
-        await vi.advanceTimersByTimeAsync(1);
+        await vi.advanceTimersByTimeAsync(20);
 
         expect($wire.set).toHaveBeenCalledWith('content', { main: '<p>New content</p>' });
         vi.useRealTimers();
@@ -743,7 +778,7 @@ describe('editor component', () => {
         editor.setData('<p>Updated content</p>');
         focusTracker.isFocused = true;
 
-        await vi.advanceTimersByTimeAsync(1);
+        await vi.advanceTimersByTimeAsync(20);
 
         expect($wire.set).toHaveBeenCalledWith('content', { main: '<p>Updated content</p>' });
         expect($wire.set).toHaveBeenCalledWith('focused', true);
@@ -769,7 +804,7 @@ describe('editor component', () => {
         vi.mocked($wire.set).mockClear();
         editor.setData('<p>New content</p>');
 
-        await vi.advanceTimersByTimeAsync(1);
+        await vi.advanceTimersByTimeAsync(20);
 
         expect($wire.set).toHaveBeenCalledWith('content', { main: '<p>New content</p>' });
         vi.useRealTimers();
@@ -830,7 +865,7 @@ describe('editor component', () => {
         vi.mocked($wire.dispatch).mockClear();
         editor.setData('<p>Content change event test</p>');
 
-        await vi.advanceTimersByTimeAsync(1);
+        await vi.advanceTimersByTimeAsync(20);
 
         expect($wire.dispatch).toHaveBeenCalledExactlyOnceWith('editor-content-changed', {
           editorId: DEFAULT_TEST_EDITOR_ID,
@@ -1071,7 +1106,7 @@ describe('editor component', () => {
       const input = getTestEditorInput();
 
       editor.setData('<p>Form integration test</p>');
-      await vi.advanceTimersByTimeAsync(1);
+      await vi.advanceTimersByTimeAsync(20);
 
       expect(input.value).to.be.equal('<p>Form integration test</p>');
     });
@@ -1123,7 +1158,7 @@ describe('editor component', () => {
 
       // Submit the form.
       input.closest('form')!.dispatchEvent(new Event('submit', { bubbles: true }));
-      await vi.advanceTimersByTimeAsync(1);
+      await vi.advanceTimersByTimeAsync(20);
 
       // Value should be synced immediately on form submit.
       expect(input.value).to.be.equal('<p>Form integration test</p>');