INT-3378: Support Angular v20 (#437)

* INT-3378: Support Angular v20

* Attempt to fix flaky test

* Update more dependencies

* Update support version

* Another attempt to fix test

* Remove unused package

* Remove more unused dependency

Author: tiny-ben-tran

README.md

@@ -13,7 +13,7 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 
 |Angular version|`tinymce-angular` version|
 |---            |---                      |
-|>=16.x <=19.x  |8+                       |
+|>=16.x <=20.x  |8+                       |
 |14+            |7.x                      |
 |13+            |6.x                      |
 |9+             |4.x                      |

package.json

@@ -15,31 +15,30 @@
   },
   "private": true,
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19",
-    "@angular-devkit/core": "^19",
-    "@angular/animations": "^19",
-    "@angular/cdk": "^19",
-    "@angular/cli": "^19",
-    "@angular/common": "^19",
-    "@angular/compiler": "^19",
-    "@angular/compiler-cli": "^19",
-    "@angular/core": "^19",
-    "@angular/forms": "^19",
-    "@angular/language-service": "^19",
-    "@angular/material": "^19",
-    "@angular/platform-browser": "^19",
-    "@angular/platform-browser-dynamic": "^19",
+    "@angular-devkit/build-angular": "^20",
+    "@angular-devkit/core": "^20",
+    "@angular/animations": "^20",
+    "@angular/cdk": "^20",
+    "@angular/cli": "^20",
+    "@angular/common": "^20",
+    "@angular/compiler": "^20",
+    "@angular/compiler-cli": "^20",
+    "@angular/core": "^20",
+    "@angular/forms": "^20",
+    "@angular/language-service": "^20",
+    "@angular/material": "^20",
+    "@angular/platform-browser": "^20",
     "@babel/core": "^7.24.9",
     "@ephox/agar": "^8.0.1",
     "@ephox/bedrock-client": "^14.1.1",
     "@ephox/bedrock-server": "^14.1.3",
     "@ephox/sugar": "^9.3.1",
-    "@storybook/addon-essentials": "~8.5",
-    "@storybook/addon-interactions": "~8.5",
-    "@storybook/addon-links": "^8.2.5",
-    "@storybook/angular": "~8.5",
-    "@storybook/blocks": "^8.2.5",
-    "@storybook/test": "~8.5",
+    "@storybook/addon-essentials": "9.0.0-alpha.12",
+    "@storybook/addon-interactions": "^9.0.0-alpha.10",
+    "@storybook/addon-links": "^9",
+    "@storybook/angular": "^9",
+    "@storybook/blocks": "^9.0.0-alpha.17",
+    "@storybook/test": "^9.0.0-alpha.2",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^3.0.0",
     "@tinymce/miniature": "^6.0.0",
@@ -61,7 +60,7 @@
     "regenerator-runtime": "^0.14.1",
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
-    "storybook": "~8.5",
+    "storybook": "^9",
     "tinymce": "^8.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
@@ -71,10 +70,11 @@
     "tinymce-8": "npm:tinymce@^8",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
-    "typescript": "~5.5.4",
+    "typescript": "^5.9.3",
     "webpack": "^5.95.0",
-    "zone.js": "~0.15.0"
+    "zone.js": "~0.16.0"
   },
   "version": "9.1.2-rc",
-  "name": "@tinymce/tinymce-angular"
+  "name": "@tinymce/tinymce-angular",
+  "dependencies": {}
 }

stories/Editor.stories.ts

@@ -12,10 +12,10 @@ import { ViewQueryComponent } from './viewquery/Viewquery.component';
 import { MaterialTabs } from './materialtabs/MaterialTabs.component';
 import { SafePipe } from './pipes/Safe.pipe';
 import { MatTabsModule } from '@angular/material/tabs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ContainerComponent, ContentProjectionComponent } from './contentprojection/ContentProjection.component';
 import { BindingComponent } from './data-binding/DataBinding.component';
 import { ReadonlyComponent } from './readonly/Readonly.component';
+import { BrowserModule } from '@angular/platform-browser';
 
 const meta: Meta = {
   component: EditorComponent,
@@ -168,7 +168,7 @@ export const MaterialTabsStory: StoryObj<EditorComponent> = {
   name: 'Material Tabs',
   render: () => ({
     moduleMetadata: {
-      imports: [ ReactiveFormsModule, FormsModule, BrowserAnimationsModule, MatTabsModule ],
+      imports: [ ReactiveFormsModule, FormsModule, BrowserModule, MatTabsModule ],
       declarations: [ MaterialTabs ],
     },
     template: `<material-tabs/>`
@@ -180,6 +180,7 @@ export const ContentProjectionStory: StoryObj<EditorComponent> = {
   render: () => ({
     moduleMetadata: {
       declarations: [ ContentProjectionComponent, ContainerComponent ],
+      imports: [ FormsModule ],
     },
     template: `<content-projection/>`
   }),

tinymce-angular-component/src/test/ts/alien/InitTestEnvironment.ts

@@ -3,8 +3,8 @@ import 'zone.js';
 import 'zone.js/plugins/fake-async-test';
 
 import { TestBed } from '@angular/core/testing';
-import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
 
-TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting(), {
   teardown: { destroyAfterEach: true },
 });

tinymce-angular-component/src/test/ts/alien/TestHooks.ts

@@ -74,10 +74,17 @@ export const editorHook = <T = unknown>(component: Type<T>, moduleDef: TestModul
         switchMap(
           ({ editor }) =>
             new Promise<Editor>((resolve) => {
-              if (editor.initialized) {
-                resolve(editor);
-              }
-              editor.once( 'SkinLoaded', () => resolve(editor));
+              editor.once('SkinLoaded', () => {
+                // This is a workaround to avoid a race condition occurring in tinymce 8 where licenseKeyManager is still validating the license key
+              // after global tinymce is removed in a clean up. Specifically, it happens when unloading/loading different versions of TinyMCE
+                if (editor.licenseKeyManager) {
+                  editor.licenseKeyManager.validate({}).then(() => {
+                    resolve(editor);
+                  }).catch((reason) => console.warn(reason));
+                } else {
+                  resolve(editor);
+                }
+              });
             })
         ),
         map(