Merge pull request #390 from ckeditor/watchdog-demo-update

Other: Added catching and emitting errors that happen during editor initialization. Closes #392

src/app/app.component.html

@@ -7,6 +7,7 @@ <h1>CKEditor 5 integration with Angular</h1>
  <li><a routerLink="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
  <li><a routerLink="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
  <li><a routerLink="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
+ <li><a routerLink="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
  </ul>
 </nav>
 

src/app/app.module.ts

@@ -11,14 +11,16 @@ import { DemoFormComponent } from './demo-form/demo-form.component';
 import { DemoReactiveFormComponent } from './demo-reactive-form/demo-reactive-form.component';
 import { ContextDemoComponent } from './context-demo/context-demo';
 import { WatchdogDemoComponent } from './watchdog-demo/watchdog-demo';
+import { InitializationCrashComponent } from './initialization-crash/initialization-crash.component';
 
 const appRoutes: Routes = [
  { path: '', redirectTo: '/simple-usage', pathMatch: 'full' },
  { path: 'context', component: ContextDemoComponent },
  { path: 'forms', component: DemoFormComponent },
  { path: 'reactive-forms', component: DemoReactiveFormComponent },
  { path: 'watchdog', component: WatchdogDemoComponent },
- { path: 'simple-usage', component: SimpleUsageComponent }
+ { path: 'simple-usage', component: SimpleUsageComponent },
+ { path: 'init-crash', component: InitializationCrashComponent }
 ];
 
 @NgModule( {
@@ -35,7 +37,8 @@ const appRoutes: Routes = [
  DemoFormComponent,
  DemoReactiveFormComponent,
  SimpleUsageComponent,
- WatchdogDemoComponent
+ WatchdogDemoComponent,
+ InitializationCrashComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]

src/app/initialization-crash/initialization-crash.component.html

@@ -0,0 +1,30 @@
+<h2>Initialization crash demo</h2>
+<h3>Without watchdog</h3>
+<ng-container *ngIf="errorOccurred; then errorMessage; else editor">
+
+</ng-container>
+
+<ng-template #editor>
+ <ckeditor data="Crash demo without watchdog" [config]="config" [editor]="Editor"
+ (error)="onError($event)">
+ </ckeditor>
+</ng-template>
+
+<ng-template #errorMessage>
+ <p>An error has occurred, please contact us at: [email protected] to resolve the situation.</p>
+</ng-template>
+
+<h3>With watchdog</h3>
+<ng-container *ngIf="errorOccurredWatchdog; then errorMessageWatchdog; else editorWatchdog">
+
+</ng-container>
+
+<ng-template #editorWatchdog>
+ <ckeditor data="Crash demo with watchdog" [config]="config" [editor]="EditorWatchdog"
+ [watchdog]="watchdog" (error)="onErrorWatchdog($event)">
+ </ckeditor>
+</ng-template>
+
+<ng-template #errorMessageWatchdog>
+ <p>An error has occurred, please contact us at: [email protected] to resolve the situation.</p>
+</ng-template>

src/app/initialization-crash/initialization-crash.component.ts

@@ -0,0 +1,64 @@
+import { Component, ViewChild } from '@angular/core';
+import { CKEditorComponent } from 'src/ckeditor';
+import AngularEditor from 'ckeditor/build/ckeditor';
+import type { ContextWatchdog } from '@ckeditor/ckeditor5-watchdog';
+
+@Component( {
+ selector: 'app-initialization-crash',
+ templateUrl: './initialization-crash.component.html',
+ styleUrls: [ './initialization-crash.component.css' ]
+} )
+export class InitializationCrashComponent {
+ public Editor = AngularEditor;
+ public EditorWatchdog = AngularEditor;
+
+ @ViewChild( CKEditorComponent ) public ckeditor?: CKEditorComponent;
+
+ public config: any;
+ public ready = false;
+
+ public errorOccurred = false;
+ public errorOccurredWatchdog = false;
+
+ public watchdog?: ContextWatchdog;
+
+ public ngOnInit(): void {
+ const contextConfig: any = {
+ foo: 'bar'
+ };
+
+ this.config = {
+ extraPlugins: [
+ function( editor: any ) {
+ editor.data.on( 'init', () => {
+ // Simulate an error.
+ // Create a non-existing position, then try to get its parent.
+ const position = editor.model.createPositionFromPath( editor.model.document.getRoot(), [ 1, 2, 3 ] );
+
+ return position.parent;
+ } );
+ }
+ ],
+ collaboration: {
+ channelId: 'foobar-baz'
+ }
+ };
+
+ this.watchdog = new AngularEditor.ContextWatchdog( AngularEditor.Context );
+
+ this.watchdog.create( contextConfig )
+ .then( () => {
+ this.ready = true;
+ } );
+ }
+
+ public onError( error: any ): void {
+ console.error( 'Editor without watchdog threw an error which was caught', error );
+ this.errorOccurred = true;
+ }
+
+ public onErrorWatchdog( error: any ): void {
+ console.error( 'Editor with watchdog threw an error which was caught', error );
+ this.errorOccurredWatchdog = true;
+ }
+}

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

@@ -1,7 +1,18 @@
 <h2>Watchdog demo</h2>
 
-<button (click)="toggle()">Toggle disabled mode</button>
+<ng-container *ngIf="errorOccurred; then errorMessage; else editor">
 
-<ckeditor data="Watchdog demo" [config]="config" [editor]="Editor" (ready)="onReady($event)" [watchdog]="watchdog"
- [disabled]="isDisabled">
-</ckeditor>
+</ng-container>
+
+<ng-template #editor>
+ <p>Type '1' or '2' to crash the editor.</p>
+ <button (click)="toggle()">Toggle disabled mode</button>
+
+ <ckeditor data="Watchdog demo" [config]="config" [editor]="Editor" (ready)="onReady($event)" [watchdog]="watchdog"
+ [disabled]="isDisabled" (error)="onError()">
+ </ckeditor>
+</ng-template>
+
+<ng-template #errorMessage>
+ <p>An error has occurred, please contast us at: [email protected] to resolve the situation.</p>
+</ng-template>

src/app/watchdog-demo/watchdog-demo.ts

@@ -1,5 +1,4 @@
-import { Component, ElementRef, ViewChild } from '@angular/core';
-import { CKEditorComponent } from '../../ckeditor/ckeditor.component';
+import { Component } from '@angular/core';
 import AngularEditor from '../../../ckeditor/build/ckeditor';
 import type { ContextWatchdog } from '@ckeditor/ckeditor5-watchdog';
 
@@ -11,16 +10,31 @@ import type { ContextWatchdog } from '@ckeditor/ckeditor5-watchdog';
 export class WatchdogDemoComponent {
  public Editor = AngularEditor;
 
- @ViewChild( CKEditorComponent ) public ckeditor?: ElementRef<CKEditorComponent>;
-
  public config: any;
  public watchdog?: ContextWatchdog;
  public ready = false;
 
  public isDisabled = false;
+ public errorOccurred = false;
 
  public onReady( editor: AngularEditor ): void {
  console.log( editor );
+
+ const inputCommand = editor.commands.get( 'input' )!;
+
+ inputCommand.on( 'execute', ( evt, data ) => {
+ const commandArgs = data[ 0 ];
+
+ if ( commandArgs.text === '1' ) {
+ // Simulate an error.
+ throw new Error( 'a-custom-editor-error' );
+ }
+
+ if ( commandArgs.text === '2' ) {
+ // Simulate an error.
+ throw 'foobar';
+ }
+ } );
  }
 
  public ngOnInit(): void {
@@ -45,4 +59,8 @@ export class WatchdogDemoComponent {
  public toggle(): void {
  this.isDisabled = !this.isDisabled;
  }
+
+ public onError(): void {
+ this.errorOccurred = true;
+ }
 }

src/ckeditor/ckeditor.component.spec.ts

@@ -491,6 +491,66 @@ describe( 'CKEditorComponent', () => {
  } );
  } );
  } );
+
+ describe( 'initialization errors are catched', () => {
+ let config: any;
+
+ beforeEach( () => {
+ config = {
+ extraPlugins: [
+ function( editor: any ) {
+ editor.data.on( 'init', () => {
+ // Simulate an error.
+ // Create a non-existing position, then try to get its parent.
+ const position = editor.model.createPositionFromPath( editor.model.document.getRoot(), [ 1, 2, 3 ] );
+
+ return position.parent;
+ } );
+ }
+ ],
+ collaboration: {
+ channelId: 'foobar-baz'
+ }
+ };
+ } );
+
+ it( 'when internal watchdog is created', async () => {
+ fixture = TestBed.createComponent( CKEditorComponent );
+ const component = fixture.componentInstance;
+ const errorSpy = jasmine.createSpy( 'errorSpy' );
+ component.error.subscribe( errorSpy );
+ component.editor = AngularEditor;
+ component.config = config;
+
+ fixture.detectChanges();
+ await waitCycle();
+
+ expect( errorSpy ).toHaveBeenCalledTimes( 1 );
+
+ fixture.destroy();
+ } );
+
+ it( 'when external watchdog is provided', async () => {
+ fixture = TestBed.createComponent( CKEditorComponent );
+ const component = fixture.componentInstance;
+ const errorSpy = jasmine.createSpy( 'errorSpy' );
+ component.error.subscribe( errorSpy );
+ const contextWatchdog = new AngularEditor.ContextWatchdog( AngularEditor.Context );
+
+ await contextWatchdog.create();
+
+ component.watchdog = contextWatchdog;
+ component.editor = AngularEditor;
+ component.config = config;
+
+ fixture.detectChanges();
+ await waitCycle();
+
+ expect( errorSpy ).toHaveBeenCalledTimes( 1 );
+
+ fixture.destroy();
+ } );
+ } );
 } );
 
 describe( 'change detection', () => {

src/ckeditor/ckeditor.component.ts

@@ -164,7 +164,7 @@ export class CKEditorComponent<TEditor extends Editor = Editor> implements After
  /**
  * Fires when the editor component crashes.
  */
- @Output() public error = new EventEmitter<void>();
+ @Output() public error = new EventEmitter<unknown>();
 
  /**
  * The instance of the editor created by this component.
@@ -367,16 +367,15 @@ export class CKEditorComponent<TEditor extends Editor = Editor> implements After
  this.elementRef.nativeElement.removeChild( this.editorElement! );
  };
 
- const emitError = () => {
+ const emitError = ( e?: unknown ) => {
  // Do not run change detection by re-entering the Angular zone if the `error`
  // emitter doesn't have any subscribers.
  // Subscribers are pushed onto the list whenever `error` is listened inside the template:
  // `<ckeditor (error)="onError(...)"></ckeditor>`.
  if ( hasObservers( this.error ) ) {
- this.ngZone.run( () => this.error.emit() );
+ this.ngZone.run( () => this.error.emit( e ) );
  }
  };
-
  const element = document.createElement( this.tagName );
  const config = this.getConfig();
 
@@ -392,6 +391,8 @@ export class CKEditorComponent<TEditor extends Editor = Editor> implements After
  destructor,
  sourceElementOrData: element,
  config
+ } ).catch( e => {
+ emitError( e );
  } );
 
  this.watchdog.on( 'itemError', ( _, { itemId } ) => {
@@ -410,11 +411,12 @@ export class CKEditorComponent<TEditor extends Editor = Editor> implements After
  editorWatchdog.on( 'error', emitError );
 
  this.editorWatchdog = editorWatchdog;
-
  this.ngZone.runOutsideAngular( () => {
  // Note: must be called outside of the Angular zone too because `create` is calling
  // `_startErrorHandling` within a microtask which sets up `error` listener on the window.
- editorWatchdog.create( element, config );
+ editorWatchdog.create( element, config ).catch( e => {
+ emitError( e );
+ } );
  } );
  }
  }