INT-3351: Update to use TinyMCE 8 (#421)

* TINY-3351: Update for TinyMCE 8

* INT-3351: Temporarily use tinymce 7 to pass the build

* INT-3351: Fix failing test

* Put support versions list in a table for beter clarity

* Add gpl licenceKey to tests

* Add a changelog entry

* Update peerDependencies

Author: tiny-ben-tran

CHANGELOG.md

@@ -6,6 +6,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+- Defaulted cloudChannel to `8`. #INT-3351
+
 ## 9.0.0 - 2025-05-29
 
 ### Added

README.md

@@ -4,34 +4,21 @@
 
 This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in an Angular application.
 
-* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/7/).
-* For the TinyMCE Angular Quick Start, see: [TinyMCE Documentation - Angular Integration](https://www.tiny.cloud/docs/tinymce/7/angular-cloud/).
-* For the TinyMCE Angular Technical Reference, see: [TinyMCE Documentation - TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/7/angular-ref/).
+* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/).
+* For the TinyMCE Angular Quick Start, see: [TinyMCE Documentation - Angular Integration](https://www.tiny.cloud/docs/tinymce/latest/angular-cloud/).
+* For the TinyMCE Angular Technical Reference, see: [TinyMCE Documentation - TinyMCE Angular Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/angular-ref/).
 * For our quick demos, check out the TinyMCE Angular [Storybook](https://tinymce.github.io/tinymce-angular/).
 
 ### Support
 
-For Angular 16+, use integration version 8.x:
-
-`npm install @tinymce/tinymce-angular@^8`
-
-For Angular 14+, use integration version 7.x:
-
-`npm install @tinymce/tinymce-angular@^7`
-
-For Angular 13+, use integration version 6.x:
-
-`npm install @tinymce/tinymce-angular@^6`
-
-For Angular 9+, use integration version 4.x:
-
-`npm install @tinymce/tinymce-angular@^4`
-
-For Angular 8 and below use integration version 3.x:
-
-`npm install @tinymce/tinymce-angular@^3`
-
-Versions below Angular 5 are not supported.
+|Angular version|`tinymce-angular` version|
+|---            |---                      |
+|16+            |8+                       |
+|14+            |7.x                      |
+|13+            |6.x                      |
+|9+             |4.x                      |
+|<= 8           |3.x                      |
+|< 5            | Not supported           |
 
 ### Issues
 

SECURITY.md

@@ -2,4 +2,4 @@
 
 ## Reporting a Vulnerability
 
-For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/6/security/#reportingtinymcesecurityissues).
+For details on how to report security issues to Tiny, refer to the [Reporting TinyMCE security issues documentation](https://www.tiny.cloud/docs/tinymce/latest/security/#reportingtinymcesecurityissues).

package.json

@@ -62,12 +62,13 @@
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
     "storybook": "^8.2.5",
-    "tinymce": "^7",
+    "tinymce": "^8.0.0",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
     "tinymce-7.5.0": "npm:[email protected]",
+    "tinymce-8": "npm:tinymce@^8",
     "to-string-loader": "^1.1.5",
     "tslib": "^2.6.2",
     "typescript": "~5.5.4",

stories/Editor.stories.ts

@@ -32,7 +32,6 @@ export const IframeStory: StoryObj<EditorComponent> = {
       height: 300,
       plugins: 'help',
     },
-    cloudChannel: '6-dev',
   }
 };
 
@@ -44,7 +43,7 @@ export const InlineStory: StoryObj<EditorComponent> = {
         <editor apiKey="${apiKey}" inline initialValue='${sampleContent}'></editor>
       </div>
     `
-  }),
+  })
 };
 
 export const EventBindingStory: StoryObj<EditorComponent> = {
@@ -55,8 +54,7 @@ export const EventBindingStory: StoryObj<EditorComponent> = {
       declarations: [ EventBindingComponent ],
     },
     template: `<event-binding/>`
-  }),
-
+  })
 };
 
 export const EventForwardingStory: StoryObj<EditorComponent> = {

tinymce-angular-component/package.json

@@ -11,7 +11,7 @@
     "@angular/common": ">=16.0.0",
     "@angular/forms": ">=16.0.0",
     "rxjs": "^7.4.0",
-    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.0"
+    "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.0"
   },
   "peerDependenciesMeta": {
     "tinymce": {

tinymce-angular-component/src/main/ts/editor/editor.component.ts

@@ -34,7 +34,7 @@ const EDITOR_COMPONENT_VALUE_ACCESSOR = {
   multi: true
 };
 
-export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
+export type Version = `${'4' | '5' | '6' | '7' | '8'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
 
 @Component({
   selector: 'editor',
@@ -51,7 +51,7 @@ export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${
  */
 export class EditorComponent extends Events implements AfterViewInit, ControlValueAccessor, OnDestroy {
 
-  @Input() public cloudChannel: Version = '7';
+  @Input() public cloudChannel: Version = '8';
   @Input() public apiKey = 'no-api-key';
   @Input() public licenseKey?: string;
   @Input() public init?: EditorOptions;

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

@@ -62,7 +62,7 @@ export const editorHook = <T = unknown>(component: Type<T>, moduleDef: TestModul
           .map((v): EditorComponent => v.componentInstance)
           .getOrDie('EditorComponent instance not found');
 
-    for (const [ key, value ] of Object.entries(props)) {
+    for (const [ key, value ] of Object.entries({ ...props, licenseKey: 'gpl' })) {
       (editorComponent as any)[key] = value;
     }
 

tinymce-angular-component/src/test/ts/browser/DisabledPropertyTest.ts

@@ -23,7 +23,7 @@ describe('DisabledPropertyTest', () => {
   const assertDisabledOption = (editor: Editor, expected: boolean) =>
     Assertions.assertEq(`TinyMCE should have disabled option set to ${expected}`, expected, editor.options.get('disabled'));
 
-  eachVersionContext([ '5', '6', '7.5.0', ], () => {
+  eachVersionContext([ '5', '6', '7.5.0' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it(`Component 'disabled' property is mapped to editor 'readonly' mode`, async () => {
@@ -77,7 +77,7 @@ describe('DisabledPropertyTest', () => {
     });
   });
 
-  eachVersionContext([ '7' ], () => {
+  eachVersionContext([ '7', '8' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it(`Component 'disabled' property is mapped to editor 'disabled' property`, async () => {
@@ -88,7 +88,7 @@ describe('DisabledPropertyTest', () => {
     });
 
     it(`Toggling component's 'disabled' property is mapped to editor 'disabled' option`, async () => {
-      const fixture = await createFixture();
+      const fixture = await createFixture({});
       const { editor } = fixture;
 
       assertDesignMode(editor);

tinymce-angular-component/src/test/ts/browser/EventBlacklistingTest.ts

@@ -16,7 +16,7 @@ describe('EventBlacklistingTest', () => {
       tap(() => Assertions.assertEq('Subscribers to events should run within NgZone', true, NgZone.isInAngularZone()))
     );
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     const createFixture = editorHook(EditorComponent);
 
     it('Events should be bound when allowed', async () => {