@tinymce/tinymce-react - npm Package Compare versions

Comparing version 4.3.3-rc.20240219221352276.shadbdf516 to 4.3.3-rc.20240325045045390.sha185cf43

CHANGELOG.md

@@ -9,2 +9,22 @@ # Change log
 
+## 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
@@ -11,0 +31,0 @@

lib/cjs/main/ts/components/Editor.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';
 type EditorOptions = Parameters<TinyMCE['init']>[0];
+export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
 export interface IProps {
@@ -15,5 +16,5 @@ apiKey: string;
     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']>;
@@ -30,5 +31,9 @@ toolbar: NonNullable<EditorOptions['toolbar']>;
     };
+    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 declare class Editor extends React.Component<IAllProps> {
@@ -35,0 +40,0 @@ static propTypes: IEditorPropTypes;

lib/cjs/main/ts/components/Editor.js

@@ -35,2 +35,5 @@ "use strict";
 var EditorPropTypes_1 = require("./EditorPropTypes");
+/**
+ * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/} for the TinyMCE React Technical Reference
+ */
 var Editor = /** @class */ (function (_super) {
@@ -130,3 +133,3 @@ __extends(Editor, _super);
             }
-            var finalInit = __assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: (0, Utils_1.mergePlugins)((_a = _this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, _this.props.plugins), toolbar: (_b = _this.props.toolbar) !== null && _b !== void 0 ? _b : (_c = _this.props.init) === null || _c === void 0 ? void 0 : _c.toolbar, setup: function (editor) {
+            var finalInit = __assign(__assign(__assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: (0, Utils_1.mergePlugins)((_a = _this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, _this.props.plugins), toolbar: (_b = _this.props.toolbar) !== null && _b !== void 0 ? _b : (_c = _this.props.init) === null || _c === void 0 ? void 0 : _c.toolbar }), (_this.props.licenseKey ? { license_key: _this.props.licenseKey } : {})), { setup: function (editor) {
                     _this.editor = editor;
@@ -334,3 +337,3 @@ _this.bindHandlers({});
         // fallback to the cloud when the tinymceScriptSrc is not specified
-        var channel = this.props.cloudChannel;
+        var channel = this.props.cloudChannel; // `cloudChannel` is in `defaultProps`, so it's always defined.
         var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
@@ -378,3 +381,3 @@ var cloudTinyJs = "https://cdn.tiny.cloud/1/".concat(apiKey, "/tinymce/").concat(channel, "/tinymce.min.js");
     Editor.defaultProps = {
-        cloudChannel: '6'
+        cloudChannel: '7',
     };
@@ -381,0 +384,0 @@ return Editor;

lib/cjs/main/ts/components/EditorPropTypes.js

@@ -31,2 +31,5 @@ "use strict";
     onCommentChange: PropTypes.func,
+    onCompositionEnd: PropTypes.func,
+    onCompositionStart: PropTypes.func,
+    onCompositionUpdate: PropTypes.func,
     onCopy: PropTypes.func,
@@ -50,2 +53,3 @@ onCut: PropTypes.func,
     onInit: PropTypes.func,
+    onInput: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -91,3 +95,3 @@ onKeyPress: PropTypes.func,
 };
-exports.EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, value: PropTypes.string, tagName: PropTypes.string, cloudChannel: PropTypes.string, plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), disabled: PropTypes.bool, textareaName: PropTypes.string, tinymceScriptSrc: PropTypes.oneOfType([
+exports.EditorPropTypes = __assign({ apiKey: PropTypes.string, licenseKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, value: PropTypes.string, tagName: PropTypes.string, cloudChannel: PropTypes.string, plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), disabled: PropTypes.bool, textareaName: PropTypes.string, tinymceScriptSrc: PropTypes.oneOfType([
         PropTypes.string,
@@ -94,0 +98,0 @@ PropTypes.arrayOf(PropTypes.string),

lib/cjs/main/ts/Events.d.ts

@@ -8,2 +8,5 @@ import { Editor as TinyMCEEditor, EditorEvent, Events } from 'tinymce';
     onClick: EEventHandler<'click'>;
+    onCompositionEnd: EEventHandler<'compositionend'>;
+    onCompositionStart: EEventHandler<'compositionstart'>;
+    onCompositionUpdate: EEventHandler<'compositionupdate'>;
     onContextMenu: EEventHandler<'contextmenu'>;
@@ -22,2 +25,3 @@ onCopy: EEventHandler<'copy'>;
     onFocusOut: EEventHandler<'focusout'>;
+    onInput: EEventHandler<'input'>;
     onKeyDown: EEventHandler<'keydown'>;
@@ -24,0 +28,0 @@ onKeyPress: EEventHandler<'keypress'>;

lib/es2015/main/ts/components/Editor.d.ts

@@ -7,2 +7,3 @@ import * as React from 'react';
 type EditorOptions = Parameters<TinyMCE['init']>[0];
+export type Version = `${'4' | '5' | '6' | '7'}${'' | '-dev' | '-testing' | `.${number}` | `.${number}.${number}`}`;
 export interface IProps {
@@ -15,5 +16,5 @@ apiKey: string;
     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']>;
@@ -30,5 +31,9 @@ toolbar: NonNullable<EditorOptions['toolbar']>;
     };
+    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 declare class Editor extends React.Component<IAllProps> {
@@ -35,0 +40,0 @@ static propTypes: IEditorPropTypes;

lib/es2015/main/ts/components/Editor.js

@@ -32,2 +32,5 @@ var __extends = (this && this.__extends) || (function () {
 import { EditorPropTypes } from './EditorPropTypes';
+/**
+ * @see {@link https://www.tiny.cloud/docs/tinymce/7/react-ref/} for the TinyMCE React Technical Reference
+ */
 var Editor = /** @class */ (function (_super) {
@@ -127,3 +130,3 @@ __extends(Editor, _super);
             }
-            var finalInit = __assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: mergePlugins((_a = _this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, _this.props.plugins), toolbar: (_b = _this.props.toolbar) !== null && _b !== void 0 ? _b : (_c = _this.props.init) === null || _c === void 0 ? void 0 : _c.toolbar, setup: function (editor) {
+            var finalInit = __assign(__assign(__assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: mergePlugins((_a = _this.props.init) === null || _a === void 0 ? void 0 : _a.plugins, _this.props.plugins), toolbar: (_b = _this.props.toolbar) !== null && _b !== void 0 ? _b : (_c = _this.props.init) === null || _c === void 0 ? void 0 : _c.toolbar }), (_this.props.licenseKey ? { license_key: _this.props.licenseKey } : {})), { setup: function (editor) {
                     _this.editor = editor;
@@ -331,3 +334,3 @@ _this.bindHandlers({});
         // fallback to the cloud when the tinymceScriptSrc is not specified
-        var channel = this.props.cloudChannel;
+        var channel = this.props.cloudChannel; // `cloudChannel` is in `defaultProps`, so it's always defined.
         var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
@@ -375,3 +378,3 @@ var cloudTinyJs = "https://cdn.tiny.cloud/1/".concat(apiKey, "/tinymce/").concat(channel, "/tinymce.min.js");
     Editor.defaultProps = {
-        cloudChannel: '6'
+        cloudChannel: '7',
     };
@@ -378,0 +381,0 @@ return Editor;

lib/es2015/main/ts/components/EditorPropTypes.js

@@ -28,2 +28,5 @@ var __assign = (this && this.__assign) || function () {
     onCommentChange: PropTypes.func,
+    onCompositionEnd: PropTypes.func,
+    onCompositionStart: PropTypes.func,
+    onCompositionUpdate: PropTypes.func,
     onCopy: PropTypes.func,
@@ -47,2 +50,3 @@ onCut: PropTypes.func,
     onInit: PropTypes.func,
+    onInput: PropTypes.func,
     onKeyDown: PropTypes.func,
@@ -88,3 +92,3 @@ onKeyPress: PropTypes.func,
 };
-export var EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, value: PropTypes.string, tagName: PropTypes.string, cloudChannel: PropTypes.string, plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), disabled: PropTypes.bool, textareaName: PropTypes.string, tinymceScriptSrc: PropTypes.oneOfType([
+export var EditorPropTypes = __assign({ apiKey: PropTypes.string, licenseKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, value: PropTypes.string, tagName: PropTypes.string, cloudChannel: PropTypes.string, plugins: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]), disabled: PropTypes.bool, textareaName: PropTypes.string, tinymceScriptSrc: PropTypes.oneOfType([
         PropTypes.string,
@@ -91,0 +95,0 @@ PropTypes.arrayOf(PropTypes.string),

lib/es2015/main/ts/Events.d.ts

@@ -8,2 +8,5 @@ import { Editor as TinyMCEEditor, EditorEvent, Events } from 'tinymce';
     onClick: EEventHandler<'click'>;
+    onCompositionEnd: EEventHandler<'compositionend'>;
+    onCompositionStart: EEventHandler<'compositionstart'>;
+    onCompositionUpdate: EEventHandler<'compositionupdate'>;
     onContextMenu: EEventHandler<'contextmenu'>;
@@ -22,2 +25,3 @@ onCopy: EEventHandler<'copy'>;
     onFocusOut: EEventHandler<'focusout'>;
+    onInput: EEventHandler<'input'>;
     onKeyDown: EEventHandler<'keydown'>;
@@ -24,0 +28,0 @@ onKeyPress: EEventHandler<'keypress'>;

package.json

@@ -30,3 +30,3 @@ {
     "prop-types": "^15.6.2",
-    "tinymce": "^6.0.0 || ^5.5.1"
+    "tinymce": "^7.0.0 || ^6.0.0 || ^5.5.1"
   },
@@ -43,4 +43,4 @@ "peerDependencies": {
     "@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",
@@ -50,13 +50,11 @@ "@ephox/mcagar": "^9.0.0-alpha.0",
     "@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",
@@ -70,10 +68,12 @@ "@types/prop-types": "^15.7.10",
     "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.20240219221352276.shadbdf516",
+  "version": "4.3.3-rc.20240325045045390.sha185cf43",
   "name": "@tinymce/tinymce-react"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99945

increased by2.74%

Lines of code

1828

increased by1.78%

Dependency changes

• + Addedtinymce@7.6.0(transitive)

• - Removedtinymce@6.8.5(transitive)

• Updatedtinymce@^7.0.0 || ^6.0.0 || ^5.5.1