INT-3291: Support for TinyMCE Version 7 release (#506)

* INT-3291: Add tinymce 7 as a dep

* INT-3291: Added licenseKey prop

* INT-3291: Test against version 7 as well

* INT-3291: Add technical reference to Editor's JSDoc

* INT-3291: Remove @storybook/addon-onboarding dev dep

* INT-3291: Updated stories to use newer StoryObj API

* INT-3291: Change default `cloudChannel` to '7'

* INT-3291: Upgrade dependencies

* INT-3291: Disable storybook actions

* INT-3291: Fix version 7 discrepency that's carried over from 6

* INT-3291: Upgrade storybook to use react-vite instead of webpack

* INT-3291: Use an `as` assertion for `cloudChannel`

* INT-3291: Added input and composition related event handlers

* INT-3291: Turn off no-unsafe-arguments eslint rule as certain internal testing libraries return generics containing `any`

* INT-3291: Updated codesandbox link

* INT-3291: Added changelog entries

Author: danoaky-tiny

.eslintrc.json

@@ -11,7 +11,8 @@
         "sourceType": "module"
       },
       "rules": {
-        "@tinymce/prefer-fun": "off"
+        "@tinymce/prefer-fun": "off",
+        "@typescript-eslint/no-unsafe-argument": "off"
       }
     }
   ]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -9,7 +9,7 @@ assignees: ''
 
 **What is the current behavior?**
 
-**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io](https://codesandbox.io/s/tinymce-tinymce-react-p6bqty?file=/src/index.js) or similar.**
+**Please provide the steps to reproduce and if possible a minimal demo of the problem via [codesandbox.io](https://codesandbox.io/p/sandbox/tinymce-react-yny726?file=src/index.tsx) or similar.**
 
 **What is the expected behavior?**
 

.storybook/main.ts

@@ -1,19 +1,18 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-
-const config: StorybookConfig = {
+export default {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
   ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {},
+  core: {
+    disableTelemetry: true
   },
   docs: {
     autodocs: "tag",
   },
-};
-export default config;
+  framework: {
+    name: "@storybook/react-vite",
+    options: {}
+  }
+};

CHANGELOG.md

@@ -6,6 +6,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 5.0.0 - 2024-03-25
+
+### Added
+- Added `licenseKey` property that overrides the TinyMCE `license_key` init property. #INT-3291
+- Added events `onInput`, `onCompositionEnd`, `onCompositionStart` & `onCompositionUpdate`. #INT-3291
+- Added a JSDoc link to the TinyMCE 7 React Technical Reference docs page. #INT-3291
+
+### Fixed
+- `readonly` init property is now properly typed as undefined, as it's overriden by the integration. #INT-3287
+
+### Changed
+- Updated dependencies. #INT-3291
+- Changed default cloudChannel to `'7'`. #INT-3291
+
+### Improved
+- Improved `cloudChannel` type. #INT-3291
+- Updated to Storybook v8 and it now uses react-vite as a bundler/builder instead of webpack. #INT-3291
+- Storybook examples now use CSFv3 components. #INT-3291
+- Tests now run against TinyMCE version 7 as well. #INT-3291
+
 ## 4.3.2 - 2023-11-20
 
 ### Fixed

package.json

@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "prop-types": "^15.6.2",
-    "tinymce": "^6.0.0 || ^5.5.1"
+    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^17.0.1 || ^16.7.0",
@@ -39,23 +39,21 @@
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@ephox/agar": "^8.0.0-alpha.0",
-    "@ephox/bedrock-client": "^13.0.0",
-    "@ephox/bedrock-server": "^13.6.0",
+    "@ephox/bedrock-client": "^14.1.1",
+    "@ephox/bedrock-server": "^14.1.3",
     "@ephox/katamari": "^9.1.5",
     "@ephox/mcagar": "^9.0.0-alpha.0",
     "@ephox/sand": "^6.0.9",
     "@ephox/sugar": "^9.2.1",
-    "@storybook/addon-essentials": "^7.5.3",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.0.2",
+    "@storybook/addon-interactions": "^8.0.2",
+    "@storybook/addon-links": "^8.0.2",
+    "@storybook/blocks": "^8.0.2",
+    "@storybook/react": "^8.0.2",
+    "@storybook/react-vite": "^8.0.2",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^2.3.1",
-    "@tinymce/miniature": "^5.0.1",
+    "@tinymce/miniature": "^6.0.0",
     "@types/node": "^20.9.0",
     "@types/prop-types": "^15.7.10",
     "@types/react": "^18.2.37",
@@ -64,11 +62,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.5.3",
+    "storybook": "^8.0.2",
     "tinymce-4": "npm:tinymce@^4",
     "tinymce-5": "npm:tinymce@^5",
     "tinymce-6": "npm:tinymce@^6",
-    "typescript": "~5.2.2"
+    "tinymce-7": "npm:tinymce@^7",
+    "typescript": "~5.4.3",
+    "vite": "^5.2.2"
   },
   "version": "4.3.3-rc",
   "name": "@tinymce/tinymce-react"

src/main/ts/Events.ts

@@ -8,6 +8,9 @@ export interface INativeEvents {
   onBeforePaste: EEventHandler<'beforepaste'>;
   onBlur: EEventHandler<'blur'>;
   onClick: EEventHandler<'click'>;
+  onCompositionEnd: EEventHandler<'compositionend'>;
+  onCompositionStart: EEventHandler<'compositionstart'>;
+  onCompositionUpdate: EEventHandler<'compositionupdate'>;
   onContextMenu: EEventHandler<'contextmenu'>;
   onCopy: EEventHandler<'copy'>;
   onCut: EEventHandler<'cut'>;
@@ -21,6 +24,7 @@ export interface INativeEvents {
   onFocus: EEventHandler<'focus'>;
   onFocusIn: EEventHandler<'focusin'>;
   onFocusOut: EEventHandler<'focusout'>;
+  onInput: EEventHandler<'input'>;
   onKeyDown: EEventHandler<'keydown'>;
   onKeyPress: EEventHandler<'keypress'>;
   onKeyUp: EEventHandler<'keyup'>;

src/main/ts/components/Editor.tsx

@@ -8,16 +8,18 @@ import { Bookmark, Editor as TinyMCEEditor, EditorEvent, TinyMCE } from 'tinymce
 
 type EditorOptions = Parameters<TinyMCE['init']>[0];
 
+export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
+
 export interface IProps {
   apiKey: string;
   id: string;
   inline: boolean;
   initialValue: string;
   onEditorChange: (a: string, editor: TinyMCEEditor) => void;
   value: string;
-  init: EditorOptions & Partial<Record<'selector' | 'target' | 'readonly', undefined>>;
+  init: EditorOptions & Partial<Record<'selector' | 'target' | 'readonly' | 'license_key', undefined>>;
   tagName: string;
-  cloudChannel: string;
+  cloudChannel: Version;
   plugins: NonNullable<EditorOptions['plugins']>;
   toolbar: NonNullable<EditorOptions['toolbar']>;
   disabled: boolean;
@@ -29,15 +31,19 @@ export interface IProps {
     defer?: boolean;
     delay?: number;
   };
+  licenseKey: string;
 }
 
 export interface IAllProps extends Partial<IProps>, Partial<IEvents> { }
 
+/**
+ * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/} for the TinyMCE React Technical Reference
+ */
 export class Editor extends React.Component<IAllProps> {
   public static propTypes: IEditorPropTypes = EditorPropTypes;
 
   public static defaultProps: Partial<IAllProps> = {
-    cloudChannel: '6'
+    cloudChannel: '7',
   };
 
   public editor?: TinyMCEEditor;
@@ -206,7 +212,7 @@ export class Editor extends React.Component<IAllProps> {
       });
     }
     // fallback to the cloud when the tinymceScriptSrc is not specified
-    const channel = this.props.cloudChannel;
+    const channel = this.props.cloudChannel as Version; // `cloudChannel` is in `defaultProps`, so it's always defined.
     const apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
     const cloudTinyJs = `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
     return [{ src: cloudTinyJs, async, defer }];
@@ -346,6 +352,7 @@ export class Editor extends React.Component<IAllProps> {
       inline: this.inline,
       plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
       toolbar: this.props.toolbar ?? this.props.init?.toolbar,
+      ...(this.props.licenseKey ? { license_key: this.props.licenseKey } : {}),
       setup: (editor) => {
         this.editor = editor;
         this.bindHandlers({});

src/main/ts/components/EditorPropTypes.ts

@@ -23,6 +23,9 @@ export const eventPropTypes: IEventPropTypes = {
   onClick: PropTypes.func,
   onContextMenu: PropTypes.func,
   onCommentChange: PropTypes.func,
+  onCompositionEnd: PropTypes.func,
+  onCompositionStart: PropTypes.func,
+  onCompositionUpdate: PropTypes.func,
   onCopy: PropTypes.func,
   onCut: PropTypes.func,
   onDblclick: PropTypes.func,
@@ -41,6 +44,7 @@ export const eventPropTypes: IEventPropTypes = {
   onGetContent: PropTypes.func,
   onHide: PropTypes.func,
   onInit: PropTypes.func,
+  onInput: PropTypes.func,
   onKeyDown: PropTypes.func,
   onKeyPress: PropTypes.func,
   onKeyUp: PropTypes.func,
@@ -84,6 +88,7 @@ export const eventPropTypes: IEventPropTypes = {
 
 export const EditorPropTypes: IEditorPropTypes = {
   apiKey: PropTypes.string,
+  licenseKey: PropTypes.string,
   id: PropTypes.string,
   inline: PropTypes.bool,
   init: PropTypes.object,