INT-3352: Add support for tiny 8 (#470)

* INT-3352: Add support for tiny 8

* INT-3352: Update README.md and add changelog entry

* INT-3352: skip failing tests until tiny 8 is released

* Add 8.0 to peerdependencies

* Set the cloud channel to 8

* Update docs

* Tidy up

* Revert package version

* Set the default channel in storybook to 8

* Clean up

* Update src/test/ts/browser/LoadTinyTest.ts

Co-authored-by: Hamza Benkhaldoun <hamza0867@gmail.com>

* Fix failing test

---------

Co-authored-by: Ben Tran <ben.tran@tiny.cloud>

Author: hamza0867

.eslintrc.json

@@ -6,7 +6,8 @@
         "src/**/*.tsx"
       ],
       "excludedFiles": [
-        "src/demo/demo.ts"
+        "src/demo/demo.ts",
+        "src/**/*.stories.*"
       ],
       "plugins": ["@typescript-eslint"],
       "extends": "plugin:@tinymce/standard",
@@ -18,6 +19,21 @@
         "@tinymce/prefer-fun": "off"
       }
     },
+    {
+      "files": [ "src/**/*.stories.*" ],
+      "plugins": ["@typescript-eslint"],
+      "extends": "plugin:@tinymce/standard",
+      "parserOptions": {
+        "project": "tsconfig.storybook.json",
+        "sourceType": "module"
+      },
+      "rules": {
+        "@tinymce/prefer-fun": "off",
+        "no-console": "off",
+        "@typescript-eslint/no-implied-eval": "off",
+        "@typescript-eslint/no-unsafe-argument": "off"
+      }
+    },
     {
       "files": [
         "**/*.js"
@@ -43,4 +59,4 @@
       }
     }
   ]
-}
+}

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+- Set the default cloudChannel to `'8'`. #INT-3352
+
 ## 6.2.0 - 2025-06-02
 
 ### Added

README.md

@@ -4,16 +4,25 @@
 
 This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinymce) to make it easier to use in a Vue application.
 
-* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/7/).
-* For the TinyMCE Vue Quick Start, see: [TinyMCE Documentation - Vue Integration](https://www.tiny.cloud/docs/tinymce/7/vue-cloud).
-* For the TinyMCE Vue Technical Reference, see: [TinyMCE Documentation - TinyMCE Vue Technical Reference](https://www.tiny.cloud/docs/tinymce/7/vue-ref).
+* If you need detailed documentation on TinyMCE, see: [TinyMCE Documentation](https://www.tiny.cloud/docs/tinymce/latest/).
+* For the TinyMCE Vue Quick Start, see: [TinyMCE Documentation - Vue Integration](https://www.tiny.cloud/docs/tinymce/latest/vue-cloud).
+* For the TinyMCE Vue Technical Reference, see: [TinyMCE Documentation - TinyMCE Vue Technical Reference](https://www.tiny.cloud/docs/tinymce/latest/vue-ref).
 * For our quick demos, check out the TinyMCE Vue [Storybook](https://tinymce.github.io/tinymce-vue/).
 
 
-### Support
+### Tinymce version compatibility
 
-Version 7.0 is intended to support the tinymce version 7.6 and above.
-Version 4.0 is intended to support Vue 3. For Vue 2.x and below please use previous versions of the wrapper.
+| tinymce       | tinymce-vue version   |
+| ---           | ---                   |
+| 7.6 and above | 6.2 and above         |
+| below 7.6     | Versions prior to 6.2 |
+
+### Vue version compatibility
+
+| vue     | tinymce-vue             |
+| ---     | ---                     |
+| 3.x     | 4.0 and above           |
+| 2.x     | Versions prior to 4.0   |
 
 ### 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

@@ -33,7 +33,7 @@
     "LICENSE.txt"
   ],
   "peerDependencies": {
-    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1",
+    "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.5.1",
     "vue": "^3.0.0"
   },
   "peerDependenciesMeta": {
@@ -75,11 +75,12 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.34.1",
     "rollup-plugin-uglify": "^6.0.0",
-    "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-8": "npm:tinymce@^8",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",
     "tsconfig-paths-webpack-plugin": "^4.1.0",

src/main/ts/components/Editor.ts

@@ -114,7 +114,7 @@ export const Editor = defineComponent({
       if (getTinymce() !== null) {
         initWrapper();
       } else if (element.value && element.value.ownerDocument) {
-        const channel = props.cloudChannel ? props.cloudChannel : '7';
+        const channel = props.cloudChannel ? props.cloudChannel : '8';
         const apiKey = props.apiKey ? props.apiKey : 'no-api-key';
         const scriptSrc: string = isNullOrUndefined(props.tinymceScriptSrc) ?
           `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js` :

src/stories/Editor.stories.tsx

@@ -2,7 +2,7 @@ import { Story } from '@storybook/vue3';
 import { onBeforeMount, ref } from 'vue';
 import { ScriptLoader } from '../main/ts/ScriptLoader';
 
-import type { EditorEvent, Editor as TinyMCEEditor } from 'tinymce';
+import type { EditorEvent } from 'tinymce';
 import { Editor } from '../main/ts/components/Editor';
 
 const apiKey = 'qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc';
@@ -11,20 +11,22 @@ const content = `
   TinyMCE provides a <span style="text-decoration: underline;">full-featured</span> rich text editing experience, and a featherweight download.
 </h2>
 <p style="text-align: center;">
-  <strong><span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span></strong>
+  <strong>
+    <span style="font-size: 14pt;"><span style="color: #7e8c8d; font-weight: 600;">No matter what you're building, TinyMCE has got you covered.</span></span>
+  </strong>
 </p>`;
 
-let lastChannel = '5';
+let lastChannel = '8';
 const getConf = (stringConf: string) => {
-  let conf  = {};
+  let conf = {};
   console.log('parsing: ', stringConf);
   try {
     conf = Function('"use strict";return (' + stringConf + ')')();
   } catch (err) {
     console.error('failed to parse configuration: ', err);
   }
   return conf;
-}
+};
 
 const removeTiny = () => {
   delete (window as any).tinymce;
@@ -43,18 +45,17 @@ const loadTiny = (currentArgs: any) => {
   }
 };
 
-
 export default {
   title: 'Editor',
   component: Editor,
   argTypes: {
     channel: {
       table: {
-        defaultValue: {summary: '5'}
+        defaultValue: { summary: '5' }
       },
-      defaultValue: '7',
-      options: ['5', '5-dev', '5-testing', '6-testing', '6-stable', '7-dev', '7-testing', '7-stable', '7.3', '7.4', '7.6'],
-      control: { type: 'select'}
+      defaultValue: '8-stable',
+      options: [ '5', '5-dev', '5-testing', '6-testing', '6-stable', '7-dev', '7-testing', '7-stable', '7.3', '7.4', '7.6', '8-dev', '8-testing', '8-stable' ],
+      control: { type: 'select' }
     },
     disabled: {
       defaultValue: false,
@@ -80,8 +81,8 @@ export default {
 };
 
 export const Iframe: Story = (args) => ({
-  components: {Editor},
-  setup() {
+  components: { Editor },
+  setup: () => {
     onBeforeMount(() => {
       loadTiny(args);
     });
@@ -92,14 +93,14 @@ export const Iframe: Story = (args) => ({
       content,
       cloudChannel: cc,
       conf
-    }
+    };
   },
   template: '<div ><p>Ready</p><editor :api-key="apiKey" :initialValue="content" :cloud-channel="cloudChannel" :init="conf" /></div>'
 });
 
 export const Inline: Story = (args) => ({
   components: { Editor },
-  setup() {
+  setup: () => {
     onBeforeMount(() => {
       loadTiny(args);
     });
@@ -110,7 +111,7 @@ export const Inline: Story = (args) => ({
       content,
       cloudChannel: cc,
       conf
-    }
+    };
   },
   template: `
     <div style="padding-top: 100px;">
@@ -125,21 +126,23 @@ export const Inline: Story = (args) => ({
 
 export const Controlled: Story = (args) => ({
   components: { Editor },
-  setup() {
+  setup: () => {
     onBeforeMount(() => {
       loadTiny(args);
     });
     const cc = args.channel || lastChannel;
     const conf = getConf(args.conf);
-    const log = (e: EditorEvent<any>, editor: TinyMCEEditor) => {console.log(e);};
+    const log = (e: EditorEvent<any>) => {
+      console.log(e);
+    };
     const controlledContent = ref(content);
     return {
       apiKey,
       content: controlledContent,
       cloudChannel: cc,
       conf,
       log
-    }
+    };
   },
   template: `
     <div>
@@ -160,16 +163,16 @@ export const Controlled: Story = (args) => ({
 
 export const Disable: Story = (args) => ({
   components: { Editor },
-  setup() {
+  setup: () => {
     onBeforeMount(() => {
       loadTiny(args);
     });
     const cc = args.channel || lastChannel;
     const conf = getConf(args.conf);
     const disabled = ref(args.disabled);
-    const toggleDisabled = (_) => {
+    const toggleDisabled = () => {
       disabled.value = !disabled.value;
-    }
+    };
 
     return {
       apiKey,
@@ -178,7 +181,7 @@ export const Disable: Story = (args) => ({
       conf,
       disabled,
       toggleDisabled
-    }
+    };
   },
   template: `
     <div>
@@ -194,24 +197,24 @@ export const Disable: Story = (args) => ({
 
 export const Readonly: Story = (args) => ({
   components: { Editor },
-  setup() {
+  setup: () => {
     onBeforeMount(() => {
       loadTiny(args);
     });
     const cc = args.channel || lastChannel;
     const conf = getConf(args.conf);
     const readonly = ref(args.readonly);
-    const toggleReadonly = (_) => {
+    const toggleReadonly = () => {
       readonly.value = !readonly.value;
-    }
+    };
     return {
       apiKey,
       content,
       cloudChannel: cc,
       conf,
       readonly,
       toggleReadonly
-    }
+    };
   },
   template: `
     <div>

src/test/ts/alien/Loader.ts

@@ -40,9 +40,15 @@ const pRender = (data: Record<string, any> = {}, template: string = `<editor :in
         setup: (editor: any) => {
           originalSetup(editor);
           editor.on('SkinLoaded', () => {
-            setTimeout(() => {
+            // 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, vm });
+              });
+            } else {
               resolve({ editor, vm });
-            }, 0);
+            }
           });
         }
       }

src/test/ts/browser/InitTest.ts

@@ -13,7 +13,7 @@ describe('Editor Component Initialization Tests', () => {
     Keyboard.keystroke(Keys.space(), {}, SugarElement.fromDom(vmContext.editor.getBody()) as SugarElement<Node>);
   };
 
-  Arr.each([ '4', '5', '6', '7' as const ], (version) => {
+  Arr.each([ '4', '5', '6', '7', '8' ], (version) => {
     context(`Version: ${version}`, () => {
 
       before(async () => {
@@ -32,6 +32,7 @@ describe('Editor Component Initialization Tests', () => {
         const vmContext = await pRender({}, `
           <editor
             :init="init"
+            license-key="gpl"
           ></editor>`);
         Assertions.assertEq('Editor should not be inline', false, vmContext.editor.inline);
       });
@@ -41,12 +42,13 @@ describe('Editor Component Initialization Tests', () => {
           <editor
             :init="init"
             :inline="true"
+            license-key="gpl"
           ></editor>`);
         Assertions.assertEq('Editor should be inline', true, vmContext.editor.inline);
       });
 
       it('should be inline with inline option in init', async () => {
-        const vmContext = await pRender({ init: { inline: true }});
+        const vmContext = await pRender({ init: { inline: true, license_key: 'gpl' }});
         Assertions.assertEq('Editor should be inline', true, vmContext.editor.inline);
       });
 
@@ -57,6 +59,7 @@ describe('Editor Component Initialization Tests', () => {
           <editor
             :init="init"
             api-key="${VALID_API_KEY}"
+            license-key="gpl"
             @update:modelValue="content=$event"
             output-format="text"
           ></editor>
@@ -71,6 +74,7 @@ describe('Editor Component Initialization Tests', () => {
         }, `
           <editor
             :init="init"
+            license-key="gpl"
             api-key="${VALID_API_KEY}"
             @update:modelValue="content=$event"
             output-format="html"