@tinymce/tinymce-react - npm Package Compare versions

Comparing version 3.4.0 to 3.5.0

CHANGELOG.md

@@ -0,1 +1,4 @@
+## 3.5.0 (2020-02-24)
+* Added new `tinymceScriptSrc` prop for specifying an external version of TinyMCE to lazy load
+
 ## 3.4.0 (2020-01-31)
@@ -2,0 +5,0 @@ * Added new `outputFormat` prop for specifying the format of the content emitted via the `onEditorChange` event

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

@@ -26,2 +26,3 @@ /**
     textareaName: string;
+    tinymceScriptSrc: string;
 }
@@ -47,2 +48,3 @@ export interface IAllProps extends Partial<IProps>, Partial<IEvents> {
     }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    private getScriptSrc;
     private initialise;
@@ -49,0 +51,0 @@ private initEditor;

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

@@ -35,7 +35,7 @@ "use strict";
 var React = require("react");
-var ScriptLoader = require("../ScriptLoader");
+var ScriptLoader_1 = require("../ScriptLoader");
 var TinyMCE_1 = require("../TinyMCE");
 var Utils_1 = require("../Utils");
 var EditorPropTypes_1 = require("./EditorPropTypes");
-var scriptState = ScriptLoader.create();
+var util_1 = require("util");
 var Editor = /** @class */ (function (_super) {
@@ -83,6 +83,3 @@ __extends(Editor, _super);
         else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
-            var doc = this.elementRef.current.ownerDocument;
-            var channel = this.props.cloudChannel;
-            var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
-            ScriptLoader.load(scriptState, doc, "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js", this.initialise);
+            ScriptLoader_1.ScriptLoader.load(this.elementRef.current.ownerDocument, this.getScriptSrc(), this.initialise);
         }
@@ -98,2 +95,9 @@ };
     };
+    Editor.prototype.getScriptSrc = function () {
+        var channel = this.props.cloudChannel;
+        var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+        return util_1.isNullOrUndefined(this.props.tinymceScriptSrc) ?
+            "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js" :
+            this.props.tinymceScriptSrc;
+    };
     Editor.prototype.initEditor = function (initEvent, editor) {
@@ -100,0 +104,0 @@ var _this = this;

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

@@ -86,2 +86,2 @@ "use strict";
 };
-exports.EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, outputFormat: PropTypes.oneOf(['html', 'text']), 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 }, exports.eventPropTypes);
+exports.EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, outputFormat: PropTypes.oneOf(['html', 'text']), 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.string }, exports.eventPropTypes);

lib/cjs/main/ts/ScriptLoader.d.ts

@@ -14,3 +14,7 @@ /**
 }
-export declare const create: () => IStateObj;
-export declare const load: (state: IStateObj, doc: Document, url: string, callback: callbackFn) => void;
+interface ScriptLoader {
+    load: (doc: Document, url: string, callback: callbackFn) => void;
+    reinitialize: () => void;
+}
+declare const ScriptLoader: ScriptLoader;
+export { ScriptLoader };

lib/cjs/main/ts/ScriptLoader.js

@@ -11,14 +11,3 @@ "use strict";
 var Utils_1 = require("./Utils");
-var injectScriptTag = function (scriptId, doc, url, callback) {
-    var scriptTag = doc.createElement('script');
-    scriptTag.referrerPolicy = 'origin';
-    scriptTag.type = 'application/javascript';
-    scriptTag.id = scriptId;
-    scriptTag.addEventListener('load', callback);
-    scriptTag.src = url;
-    if (doc.head) {
-        doc.head.appendChild(scriptTag);
-    }
-};
-exports.create = function () {
+var createState = function () {
     return {
@@ -30,15 +19,43 @@ listeners: [],
 };
-exports.load = function (state, doc, url, callback) {
-    if (state.scriptLoaded) {
-        callback();
-    }
-    else {
-        state.listeners.push(callback);
-        if (!doc.getElementById(state.scriptId)) {
-            injectScriptTag(state.scriptId, doc, url, function () {
-                state.listeners.forEach(function (fn) { return fn(); });
-                state.scriptLoaded = true;
-            });
+var CreateScriptLoader = function () {
+    var state = createState();
+    var injectScriptTag = function (scriptId, doc, url, callback) {
+        var scriptTag = doc.createElement('script');
+        scriptTag.referrerPolicy = 'origin';
+        scriptTag.type = 'application/javascript';
+        scriptTag.id = scriptId;
+        scriptTag.src = url;
+        var handler = function () {
+            scriptTag.removeEventListener('load', handler);
+            callback();
+        };
+        scriptTag.addEventListener('load', handler);
+        if (doc.head) {
+            doc.head.appendChild(scriptTag);
         }
-    }
+    };
+    var load = function (doc, url, callback) {
+        if (state.scriptLoaded) {
+            callback();
+        }
+        else {
+            state.listeners.push(callback);
+            if (!doc.getElementById(state.scriptId)) {
+                injectScriptTag(state.scriptId, doc, url, function () {
+                    state.listeners.forEach(function (fn) { return fn(); });
+                    state.scriptLoaded = true;
+                });
+            }
+        }
+    };
+    // Only to be used by tests.
+    var reinitialize = function () {
+        state = createState();
+    };
+    return {
+        load: load,
+        reinitialize: reinitialize
+    };
 };
+var ScriptLoader = CreateScriptLoader();
+exports.ScriptLoader = ScriptLoader;

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

@@ -26,2 +26,3 @@ /**
     textareaName: string;
+    tinymceScriptSrc: string;
 }
@@ -47,2 +48,3 @@ export interface IAllProps extends Partial<IProps>, Partial<IEvents> {
     }, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+    private getScriptSrc;
     private initialise;
@@ -49,0 +51,0 @@ private initEditor;

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

@@ -33,7 +33,7 @@ /**
 import * as React from 'react';
-import * as ScriptLoader from '../ScriptLoader';
+import { ScriptLoader } from '../ScriptLoader';
 import { getTinymce } from '../TinyMCE';
 import { bindHandlers, isFunction, isTextarea, mergePlugins, uuid } from '../Utils';
 import { EditorPropTypes } from './EditorPropTypes';
-var scriptState = ScriptLoader.create();
+import { isNullOrUndefined } from 'util';
 var Editor = /** @class */ (function (_super) {
@@ -81,6 +81,3 @@ __extends(Editor, _super);
         else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
-            var doc = this.elementRef.current.ownerDocument;
-            var channel = this.props.cloudChannel;
-            var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
-            ScriptLoader.load(scriptState, doc, "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js", this.initialise);
+            ScriptLoader.load(this.elementRef.current.ownerDocument, this.getScriptSrc(), this.initialise);
         }
@@ -96,2 +93,9 @@ };
     };
+    Editor.prototype.getScriptSrc = function () {
+        var channel = this.props.cloudChannel;
+        var apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
+        return isNullOrUndefined(this.props.tinymceScriptSrc) ?
+            "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js" :
+            this.props.tinymceScriptSrc;
+    };
     Editor.prototype.initEditor = function (initEvent, editor) {
@@ -98,0 +102,0 @@ var _this = this;

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

@@ -84,2 +84,2 @@ /**
 };
-export var EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, outputFormat: PropTypes.oneOf(['html', 'text']), 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 }, eventPropTypes);
+export var EditorPropTypes = __assign({ apiKey: PropTypes.string, id: PropTypes.string, inline: PropTypes.bool, init: PropTypes.object, initialValue: PropTypes.string, onEditorChange: PropTypes.func, outputFormat: PropTypes.oneOf(['html', 'text']), 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.string }, eventPropTypes);

lib/es2015/main/ts/ScriptLoader.d.ts

@@ -14,3 +14,7 @@ /**
 }
-export declare const create: () => IStateObj;
-export declare const load: (state: IStateObj, doc: Document, url: string, callback: callbackFn) => void;
+interface ScriptLoader {
+    load: (doc: Document, url: string, callback: callbackFn) => void;
+    reinitialize: () => void;
+}
+declare const ScriptLoader: ScriptLoader;
+export { ScriptLoader };

lib/es2015/main/ts/ScriptLoader.js

@@ -9,14 +9,3 @@ /**
 import { uuid } from './Utils';
-var injectScriptTag = function (scriptId, doc, url, callback) {
-    var scriptTag = doc.createElement('script');
-    scriptTag.referrerPolicy = 'origin';
-    scriptTag.type = 'application/javascript';
-    scriptTag.id = scriptId;
-    scriptTag.addEventListener('load', callback);
-    scriptTag.src = url;
-    if (doc.head) {
-        doc.head.appendChild(scriptTag);
-    }
-};
-export var create = function () {
+var createState = function () {
     return {
@@ -28,15 +17,43 @@ listeners: [],
 };
-export var load = function (state, doc, url, callback) {
-    if (state.scriptLoaded) {
-        callback();
-    }
-    else {
-        state.listeners.push(callback);
-        if (!doc.getElementById(state.scriptId)) {
-            injectScriptTag(state.scriptId, doc, url, function () {
-                state.listeners.forEach(function (fn) { return fn(); });
-                state.scriptLoaded = true;
-            });
+var CreateScriptLoader = function () {
+    var state = createState();
+    var injectScriptTag = function (scriptId, doc, url, callback) {
+        var scriptTag = doc.createElement('script');
+        scriptTag.referrerPolicy = 'origin';
+        scriptTag.type = 'application/javascript';
+        scriptTag.id = scriptId;
+        scriptTag.src = url;
+        var handler = function () {
+            scriptTag.removeEventListener('load', handler);
+            callback();
+        };
+        scriptTag.addEventListener('load', handler);
+        if (doc.head) {
+            doc.head.appendChild(scriptTag);
         }
-    }
+    };
+    var load = function (doc, url, callback) {
+        if (state.scriptLoaded) {
+            callback();
+        }
+        else {
+            state.listeners.push(callback);
+            if (!doc.getElementById(state.scriptId)) {
+                injectScriptTag(state.scriptId, doc, url, function () {
+                    state.listeners.forEach(function (fn) { return fn(); });
+                    state.scriptLoaded = true;
+                });
+            }
+        }
+    };
+    // Only to be used by tests.
+    var reinitialize = function () {
+        state = createState();
+    };
+    return {
+        load: load,
+        reinitialize: reinitialize
+    };
 };
+var ScriptLoader = CreateScriptLoader();
+export { ScriptLoader };

package.json

 {
   "name": "@tinymce/tinymce-react",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Official TinyMCE React Component",
@@ -19,4 +19,4 @@ "repository": {
     "clean": "rimraf lib",
-    "test": "bedrock-auto -b chrome-headless -f src/test/ts/**/*Test.tsx",
-    "test-manual": "bedrock -f src/test/ts/**/*Test.tsx",
+    "test": "bedrock-auto -b chrome-headless -f src/test/ts/**/*Test.ts",
+    "test-manual": "bedrock -f src/test/ts/**/*Test.ts",
     "build": "npm run clean && tsc -p ./tsconfig.es2015.json && tsc -p ./tsconfig.cjs.json",
@@ -45,6 +45,3 @@ "watch": "tsc -w -p ./tsconfig.es2015.json",
     "@ephox/tslint-rules": "^1.0.7",
-    "@storybook/addon-actions": "^5.1.9",
-    "@storybook/addon-console": "^1.1.1",
     "@storybook/addon-info": "^5.2.0-alpha.30",
-    "@storybook/addon-notes": "^5.1.9",
     "@storybook/react": "^5.1.9",
@@ -51,0 +48,0 @@ "@storybook/storybook-deployer": "^2.8.1",

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

87734

increased by8.01%

Dev dependency count

30

decreased by-9.09%

Number of package files

52

increased by8.33%

Lines of code

1939

increased by8.45%

No dependency changes