TINY-3351: Update for TinyMCE 8

Author: tiny-ben-tran

package.json

@@ -68,6 +68,7 @@
     "tinymce-6": "npm:tinymce@^6",
     "tinymce-7": "npm:tinymce@^7",
     "tinymce-7.5.0": "npm:[email protected]",
+    "tinymce-8": "file:./../tinymce/dist/tinymce_8.0.0_component",
     "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/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/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 () => {

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 () => {

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

@@ -21,7 +21,7 @@ describe('FormControlTest', () => {
     }
   };
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     [ ChangeDetectionStrategy.Default, ChangeDetectionStrategy.OnPush ].forEach((changeDetection) => {
       context(`[formControl] with change detection: ${changeDetection}`, () => {
         @Component({

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

@@ -16,7 +16,7 @@ describe('LoadTinyTest', () => {
     Assertions.assertEq(`Loaded version of TinyMCE should be ${version}`, version, Global.tinymce.majorVersion);
   };
 
-  for (const version of [ '4', '5', '6', '7' ] as Version[]) {
+  for (const version of [ '4', '5', '6', '7', '8' ] as Version[]) {
     context(`With local version ${version}`, () => {
       const createFixture = editorHook(EditorComponent, {
         providers: [

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

@@ -15,7 +15,7 @@ describe('NgModelTest', () => {
     Assertions.assertEq('assert ngModel ' + prop + ' state', expected, ngModel[prop]);
   };
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     @Component({
       standalone: true,
       imports: [ EditorComponent, FormsModule ],

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

@@ -10,7 +10,7 @@ import { first } from 'rxjs';
 import { throwTimeout } from '../alien/TestHelpers';
 
 describe('NgZoneTest', () => {
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     const createFixture = fixtureHook(EditorComponent, { imports: [ EditorComponent ] });
 
     it('Subscribers to events should run within NgZone', async () => {

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

@@ -42,7 +42,7 @@ describe('PropTest', () => {
       )
     );
 
-  eachVersionContext([ '4', '5', '6', '7' ], () => {
+  eachVersionContext([ '4', '5', '6', '7', '8' ], () => {
     context('Single editor with ID', () => {
       @Component({
         standalone: true,