Expose API notifying about loaded CKEDITOR namespace

package.json

@@ -26,6 +26,9 @@
     "url": "https://github.com/ckeditor/ckeditor4-angular.git"
   },
   "private": true,
+  "dependencies": {
+    "ckeditor4-integrations-common": "^0.2.0"
+  },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.1102.4",
     "@angular/animations": "^11.2.5",
@@ -56,7 +59,6 @@
     "karma-jasmine": "^4.0.1",
     "karma-jasmine-html-reporter": "^1.5.0",
     "karma-spec-reporter": "0.0.32",
-    "load-script": "^1.0.0",
     "ng-packagr": "^11.2.4",
     "protractor": "~7.0.0",
     "rxjs": "^6.6.6",

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

@@ -3,14 +3,14 @@
  * For licensing, see LICENSE.md.
  */
 
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CKEditorModule } from '../../ckeditor/ckeditor.module';
 import { DemoFormComponent } from './demo-form.component';
-import { By } from '@angular/platform-browser';
+import { CKEditorModule } from '../../ckeditor/ckeditor.module';
 import { CKEditorComponent } from '../../ckeditor/ckeditor.component';
-import { DebugElement } from '@angular/core';
 
 import { whenEvent } from '../../test.tools';
 
@@ -105,7 +105,7 @@ describe( 'DemoFormComponent', () => {
 	}, {
 		newConfig: { removePlugins: 'undo' },
 		msg: 'without undo plugin'
-	}].forEach( ( { newConfig, msg } ) => {
+	} ].forEach( ( { newConfig, msg } ) => {
 		describe( 'should emit onChange event', () => {
 			beforeAll( () => {
 				config = newConfig;

src/app/simple-usage/simple-usage.component.html

@@ -23,6 +23,7 @@ <h3>{{ editor }} Editor:</h3>
 		(drop)="onDrop( $event, editor )"
 		(fileUploadRequest)="onFileUploadRequest( $event, editor )"
 		(fileUploadResponse)="onFileUploadResponse( $event, editor )"
+		(namespaceLoaded)="onNamespaceLoaded( $event, editor )"
 	></ckeditor>
 </div>
 

src/app/simple-usage/simple-usage.component.spec.ts

@@ -4,16 +4,16 @@
  */
 
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { DebugElement } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { By } from '@angular/platform-browser';
 
-import { CKEditorModule } from '../../ckeditor/ckeditor.module';
 import { SimpleUsageComponent } from './simple-usage.component';
-import { By } from '@angular/platform-browser';
+import { getEditorNamespace } from 'ckeditor4-integrations-common';
+import { CKEditorModule } from '../../ckeditor/ckeditor.module';
 import { CKEditorComponent } from '../../ckeditor/ckeditor.component';
-import { DebugElement } from '@angular/core';
-
 import { whenEvent } from '../../test.tools';
-import { FormsModule } from '@angular/forms';
-import { getEditorNamespace } from '../../ckeditor/ckeditor.helpers';
+
 import Spy = jasmine.Spy;
 
 describe( 'SimpleUsageComponent', () => {

src/app/simple-usage/simple-usage.component.ts

@@ -74,4 +74,8 @@ You learn to appreciate each and every single one of the differences while you b
 	onFileUploadResponse( event: CKEditor4.EventInfo, editorName: string ): void {
 		console.log( `File upload responded in ${editorName.toLowerCase()} editor.` );
 	}
+
+	onNamespaceLoaded( event: CKEditor4.EventInfo, editorName: string ): void {
+		console.log( `Namespace loaded by ${editorName.toLowerCase()} editor.` );
+	}
 }

src/ckeditor/ckeditor.component.ts

@@ -19,7 +19,7 @@ import {
 	NG_VALUE_ACCESSOR
 } from '@angular/forms';
 
-import { getEditorNamespace } from './ckeditor.helpers';
+import { getEditorNamespace } from 'ckeditor4-integrations-common';
 
 import { CKEditor4 } from './ckeditor';
 
@@ -46,6 +46,13 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 */
 	@Input() config?: CKEditor4.Config;
 
+	/**
+	 * CKEditor 4 script url address. Script will be loaded only if CKEDITOR namespace is missing.
+	 *
+	 * Defaults to 'https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js'
+	 */
+	@Input() editorUrl = 'https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js';
+
 	/**
 	 * Tag name of the editor component.
 	 *
@@ -115,6 +122,13 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 		return this._readOnly;
 	}
 
+	/**
+	 * Fired when the CKEDITOR https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR.html namespace
+	 * is loaded. It only triggers once, no matter how many CKEditor 4 components are initialised.
+	 * Can be used for convenient changes in the namespace, e.g. for adding external plugins.
+	 */
+	@Output() namespaceLoaded = new EventEmitter<CKEditor4.EventInfo>();
+
 	/**
 	 * Fires when the editor is ready. It corresponds with the `editor#instanceReady`
 	 * https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#event-instanceReady
@@ -211,17 +225,6 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 */
 	@Output() blur = new EventEmitter<CKEditor4.EventInfo>();
 
-	/**
-	 * The instance of the editor created by this component.
-	 */
-	instance: any;
-
-	/**
-	 * 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 _readOnly: boolean = null;
-
 	/**
 	 * A callback executed when the content of the editor changes. Part of the
 	 * `ControlValueAccessor` (https://angular.io/api/forms/ControlValueAccessor) interface.
@@ -238,22 +241,27 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 	 */
 	onTouched?: () => void;
 
-	private _data: string = null;
-
-	private _destroyed: boolean = false;
+	/**
+	 * The instance of the editor created by this component.
+	 */
+	instance: any;
 
 	/**
-	 * CKEditor 4 script url address. Script will be loaded only if CKEDITOR namespace is missing.
-	 *
-	 * Defaults to 'https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js'
+	 * 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.
 	 */
-	@Input() editorUrl = 'https://cdn.ckeditor.com/4.16.0/standard-all/ckeditor.js';
+	private _readOnly: boolean = null;
 
-	constructor( private elementRef: ElementRef, private ngZone: NgZone ) {
-	}
+	private _data: string = null;
+
+	private _destroyed: boolean = false;
+
+	constructor( private elementRef: ElementRef, private ngZone: NgZone ) {}
 
 	ngAfterViewInit(): void {
-		getEditorNamespace( this.editorUrl ).then( () => {
+		getEditorNamespace( this.editorUrl, namespace => {
+			this.namespaceLoaded.emit( namespace );
+		} ).then( () => {
 			// Check if component instance was destroyed before `ngAfterViewInit` call (#110).
 			// Here, `this.instance` is still not initialized and so additional flag is needed.
 			if ( this._destroyed ) {
@@ -372,7 +380,7 @@ export class CKEditorComponent implements AfterViewInit, OnDestroy, ControlValue
 		} );
 
 		editor.on( 'fileUploadResponse', evt => {
-			this.ngZone.run(() => {
+			this.ngZone.run( () => {
 				this.fileUploadResponse.emit(evt);
 			} );
 		} );