@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.8.2 to 3.8.3

CHANGELOG.md

@@ -0,1 +1,5 @@
+## 3.8.3 (2020-12-08)
+* Fixed event binding to only rebind handler on changes to the specific property instead of any property.
+* Updated TinyMCE types to 5.6 release.
+
 ## 3.8.2 (2020-12-03)
@@ -2,0 +6,0 @@ * Fixed external changes not generating undo levels

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

@@ -71,3 +71,3 @@ "use strict";
                 }
-                Utils_1.bindHandlers(editor, _this.props, _this.boundHandlers);
+                Utils_1.bindHandlers(editor, {}, _this.props, _this.boundHandlers);
             }
@@ -106,3 +106,3 @@ };
         if (this.editor && this.editor.initialized) {
-            Utils_1.bindHandlers(this.editor, this.props, this.boundHandlers);
+            Utils_1.bindHandlers(this.editor, prevProps, this.props, this.boundHandlers);
             this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
@@ -109,0 +109,0 @@ if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {

lib/cjs/main/ts/Utils.d.ts

@@ -11,5 +11,6 @@ /**
 export declare const isFunction: (x: unknown) => x is Function;
-export declare const bindHandlers: (editor: TinyMCEEditor, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>) => void;
+export declare const bindHandlers: (editor: TinyMCEEditor, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>) => void;
+export declare const bindHandlers2: <H>(on: (name: string, handler: H) => void, off: (name: string, handler: H) => void, adapter: (handler: (event: EditorEvent<unknown>, editor: TinyMCEEditor) => unknown) => H, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, H>) => void;
 export declare const uuid: (prefix: string) => string;
 export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];

lib/cjs/main/ts/Utils.js

@@ -9,33 +9,51 @@ "use strict";
  */
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergePlugins = exports.isTextarea = exports.uuid = exports.bindHandlers = exports.isFunction = void 0;
+exports.mergePlugins = exports.isTextarea = exports.uuid = exports.bindHandlers2 = exports.bindHandlers = exports.isFunction = void 0;
 var EditorPropTypes_1 = require("./components/EditorPropTypes");
-exports.isFunction = function (x) { return typeof x === 'function'; };
+var isFunction = function (x) { return typeof x === 'function'; };
+exports.isFunction = isFunction;
 var isEventProp = function (name) {
     return name in EditorPropTypes_1.eventPropTypes;
 };
-var findEventHandlers = function (props) {
-    return Object.keys(props)
-        .filter(isEventProp)
-        .filter(function (name) { return exports.isFunction(props[name]); })
-        .map(function (name) { return ({
-        handler: props[name],
-        eventName: name.substring(2)
-    }); });
+var eventAttrToEventName = function (attrName) {
+    return attrName.substr(2);
 };
-exports.bindHandlers = function (editor, props, boundHandlers) {
-    findEventHandlers(props).forEach(function (found) {
-        // Unbind old handler
-        var oldHandler = boundHandlers[found.eventName];
-        if (exports.isFunction(oldHandler)) {
-            editor.off(found.eventName, oldHandler);
+var bindHandlers = function (editor, prevProps, props, boundHandlers) {
+    return exports.bindHandlers2(editor.on.bind(editor), editor.off.bind(editor), function (handler) { return function (e) { return handler(e, editor); }; }, prevProps, props, boundHandlers);
+};
+exports.bindHandlers = bindHandlers;
+var bindHandlers2 = function (on, off, adapter, prevProps, props, boundHandlers) {
+    var prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+    var currEventKeys = Object.keys(props).filter(isEventProp);
+    var removedKeys = prevEventKeys.filter(function (key) { return props[key] === undefined; });
+    var changedKeys = currEventKeys.filter(function (key) { return prevProps[key] !== undefined && prevProps[key] != props[key]; });
+    var addedKeys = currEventKeys.filter(function (key) { return prevProps[key] === undefined; });
+    __spreadArrays(removedKeys, changedKeys).forEach(function (key) {
+        // remove event handler
+        var eventName = eventAttrToEventName(key);
+        var wrappedHandler = boundHandlers[eventName];
+        off(eventName, wrappedHandler);
+        delete boundHandlers[eventName];
+    });
+    __spreadArrays(changedKeys, addedKeys).forEach(function (key) {
+        // add event handler
+        var handler = props[key];
+        if (handler !== undefined) {
+            var eventName = eventAttrToEventName(key);
+            var wrappedHandler = adapter(handler);
+            boundHandlers[eventName] = wrappedHandler;
+            on(eventName, wrappedHandler);
         }
-        // Bind new handler
-        var newHandler = function (e) { return found.handler(e, editor); };
-        boundHandlers[found.eventName] = newHandler;
-        editor.on(found.eventName, newHandler);
     });
 };
+exports.bindHandlers2 = bindHandlers2;
 var unique = 0;
-exports.uuid = function (prefix) {
+var uuid = function (prefix) {
     var time = Date.now();
@@ -46,5 +64,7 @@ var random = Math.floor(Math.random() * 1000000000);
 };
-exports.isTextarea = function (element) {
+exports.uuid = uuid;
+var isTextarea = function (element) {
     return element !== null && element.tagName.toLowerCase() === 'textarea';
 };
+exports.isTextarea = isTextarea;
 var normalizePluginArray = function (plugins) {
@@ -56,4 +76,5 @@ if (typeof plugins === 'undefined' || plugins === '') {
 };
-exports.mergePlugins = function (initPlugins, inputPlugins) {
+var mergePlugins = function (initPlugins, inputPlugins) {
     return normalizePluginArray(initPlugins).concat(normalizePluginArray(inputPlugins));
 };
+exports.mergePlugins = mergePlugins;

lib/cjs/test/ts/browser/EditorBehaviorTest.js

@@ -7,5 +7,12 @@ "use strict";
 var miniature_1 = require("@tinymce/miniature");
+var sand_1 = require("@ephox/sand");
 var TinyMCE_1 = require("../../../main/ts/TinyMCE");
 var TestHelpers_1 = require("../alien/TestHelpers");
 bedrock_client_1.UnitTest.asynctest('EditorBehaviorTest', function (success, failure) {
+    var browser = sand_1.PlatformDetection.detect().browser;
+    if (browser.isIE()) {
+        // INT-2278: This test currently times out in IE so we are skipping it
+        success();
+        return;
+    }
     var isEditor = function (val) {
@@ -12,0 +19,0 @@ var tinymce = TinyMCE_1.getTinymce();

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

@@ -68,3 +68,3 @@ /**
                 }
-                bindHandlers(editor, _this.props, _this.boundHandlers);
+                bindHandlers(editor, {}, _this.props, _this.boundHandlers);
             }
@@ -103,3 +103,3 @@ };
         if (this.editor && this.editor.initialized) {
-            bindHandlers(this.editor, this.props, this.boundHandlers);
+            bindHandlers(this.editor, prevProps, this.props, this.boundHandlers);
             this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
@@ -106,0 +106,0 @@ if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {

lib/es2015/main/ts/Utils.d.ts

@@ -11,5 +11,6 @@ /**
 export declare const isFunction: (x: unknown) => x is Function;
-export declare const bindHandlers: (editor: TinyMCEEditor, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>) => void;
+export declare const bindHandlers: (editor: TinyMCEEditor, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<unknown>) => unknown>) => void;
+export declare const bindHandlers2: <H>(on: (name: string, handler: H) => void, off: (name: string, handler: H) => void, adapter: (handler: (event: EditorEvent<unknown>, editor: TinyMCEEditor) => unknown) => H, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, H>) => void;
 export declare const uuid: (prefix: string) => string;
 export declare const isTextarea: (element: Element | null) => element is HTMLTextAreaElement;
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];

lib/es2015/main/ts/Utils.js

@@ -8,2 +8,9 @@ /**
  */
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 import { eventPropTypes } from './components/EditorPropTypes';
@@ -14,22 +21,30 @@ export var isFunction = function (x) { return typeof x === 'function'; };
 };
-var findEventHandlers = function (props) {
-    return Object.keys(props)
-        .filter(isEventProp)
-        .filter(function (name) { return isFunction(props[name]); })
-        .map(function (name) { return ({
-        handler: props[name],
-        eventName: name.substring(2)
-    }); });
+var eventAttrToEventName = function (attrName) {
+    return attrName.substr(2);
 };
-export var bindHandlers = function (editor, props, boundHandlers) {
-    findEventHandlers(props).forEach(function (found) {
-        // Unbind old handler
-        var oldHandler = boundHandlers[found.eventName];
-        if (isFunction(oldHandler)) {
-            editor.off(found.eventName, oldHandler);
+export var bindHandlers = function (editor, prevProps, props, boundHandlers) {
+    return bindHandlers2(editor.on.bind(editor), editor.off.bind(editor), function (handler) { return function (e) { return handler(e, editor); }; }, prevProps, props, boundHandlers);
+};
+export var bindHandlers2 = function (on, off, adapter, prevProps, props, boundHandlers) {
+    var prevEventKeys = Object.keys(prevProps).filter(isEventProp);
+    var currEventKeys = Object.keys(props).filter(isEventProp);
+    var removedKeys = prevEventKeys.filter(function (key) { return props[key] === undefined; });
+    var changedKeys = currEventKeys.filter(function (key) { return prevProps[key] !== undefined && prevProps[key] != props[key]; });
+    var addedKeys = currEventKeys.filter(function (key) { return prevProps[key] === undefined; });
+    __spreadArrays(removedKeys, changedKeys).forEach(function (key) {
+        // remove event handler
+        var eventName = eventAttrToEventName(key);
+        var wrappedHandler = boundHandlers[eventName];
+        off(eventName, wrappedHandler);
+        delete boundHandlers[eventName];
+    });
+    __spreadArrays(changedKeys, addedKeys).forEach(function (key) {
+        // add event handler
+        var handler = props[key];
+        if (handler !== undefined) {
+            var eventName = eventAttrToEventName(key);
+            var wrappedHandler = adapter(handler);
+            boundHandlers[eventName] = wrappedHandler;
+            on(eventName, wrappedHandler);
         }
-        // Bind new handler
-        var newHandler = function (e) { return found.handler(e, editor); };
-        boundHandlers[found.eventName] = newHandler;
-        editor.on(found.eventName, newHandler);
     });
@@ -36,0 +51,0 @@ };

lib/es2015/test/ts/browser/EditorBehaviorTest.js

@@ -5,5 +5,12 @@ import { Assertions, Chain, Logger, Pipeline, GeneralSteps } from '@ephox/agar';
 import { VersionLoader } from '@tinymce/miniature';
+import { PlatformDetection } from '@ephox/sand';
 import { getTinymce } from '../../../main/ts/TinyMCE';
 import { EventStore, cAssertContent, cSetContent } from '../alien/TestHelpers';
 UnitTest.asynctest('EditorBehaviorTest', function (success, failure) {
+    var browser = PlatformDetection.detect().browser;
+    if (browser.isIE()) {
+        // INT-2278: This test currently times out in IE so we are skipping it
+        success();
+        return;
+    }
     var isEditor = function (val) {
@@ -10,0 +17,0 @@ var tinymce = getTinymce();

package.json

 {
   "name": "@tinymce/tinymce-react",
-  "version": "3.8.2",
+  "version": "3.8.3",
   "description": "Official TinyMCE React Component",
@@ -32,3 +32,3 @@ "repository": {
     "prop-types": "^15.6.2",
-    "tinymce": "^5.5.0"
+    "tinymce": "^5.6.1"
   },
@@ -40,22 +40,23 @@ "peerDependencies": {
   "devDependencies": {
-    "@babel/core": "^7.11.6",
-    "@ephox/agar": "^5.0.1",
+    "@babel/core": "^7.12.9",
+    "@ephox/agar": "^5.1.1",
     "@ephox/bedrock-client": "^9.6.1",
     "@ephox/bedrock-server": "^9.7.1",
-    "@ephox/mcagar": "^5.0.1",
-    "@ephox/sugar": "^7.0.1",
+    "@ephox/mcagar": "^5.1.1",
+    "@ephox/sand": "^4.0.3",
+    "@ephox/sugar": "^7.0.3",
     "@ephox/tslint-rules": "^1.0.7",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/react": "^6.0.22",
+    "@storybook/react": "^6.1.10",
     "@storybook/storybook-deployer": "^2.8.6",
     "@tinymce/miniature": "^3.0.1",
-    "@types/node": "^14.11.2",
+    "@types/node": "^14.14.10",
     "@types/prop-types": "^15.5.8",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
-    "@types/storybook__addon-info": "^5.2.2",
+    "@types/storybook__addon-info": "^5.2.3",
     "@types/storybook__react": "^5.2.1",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.0",
-    "core-js": "^3.6.5",
+    "babel-loader": "^8.2.2",
+    "core-js": "^3.8.0",
     "raf": "^3.4.1",
@@ -67,7 +68,7 @@ "react": "^16.7.0",
     "tinymce-5": "npm:tinymce@^5",
-    "ts-loader": "^8.0.4",
+    "ts-loader": "^8.0.11",
     "tslint": "^6.1.3",
-    "typescript": "^4.0.3",
-    "webpack": "^4.44.2"
+    "typescript": "^4.1.2",
+    "webpack": "^5.9.0"
   }
 }

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

107991

increased by10.46%

Number of package files

56

increased by7.69%

Lines of code

2285

increased by7.63%

Worsened metrics

Dev dependency count

31

increased by3.33%

Dependency changes

• Updatedtinymce@^5.6.1