Merge pull request #90 from ckeditor/t/89

Other: Updated CKEditor 5 dependencies and code to recent changes in CKEditor 5 codebase. The editor data can be provided now by `config.initialData` or `data` properties, but providing it using both properties will cause an error. Closes #89.

package.json

@@ -34,9 +34,9 @@
     "@angular/cli": "^7.0.3",
     "@angular/compiler-cli": "^7.0.1",
     "@angular/language-service": "^7.0.1",
-    "@ckeditor/ckeditor5-build-classic": "^11.1.1",
-    "@ckeditor/ckeditor5-dev-env": "^13.0.0",
-    "@ckeditor/ckeditor5-dev-utils": "^11.0.0",
+    "@ckeditor/ckeditor5-build-classic": "^12.1.0",
+    "@ckeditor/ckeditor5-dev-env": "^14.1.1",
+    "@ckeditor/ckeditor5-dev-utils": "^12.0.1",
     "@types/jasmine": "^3.3.8",
     "@types/jasminewd2": "^2.0.3",
     "codelyzer": "^4.4.2",

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":"<p>&nbsp;</p>"}' );
+			expect( component.formDataPreview ).toEqual( '{"name":null,"surname":null,"description":""}' );
 
 			done();
 		} );

src/ckeditor/ckeditor.component.spec.ts

@@ -78,11 +78,11 @@ describe( 'CKEditorComponent', () => {
 
 			return wait().then( () => {
 				expect( component.data ).toEqual( '' );
-				expect( component.editorInstance!.getData() ).toEqual( '<p>&nbsp;</p>' );
+				expect( component.editorInstance!.getData() ).toEqual( '' );
 			} );
 		} );
 
-		it( 'should be configurable at the start of the component', () => {
+		it( 'should be configurable at the start of the component using the `data` property', () => {
 			component.data = 'foo';
 
 			fixture.detectChanges();
@@ -93,6 +93,26 @@ describe( 'CKEditorComponent', () => {
 			} );
 		} );
 
+		it( 'should be configurable at the start of the component using the `config.initialData` property', () => {
+			component.config = { initialData: 'foo' };
+
+			fixture.detectChanges();
+
+			return wait().then( () => {
+				expect( component.config.initialData ).toEqual( 'foo' );
+				expect( component.editorInstance!.getData() ).toEqual( '<p>foo</p>' );
+			} );
+		} );
+
+		it( 'should not be provided using both `config.initialData` or `data` properties', () => {
+			component.config = { initialData: 'foo' };
+			component.data = 'bar';
+
+			expect( () => {
+				fixture.detectChanges();
+			} ).toThrowError( 'Editor data should be provided either using `config.initialData` or `data` properties.' );
+		} );
+
 		it( 'should be writeable by ControlValueAccessor', () => {
 			component.writeValue( 'foo' );
 			fixture.detectChanges();

src/ckeditor/ckeditor.component.ts

@@ -51,7 +51,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 * See https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editorconfig-EditorConfig.html
 	 * to learn more.
 	 */
-	@Input() config?: CKEditor5.Config;
+	@Input() config: CKEditor5.Config = {};
 
 	/**
 	 * The initial data of the editor. Useful when not using the ngModel.
@@ -216,20 +216,27 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	}
 
 	/**
-	 * Creates the editor instance, sets initial editor data,
-	 * then integrates the editor with the Angular component.
+	 * Creates the editor instance, sets initial editor data, then integrates
+	 * the editor with the Angular component. This method does not use the `editor.setData()`
+	 * because of the issue in the collaboration mode (#6).
 	 */
-	private createEditor(): Promise<any> {
+	private createEditor(): Promise<void> {
 		const element = document.createElement( this.tagName );
 		this.editorElement = element;
 
-		// Do not use the `editor.setData()` here because of the issue in the collaboration mode (#6).
-		// Instead set data to the element on which the editor will be later initialized.
-		element.innerHTML = this.data;
+		if ( this.data && this.config.initialData ) {
+			throw new Error( 'Editor data should be provided either using `config.initialData` or `data` properties.' );
+		}
+
+		// Merge two possible ways of providing data into the `config.initialData` field.
+		const config = {
+			...this.config,
+			initialData: this.config.initialData || this.data || ''
+		};
 
 		this.elementRef.nativeElement.appendChild( element );
 
-		return this.editor!.create( element, this.config )
+		return this.editor!.create( element, config )
 			.then( editor => {
 				this.editorInstance = editor;