@tinymce/tinymce-react - npm Package Compare versions

Comparing version 4.3.3-feature.20240321202715926.sha32cec42 to 4.3.3-feature.20240321210215708.sha0c08f3b

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

@@ -7,4 +7,10 @@ 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 CloudHostedProps {
+    apiKey: string;
+}
+export interface HybridOrSelfHostedProps {
+    licenseKey: string;
+}
 export interface IProps {
-    apiKey: string;
     id: string;
@@ -15,5 +21,5 @@ inline: boolean;
     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']>;
@@ -31,4 +37,6 @@ toolbar: NonNullable<EditorOptions['toolbar']>;
 }
-export interface IAllProps extends Partial<IProps>, Partial<IEvents> {
-}
+export type IAllProps = (CloudHostedProps | HybridOrSelfHostedProps) & Partial<IProps & 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> {
@@ -45,3 +53,3 @@ static propTypes: IEditorPropTypes;
     private valueCursor;
-    constructor(props: Partial<IAllProps>);
+    constructor(props: IAllProps);
     private get view();
@@ -48,0 +56,0 @@ componentDidUpdate(prevProps: Partial<IAllProps>): void;

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 }), ('licenseKey' in _this.props && _this.props.licenseKey ? { license_key: _this.props.licenseKey } : {})), { setup: function (editor) {
                     _this.editor = editor;
@@ -252,3 +255,3 @@ _this.bindHandlers({});
         }
-        else if (Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
+        else if ('tinymceScriptSrc' in this.props && Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
             (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, new Error('No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array.'));
@@ -318,3 +321,3 @@ }
         var defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
-        if (this.props.tinymceScriptSrc !== undefined) {
+        if ('tinymceScriptSrc' in this.props && this.props.tinymceScriptSrc !== undefined) {
             if (typeof this.props.tinymceScriptSrc === 'string') {
@@ -336,4 +339,4 @@ return [{ src: this.props.tinymceScriptSrc, async: async, defer: defer }];
         // fallback to the cloud when the tinymceScriptSrc is not specified
-        var channel = this.props.cloudChannel;
-        var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+        var channel = this.props.cloudChannel; // `cloudChannel` is in `defaultProps`, so it's always defined.
+        var apiKey = 'apiKey' in this.props && this.props.apiKey ? this.props.apiKey : 'no-api-key';
         var cloudTinyJs = "https://cdn.tiny.cloud/1/".concat(apiKey, "/tinymce/").concat(channel, "/tinymce.min.js");
@@ -380,3 +383,3 @@ return [{ src: cloudTinyJs, async: async, defer: defer }];
     Editor.defaultProps = {
-        cloudChannel: '6'
+        cloudChannel: '7',
     };
@@ -383,0 +386,0 @@ return Editor;

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

 import * as PropTypes from 'prop-types';
 import { IEvents } from '../Events';
-import { IProps } from './Editor';
+import { HybridOrSelfHostedProps, IProps, CloudHostedProps } from './Editor';
 export type CopyProps<T> = {
@@ -8,5 +8,5 @@ [P in keyof T]: PropTypes.Requireable<unknown>;
 export type IEventPropTypes = CopyProps<IEvents>;
-export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps> {
+export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps & CloudHostedProps & HybridOrSelfHostedProps> {
 }
 export declare const eventPropTypes: IEventPropTypes;
 export declare const EditorPropTypes: IEditorPropTypes;

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'>;
@@ -52,2 +55,3 @@ onCopy: EEventHandler<'copy'>;
     onInit: EEventHandler<'init'>;
+    onInput: EEventHandler<'input'>;
     onLoadContent: EEventHandler<'LoadContent'>;
@@ -54,0 +58,0 @@ onNodeChange: EEventHandler<'NodeChange'>;

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

@@ -7,4 +7,10 @@ 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 CloudHostedProps {
+    apiKey: string;
+}
+export interface HybridOrSelfHostedProps {
+    licenseKey: string;
+}
 export interface IProps {
-    apiKey: string;
     id: string;
@@ -15,5 +21,5 @@ inline: boolean;
     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']>;
@@ -31,4 +37,6 @@ toolbar: NonNullable<EditorOptions['toolbar']>;
 }
-export interface IAllProps extends Partial<IProps>, Partial<IEvents> {
-}
+export type IAllProps = (CloudHostedProps | HybridOrSelfHostedProps) & Partial<IProps & 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> {
@@ -45,3 +53,3 @@ static propTypes: IEditorPropTypes;
     private valueCursor;
-    constructor(props: Partial<IAllProps>);
+    constructor(props: IAllProps);
     private get view();
@@ -48,0 +56,0 @@ componentDidUpdate(prevProps: Partial<IAllProps>): void;

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 }), ('licenseKey' in _this.props && _this.props.licenseKey ? { license_key: _this.props.licenseKey } : {})), { setup: function (editor) {
                     _this.editor = editor;
@@ -249,3 +252,3 @@ _this.bindHandlers({});
         }
-        else if (Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
+        else if ('tinymceScriptSrc' in this.props && Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
             (_b = (_a = this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, new Error('No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array.'));
@@ -315,3 +318,3 @@ }
         var defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
-        if (this.props.tinymceScriptSrc !== undefined) {
+        if ('tinymceScriptSrc' in this.props && this.props.tinymceScriptSrc !== undefined) {
             if (typeof this.props.tinymceScriptSrc === 'string') {
@@ -333,4 +336,4 @@ return [{ src: this.props.tinymceScriptSrc, async: async, defer: defer }];
         // fallback to the cloud when the tinymceScriptSrc is not specified
-        var channel = this.props.cloudChannel;
-        var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+        var channel = this.props.cloudChannel; // `cloudChannel` is in `defaultProps`, so it's always defined.
+        var apiKey = 'apiKey' in this.props && this.props.apiKey ? this.props.apiKey : 'no-api-key';
         var cloudTinyJs = "https://cdn.tiny.cloud/1/".concat(apiKey, "/tinymce/").concat(channel, "/tinymce.min.js");
@@ -377,3 +380,3 @@ return [{ src: cloudTinyJs, async: async, defer: defer }];
     Editor.defaultProps = {
-        cloudChannel: '6'
+        cloudChannel: '7',
     };
@@ -380,0 +383,0 @@ return Editor;

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

 import * as PropTypes from 'prop-types';
 import { IEvents } from '../Events';
-import { IProps } from './Editor';
+import { HybridOrSelfHostedProps, IProps, CloudHostedProps } from './Editor';
 export type CopyProps<T> = {
@@ -8,5 +8,5 @@ [P in keyof T]: PropTypes.Requireable<unknown>;
 export type IEventPropTypes = CopyProps<IEvents>;
-export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps> {
+export interface IEditorPropTypes extends IEventPropTypes, CopyProps<IProps & CloudHostedProps & HybridOrSelfHostedProps> {
 }
 export declare const eventPropTypes: IEventPropTypes;
 export declare const EditorPropTypes: IEditorPropTypes;

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'>;
@@ -52,2 +55,3 @@ onCopy: EEventHandler<'copy'>;
     onInit: EEventHandler<'init'>;
+    onInput: EEventHandler<'input'>;
     onLoadContent: EEventHandler<'LoadContent'>;
@@ -54,0 +58,0 @@ onNodeChange: EEventHandler<'NodeChange'>;

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-feature.20240321202715926.sha32cec42",
+  "version": "4.3.3-feature.20240321210215708.sha0c08f3b",
   "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

99767

increased by2.56%

Lines of code

1834

increased by2.12%

Dependency changes

• + Addedtinymce@7.6.0(transitive)

• - Removedtinymce@6.8.5(transitive)

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