argous 1.2.202 → 1.2.204

package/dist/components/ConfirmModal/ModalProvider.d.ts

@@ -1,5 +1,5 @@
 import { ModalProviderContextProps } from '.';
 import React from 'react';
 export declare const ModalProviderContext: React.Context<ModalProviderContextProps>;
-declare const _default: import("react-redux").ConnectedComponent<({ children, argousSystem }: any) => React.JSX.Element, import("react-redux").Omit<any, "argousSystem" | "dispatch">>;
+declare const _default: import("react-redux").ConnectedComponent<({ children, argousSystem }: any) => React.JSX.Element, import("react-redux").Omit<any, "dispatch" | "argousSystem">>;
 export default _default;

package/dist/components/Editor/Events.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 import { Editor as TinyMCEEditor, EditorEvent, Events } from './tinymce/tinymce';
 export declare type EventHandler<A> = (a: EditorEvent<A>, editor: TinyMCEEditor) => unknown;
 declare type EEventHandler<K extends keyof Events.EditorEventMap> = EventHandler<Events.EditorEventMap[K]>;
@@ -48,6 +41,7 @@ export interface ITinyEvents {
     onBeforeSetContent: EEventHandler<'BeforeSetContent'>;
     onChange: EventHandler<unknown>;
     onClearUndos: EEventHandler<'ClearUndos'>;
+    onCommentChange: EventHandler<unknown>;
     onDeactivate: EEventHandler<'deactivate'>;
     onDirty: EventHandler<unknown>;
     onExecCommand: EEventHandler<'ExecCommand'>;
@@ -73,6 +67,14 @@ export interface ITinyEvents {
     onSubmit: EventHandler<unknown>;
     onUndo: EEventHandler<'Undo'>;
     onVisualAid: EventHandler<unknown>;
+    onSkinLoadError: EEventHandler<'SkinLoadError'>;
+    onThemeLoadError: EEventHandler<'ThemeLoadError'>;
+    onModelLoadError: EEventHandler<'ModelLoadError'>;
+    onPluginLoadError: EEventHandler<'PluginLoadError'>;
+    onIconsLoadError: EEventHandler<'IconsLoadError'>;
+    onLanguageLoadError: EEventHandler<'LanguageLoadError'>;
+    onScriptsLoad: () => void;
+    onScriptsLoadError: (err: unknown) => void;
 }
 export interface IEvents extends INativeEvents, ITinyEvents {
 }

package/dist/components/Editor/Events.js

@@ -1,9 +1,2 @@
 "use strict";
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 Object.defineProperty(exports, "__esModule", { value: true });

package/dist/components/Editor/ScriptLoader2.d.ts

@@ -0,0 +1,10 @@
+export declare type CallbackFn = () => void;
+export interface ScriptItem {
+    src: string;
+    async?: boolean;
+    defer?: boolean;
+}
+export declare const ScriptLoader: {
+    loadList: (doc: Document, items: ScriptItem[], delay: number, success: () => void, failure?: ((err: unknown) => void) | undefined) => void;
+    reinitialize: () => void;
+};

package/dist/components/Editor/ScriptLoader2.js

@@ -0,0 +1,146 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScriptLoader = void 0;
+var Utils_1 = require("./Utils");
+var injectScriptTag = function (doc, item, handler) {
+    var _a, _b;
+    var scriptTag = doc.createElement('script');
+    scriptTag.referrerPolicy = 'origin';
+    scriptTag.type = 'application/javascript';
+    scriptTag.id = item.id;
+    scriptTag.src = item.src;
+    scriptTag.async = (_a = item.async) !== null && _a !== void 0 ? _a : false;
+    scriptTag.defer = (_b = item.defer) !== null && _b !== void 0 ? _b : false;
+    var loadHandler = function () {
+        scriptTag.removeEventListener('load', loadHandler);
+        scriptTag.removeEventListener('error', errorHandler);
+        handler(item.src);
+    };
+    var errorHandler = function (err) {
+        scriptTag.removeEventListener('load', loadHandler);
+        scriptTag.removeEventListener('error', errorHandler);
+        handler(item.src, err);
+    };
+    scriptTag.addEventListener('load', loadHandler);
+    scriptTag.addEventListener('error', errorHandler);
+    if (doc.head) {
+        doc.head.appendChild(scriptTag);
+    }
+};
+var createDocumentScriptLoader = function (doc) {
+    var lookup = {};
+    var scriptLoadOrErrorHandler = function (src, err) {
+        var item = lookup[src];
+        item.done = true;
+        item.error = err;
+        for (var _i = 0, _a = item.handlers; _i < _a.length; _i++) {
+            var h = _a[_i];
+            h(src, err);
+        }
+        item.handlers = [];
+    };
+    var loadScripts = function (items, success, failure) {
+        // eslint-disable-next-line no-console
+        var failureOrLog = function (err) { return failure !== undefined ? failure(err) : console.error(err); };
+        if (items.length === 0) {
+            failureOrLog(new Error('At least one script must be provided'));
+            return;
+        }
+        var successCount = 0;
+        var failed = false;
+        var loaded = function (_src, err) {
+            if (failed) {
+                return;
+            }
+            if (err) {
+                failed = true;
+                failureOrLog(err);
+            }
+            else if (++successCount === items.length) {
+                success();
+            }
+        };
+        for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
+            var item = items_1[_i];
+            var existing = lookup[item.src];
+            if (existing) {
+                if (existing.done) {
+                    loaded(item.src, existing.error);
+                }
+                else {
+                    existing.handlers.push(loaded);
+                }
+            }
+            else {
+                // create a new entry
+                var id = Utils_1.uuid('tiny-');
+                lookup[item.src] = {
+                    id: id,
+                    src: item.src,
+                    done: false,
+                    error: null,
+                    handlers: [loaded],
+                };
+                injectScriptTag(doc, __assign({ id: id }, item), scriptLoadOrErrorHandler);
+            }
+        }
+    };
+    var deleteScripts = function () {
+        var _a;
+        for (var _i = 0, _b = Object.values(lookup); _i < _b.length; _i++) {
+            var item = _b[_i];
+            var scriptTag = doc.getElementById(item.id);
+            if (scriptTag != null && scriptTag.tagName === 'SCRIPT') {
+                (_a = scriptTag.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(scriptTag);
+            }
+        }
+        lookup = {};
+    };
+    var getDocument = function () { return doc; };
+    return {
+        loadScripts: loadScripts,
+        deleteScripts: deleteScripts,
+        getDocument: getDocument
+    };
+};
+var createScriptLoader = function () {
+    var cache = [];
+    var getDocumentScriptLoader = function (doc) {
+        var loader = cache.find(function (l) { return l.getDocument() === doc; });
+        if (loader === undefined) {
+            loader = createDocumentScriptLoader(doc);
+            cache.push(loader);
+        }
+        return loader;
+    };
+    var loadList = function (doc, items, delay, success, failure) {
+        var doLoad = function () { return getDocumentScriptLoader(doc).loadScripts(items, success, failure); };
+        if (delay > 0) {
+            setTimeout(doLoad, delay);
+        }
+        else {
+            doLoad();
+        }
+    };
+    var reinitialize = function () {
+        for (var loader = cache.pop(); loader != null; loader = cache.pop()) {
+            loader.deleteScripts();
+        }
+    };
+    return {
+        loadList: loadList,
+        reinitialize: reinitialize
+    };
+};
+exports.ScriptLoader = createScriptLoader();

package/dist/components/Editor/TinyMCE.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 import { TinyMCE as TinyMCEGlobal } from './tinymce/tinymce';
-declare const getTinymce: () => TinyMCEGlobal | null;
+declare const getTinymce: (view: Window) => TinyMCEGlobal | null;
 export { getTinymce };

package/dist/components/Editor/TinyMCE.js

@@ -1,16 +1,8 @@
 "use strict";
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTinymce = void 0;
-var getGlobal = function () { return (typeof window !== 'undefined' ? window : global); };
-var getTinymce = function () {
-    var global = getGlobal();
+var getTinymce = function (view) {
+    var global = view;
     return global && global.tinymce ? global.tinymce : null;
 };
 exports.getTinymce = getTinymce;

package/dist/components/Editor/Utils.d.ts

@@ -1,10 +1,3 @@
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 import { IAllProps } from './components/Editor';
 import { IEventPropTypes } from './components/EditorPropTypes';
 import { Editor as TinyMCEEditor, EditorEvent } from './tinymce/tinymce';
@@ -16,4 +9,6 @@ export declare const uuid: (prefix: string) => string;
 export declare const isTextareaOrInput: (element: Element | null) => element is HTMLInputElement | HTMLTextAreaElement;
 export declare const mergePlugins: (initPlugins: string | string[] | undefined, inputPlugins: string | string[] | undefined) => string[];
 export declare const isBeforeInputEventAvailable: () => boolean;
+export declare const isInDoc: (elem: Node) => boolean;
+export declare const setMode: (editor: TinyMCEEditor | undefined, mode: 'readonly' | 'design') => void;
 export {};

package/dist/components/Editor/Utils.js

@@ -1,13 +1,6 @@
 "use strict";
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBeforeInputEventAvailable = exports.mergePlugins = exports.isTextareaOrInput = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
+exports.setMode = exports.isInDoc = exports.isBeforeInputEventAvailable = exports.mergePlugins = exports.isTextareaOrInput = exports.uuid = exports.configHandlers = exports.configHandlers2 = exports.isFunction = void 0;
 var EditorPropTypes_1 = require("./components/EditorPropTypes");
 var isFunction = function (x) { return typeof x === 'function'; };
 exports.isFunction = isFunction;
@@ -34,7 +27,9 @@ var configHandlers2 = function (handlerLookup, on, off, adapter, prevProps, prop
 };
 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);
+    return exports.configHandlers2(lookup, editor.on.bind(editor), editor.off.bind(editor), 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    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;
@@ -60,3 +55,28 @@ var mergePlugins = function (initPlugins, inputPlugins) { return normalizePlugin
 exports.mergePlugins = mergePlugins;
 var isBeforeInputEventAvailable = function () { return window.InputEvent && typeof InputEvent.prototype.getTargetRanges === 'function'; };
 exports.isBeforeInputEventAvailable = isBeforeInputEventAvailable;
+var isInDoc = function (elem) {
+    if (!('isConnected' in Node.prototype)) {
+        // Fallback for IE and old Edge
+        var current = elem;
+        var parent_1 = elem.parentNode;
+        while (parent_1 != null) {
+            current = parent_1;
+            parent_1 = current.parentNode;
+        }
+        return current === elem.ownerDocument;
+    }
+    return elem.isConnected;
+};
+exports.isInDoc = isInDoc;
+var setMode = function (editor, mode) {
+    if (editor !== undefined) {
+        if (editor.mode != null && typeof editor.mode === 'object' && typeof editor.mode.set === 'function') {
+            editor.mode.set(mode);
+        }
+        else { // support TinyMCE 4
+            editor.setMode(mode);
+        }
+    }
+};
+exports.setMode = setMode;

package/dist/components/Editor/components/Editor.d.ts

@@ -1,14 +1,9 @@
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 import { IEditorPropTypes } from './EditorPropTypes';
 import { IEvents } from '../Events';
-import { Editor as TinyMCEEditor, RawEditorSettings } from '../tinymce/tinymce';
+import { ScriptItem } from '../ScriptLoader2';
+import { Editor as TinyMCEEditor, TinyMCE } from '../tinymce/tinymce';
 import * as React from 'react';
+declare type EditorOptions = Parameters<TinyMCE['init']>[0];
 export interface IProps {
     apiKey: string;
     id: string;
@@ -16,19 +11,18 @@ export interface IProps {
     initialValue: string;
     onEditorChange: (a: string, editor: TinyMCEEditor) => void;
     value: string;
-    init: RawEditorSettings & {
+    init: EditorOptions & {
         selector?: undefined;
         target?: undefined;
     };
-    /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
-    outputFormat: 'html' | 'text';
     tagName: string;
     cloudChannel: string;
-    plugins: NonNullable<RawEditorSettings['plugins']>;
-    toolbar: NonNullable<RawEditorSettings['toolbar']>;
+    plugins: NonNullable<EditorOptions['plugins']>;
+    toolbar: NonNullable<EditorOptions['toolbar']>;
     disabled: boolean;
     textareaName: string;
-    tinymceScriptSrc: string;
+    tinymceScriptSrc: string | string[] | ScriptItem[];
+    rollback: number | false;
     scriptLoading: {
         async?: boolean;
         defer?: boolean;
@@ -49,13 +43,19 @@ export declare class Editor extends React.Component<IAllProps> {
     private rollbackTimer;
     private valueCursor;
     constructor(props: Partial<IAllProps>);
+    private get view();
     componentDidUpdate(prevProps: Partial<IAllProps>): void;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    render(): React.JSX.Element;
+    render(): React.ReactElement<{
+        ref: React.RefObject<HTMLElement>;
+        id: string;
+    }, string | React.JSXElementConstructor<any>>;
+    private changeEvents;
+    private beforeInputEvent;
     private renderInline;
     private renderIframe;
-    private getScriptSrc;
+    private getScriptSources;
     private getInitialValue;
     private bindHandlers;
     private rollbackChange;
@@ -65,3 +65,4 @@ export declare class Editor extends React.Component<IAllProps> {
     private handleEditorChangeSpecial;
     private initialise;
 }
+export {};

package/dist/components/Editor/components/Editor.js

@@ -1,11 +1,4 @@
 "use strict";
-/**
- * Copyright (c) 2017-present, Ephox, Inc.
- *
- * This source code is licensed under the Apache 2 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -54,13 +47,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 var EditorPropTypes_1 = require("./EditorPropTypes");
-var ScriptLoader_1 = require("../ScriptLoader");
+var ScriptLoader2_1 = require("../ScriptLoader2");
 var TinyMCE_1 = require("../TinyMCE");
 var Utils_1 = require("../Utils");
-var core_1 = require("@material-ui/core");
 var React = __importStar(require("react"));
-var changeEvents = function () { var _a, _b, _c; return ((_c = (_b = (_a = TinyMCE_1.getTinymce()) === null || _a === void 0 ? void 0 : _a.Env) === null || _b === void 0 ? void 0 : _b.browser) === null || _c === void 0 ? void 0 : _c.isIE()) ? 'change keyup compositionend setcontent' : 'change input compositionend setcontent'; };
-var beforeInputEvent = function () { return Utils_1.isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange'; };
 var Editor = /** @class */ (function (_super) {
     __extends(Editor, _super);
     function Editor(props) {
@@ -88,7 +78,7 @@ var Editor = /** @class */ (function (_super) {
         };
         _this.handleBeforeInput = function (_evt) {
             if (_this.props.value !== undefined && _this.props.value === _this.currentContent && _this.editor) {
-                if (!_this.inline || _this.editor.hasFocus) {
+                if (!_this.inline || _this.editor.hasFocus()) {
                     try {
                         // getBookmark throws exceptions when the editor has not been focused
                         // possibly only in inline mode but I'm not taking chances
@@ -107,18 +97,16 @@ var Editor = /** @class */ (function (_super) {
             var editor = _this.editor;
             if (editor && editor.initialized) {
                 var newContent = editor.getContent();
-                if (_this.props.value !== undefined && _this.props.value !== newContent) {
+                if (_this.props.value !== undefined && _this.props.value !== newContent && _this.props.rollback !== false) {
                     // start a timer and revert to the value if not applied in time
                     if (!_this.rollbackTimer) {
-                        _this.rollbackTimer = window.setTimeout(_this.rollbackChange, 200);
+                        _this.rollbackTimer = window.setTimeout(_this.rollbackChange, typeof _this.props.rollback === 'number' ? _this.props.rollback : 200);
                     }
                 }
                 if (newContent !== _this.currentContent) {
                     _this.currentContent = newContent;
                     if (Utils_1.isFunction(_this.props.onEditorChange)) {
-                        var format = _this.props.outputFormat;
-                        var out = format === 'html' ? newContent : editor.getContent({ format: format });
-                        _this.props.onEditorChange(out, editor);
+                        _this.props.onEditorChange(newContent, editor);
                     }
                 }
             }
@@ -128,16 +116,36 @@ var Editor = /** @class */ (function (_super) {
                 _this.handleEditorChange(evt);
             }
         };
-        _this.initialise = function () {
+        _this.initialise = function (attempts) {
+            var _a, _b, _c;
+            if (attempts === void 0) { attempts = 0; }
             var target = _this.elementRef.current;
             if (!target) {
                 return; // Editor has been unmounted
             }
-            var tinymce = TinyMCE_1.getTinymce();
+            if (!Utils_1.isInDoc(target)) {
+                // this is probably someone trying to help by rendering us offscreen
+                // but we can't do that because the editor iframe must be in the document
+                // in order to have state
+                if (attempts === 0) {
+                    // we probably just need to wait for the current events to be processed
+                    setTimeout(function () { return _this.initialise(1); }, 1);
+                }
+                else if (attempts < 100) {
+                    // wait for ten seconds, polling every tenth of a second
+                    setTimeout(function () { return _this.initialise(attempts + 1); }, 100);
+                }
+                else {
+                    // give up, at this point it seems that more polling is unlikely to help
+                    throw new Error('tinymce can only be initialised when in a document');
+                }
+                return;
+            }
+            var tinymce = TinyMCE_1.getTinymce(_this.view);
             if (!tinymce) {
                 throw new Error('tinymce should have been loaded into global scope');
             }
-            var finalInit = __assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: Utils_1.mergePlugins(_this.props.init && _this.props.init.plugins, _this.props.plugins), toolbar: _this.props.toolbar || (_this.props.init && _this.props.init.toolbar), setup: function (editor) {
+            var finalInit = __assign(__assign({}, _this.props.init), { selector: undefined, target: target, readonly: _this.props.disabled, inline: _this.inline, plugins: 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) {
                     _this.editor = editor;
                     _this.bindHandlers({});
                     // When running in inline mode the editor gets the initial value
@@ -168,7 +176,7 @@ var Editor = /** @class */ (function (_super) {
                         editor.setDirty(false);
                     }
                     var disabled = (_b = _this.props.disabled) !== null && _b !== void 0 ? _b : false;
-                    editor.setMode(disabled ? 'readonly' : 'design');
+                    Utils_1.setMode(_this.editor, disabled ? 'readonly' : 'design');
                     // ensure existing init_instance_callback is called
                     if (_this.props.init && Utils_1.isFunction(_this.props.init.init_instance_callback)) {
                         _this.props.init.init_instance_callback(editor);
@@ -188,6 +196,14 @@ var Editor = /** @class */ (function (_super) {
         _this.boundHandlers = {};
         return _this;
     }
+    Object.defineProperty(Editor.prototype, "view", {
+        get: function () {
+            var _a, _b;
+            return (_b = (_a = this.elementRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.defaultView) !== null && _b !== void 0 ? _b : window;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Editor.prototype.componentDidUpdate = function (prevProps) {
         var _this = this;
         var _a, _b;
@@ -239,26 +255,39 @@ var Editor = /** @class */ (function (_super) {
                 }
                 if (this.props.disabled !== prevProps.disabled) {
                     var disabled = (_b = this.props.disabled) !== null && _b !== void 0 ? _b : false;
-                    this.editor.setMode(disabled ? 'readonly' : 'design');
+                    Utils_1.setMode(this.editor, disabled ? 'readonly' : 'design');
                 }
             }
         }
     };
     Editor.prototype.componentDidMount = function () {
-        var _a, _b, _c, _d, _e, _f;
-        if (TinyMCE_1.getTinymce() !== null) {
+        var _this = this;
+        var _a, _b, _c, _d, _e;
+        if (TinyMCE_1.getTinymce(this.view) !== null) {
             this.initialise();
         }
-        else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
-            ScriptLoader_1.ScriptLoader.load(this.elementRef.current.ownerDocument, this.getScriptSrc(), (_b = (_a = this.props.scriptLoading) === null || _a === void 0 ? void 0 : _a.async) !== null && _b !== void 0 ? _b : false, (_d = (_c = this.props.scriptLoading) === null || _c === void 0 ? void 0 : _c.defer) !== null && _d !== void 0 ? _d : false, (_f = (_e = this.props.scriptLoading) === null || _e === void 0 ? void 0 : _e.delay) !== null && _f !== void 0 ? _f : 0, this.initialise);
+        else if (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.'));
+        }
+        else if ((_c = this.elementRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument) {
+            var successHandler = function () {
+                var _a, _b;
+                (_b = (_a = _this.props).onScriptsLoad) === null || _b === void 0 ? void 0 : _b.call(_a);
+                _this.initialise();
+            };
+            var errorHandler = function (err) {
+                var _a, _b;
+                (_b = (_a = _this.props).onScriptsLoadError) === null || _b === void 0 ? void 0 : _b.call(_a, err);
+            };
+            ScriptLoader2_1.ScriptLoader.loadList(this.elementRef.current.ownerDocument, this.getScriptSources(), (_e = (_d = this.props.scriptLoading) === null || _d === void 0 ? void 0 : _d.delay) !== null && _e !== void 0 ? _e : 0, successHandler, errorHandler);
         }
     };
     Editor.prototype.componentWillUnmount = function () {
         var _this = this;
         var editor = this.editor;
         if (editor) {
-            editor.off(changeEvents(), this.handleEditorChange);
-            editor.off(beforeInputEvent(), this.handleBeforeInput);
+            editor.off(this.changeEvents(), this.handleEditorChange);
+            editor.off(this.beforeInputEvent(), this.handleBeforeInput);
             editor.off('keypress', this.handleEditorChangeSpecial);
             editor.off('keydown', this.handleBeforeInputSpecial);
             editor.off('NewBlock', this.handleEditorChange);
@@ -271,8 +300,17 @@ var Editor = /** @class */ (function (_super) {
         }
     };
     Editor.prototype.render = function () {
-        return React.createElement(React.Fragment, null,
-            React.createElement(Tema, null, this.inline ? this.renderInline() : this.renderIframe()));
+        return this.inline ? this.renderInline() : this.renderIframe();
+    };
+    Editor.prototype.changeEvents = function () {
+        var _a, _b, _c;
+        var isIE = (_c = (_b = (_a = TinyMCE_1.getTinymce(this.view)) === null || _a === void 0 ? void 0 : _a.Env) === null || _b === void 0 ? void 0 : _b.browser) === null || _c === void 0 ? void 0 : _c.isIE();
+        return (isIE
+            ? 'change keyup compositionend setcontent CommentChange'
+            : 'change input compositionend setcontent CommentChange');
+    };
+    Editor.prototype.beforeInputEvent = function () {
+        return Utils_1.isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
     };
     Editor.prototype.renderInline = function () {
         var _a = this.props.tagName, tagName = _a === void 0 ? 'div' : _a;
@@ -289,13 +327,29 @@ var Editor = /** @class */ (function (_super) {
             id: this.id
         });
     };
-    Editor.prototype.getScriptSrc = function () {
-        // if (typeof this.props.tinymceScriptSrc === 'string') {
-        //   return this.props.tinymceScriptSrc;
-        // } 
+    Editor.prototype.getScriptSources = function () {
+        var _a, _b;
+        var async = (_a = this.props.scriptLoading) === null || _a === void 0 ? void 0 : _a.async;
+        var defer = (_b = this.props.scriptLoading) === null || _b === void 0 ? void 0 : _b.defer;
+        if (this.props.tinymceScriptSrc !== undefined) {
+            if (typeof this.props.tinymceScriptSrc === 'string') {
+                return [{ src: this.props.tinymceScriptSrc, async: async, defer: defer }];
+            }
+            // multiple scripts can be specified which allows for hybrid mode
+            return this.props.tinymceScriptSrc.map(function (item) {
+                if (typeof item === 'string') {
+                    // async does not make sense for multiple items unless
+                    // they are not dependent (which will be unlikely)
+                    return { src: item, async: async, defer: defer };
+                }
+                return item;
+            });
+        }
+        // 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';
-        return "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js";
+        var cloudTinyJs = "https://cdn.tiny.cloud/1/" + apiKey + "/tinymce/" + channel + "/tinymce.min.js";
+        return [{ src: cloudTinyJs, async: async, defer: defer }];
     };
     Editor.prototype.getInitialValue = function () {
         if (typeof this.props.initialValue === 'string') {
@@ -316,15 +370,15 @@ var Editor = /** @class */ (function (_super) {
             var wasControlled = isValueControlled(prevProps);
             var nowControlled = isValueControlled(this.props);
             if (!wasControlled && nowControlled) {
-                this.editor.on(changeEvents(), this.handleEditorChange);
-                this.editor.on(beforeInputEvent(), this.handleBeforeInput);
+                this.editor.on(this.changeEvents(), this.handleEditorChange);
+                this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
                 this.editor.on('keydown', this.handleBeforeInputSpecial);
                 this.editor.on('keyup', this.handleEditorChangeSpecial);
                 this.editor.on('NewBlock', this.handleEditorChange);
             }
             else if (wasControlled && !nowControlled) {
-                this.editor.off(changeEvents(), this.handleEditorChange);
-                this.editor.off(beforeInputEvent(), this.handleBeforeInput);
+                this.editor.off(this.changeEvents(), this.handleEditorChange);
+                this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
                 this.editor.off('keydown', this.handleBeforeInputSpecial);
                 this.editor.off('keyup', this.handleEditorChangeSpecial);
                 this.editor.off('NewBlock', this.handleEditorChange);
@@ -333,19 +387,8 @@ var Editor = /** @class */ (function (_super) {
     };
     Editor.propTypes = EditorPropTypes_1.EditorPropTypes;
     Editor.defaultProps = {
-        cloudChannel: '5'
+        cloudChannel: '6'
     };
     return Editor;
 }(React.Component));
 exports.Editor = Editor;
-var Tema = function (_a) {
-    var children = _a.children;
-    var theme = core_1.useTheme().palette.type;
-    return (React.createElement("div", null,
-        theme === 'dark' ? React.createElement(React.Fragment, null,
-            React.createElement("link", { rel: 'stylesheet', href: './skins/ui/dark/skin.min.css' }),
-            React.createElement("link", { rel: 'stylesheet', href: './skins/ui/dark/content.min.css' })) : React.createElement(React.Fragment, null,
-            React.createElement("link", { rel: 'stylesheet', href: './skins/ui/default/content.min.css' }),
-            React.createElement("link", { rel: 'stylesheet', href: './skins/ui/default/skin.min.css' })),
-        children));
-};