ckeditor5-livewire 1.3.1 → 1.4.1

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

@@ -695,6 +695,23 @@ describe('editor component', () => {
     });
 
     describe('dispatch / receive events', () => {
+      it('should dispatch `editor-ready` event when editor becomes ready', async () => {
+        const { $wire } = livewireStub.$internal.appendComponentToDOM<EditorSnapshot>({
+          name: 'ckeditor5',
+          el: createEditorHtmlElement(),
+          canonical: createEditorSnapshot(),
+        });
+
+        // clear initial calls that may come from mounting logic
+        $wire.dispatch.mockClear();
+
+        await waitForTestEditor();
+
+        expect($wire.dispatch).toHaveBeenCalledExactlyOnceWith('editor-ready', {
+          editorId: DEFAULT_TEST_EDITOR_ID,
+        });
+      });
+
       it('should dispatch `editor-content-changed` event on content change', async () => {
         vi.useFakeTimers();
 

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

@@ -32,6 +32,7 @@ export async function createLivewireSyncPlugin(
       this.setupFocusableEventPush();
       this.setupAfterCommitHandler();
       this.setupSetEditorContentHandler();
+      this.setupReadyDispatch();
     }
 
     /**
@@ -81,6 +82,25 @@ export async function createLivewireSyncPlugin(
       });
     }
 
+    /**
+     * Dispatches a Livewire event when the editor becomes ready.
+     *
+     * This allows the Livewire component or parent to react as soon as the
+     * instance is fully initialized. The payload contains the editorId so the
+     * listener can ignore events coming from other editors on the page.
+     */
+    private setupReadyDispatch() {
+      const { $wire } = component;
+
+      // `ready` is fired by CKEditor5 once initialization finishes. We only
+      // need to fire the Livewire event once, hence `once`.
+      this.editor.once('ready', () => {
+        $wire.dispatch('editor-ready', {
+          editorId: component.canonical.editorId,
+        });
+      });
+    }
+
     /**
      * Setups the content sync from Livewire to the editor when Livewire emits an event.
      */