Cloud integration

package.json

@@ -19,24 +19,25 @@
     "release:publish-packages": "node scripts/publishpackages.js"
   },
   "dependencies": {
-    "@angular/animations": "^13.3.11",
-    "@angular/common": "^13.3.11",
-    "@angular/compiler": "^13.3.11",
-    "@angular/core": "^13.3.11",
-    "@angular/forms": "^13.3.11",
-    "@angular/platform-browser": "^13.3.11",
-    "@angular/platform-browser-dynamic": "^13.3.11",
-    "@angular/router": "^13.3.11",
+    "@angular/animations": "^16",
+    "@angular/common": "^16",
+    "@angular/compiler": "^16",
+    "@angular/core": "^16",
+    "@angular/forms": "^16",
+    "@angular/platform-browser": "^16",
+    "@angular/platform-browser-dynamic": "^16",
+    "@angular/router": "^16",
     "core-js": "^3.21.1",
     "rxjs": "^6.5.5",
     "tslib": "^2.0.3",
-    "zone.js": "~0.11.7"
+    "zone.js": "~0.11.7",
+    "@ckeditor/ckeditor5-integrations-common": "^1.0.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.3.9",
-    "@angular/cli": "^13.3.9",
-    "@angular/compiler-cli": "^13.3.11",
-    "@angular/language-service": "^13.3.11",
+    "@angular-devkit/build-angular": "^16",
+    "@angular/cli": "^16",
+    "@angular/compiler-cli": "^16",
+    "@angular/language-service": "^16",
     "@ckeditor/ckeditor5-dev-bump-year": "^40.2.0",
     "@ckeditor/ckeditor5-dev-ci": "^40.2.0",
     "@ckeditor/ckeditor5-dev-release-tools": "^40.2.0",
@@ -45,7 +46,8 @@
     "@types/node": "^14.11.8",
     "@typescript-eslint/eslint-plugin": "~5.43.0",
     "@typescript-eslint/parser": "^5.31.0",
-    "ckeditor5": "alpha",
+    "ckeditor5": "^42.0.2",
+    "ckeditor5-premium-features": "^42.0.2",
     "coveralls": "^3.1.1",
     "css-loader": "^5.2.7",
     "cypress": "^12.17.4",
@@ -63,15 +65,15 @@
     "karma-jasmine-html-reporter": "^1.7.0",
     "lint-staged": "^10.4.0",
     "minimist": "^1.2.8",
-    "ng-packagr": "^13.3.1",
+    "ng-packagr": "^16",
     "postcss-loader": "^4.3.0",
     "raw-loader": "^4.0.1",
     "semver": "^7.0.0",
     "start-server-and-test": "^2.0.3",
     "style-loader": "^2.0.0",
     "ts-loader": "^9.4.3",
     "ts-node": "^9.0.0",
-    "typescript": "~4.6.4",
+    "typescript": "~5.1.3",
     "upath": "^2.0.1",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.10.0"

src/app/app.component.html

@@ -2,12 +2,13 @@ <h1>CKEditor 5 integration with Angular</h1>
 
 <nav>
 	<ul>
-		<li><a routerLink="/simple-usage" routerLinkActive="active">Simple usage</a></li>
-		<li><a routerLink="/forms" routerLinkActive="active">Integration with forms (<code>ngModel</code>)</a></li>
-		<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>
+		<li><a href="/simple-usage" routerLinkActive="active">Simple usage</a></li>
+		<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="/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>
 </nav>
 

src/app/app.module.ts

@@ -1,44 +1,52 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import type { Routes } from '@angular/router';
-import { RouterModule } from '@angular/router';
-import { AppComponent } from './app.component';
+import { RouterModule, type Routes } from '@angular/router';
 
+import { AppComponent } from './app.component';
 import { CKEditorModule } from '../ckeditor/ckeditor.module';
-import { SimpleUsageComponent } from './simple-usage/simple-usage.component';
-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: 'init-crash', component: InitializationCrashComponent }
+	{
+		path: 'context',
+		loadChildren: () => import( './context-demo/context-demo.module' ).then( m => m.ContextDemoModule )
+	},
+	{
+		path: 'forms',
+		loadChildren: () => import( './demo-form/demo-form.module' ).then( m => m.DemoFormModule )
+	},
+	{
+		path: 'reactive-forms',
+		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: 'simple-usage',
+		loadChildren: () => import( './simple-usage/simple-usage.module' ).then( m => m.SimpleUsageModule )
+	},
+	{
+		path: 'simple-cdn-usage',
+		loadChildren: () => import( './simple-cdn-usage/simple-cdn-usage.module' ).then( m => m.SimpleCdnUsageModule )
+	},
+	{
+		path: 'init-crash',
+		loadChildren: () => import( './initialization-crash/initialization-crash.module' ).then( m => m.InitializationCrashModule )
+	}
 ];
 
 @NgModule( {
 	imports: [
 		BrowserModule,
-		FormsModule,
-		ReactiveFormsModule,
 		CKEditorModule,
-		RouterModule.forRoot( appRoutes )
+		RouterModule.forRoot( appRoutes, {
+			onSameUrlNavigation: 'reload'
+		} )
 	],
 	declarations: [
-		AppComponent,
-		ContextDemoComponent,
-		DemoFormComponent,
-		DemoReactiveFormComponent,
-		SimpleUsageComponent,
-		WatchdogDemoComponent,
-		InitializationCrashComponent
+		AppComponent
 	],
 	providers: [],
 	bootstrap: [ AppComponent ]

src/app/context-demo/context-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 { ContextDemoComponent } from './context-demo';
+
+@NgModule( {
+	declarations: [
+		ContextDemoComponent
+	],
+	imports: [
+		BrowserModule,
+		CKEditorModule,
+		RouterModule.forChild( [
+			{
+				path: '',
+				component: ContextDemoComponent
+			}
+		] )
+	]
+} )
+export class ContextDemoModule {}

src/app/demo-form/demo-form.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { CKEditorModule } from 'src/ckeditor';
+import { DemoFormComponent } from './demo-form.component';
+
+@NgModule( {
+	declarations: [
+		DemoFormComponent
+	],
+	imports: [
+		FormsModule,
+		ReactiveFormsModule,
+		BrowserModule,
+		CKEditorModule,
+		RouterModule.forChild( [
+			{
+				path: '',
+				component: DemoFormComponent
+			}
+		] )
+	]
+} )
+export class DemoFormModule {}

src/app/demo-reactive-form/demo-reactive-form.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { CKEditorModule } from 'src/ckeditor';
+import { DemoReactiveFormComponent } from './demo-reactive-form.component';
+
+@NgModule( {
+	declarations: [
+		DemoReactiveFormComponent
+	],
+	imports: [
+		FormsModule,
+		ReactiveFormsModule,
+		BrowserModule,
+		CKEditorModule,
+		RouterModule.forChild( [
+			{
+				path: '',
+				component: DemoReactiveFormComponent
+			}
+		] )
+	]
+} )
+export class DemoReactiveFormModule {}

src/app/initialization-crash/initialization-crash.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 { InitializationCrashComponent } from './initialization-crash.component';
+
+@NgModule( {
+	declarations: [
+		InitializationCrashComponent
+	],
+	imports: [
+		BrowserModule,
+		CKEditorModule,
+		RouterModule.forChild( [
+			{
+				path: '',
+				component: InitializationCrashComponent
+			}
+		] )
+	]
+} )
+export class InitializationCrashModule {}

src/app/simple-cdn-usage/simple-cdn-usage.component.css

@@ -0,0 +1,4 @@
+:host ::ng-deep .ck.ck-editor__editable.ck-read-only {
+	background: #fafafa;
+	color: #888;
+}

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

@@ -0,0 +1,32 @@
+<h2>Simple CDN usage</h2>
+
+<p><strong>Note:</strong> Open the console for additional logs.</p>
+
+<p>
+	<button (click)="toggleDisableEditors()">{{ isDisabled ? 'Enable editors' : 'Disable editors' }}</button>
+</p>
+
+<h3>Classic build</h3>
+<ckeditor
+	*ngIf="Editor"
+
+	[data]="editorData"
+	[editor]="Editor"
+	[disabled]="isDisabled"
+	[config]="config"
+	id="classic-editor"
+	name="classic-editor"
+
+	(ready)="onReady()"
+	(change)="onChange()"
+	(focus)="onFocus()"
+	(error)="onError()"
+	(blur)="onBlur()">
+</ckeditor>
+
+<h4>Component events:</h4>
+<ul>
+	<li *ngFor="let eventInfo of componentEvents">
+		<span>{{ eventInfo }}</span>
+	</li>
+</ul>