argous 1.2.205 → 1.2.207

package/lib/components/Editor/ScriptLoader2.ts

@@ -0,0 +1,161 @@
+import { uuid } from './Utils';
+
+export type CallbackFn = () => void;
+
+export interface ScriptItem {
+  src: string;
+  async?: boolean;
+  defer?: boolean;
+}
+
+interface Id {
+  id: string;
+}
+
+const injectScriptTag = (doc: Document, item: ScriptItem & Id, handler: (id: string, err?: unknown) => void) => {
+  const scriptTag = doc.createElement('script');
+  scriptTag.referrerPolicy = 'origin';
+  scriptTag.type = 'application/javascript';
+  scriptTag.id = item.id;
+  scriptTag.src = item.src;
+  scriptTag.async = item.async ?? false;
+  scriptTag.defer = item.defer ?? false;
+
+  const loadHandler = () => {
+    scriptTag.removeEventListener('load', loadHandler);
+    scriptTag.removeEventListener('error', errorHandler);
+    handler(item.src);
+  };
+  const errorHandler = (err: unknown) => {
+    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);
+  }
+};
+
+interface ScriptState {
+  id: string;
+  src: string;
+  done: boolean;
+  error?: unknown;
+  handlers: ((src: string, err?: unknown) => void)[];
+}
+
+const createDocumentScriptLoader = (doc: Document) => {
+  let lookup: Record<string, ScriptState> = {};
+
+  const scriptLoadOrErrorHandler = (src: string, err?: unknown) => {
+    const item = lookup[src];
+    item.done = true;
+    item.error = err;
+    for (const h of item.handlers) {
+      h(src, err);
+    }
+    item.handlers = [];
+  };
+
+  const loadScripts = (items: ScriptItem[], success: () => void, failure?: (err: unknown) => void) => {
+    // eslint-disable-next-line no-console
+    const failureOrLog = (err: unknown) => failure !== undefined ? failure(err) : console.error(err);
+    if (items.length === 0) {
+      failureOrLog(new Error('At least one script must be provided'));
+      return;
+    }
+    let successCount = 0;
+    let failed = false;
+    const loaded = (_src: string, err?: unknown) => {
+      if (failed) {
+        return;
+      }
+      if (err) {
+        failed = true;
+        failureOrLog(err);
+      } else if (++successCount === items.length) {
+        success();
+      }
+    };
+    for (const item of items) {
+      const existing = lookup[item.src];
+      if (existing) {
+        if (existing.done) {
+          loaded(item.src, existing.error);
+        } else {
+          existing.handlers.push(loaded);
+        }
+      } else {
+        // create a new entry
+        const id = uuid('tiny-');
+        lookup[item.src] = {
+          id,
+          src: item.src,
+          done: false,
+          error: null,
+          handlers: [loaded],
+        };
+        injectScriptTag(doc, { id, ...item }, scriptLoadOrErrorHandler);
+      }
+    }
+  };
+
+  const deleteScripts = () => {
+    for (const item of Object.values(lookup)) {
+      const scriptTag = doc.getElementById(item.id);
+      if (scriptTag != null && scriptTag.tagName === 'SCRIPT') {
+        scriptTag.parentNode?.removeChild(scriptTag);
+      }
+    }
+    lookup = {};
+  };
+
+  const getDocument = () => doc;
+
+  return {
+    loadScripts,
+    deleteScripts,
+    getDocument
+  };
+};
+
+type DocumentScriptLoader = ReturnType<typeof createDocumentScriptLoader>;
+
+const createScriptLoader = () => {
+  const cache: DocumentScriptLoader[] = [];
+
+  const getDocumentScriptLoader = (doc: Document) => {
+    let loader = cache.find((l) => l.getDocument() === doc);
+    if (loader === undefined) {
+      loader = createDocumentScriptLoader(doc);
+      cache.push(loader);
+    }
+    return loader;
+  };
+
+  const loadList = (doc: Document, items: ScriptItem[], delay: number, success: () => void, failure?: (err: unknown) => void) => {
+    const doLoad = () => getDocumentScriptLoader(doc).loadScripts(items, success, failure);
+    if (delay > 0) {
+      setTimeout(doLoad, delay);
+    } else {
+      doLoad();
+    }
+  };
+
+  const reinitialize = () => {
+    for (let loader = cache.pop(); loader != null; loader = cache.pop()) {
+      loader.deleteScripts();
+    }
+  };
+
+  return {
+    loadList,
+    reinitialize
+  };
+};
+
+export const ScriptLoader = createScriptLoader();

package/lib/components/Editor/TinyMCE.ts

@@ -1,17 +1,7 @@
-/**
- * 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';
 
-const getGlobal = (): any => (typeof window !== 'undefined' ? window : global);
-
-const getTinymce = (): TinyMCEGlobal | null => {
-  const global = getGlobal();
+const getTinymce = (view: Window): TinyMCEGlobal | null => {
+  const global = view as any;
 
   return global && global.tinymce ? global.tinymce : null;
 };

package/lib/components/Editor/Utils.ts

@@ -1,11 +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 { eventPropTypes, IEventPropTypes } from './components/EditorPropTypes';
 import { Editor as TinyMCEEditor, EditorEvent } from './tinymce/tinymce';
@@ -60,6 +52,7 @@ export const configHandlers = (
     lookup,
     editor.on.bind(editor),
     editor.off.bind(editor),
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     (handlerLookup, key) => (e) => handlerLookup(key)?.(e, editor),
     prevProps,
     props,
@@ -93,3 +86,27 @@ export const mergePlugins = (initPlugins: string | string[] | undefined, inputPl
 
 export const isBeforeInputEventAvailable = () => window.InputEvent && typeof (InputEvent.prototype as any).getTargetRanges === 'function';
 
+export const isInDoc = (elem: Node) => {
+  if (!('isConnected' in Node.prototype)) {
+    // Fallback for IE and old Edge
+    let current = elem;
+    let parent = elem.parentNode;
+    while (parent != null) {
+      current = parent;
+      parent = current.parentNode;
+    }
+    return current === elem.ownerDocument;
+  }
+
+  return elem.isConnected;
+};
+
+export const setMode = (editor: TinyMCEEditor | undefined, mode: 'readonly' | 'design') => {
+  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 as any).setMode(mode);
+    }
+  }
+};

package/lib/components/Editor/components/Editor.tsx

@@ -1,20 +1,13 @@
-/**
- * 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 { EditorPropTypes, IEditorPropTypes } from './EditorPropTypes';
 import { IEvents } from '../Events';
-import { ScriptLoader } from '../ScriptLoader';
+import { ScriptItem, ScriptLoader } from '../ScriptLoader2';
 import { getTinymce } from '../TinyMCE';
-import { Bookmark, Editor as TinyMCEEditor, EditorEvent, RawEditorOptions } from '../tinymce/tinymce';
-import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable } from '../Utils';
-import { useTheme } from '@material-ui/core';
+import { Bookmark, Editor as TinyMCEEditor, EditorEvent, TinyMCE } from '../tinymce/tinymce';
+import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable, isInDoc, setMode } from '../Utils';
 import * as React from 'react';
 
+type EditorOptions = Parameters<TinyMCE['init']>[0];
+
 export interface IProps {
   apiKey: string;
   id: string;
@@ -22,16 +15,15 @@ export interface IProps {
   initialValue: string;
   onEditorChange: (a: string, editor: TinyMCEEditor) => void;
   value: string;
-  init: RawEditorOptions & { selector?: undefined; target?: undefined };
-  /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
-  outputFormat: 'html' | 'text';
+  init: EditorOptions & { selector?: undefined; target?: undefined };
   tagName: string;
   cloudChannel: string;
-  plugins: NonNullable<RawEditorOptions['plugins']>;
-  toolbar: NonNullable<RawEditorOptions['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;
@@ -41,14 +33,11 @@ export interface IProps {
 
 export interface IAllProps extends Partial<IProps>, Partial<IEvents> { }
 
-const changeEvents = () => getTinymce()?.Env?.browser?.isIE() ? 'change keyup compositionend setcontent' : 'change input compositionend setcontent';
-const beforeInputEvent = () => isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
-
 export class Editor extends React.Component<IAllProps> {
   public static propTypes: IEditorPropTypes = EditorPropTypes;
 
   public static defaultProps: Partial<IAllProps> = {
-    cloudChannel: '5'
+    cloudChannel: '6'
   };
 
   public editor?: TinyMCEEditor;
@@ -69,6 +58,10 @@ export class Editor extends React.Component<IAllProps> {
     this.boundHandlers = {};
   }
 
+  private get view() {
+    return this.elementRef.current?.ownerDocument.defaultView ?? window;
+  }
+
   public componentDidUpdate(prevProps: Partial<IAllProps>) {
     if (this.rollbackTimer) {
       clearTimeout(this.rollbackTimer);
@@ -114,23 +107,31 @@ export class Editor extends React.Component<IAllProps> {
         }
         if (this.props.disabled !== prevProps.disabled) {
           const disabled = this.props.disabled ?? false;
-          this.editor.mode.set(disabled ? 'readonly' : 'design');
+          setMode(this.editor, disabled ? 'readonly' : 'design');
         }
       }
     }
   }
 
   public componentDidMount() {
-    if (getTinymce() !== null) {
+    if (getTinymce(this.view) !== null) {
       this.initialise();
-    } else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
-      ScriptLoader.load(
+    } else if (Array.isArray(this.props.tinymceScriptSrc) && this.props.tinymceScriptSrc.length === 0) {
+      this.props.onScriptsLoadError?.(new Error('No `tinymce` global is present but the `tinymceScriptSrc` prop was an empty array.'));
+    } else if (this.elementRef.current?.ownerDocument) {
+      const successHandler = () => {
+        this.props.onScriptsLoad?.();
+        this.initialise();
+      };
+      const errorHandler = (err: unknown) => {
+        this.props.onScriptsLoadError?.(err);
+      };
+      ScriptLoader.loadList(
         this.elementRef.current.ownerDocument,
-        this.getScriptSrc(),
-        this.props.scriptLoading?.async ?? false,
-        this.props.scriptLoading?.defer ?? false,
+        this.getScriptSources(),
         this.props.scriptLoading?.delay ?? 0,
-        this.initialise
+        successHandler,
+        errorHandler
       );
     }
   }
@@ -138,8 +139,8 @@ export class Editor extends React.Component<IAllProps> {
   public componentWillUnmount() {
     const 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);
@@ -153,11 +154,19 @@ export class Editor extends React.Component<IAllProps> {
   }
 
   public render() {
-    return <>
-      <Tema>
-        {this.inline ? this.renderInline() : this.renderIframe()}
-      </Tema>
-    </>;
+    return this.inline ? this.renderInline() : this.renderIframe();
+  }
+
+  private changeEvents() {
+    const isIE = getTinymce(this.view)?.Env?.browser?.isIE();
+    return (isIE
+      ? 'change keyup compositionend setcontent CommentChange'
+      : 'change input compositionend setcontent CommentChange'
+    );
+  }
+
+  private beforeInputEvent() {
+    return isBeforeInputEventAvailable() ? 'beforeinput SelectionChange' : 'SelectionChange';
   }
 
   private renderInline() {
@@ -178,14 +187,29 @@ export class Editor extends React.Component<IAllProps> {
     });
   }
 
-  private getScriptSrc() {
-    // if (typeof this.props.tinymceScriptSrc === 'string') {
-    //   return this.props.tinymceScriptSrc;
-    // } 
+  private getScriptSources(): ScriptItem[] {
+    const async = this.props.scriptLoading?.async;
+    const defer = this.props.scriptLoading?.defer;
+    if (this.props.tinymceScriptSrc !== undefined) {
+      if (typeof this.props.tinymceScriptSrc === 'string') {
+        return [{ src: this.props.tinymceScriptSrc, async, defer }];
+      }
+      // multiple scripts can be specified which allows for hybrid mode
+      return this.props.tinymceScriptSrc.map((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, defer };
+        } 
+        return item;
+        
+      });
+    }
+    // fallback to the cloud when the tinymceScriptSrc is not specified
     const channel = this.props.cloudChannel;
     const apiKey = this.props.apiKey ? this.props.apiKey : 'no-api-key';
-    
-    return `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
+    const cloudTinyJs = `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
+    return [{ src: cloudTinyJs, async, defer }];
   }
 
   private getInitialValue() {
@@ -201,20 +225,20 @@ export class Editor extends React.Component<IAllProps> {
   private bindHandlers(prevProps: Partial<IAllProps>) {
     if (this.editor !== undefined) {
       // typescript chokes trying to understand the type of the lookup function
-      configHandlers(this.editor as any, prevProps, this.props, this.boundHandlers, (key) => this.props[key] as any);
+      configHandlers(this.editor, prevProps, this.props, this.boundHandlers, (key) => this.props[key] as any);
       // check if we should monitor editor changes
       const isValueControlled = (p: Partial<IAllProps>) => p.onEditorChange !== undefined || p.value !== undefined;
       const wasControlled = isValueControlled(prevProps);
       const 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);
@@ -262,19 +286,20 @@ export class Editor extends React.Component<IAllProps> {
     const editor = this.editor;
     if (editor && editor.initialized) {
       const 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 (isFunction(this.props.onEditorChange)) {
-          const format = this.props.outputFormat;
-          const out = format === 'html' ? newContent : editor.getContent({ format });
-          this.props.onEditorChange(out, editor);
+          this.props.onEditorChange(newContent, editor);
         }
       }
     }
@@ -286,25 +311,41 @@ export class Editor extends React.Component<IAllProps> {
     }
   };
 
-  private initialise = () => {
+  private initialise = (attempts = 0) => {
     const target = this.elementRef.current;
     if (!target) {
       return; // Editor has been unmounted
     }
+    if (!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(() => this.initialise(1), 1);
+      } else if (attempts < 100) {
+        // wait for ten seconds, polling every tenth of a second
+        setTimeout(() => 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;
+    }
 
-    const tinymce = getTinymce();
+    const tinymce = getTinymce(this.view);
     if (!tinymce) {
       throw new Error('tinymce should have been loaded into global scope');
     }
 
-    const finalInit: RawEditorOptions = {
+    const finalInit: EditorOptions = {
       ...this.props.init,
       selector: undefined,
       target,
       readonly: this.props.disabled,
       inline: this.inline,
-      plugins: mergePlugins(this.props.init && this.props.init.plugins, this.props.plugins),
-      toolbar: this.props.toolbar || (this.props.init && this.props.init.toolbar),
+      plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
+      toolbar: this.props.toolbar ?? this.props.init?.toolbar,
       setup: (editor) => {
         this.editor = editor;
         this.bindHandlers({});
@@ -338,7 +379,7 @@ export class Editor extends React.Component<IAllProps> {
           editor.setDirty(false);
         }
         const disabled = this.props.disabled ?? false;
-        editor.mode.set(disabled ? 'readonly' : 'design');
+        setMode(this.editor, disabled ? 'readonly' : 'design');
         // ensure existing init_instance_callback is called
         if (this.props.init && isFunction(this.props.init.init_instance_callback)) {
           this.props.init.init_instance_callback(editor);
@@ -352,24 +393,6 @@ export class Editor extends React.Component<IAllProps> {
       target.value = this.getInitialValue();
     }
 
-    tinymce.init(finalInit as any);
+    tinymce.init(finalInit);
   };
 }
-
-const Tema = ({ children }) => {
-
-  const theme = useTheme().palette.type;
-
-  return (
-    <div>
-      {theme === 'dark' ? <>
-        <link rel='stylesheet' href='./skins/ui/dark/skin.min.css' />
-        <link rel='stylesheet' href='./skins/ui/dark/content.min.css' />
-      </> : <>
-        <link rel='stylesheet' href='./skins/ui/default/content.min.css' />
-        <link rel='stylesheet' href='./skins/ui/default/skin.min.css' />
-      </>}
-      {children}
-    </div>
-  );
-};

package/lib/components/Editor/components/EditorPropTypes.ts

@@ -1,16 +1,8 @@
-/**
- * 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 { IProps } from './Editor';
 import { IEvents } from '../Events';
 import * as PropTypes from 'prop-types';
 
-export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<P | unknown> };
+export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<unknown> };
 
 export type IEventPropTypes = CopyProps<IEvents>;
 
@@ -30,6 +22,7 @@ export const eventPropTypes: IEventPropTypes = {
   onClearUndos: PropTypes.func,
   onClick: PropTypes.func,
   onContextMenu: PropTypes.func,
+  onCommentChange: PropTypes.func,
   onCopy: PropTypes.func,
   onCut: PropTypes.func,
   onDblclick: PropTypes.func,
@@ -78,7 +71,15 @@ export const eventPropTypes: IEventPropTypes = {
   onShow: PropTypes.func,
   onSubmit: PropTypes.func,
   onUndo: PropTypes.func,
-  onVisualAid: PropTypes.func
+  onVisualAid: PropTypes.func,
+  onSkinLoadError: PropTypes.func,
+  onThemeLoadError: PropTypes.func,
+  onModelLoadError: PropTypes.func,
+  onPluginLoadError: PropTypes.func,
+  onIconsLoadError: PropTypes.func,
+  onLanguageLoadError: PropTypes.func,
+  onScriptsLoad: PropTypes.func,
+  onScriptsLoadError: PropTypes.func,
 };
 
 export const EditorPropTypes: IEditorPropTypes = {
@@ -88,7 +89,6 @@ export const EditorPropTypes: IEditorPropTypes = {
   init: PropTypes.object,
   initialValue: PropTypes.string,
   onEditorChange: PropTypes.func,
-  outputFormat: PropTypes.oneOf(['html', 'text']),
   value: PropTypes.string,
   tagName: PropTypes.string,
   cloudChannel: PropTypes.string,
@@ -96,7 +96,16 @@ export const EditorPropTypes: IEditorPropTypes = {
   toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   textareaName: PropTypes.string,
-  tinymceScriptSrc: PropTypes.string,
+  tinymceScriptSrc: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+    PropTypes.arrayOf(PropTypes.shape({
+      src: PropTypes.string,
+      async: PropTypes.bool,
+      defer: PropTypes.bool
+    }))
+  ]),
+  rollback: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf([false])]),
   scriptLoading: PropTypes.shape({
     async: PropTypes.bool,
     defer: PropTypes.bool,

package/lib/components/Editor/index.tsx

@@ -1,11 +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, IAllProps } from './components/Editor';
 
-import { Editor } from './components/Editor';
-
-export { Editor };
+export { Editor, IAllProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.205",
+  "version": "1.2.207",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",