Merge pull request #140 from ckeditor/t/139

Fix: The `<ckeditor>` component won't call the CVA `registerOnChange()` when the change comes from the CVA. This will fix an issue with changing data in Reactive Forms. Closes #139.

src/app/demo-form/demo-form.component.spec.ts

@@ -55,7 +55,7 @@ describe( 'DemoFormComponent', () => {
 
 			fixture.detectChanges();
 
-			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":""}' );
+			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":null}' );
 
 			done();
 		} );

src/app/demo-reactive-form/demo-reactive-form.component.spec.ts

@@ -55,7 +55,7 @@ describe( 'DemoReactiveFormComponent', () => {
 
 			fixture.detectChanges();
 
-			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":""}' );
+			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":null}' );
 
 			done();
 		} );

src/ckeditor/ckeditor.component.spec.ts

@@ -285,6 +285,19 @@ describe( 'CKEditorComponent', () => {
 				expect( spy ).toHaveBeenCalledWith( '<p>foo</p>' );
 			} );
 		} );
+
+		it( 'onChange callback should not be called when the change is coming from outside of the editor', () => {
+			fixture.detectChanges();
+
+			return wait().then( () => {
+				const spy = jasmine.createSpy();
+				component.registerOnChange( spy );
+
+				component.writeValue( 'foo' );
+
+				expect( spy ).not.toHaveBeenCalled();
+			} );
+		} );
 	} );
 } );
 

src/ckeditor/ckeditor.component.ts

@@ -150,6 +150,11 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 */
 	private editorElement?: HTMLElement;
 
+	/**
+	 * A lock flag preventing from calling the `cvaOnChange()` during setting editor data.
+	 */
+	private isEditorSettingData = false;
+
 	public constructor( elementRef: ElementRef, ngZone: NgZone ) {
 		this.ngZone = ngZone;
 		this.elementRef = elementRef;
@@ -180,7 +185,11 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 
 		// If already initialized.
 		if ( this.editorInstance ) {
+			// The lock mechanism prevents from calling `cvaOnChange()` during changing
+			// the editor state. See #139
+			this.isEditorSettingData = true;
 			this.editorInstance.setData( value );
+			this.isEditorSettingData = false;
 		}
 		// If not, wait for it to be ready; store the data.
 		else {
@@ -265,7 +274,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 
 		modelDocument.on( 'change:data', ( evt: CKEditor5.EventInfo<'change:data'> ) => {
 			this.ngZone.run( () => {
-				if ( this.cvaOnChange ) {
+				if ( this.cvaOnChange && !this.isEditorSettingData ) {
 					const data = editor.getData();
 
 					this.cvaOnChange( data );