Skip to content

Commit

Permalink
Merge pull request #431 from ckeditor/ck/cloud-poc
Browse files Browse the repository at this point in the history
Feature: Add cloud CDN support.

MAJOR BREAKING CHANGE: Changed minimum supported version of Angular to the oldest supported LTS: >= 16.x
MAJOR BREAKING CHANGE: Switched compiler from TS 4.x → 5.x to ensure compatibility with the newest CKEditor packages
  • Loading branch information
Mati365 authored Sep 6, 2024
2 parents 2bd4329 + 364752f commit 9c62280
Show file tree
Hide file tree
Showing 21 changed files with 4,753 additions and 3,213 deletions.
34 changes: 18 additions & 16 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.13.0",
"@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",
Expand All @@ -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",
Expand All @@ -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"
Expand Down
13 changes: 7 additions & 6 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
60 changes: 34 additions & 26 deletions src/app/app.module.ts
Original file line number Diff line number Diff line change
@@ -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 ]
Expand Down
22 changes: 22 additions & 0 deletions src/app/context-demo/context-demo.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
26 changes: 26 additions & 0 deletions src/app/demo-form/demo-form.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
26 changes: 26 additions & 0 deletions src/app/demo-reactive-form/demo-reactive-form.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
22 changes: 22 additions & 0 deletions src/app/initialization-crash/initialization-crash.module.ts
Original file line number Diff line number Diff line change
@@ -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 {}
4 changes: 4 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.component.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
:host ::ng-deep .ck.ck-editor__editable.ck-read-only {
background: #fafafa;
color: #888;
}
32 changes: 32 additions & 0 deletions src/app/simple-cdn-usage/simple-cdn-usage.component.html
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 9c62280

Please sign in to comment.