diff --git a/src/app/watchdog-demo/watchdog-demo.html b/src/app/watchdog-demo/watchdog-demo.html index c882dc1..755c716 100644 --- a/src/app/watchdog-demo/watchdog-demo.html +++ b/src/app/watchdog-demo/watchdog-demo.html @@ -1,6 +1,7 @@

Watchdog demo

-
- - -
+ + + + diff --git a/src/app/watchdog-demo/watchdog-demo.ts b/src/app/watchdog-demo/watchdog-demo.ts index c33e368..ac57443 100644 --- a/src/app/watchdog-demo/watchdog-demo.ts +++ b/src/app/watchdog-demo/watchdog-demo.ts @@ -16,6 +16,8 @@ export class WatchdogDemoComponent { public watchdog: any; public ready = false; + public isDisabled = false; + public onReady( editor: any ) { console.log( editor ); } @@ -38,4 +40,8 @@ export class WatchdogDemoComponent { this.ready = true; } ); } + + toggle() { + this.isDisabled = !this.isDisabled; + } } diff --git a/src/ckeditor/ckeditor.component.spec.ts b/src/ckeditor/ckeditor.component.spec.ts index 0389da1..1be2b12 100644 --- a/src/ckeditor/ckeditor.component.spec.ts +++ b/src/ckeditor/ckeditor.component.spec.ts @@ -377,6 +377,21 @@ describe( 'CKEditorComponent', () => { fixture2.destroy(); } ); + + it( 'should update the editor once the editor is ready', async () => { + const contextWatchdog = new CKSource.ContextWatchdog( CKSource.Context ); + + await contextWatchdog.create(); + + component.watchdog = contextWatchdog; + component.disabled = true; + + fixture.detectChanges(); + await waitCycle(); + + expect( component.editorInstance ).toBeTruthy(); + expect( component.editorInstance!.isReadOnly ).toEqual( true ); + } ); } ); describe( 'in case of the editor watchdog integration', () => { diff --git a/src/ckeditor/ckeditor.component.ts b/src/ckeditor/ckeditor.component.ts index 80dc19e..918a69c 100644 --- a/src/ckeditor/ckeditor.component.ts +++ b/src/ckeditor/ckeditor.component.ts @@ -90,7 +90,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue return this.editorInstance.isReadOnly; } - return this.initialIsDisabled; + return this.initiallyDisabled; } /** @@ -130,12 +130,17 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue * The instance of the editor created by this component. */ public get editorInstance(): CKEditor5.Editor | null { - if ( this.editorWatchdog ) { - return this.editorWatchdog.editor; - } + let editorWatchdog = this.editorWatchdog; if ( this.watchdog ) { - return this.watchdog.getItem( this.id ); + // Temporarily use the `_watchdogs` internal map as the `getItem()` method throws + // an error when the item is not registered yet. + // See https://github.com/ckeditor/ckeditor5-angular/issues/177. + editorWatchdog = this.watchdog._watchdogs.get( this.id ); + } + + if ( editorWatchdog ) { + return editorWatchdog.editor; } return null; @@ -151,7 +156,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue * If the component is read–only before the editor instance is created, it remembers that state, * so the editor can become read–only once it is ready. */ - private initialIsDisabled = false; + private initiallyDisabled = false; /** * An instance of https://angular.io/api/core/NgZone to allow the interaction with the editor @@ -254,7 +259,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue } // Store the state anyway to use it once the editor is created. - this.initialIsDisabled = isDisabled; + this.initiallyDisabled = isDisabled; } /** @@ -269,8 +274,8 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue const editor = await this.editor!.create( element, config ); - if ( this.initialIsDisabled ) { - editor.isReadOnly = this.initialIsDisabled; + if ( this.initiallyDisabled ) { + editor.isReadOnly = this.initiallyDisabled; } this.ngZone.run( () => { diff --git a/src/ckeditor/ckeditor.ts b/src/ckeditor/ckeditor.ts index 59cd52f..f4ddff1 100644 --- a/src/ckeditor/ckeditor.ts +++ b/src/ckeditor/ckeditor.ts @@ -87,8 +87,9 @@ export namespace CKEditor5 { */ export interface Editor extends BaseEditor, DataApi {} - export interface ContextWatchdog extends Watchdog{ + export interface ContextWatchdog extends Watchdog { context: any; + _watchdogs: Map; add( items: any ): Promise; remove( items: string | string[] ): Promise; getItem( itemId: string ): Editor;