ckeditor5-livewire 1.2.10 → 1.3.0

package/src/hooks/editable.test.ts

@@ -15,6 +15,7 @@ import {
 
 import type { Snapshot as EditorSnapshot } from './editor';
 
+import { timeout } from '../shared';
 import { EditableComponentHook } from './editable';
 import { EditorComponentHook } from './editor';
 import { registerLivewireComponentHook } from './hook';
@@ -267,7 +268,9 @@ describe('editable component', () => {
       it('should update editable content after commit if content changed in Livewire', async () => {
         const { id } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
-          el: createEditableHtmlElement(),
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
           canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
         });
 
@@ -286,7 +289,7 @@ describe('editable component', () => {
         });
       });
 
-      it('should not update editable content after commit if content has not changed', async () => {
+      it('should not update editable content after commit if `wire.model` is not set', async () => {
         const { id } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
           el: createEditableHtmlElement(),
@@ -299,6 +302,29 @@ describe('editable component', () => {
 
         const editor = await waitForTestEditor();
 
+        await livewireStub.$internal.dispatchComponentCommit(id, {
+          content: '<p>Updated foo content from Livewire</p>',
+        });
+
+        await timeout(50);
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Initial foo content</p>');
+      });
+
+      it('should not update editable content after commit if content has not changed', async () => {
+        const { id } = livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
+          canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
+        });
+
+        appendMultirootEditor({
+          foo: '<p>Initial foo content</p>',
+        });
+
+        const editor = await waitForTestEditor();
+
         await livewireStub.$internal.dispatchComponentCommit(id, {
           content: '<p>Initial foo content</p>',
         });
@@ -309,7 +335,9 @@ describe('editable component', () => {
       it('should handle null content in commit', async () => {
         const { id } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
-          el: createEditableHtmlElement(),
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
           canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
         });
 
@@ -328,13 +356,106 @@ describe('editable component', () => {
         });
       });
 
+      it('should defer editable content update if editable is focused during commit and apply it on blur', async () => {
+        const { id } = livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
+          canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
+        });
+
+        appendMultirootEditor({
+          foo: '<p>Initial foo content</p>',
+        });
+
+        const editor = await waitForTestEditor();
+        const { ui: { focusTracker } } = editor;
+
+        focusTracker.isFocused = true;
+
+        await livewireStub.$internal.dispatchComponentCommit(id, {
+          content: '<p>Updated foo content from Livewire</p>',
+        });
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Initial foo content</p>');
+
+        focusTracker.isFocused = false;
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Updated foo content from Livewire</p>');
+      });
+
+      it('should abort editable content update if editable is focused during commit and content changes before blur', async () => {
+        const { id } = livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
+          canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
+        });
+
+        appendMultirootEditor({
+          foo: '<p>Initial foo content</p>',
+        });
+
+        const editor = await waitForTestEditor();
+        const { ui: { focusTracker } } = editor;
+
+        focusTracker.isFocused = true;
+
+        await livewireStub.$internal.dispatchComponentCommit(id, {
+          content: '<p>Updated foo content from Livewire</p>',
+        });
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Initial foo content</p>');
+
+        editor.setData({
+          foo: '<p>Content changed by user</p>',
+        });
+
+        focusTracker.isFocused = false;
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Content changed by user</p>');
+      });
+
+      it('should defer editable null content update if editable is focused during commit and apply it on blur', async () => {
+        const { id } = livewireStub.$internal.appendComponentToDOM({
+          name: 'ckeditor5-editable',
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
+          canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
+        });
+
+        appendMultirootEditor({
+          foo: '<p>Initial foo content</p>',
+        });
+
+        const editor = await waitForTestEditor();
+        const { ui: { focusTracker } } = editor;
+
+        focusTracker.isFocused = true;
+
+        await livewireStub.$internal.dispatchComponentCommit(id, {
+          content: null,
+        });
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('<p>Initial foo content</p>');
+
+        focusTracker.isFocused = false;
+
+        expect(editor.getData({ rootName: 'foo' })).toBe('');
+      });
+
       it('should not crash if editor is not found during commit', async () => {
         appendMultirootEditor();
         await waitForTestEditor();
 
         const { id } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
-          el: createEditableHtmlElement(),
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
           canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
         });
 
@@ -352,13 +473,17 @@ describe('editable component', () => {
       it('should sync multiple editables independently after commit', async () => {
         const { id: fooId } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
-          el: createEditableHtmlElement(),
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
           canonical: createEditableSnapshot('foo', '<p>Initial foo content</p>'),
         });
 
         const { id: barId } = livewireStub.$internal.appendComponentToDOM({
           name: 'ckeditor5-editable',
-          el: createEditableHtmlElement(),
+          el: createEditableHtmlElement({
+            wireModel: 'content',
+          }),
           canonical: createEditableSnapshot('bar', '<p>Initial bar content</p>'),
         });
 

package/src/hooks/editable.ts

@@ -2,6 +2,7 @@ import type { MultiRootEditor } from 'ckeditor5';
 
 import { debounce } from '../shared';
 import { EditorsRegistry } from './editor/editors-registry';
+import { isWireModelConnected } from './editor/utils';
 import { ClassHook } from './hook';
 
 /**
@@ -13,12 +14,16 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
    */
   private editorPromise: Promise<MultiRootEditor | null> | null = null;
 
+  /**
+   * Pending content to apply when the editor loses focus.
+   */
+  private pendingContent: string | null = null;
+
   /**
    * Mounts the editable component.
    */
   override mounted() {
-    const { editorId, rootName, content, saveDebounceMs } = this.canonical;
-    const input = this.element.querySelector<HTMLInputElement>('input');
+    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) => {
@@ -41,54 +46,106 @@ export class EditableComponentHook extends ClassHook<Snapshot> {
             });
           }
         }
-
-        return editor;
       }
+      else {
+        editor.addRoot(rootName, {
+          isUndoable: false,
+          ...content !== null && {
+            data: content,
+          },
+        });
+
+        const contentElement = this.element.querySelector('[data-cke-editable-content]') as HTMLElement | null;
+        const editable = ui.view.createEditable(rootName, contentElement!);
+
+        ui.addEditable(editable);
+        editing.view.forceRender();
+      }
+
+      // Add livewire sync.
+      this.syncTypingContentPush(editor);
+      this.setupPendingReceivedContentHandlers(editor);
 
-      editor.addRoot(rootName, {
-        isUndoable: false,
-        ...content !== null && {
-          data: content,
-        },
-      });
+      return editor;
+    });
+  }
 
-      const contentElement = this.element.querySelector('[data-cke-editable-content]') as HTMLElement | null;
-      const editable = ui.view.createEditable(rootName, contentElement!);
+  /**
+   * Setups the content sync from the editor to Livewire on user input with debounce.
+   */
+  private syncTypingContentPush(editor: MultiRootEditor) {
+    const { rootName, saveDebounceMs } = this.canonical;
+    const input = this.element.querySelector<HTMLInputElement>('input');
 
-      ui.addEditable(editable);
-      editing.view.forceRender();
+    const sync = () => {
+      const html = editor.getData({ rootName });
 
-      // Sync data with socket and input element.
-      const sync = () => {
-        const html = editor.getData({ rootName });
+      if (input) {
+        input.value = html;
+      }
 
-        if (input) {
-          input.value = html;
-        }
+      this.$wire.set('content', html);
+    };
 
-        this.$wire.set('content', html);
-      };
+    editor.model.document.on('change:data', debounce(saveDebounceMs, sync));
+    sync();
+  }
 
-      editor.model.document.on('change:data', debounce(saveDebounceMs, sync));
-      sync();
+  /**
+   * Sets up handlers that manage pending incoming content (clears pending
+   * content on user edits and applies pending content on blur).
+   */
+  private setupPendingReceivedContentHandlers(editor: MultiRootEditor): void {
+    const { ui, model } = editor;
+    const { rootName } = this.canonical;
 
-      return editor;
+    model.document.on('change:data', () => {
+      this.pendingContent = null;
+    });
+
+    ui.focusTracker.on('change:isFocused', () => {
+      if (!ui.focusTracker.isFocused && this.pendingContent !== null) {
+        editor.setData({
+          [rootName]: this.pendingContent,
+        });
+
+        this.pendingContent = null;
+      }
     });
   }
 
+  /**
+   * Applies canonical content to the editor while respecting focus/pending state.
+   */
+  private applyCanonicalContentToEditor(editor: MultiRootEditor): void {
+    if (!isWireModelConnected(this.element)) {
+      return;
+    }
+
+    const { content, rootName } = this.canonical;
+    const { ui } = editor;
+
+    const currentValue = editor.getData({ rootName });
+
+    if (currentValue === (content ?? '')) {
+      return;
+    }
+
+    if (ui.focusTracker.isFocused) {
+      this.pendingContent = content ?? '';
+      return;
+    }
+
+    editor.setData({ [rootName]: content ?? '' });
+  }
+
   /**
    * Called when the component is updated by Livewire.
    */
   override async afterCommitSynced(): Promise<void> {
     const editor = (await this.editorPromise)!;
-    const { content, rootName } = this.canonical;
-    const value = editor.getData({ rootName });
 
-    if (value !== content) {
-      editor.setData({
-        [rootName]: content ?? '',
-      });
-    }
+    this.applyCanonicalContentToEditor(editor);
   }
 
   /**

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

@@ -30,26 +30,29 @@ export async function createLivewireSyncPlugin(
     public init(): void {
       this.setupTypingContentPush();
       this.setupFocusableEventPush();
-      this.setupContentServerSync();
+      this.setupAfterCommitHandler();
+      this.setupSetEditorContentHandler();
     }
 
     /**
-     * Setups the content sync from Livewire to the editor.
+     * Setups handler that updates the editor content after Livewire changes attributes
+     * on the component and commits the changes, but only if the editor is not focused to prevent
+     * disrupting the user while editing.
      */
-    private setupContentServerSync() {
+    private setupAfterCommitHandler() {
       const { editor } = this;
       const { model, ui: { focusTracker } } = editor;
 
       let pendingContent: Record<string, string> | null = null;
 
       editor.on('afterCommitSynced', () => {
-        const { content } = component.canonical;
-        const values = this.getEditorRootsValues();
-
         if (!isWireModelConnected(component.element)) {
           return;
         }
 
+        const { content } = component.canonical;
+        const values = this.getEditorRootsValues();
+
         // If editor is focused, save the content to apply later when it blurs.
         if (focusTracker.isFocused) {
           if (!shallowEqual(content, values)) {
@@ -64,18 +67,6 @@ export async function createLivewireSyncPlugin(
         }
       });
 
-      Livewire.on('set-editor-content', ({ editorId, content }: SetContentPayload) => {
-        if (editorId !== component.canonical.editorId) {
-          return;
-        }
-
-        const currentValues = this.getEditorRootsValues();
-
-        if (!shallowEqual(currentValues, content)) {
-          editor.setData(content);
-        }
-      });
-
       // Track user changes while focused.
       model.document.on('change:data', () => {
         pendingContent = null;
@@ -90,6 +81,23 @@ export async function createLivewireSyncPlugin(
       });
     }
 
+    /**
+     * Setups the content sync from Livewire to the editor when Livewire emits an event.
+     */
+    private setupSetEditorContentHandler() {
+      Livewire.on('set-editor-content', ({ editorId, content }: SetContentPayload) => {
+        if (editorId !== component.canonical.editorId) {
+          return;
+        }
+
+        const currentValues = this.getEditorRootsValues();
+
+        if (!shallowEqual(currentValues, content)) {
+          this.editor.setData(content);
+        }
+      });
+    }
+
     /**
      * Setups the content push event for the editor.
      */