INT-3302: Update tinymce to version 7

INT-3302: Update tinymce to version 7

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+- Add missing events: `onInput`, `onCommentChange`, `onCompositionEnd`, `onCompositionStart`, `onCompositionUpdate`
+
+### Changed
+- Default cloud channel to '7'
+
 ## 5.1.0 - 2023-04-05
 
 ### Added

README.md

@@ -4,9 +4,9 @@
 
 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/6/).
-* For the TinyMCE Vue Quick Start, see: [TinyMCE Documentation - Vue Integration](https://www.tiny.cloud/docs/tinymce/6/vue-cloud).
-* For the TinyMCE Vue Technical Reference, see: [TinyMCE Documentation - TinyMCE Vue Technical Reference](https://www.tiny.cloud/docs/tinymce/6/vue-ref).
+* 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).
 
 ### Support
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-vue",
-  "version": "5.1.2-rc",
+  "version": "6.0.0-rc",
   "description": "Official TinyMCE Vue 3 Component",
   "private": false,
   "repository": {
@@ -85,6 +85,6 @@
     "webpack": "^5.75.0"
   },
   "dependencies": {
-    "tinymce": "^6.0.0 || ^5.5.1"
+    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1"
   }
 }

src/main/ts/Utils.ts

@@ -24,6 +24,10 @@ const validEvents = [
   'onClearUndos',
   'onClick',
   'onContextMenu',
+  'onCommentChange',
+  'onCompositionEnd',
+  'onCompositionStart',
+  'onCompositionUpdate',
   'onCopy',
   'onCut',
   'onDblclick',
@@ -42,6 +46,7 @@ const validEvents = [
   'onGetContent',
   'onHide',
   'onInit',
+  'onInput',
   'onKeyDown',
   'onKeyPress',
   'onKeyUp',
@@ -159,4 +164,4 @@ export {
   isTextarea,
   mergePlugins,
   isNullOrUndefined
-};
+};

src/main/ts/components/Editor.ts

@@ -91,7 +91,7 @@ export const Editor = defineComponent({
       if (getTinymce() !== null) {
         initWrapper();
       } else if (element.value && element.value.ownerDocument) {
-        const channel = props.cloudChannel ? props.cloudChannel : '6';
+        const channel = props.cloudChannel ? props.cloudChannel : '7';
         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/main/ts/components/EditorPropTypes.ts

@@ -13,6 +13,7 @@ export type CopyProps<T> = { [P in keyof T]: any };
 
 export interface IPropTypes {
   apiKey: string;
+  licenseKey: string;
   cloudChannel: string;
   id: string;
   init: EditorOptions & { selector?: undefined; target?: undefined };
@@ -30,6 +31,7 @@ export interface IPropTypes {
 
 export const editorProps: CopyProps<IPropTypes> = {
   apiKey: String,
+  licenseKey: String,
   cloudChannel: String,
   id: String,
   init: Object,

src/stories/Editor.stories.tsx

@@ -52,8 +52,8 @@ export default {
       table: {
         defaultValue: {summary: '5'}
       },
-      defaultValue: ['5'],
-      options: ['5', '5-dev', '5-testing', '6-dev', '6-testing', '6-stable'],
+      defaultValue: ['7'],
+      options: ['5', '5-dev', '5-testing', '6-testing', '6-stable', '7-dev', '7-testing', '7-stable'],
       control: { type: 'select'}
     },
     conf: {
@@ -182,4 +182,4 @@ export const Disable: Story = (args) => ({
         v-model="content"
       />
     </div>`
-});
+});

src/test/ts/browser/InitTest.ts

@@ -10,7 +10,7 @@ UnitTest.asynctest('InitTest', (success, failure) => {
     Keyboard.keystroke(Keys.space(), {}, SugarElement.fromDom(context.editor.getBody()) as SugarElement<Node>);
   });
 
-  const sTestVersion = (version: '4' | '5' | '6') => VersionLoader.sWithVersion(
+  const sTestVersion = (version: '4' | '5' | '6' | '7') => VersionLoader.sWithVersion(
     version,
     GeneralSteps.sequence([
       Logger.t('Should be able to setup editor', Chain.asStep({}, [
@@ -77,6 +77,7 @@ UnitTest.asynctest('InitTest', (success, failure) => {
   Pipeline.async({}, [
     sTestVersion('4'),
     sTestVersion('5'),
-    sTestVersion('6')
+    sTestVersion('6'),
+    sTestVersion('7'),
   ], success, failure);
-});
+});

src/test/ts/browser/LoadTinyTest.ts

@@ -126,4 +126,4 @@ UnitTest.asynctest('LoadTinyTest', (success, failure) => {
       cDeleteTinymce
     ]),
   ], success, failure);
-});
+});

yarn.lock

@@ -15387,15 +15387,10 @@ tiny-emitter@^2.0.0:
   resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.0.0.tgz#44945e4c12ea90d08aedf357304c24269a164e54"
   integrity sha512-y4b5OhxScZiFovTgEFzI+2zEDSMfbJSQ4hfcYPg9HXvudxvDIHjc3fF73m0Sys5h8YtpWPG1fT9iJsjSnwuo2A==
 
-"tinymce-7@npm:tinymce@^7":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.0.0.tgz#d35441e15f8011cf549b39e58b64648798816e92"
-  integrity sha512-ggXLfTRrUALAcjeJSRrZcJDOl6MgC2tPXe/zNOEkQXvTDgcKqFypPRoPpfpK5wejexjyaI/7dwETOntJ5MPBFg==
-
-"tinymce@^6.0.0 || ^5.5.1":
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-6.3.1.tgz#cc5cf2b9f702d429cf5d1d21ed62245d768bfc4f"
-  integrity sha512-+oCwXuTxAdJXVJ0130OxQz0JDNsqg3deuzgeUo8X5Vb27EzCJgXwO5eWvCxvkxpQo4oiHMVlM4tUIpTUHufHGQ==
+"tinymce-7@npm:tinymce@^7", "tinymce@^7.0.0 || ^6.0.0 || ^5.5.1":
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-7.0.1.tgz#743f4003027a13497654a5ce5ca74793815386f7"
+  integrity sha512-0a7DJnhniBx2psRuKcVQ9g4hujN6PAR4fPS0NSF1T1luH1RBDZVVEn2pGND6Ly+AW1lUm/cHOHjsasqBelMhbw==
 
 tmp@^0.2.1:
   version "0.2.1"