INT: Update tinymce to version 7 and update dependencies.

CHANGELOG.md

@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Update README.md to contain license key info.
+- Added storybook dependence's for various `storybook/...` packages.
+- Added `react` and `react-dom` to dev-dependencies due to certain packages required it.
+- Added events `Input`, `CompositionEnd`, `CompositionStart` & `CompositionUpdate`.
+- Added `licenseKey` to config option.
+
+### Changed
+
+- Bumped `tinymce` version to `7.1.1` latest.
+- Bumped default `cloud` channel to use `7`.
+
 ## 2.0.0 - 2023-12-04
 
 ### Changed

README.md

@@ -70,6 +70,20 @@ Type: string
 <Editor
   apiKey="your-api-key"
 />
+
+```
+#### License Key
+
+Tiny Cloud license key. Use this when self-hosting TinyMCE instead of loading from Tiny Cloud.
+
+Default value: undefined
+Type: "gpl" or a valid TinyMCE license key
+
+##### Example using licenseKey
+```
+<Editor
+  licenseKey="your-license-key"
+/>
 ```
 
 #### Channel

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-svelte",
-  "version": "2.0.3-rc",
+  "version": "3.0.0-rc",
   "description": "TinyMCE Svelte Component",
   "private": false,
   "publishConfig": {
@@ -54,30 +54,39 @@
     "@storybook/addon-essentials": "^6.3.7",
     "@storybook/addon-links": "^6.3.7",
     "@storybook/addon-svelte-csf": "^1.1.0",
+    "@storybook/addons": "^6.2.9",
+    "@storybook/api": "^6.2.9",
     "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/client-api": "^6.2.9",
+    "@storybook/client-logger": "^6.2.9",
+    "@storybook/components": "^6.2.9",
+    "@storybook/core-events": "^6.2.9",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/storybook-deployer": "^2.8.10",
     "@storybook/svelte": "^6.3.7",
+    "@storybook/theming": "^6.2.9",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^1.9.2",
-    "@tsconfig/svelte": "^2.0.0",
+    "@tsconfig/svelte": "^5.0.4",
     "@typescript-eslint/eslint-plugin": "^6.9.0",
     "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^8.2.2",
     "eslint": "^7.32.0",
     "eslint-plugin-svelte": "^2.34.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "rollup": "^2.56.2",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^4.0.0",
-    "svelte-check": "^3.4.3",
-    "svelte-loader": "^3.1.8",
-    "svelte-preprocess": "^5.0.3",
-    "tinymce": "^6.7.2",
-    "tslib": "^2.3.1",
-    "typescript": "^5.0.0",
+    "svelte": "^4.2.17",
+    "svelte-check": "^3.8.0",
+    "svelte-loader": "^3.2.0",
+    "svelte-preprocess": "^5.1.4",
+    "tinymce": "^7.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
     "webpack": "^5.76.2"
   },
   "resolutions": {

src/main/component/Editor.svelte

@@ -1,3 +1,9 @@
+<!--
+  @component
+
+  @see {@link https://www.tiny.cloud/docs/tinymce/7/svelte-ref/} for the TinyMCE Svelte Technical Reference.
+-->
+
 <script lang="ts" context="module">
   declare let global: { tinymce: TinyMCE }
   declare let window: Window & { tinymce: TinyMCE }
@@ -55,13 +61,15 @@
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import type { TinyMCE, Editor as TinyMCEEditor } from 'tinymce';
   type EditorOptions = Parameters<TinyMCE['init']>[0];
+  type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
 
   import { bindHandlers } from './Utils';
   export let id: string = uuid('tinymce-svelte'); // default values
   export let inline: boolean | undefined = undefined;
   export let disabled: boolean = false;
   export let apiKey: string = 'no-api-key';
-  export let channel: string = '6';
+  export let licenseKey: string | undefined = undefined;
+  export let channel: Version = '7';
   export let scriptSrc: string = undefined;
   export let conf: EditorOptions = {};
   export let modelEvents: string = 'change input undo redo';
@@ -110,6 +118,7 @@
       target: element,
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
       readonly: disabled,
+      license_key: licenseKey,
       setup: (editor: TinyMCEEditor) => {
         editorRef = editor;
         editor.on('init', () => {

src/main/component/Utils.ts

@@ -12,6 +12,10 @@ const validEvents = [
   'Change',
   'ClearUndos',
   'Click',
+  'CommentChange',
+  'CompositionEnd',
+  'CompositionStart',
+  'CompositionUpdate',
   'ContextMenu',
   'Copy',
   'Cut',
@@ -31,6 +35,7 @@ const validEvents = [
   'GetContent',
   'Hide',
   'Init',
+  'Input',
   'KeyDown',
   'KeyPress',
   'KeyUp',

tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "sourceMap": true,
     "types": ["svelte"],
-    "ignoreDeprecations": "5.0"
+    "ignoreDeprecations": "5.0",
+    "noImplicitAny": false
   },
 
   "include": ["src/**/*"],