ckeditor5-livewire 1.3.0 → 1.3.1

package/src/hooks/editable.ts

@@ -87,8 +87,14 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
       this.$wire.set('content', html);
     };
 
-    editor.model.document.on('change:data', debounce(saveDebounceMs, sync));
+    const debouncedSync = debounce(saveDebounceMs, sync);
+
+    editor.model.document.on('change:data', debouncedSync);
     sync();
+
+    this.onBeforeDestroy(() => {
+      editor.model.document.off('change:data', debouncedSync);
+    });
   }
 
   /**
@@ -97,20 +103,29 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
    */
   private setupPendingReceivedContentHandlers(editor: MultiRootEditor): void {
     const { ui, model } = editor;
+    const { focusTracker } = ui;
     const { rootName } = this.canonical;
 
-    model.document.on('change:data', () => {
+    const onDataChange = () => {
       this.pendingContent = null;
-    });
+    };
 
-    ui.focusTracker.on('change:isFocused', () => {
-      if (!ui.focusTracker.isFocused && this.pendingContent !== null) {
+    const onFocusChange = () => {
+      if (!focusTracker.isFocused && this.pendingContent !== null) {
         editor.setData({
           [rootName]: this.pendingContent,
         });
 
         this.pendingContent = null;
       }
+    };
+
+    model.document.on('change:data', onDataChange);
+    focusTracker.on('change:isFocused', onFocusChange);
+
+    this.onBeforeDestroy(() => {
+      model.document.off('change:data', onDataChange);
+      focusTracker.off('change:isFocused', onFocusChange);
     });
   }
 

package/src/hooks/hook.ts

@@ -10,6 +10,11 @@ export abstract class ClassHook<T extends object = Record<string, unknown>> {
    */
   state: ClassHookState = 'mounting';
 
+  /**
+   * Callbacks to run before the hook is destroyed.
+   */
+  private _beforeDestroyCallbacks: Array<() => void> = [];
+
   constructor(
     /**
      * The Livewire component instance associated with this hook.
@@ -17,6 +22,14 @@ export abstract class ClassHook<T extends object = Record<string, unknown>> {
     protected livewireComponent: LivewireComponent,
   ) {}
 
+  /**
+   * Registers a callback to be called before the hook is destroyed.
+   * Callbacks are called in LIFO order (last registered, first called).
+   */
+  onBeforeDestroy(callback: () => void): void {
+    this._beforeDestroyCallbacks.push(callback);
+  }
+
   /**
    * The canonical snapshot of the Livewire component.
    */
@@ -59,6 +72,18 @@ export abstract class ClassHook<T extends object = Record<string, unknown>> {
    * Called when the component is updated by Livewire.
    */
   afterCommitSynced?(): CanBePromise<void>;
+
+  /**
+   * Runs all registered before-destroy callbacks and clears the list.
+   * Called internally by makeHook before destroyed().
+   */
+  _runBeforeDestroyCallbacks(): void {
+    for (const cb of this._beforeDestroyCallbacks.reverse()) {
+      cb();
+    }
+
+    this._beforeDestroyCallbacks = [];
+  }
 }
 
 /**
@@ -89,6 +114,7 @@ export function registerLivewireComponentHook(name: string, Hook: { new(componen
     cleanup(async () => {
       instance.state = 'destroying';
 
+      instance._runBeforeDestroyCallbacks();
       await instance.destroyed();
 
       instance.state = 'destroyed';