Merge pull request #179 from ckeditor/i/177

Fix: Changing `disabled` property on `<ckeditor5>` component while using the watchdog property won't throw an error anymore. Closes #177.

src/app/watchdog-demo/watchdog-demo.html

@@ -1,6 +1,7 @@
 <h2>Watchdog demo</h2>
 
-<div *ngIf="ready">
-	<ckeditor data="Watchdog demo" [config]="config" [editor]="Editor" (ready)="onReady($event)" [watchdog]="watchdog">
-	</ckeditor>
-</div>
+<button (click)="toggle()">Toggle disabled mode</button>
+
+<ckeditor data="Watchdog demo" [config]="config" [editor]="Editor" (ready)="onReady($event)" [watchdog]="watchdog"
+	[disabled]="isDisabled">
+</ckeditor>

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;
+	}
 }

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', () => {

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( () => {

src/ckeditor/ckeditor.ts

@@ -87,8 +87,9 @@ export namespace CKEditor5 {
 	 */
 	export interface Editor extends BaseEditor, DataApi {}
 
-	export interface ContextWatchdog extends Watchdog<any>{
+	export interface ContextWatchdog extends Watchdog<any> {
 		context: any;
+		_watchdogs: Map<string, EditorWatchdog>;
 		add( items: any ): Promise<void>;
 		remove( items: string | string[] ): Promise<void>;
 		getItem( itemId: string ): Editor;