Merge pull request #521 from ckeditor/ck/520

Adjust watchdog demos, add `disableWatchdog` flag and fix memory leaks when unmount editor with attached context watchdog.

Author: Mati365

.changelog/20251125095252_ck_520.md

@@ -0,0 +1,7 @@
+---
+type: Feature
+closes:
+  - https://github.com/ckeditor/ckeditor5-angular/issues/469
+---
+
+Added the `disableWatchdog` input to the `CKEditorComponent` that allows disabling the watchdog functionality even when a watchdog instance is provided via the `watchdog` input.

.changelog/20251125095338_ck_520.md

@@ -0,0 +1,5 @@
+---
+type: Fix
+---
+
+Remove `itemError` event listener from the watchdog when the `CKEditorComponent` is destroyed. This prevents potential memory leaks when the component is removed from the DOM.

src/app/app.component.css

@@ -17,3 +17,13 @@ nav a.active {
 :host ::ng-deep h4 {
 	border-bottom: 1px solid #ddd;
 }
+
+:host ::ng-deep .alert-box {
+	padding: 15px;
+	margin-top: 20px;
+	border: 1px solid transparent;
+	border-radius: 4px;
+	color: #684E00;
+	background-color: #fff3cd;
+	border-color: #ffeeba;
+}

src/app/app.component.html

@@ -6,7 +6,8 @@ <h1>CKEditor 5 integration with Angular</h1>
 		<li><a href="/simple-cdn-usage" routerLinkActive="active">Simple CDN usage</a></li>
 		<li><a href="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
 		<li><a href="/reactive-forms" routerLinkActive="active">Integration with reactive forms (<code>formControlName</code>)</a></li>
-		<li><a href="/watchdog" routerLinkActive="active">Integration with CKEditor Watchdog</a></li>
+		<li><a href="/reuse-watchdog" routerLinkActive="active">Integration with CKEditor Watchdog (via watchdog prop)</a></li>
+		<li><a href="/editor-watchdog" routerLinkActive="active">Integration with CKEditor Watchdog (via editorWatchdogConfig prop)</a></li>
 		<li><a href="/context" routerLinkActive="active">Integration with CKEditor Context</a></li>
 		<li><a href="/init-crash" routerLinkActive="active">Catching error when editor crashes during initialization</a></li>
 	</ul>

src/app/app.module.ts

@@ -20,8 +20,12 @@ const appRoutes: Routes = [
 		loadChildren: () => import( './demo-reactive-form/demo-reactive-form.module' ).then( m => m.DemoReactiveFormModule )
 	},
 	{
-		path: 'watchdog',
-		loadChildren: () => import( './watchdog-demo/watchdog-demo.module' ).then( m => m.WatchdogDemoModule )
+		path: 'reuse-watchdog',
+		loadChildren: () => import( './reuse-watchdog-demo/reuse-watchdog-demo.module' ).then( m => m.ReuseWatchdogDemoModule )
+	},
+	{
+		path: 'editor-watchdog',
+		loadChildren: () => import( './editor-watchdog-demo/editor-watchdog-demo.module' ).then( m => m.EditorWatchdogDemoModule )
 	},
 	{
 		path: 'simple-usage',

src/app/watchdog-demo/watchdog-demo.css …r-watchdog-demo/editor-watchdog-demo.csssrc/app/watchdog-demo/watchdog-demo.css renamed to src/app/editor-watchdog-demo/editor-watchdog-demo.css src/app/watchdog-demo/watchdog-demo.css renamed to src/app/editor-watchdog-demo/editor-watchdog-demo.css

@@ -2,3 +2,10 @@
 	background: #fafafa;
 	color: #888;
 }
+
+.test-toolbar {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	margin-bottom: 15px;
+}

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

@@ -0,0 +1,27 @@
+<h2>Watchdog demo (via editorWatchdogConfig prop)</h2>
+
+<div class="test-toolbar">
+	<button (click)="toggle()">Toggle disabled mode</button>
+	<label><input type="checkbox" [checked]="isWatchdogDisabled" (change)="toggleWatchdog()"> Disable watchdog</label>
+	<button (click)="simulateError()">Simulate Error</button>
+</div>
+
+<ckeditor
+	data="Watchdog demo"
+	[editor]="Editor"
+	[editorWatchdogConfig]="editorWatchdogConfig"
+	(ready)="onReady($event)"
+	[disabled]="isDisabled"
+	[disableWatchdog]="isWatchdogDisabled"
+	(error)="onError($event)"
+>
+</ckeditor>
+
+<div *ngIf="errors.length > 0" style="margin-top: 20px;">
+	<h3>Errors:</h3>
+	<ul>
+		<li *ngFor="let error of errors">
+			<strong>{{ error.timestamp | date:'medium' }}:</strong> {{ error.message }}
+		</li>
+	</ul>
+</div>

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { CKEditorModule } from 'src/ckeditor';
+import { EditorWatchdogDemoComponent } from './editor-watchdog-demo';
+
+@NgModule( {
+	declarations: [
+		EditorWatchdogDemoComponent
+	],
+	imports: [
+		BrowserModule,
+		CKEditorModule,
+		RouterModule.forChild( [
+			{
+				path: '',
+				component: EditorWatchdogDemoComponent
+			}
+		] )
+	]
+} )
+export class EditorWatchdogDemoModule {}

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

@@ -0,0 +1,63 @@
+import { Component, Inject, NgZone } from '@angular/core';
+import type { WatchdogConfig } from 'ckeditor5';
+import { AngularEditor } from 'src/editor/editor';
+
+@Component( {
+	selector: 'watchdog-demo',
+	templateUrl: './editor-watchdog-demo.html',
+	styleUrls: [ './editor-watchdog-demo.css' ]
+} )
+export class EditorWatchdogDemoComponent {
+	public Editor = AngularEditor;
+
+	public ready = false;
+	public isDisabled = false;
+	public isWatchdogDisabled = false;
+	public errors: Array<{ timestamp: Date; message: string }> = [];
+	public editorWatchdogConfig: WatchdogConfig = {
+		crashNumberLimit: 500,
+		minimumNonErrorTimePeriod: 1000,
+		saveInterval: 1200
+	};
+
+	private editor?: AngularEditor;
+	private ngZone: NgZone;
+
+	constructor( @Inject( NgZone ) ngZone: NgZone ) {
+		this.ngZone = ngZone;
+	}
+
+	public onReady( editor: AngularEditor ): void {
+		console.log( 'Editor initialized', editor );
+		this.editor = editor;
+	}
+
+	public toggle(): void {
+		this.isDisabled = !this.isDisabled;
+	}
+
+	public toggleWatchdog(): void {
+		this.isWatchdogDisabled = !this.isWatchdogDisabled;
+	}
+
+	public simulateError(): void {
+		this.ngZone.runOutsideAngular( () => {
+			setTimeout( () => {
+				const err: any = new Error( 'foo' );
+
+				err.context = this.editor;
+				err.is = () => !!this.editor;
+
+				throw err;
+			} );
+		} );
+	}
+
+	public onError( error: any ): void {
+		// Watchdog should return undefined error when it restarts the editor.
+		this.errors.unshift( {
+			timestamp: new Date(),
+			message: error?.toString() ?? 'Watchdog restarted editor.'
+		} );
+	}
+}