@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.10.0-rc.20210201005129775.7f1e3d8 to 3.10.0-rc.20210201060743235.2a2fde0

CHANGELOG.md

@@ -7,2 +7,6 @@ # Change log
 
+## [Unreleased]
+### Fixed
+- Fixed event binding to lookup handlers at call time instead of rebinding on every change.
+
 ## [3.9.0] - 2021-01-11
@@ -9,0 +13,0 @@ ### Changed

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

@@ -60,2 +60,3 @@ /**
     private getInitialValue;
+    private bindHandlers;
     private handleEditorChange;
@@ -62,0 +63,0 @@ private handleInit;

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

@@ -71,3 +71,3 @@ "use strict";
                 }
-                Utils_1.bindHandlers(editor, {}, _this.props, _this.boundHandlers);
+                _this.bindHandlers({});
             }
@@ -106,3 +106,3 @@ };
         if (this.editor && this.editor.initialized) {
-            Utils_1.bindHandlers(this.editor, prevProps, this.props, this.boundHandlers);
+            this.bindHandlers(prevProps);
             this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
@@ -181,2 +181,9 @@ if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {
     };
+    Editor.prototype.bindHandlers = function (prevProps) {
+        var _this = this;
+        if (this.editor !== undefined) {
+            // typescript chokes trying to understand the type of the lookup function
+            Utils_1.configHandlers(this.editor, prevProps, this.props, this.boundHandlers, function (key) { return _this.props[key]; });
+        }
+    };
     Editor.propTypes = EditorPropTypes_1.EditorPropTypes;
@@ -183,0 +190,0 @@ Editor.defaultProps = {

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

@@ -8,9 +8,12 @@ /**
  */
+import { IEventPropTypes } from './components/EditorPropTypes';
 import { IAllProps } from './components/Editor';
 import { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
 export declare const isFunction: (x: unknown) => x is Function;
-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;
+declare type PropLookup = <K extends keyof IAllProps>(key: K) => IAllProps[K] | undefined;
+export declare const configHandlers2: <H>(handlerLookup: PropLookup, on: (name: string, handler: H) => void, off: (name: string, handler: H) => void, adapter: <K extends "onBeforePaste" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onDblclick" | "onDrag" | "onDragDrop" | "onDragEnd" | "onDragGesture" | "onDragOver" | "onDrop" | "onFocus" | "onFocusIn" | "onFocusOut" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onPaste" | "onSelectionChange" | "onActivate" | "onAddUndo" | "onBeforeAddUndo" | "onBeforeExecCommand" | "onBeforeGetContent" | "onBeforeRenderUI" | "onBeforeSetContent" | "onChange" | "onClearUndos" | "onDeactivate" | "onDirty" | "onExecCommand" | "onGetContent" | "onHide" | "onInit" | "onLoadContent" | "onNodeChange" | "onPostProcess" | "onPostRender" | "onPreProcess" | "onProgressState" | "onRedo" | "onRemove" | "onReset" | "onSaveContent" | "onSetAttrib" | "onObjectResizeStart" | "onObjectResized" | "onObjectSelected" | "onSetContent" | "onShow" | "onSubmit" | "onUndo" | "onVisualAid">(lookup: PropLookup, key: K) => H, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, H>) => void;
+export declare const configHandlers: (editor: TinyMCEEditor, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>, lookup: PropLookup) => 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[];
+export {};

lib/cjs/main/ts/Utils.js

@@ -9,11 +9,4 @@ "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.bindHandlers2 = exports.bindHandlers = exports.isFunction = void 0;
+exports.mergePlugins = exports.isTextarea = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
 var EditorPropTypes_1 = require("./components/EditorPropTypes");
@@ -24,12 +17,8 @@ var isFunction = function (x) { return typeof x === 'function'; };
 var eventAttrToEventName = function (attrName) { return attrName.substr(2); };
-// eslint-disable-next-line max-len
-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 configHandlers2 = function (handlerLookup, 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) {
+    removedKeys.forEach(function (key) {
         // remove event handler
@@ -41,14 +30,14 @@ var eventName = eventAttrToEventName(key);
     });
-    __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);
-        }
+    addedKeys.forEach(function (key) {
+        var wrappedHandler = adapter(handlerLookup, key);
+        var eventName = eventAttrToEventName(key);
+        boundHandlers[eventName] = wrappedHandler;
+        on(eventName, wrappedHandler);
     });
 };
-exports.bindHandlers2 = bindHandlers2;
+exports.configHandlers2 = configHandlers2;
+var configHandlers = function (editor, prevProps, props, boundHandlers, lookup) {
+    return exports.configHandlers2(lookup, editor.on.bind(editor), editor.off.bind(editor), function (handlerLookup, key) { return function (e) { var _a; return (_a = handlerLookup(key)) === null || _a === void 0 ? void 0 : _a(e, editor); }; }, prevProps, props, boundHandlers);
+};
+exports.configHandlers = configHandlers;
 var unique = 0;
@@ -55,0 +44,0 @@ var uuid = function (prefix) {

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

@@ -60,2 +60,3 @@ /**
     private getInitialValue;
+    private bindHandlers;
     private handleEditorChange;
@@ -62,0 +63,0 @@ private handleInit;

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

@@ -35,3 +35,3 @@ /**
 import { getTinymce } from '../TinyMCE';
-import { bindHandlers, isFunction, isTextarea, mergePlugins, uuid } from '../Utils';
+import { isFunction, isTextarea, mergePlugins, uuid, configHandlers } from '../Utils';
 import { EditorPropTypes } from './EditorPropTypes';
@@ -69,3 +69,3 @@ var Editor = /** @class */ (function (_super) {
                 }
-                bindHandlers(editor, {}, _this.props, _this.boundHandlers);
+                _this.bindHandlers({});
             }
@@ -104,3 +104,3 @@ };
         if (this.editor && this.editor.initialized) {
-            bindHandlers(this.editor, prevProps, this.props, this.boundHandlers);
+            this.bindHandlers(prevProps);
             this.currentContent = (_a = this.currentContent) !== null && _a !== void 0 ? _a : this.editor.getContent({ format: this.props.outputFormat });
@@ -179,2 +179,9 @@ if (typeof this.props.value === 'string' && this.props.value !== prevProps.value && this.props.value !== this.currentContent) {
     };
+    Editor.prototype.bindHandlers = function (prevProps) {
+        var _this = this;
+        if (this.editor !== undefined) {
+            // typescript chokes trying to understand the type of the lookup function
+            configHandlers(this.editor, prevProps, this.props, this.boundHandlers, function (key) { return _this.props[key]; });
+        }
+    };
     Editor.propTypes = EditorPropTypes;
@@ -181,0 +188,0 @@ Editor.defaultProps = {

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

@@ -8,9 +8,12 @@ /**
  */
+import { IEventPropTypes } from './components/EditorPropTypes';
 import { IAllProps } from './components/Editor';
 import { Editor as TinyMCEEditor, EditorEvent } from 'tinymce';
 export declare const isFunction: (x: unknown) => x is Function;
-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;
+declare type PropLookup = <K extends keyof IAllProps>(key: K) => IAllProps[K] | undefined;
+export declare const configHandlers2: <H>(handlerLookup: PropLookup, on: (name: string, handler: H) => void, off: (name: string, handler: H) => void, adapter: <K extends "onBeforePaste" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onDblclick" | "onDrag" | "onDragDrop" | "onDragEnd" | "onDragGesture" | "onDragOver" | "onDrop" | "onFocus" | "onFocusIn" | "onFocusOut" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onMouseUp" | "onPaste" | "onSelectionChange" | "onActivate" | "onAddUndo" | "onBeforeAddUndo" | "onBeforeExecCommand" | "onBeforeGetContent" | "onBeforeRenderUI" | "onBeforeSetContent" | "onChange" | "onClearUndos" | "onDeactivate" | "onDirty" | "onExecCommand" | "onGetContent" | "onHide" | "onInit" | "onLoadContent" | "onNodeChange" | "onPostProcess" | "onPostRender" | "onPreProcess" | "onProgressState" | "onRedo" | "onRemove" | "onReset" | "onSaveContent" | "onSetAttrib" | "onObjectResizeStart" | "onObjectResized" | "onObjectSelected" | "onSetContent" | "onShow" | "onSubmit" | "onUndo" | "onVisualAid">(lookup: PropLookup, key: K) => H, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, H>) => void;
+export declare const configHandlers: (editor: TinyMCEEditor, prevProps: Partial<IAllProps>, props: Partial<IAllProps>, boundHandlers: Record<string, (event: EditorEvent<any>) => unknown>, lookup: PropLookup) => 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[];
+export {};

lib/es2015/main/ts/Utils.js

@@ -8,9 +8,2 @@ /**
  */
-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';
@@ -20,11 +13,8 @@ export var isFunction = function (x) { return typeof x === 'function'; };
 var eventAttrToEventName = function (attrName) { return attrName.substr(2); };
-// eslint-disable-next-line max-len
-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) {
+export var configHandlers2 = function (handlerLookup, 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) {
+    removedKeys.forEach(function (key) {
         // remove event handler
@@ -36,13 +26,12 @@ var eventName = eventAttrToEventName(key);
     });
-    __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);
-        }
+    addedKeys.forEach(function (key) {
+        var wrappedHandler = adapter(handlerLookup, key);
+        var eventName = eventAttrToEventName(key);
+        boundHandlers[eventName] = wrappedHandler;
+        on(eventName, wrappedHandler);
     });
 };
+export var configHandlers = function (editor, prevProps, props, boundHandlers, lookup) {
+    return configHandlers2(lookup, editor.on.bind(editor), editor.off.bind(editor), function (handlerLookup, key) { return function (e) { var _a; return (_a = handlerLookup(key)) === null || _a === void 0 ? void 0 : _a(e, editor); }; }, prevProps, props, boundHandlers);
+};
 var unique = 0;
@@ -49,0 +38,0 @@ export var uuid = function (prefix) {

package.json

@@ -40,2 +40,3 @@ {
     "@ephox/bedrock-server": "^11.0.2",
+    "@ephox/katamari": "^7.1.1",
     "@ephox/mcagar": "^5.1.1",
@@ -69,4 +70,4 @@ "@ephox/sand": "^4.0.3",
   },
-  "version": "3.10.0-rc.20210201005129775.7f1e3d8",
+  "version": "3.10.0-rc.20210201060743235.2a2fde0",
   "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

64386

increased by3.15%

Lines of code

1319

increased by0.46%

Worsened metrics

Dev dependency count

32

increased by3.23%

No dependency changes