argous 1.2.204 → 1.2.206

package/lib/components/Editor/ScriptLoader.ts

@@ -0,0 +1,96 @@
+/**
+ * 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 { uuid } from './Utils';
+
+export type callbackFn = () => void;
+export interface IStateObj {
+  listeners: callbackFn[];
+  scriptId: string;
+  scriptLoading: boolean;
+  scriptLoaded: boolean;
+}
+
+const createState = (): IStateObj => ({
+  listeners: [],
+  scriptId: uuid('tiny-script'),
+  scriptLoading: false,
+  scriptLoaded: false
+});
+
+interface ScriptLoaderInterface {
+  load: (doc: Document, url: string, async: boolean, defer: boolean, delay: number, callback: callbackFn) => void;
+  reinitialize: () => void;
+}
+
+const CreateScriptLoader = (): ScriptLoaderInterface => {
+  let state: IStateObj = createState();
+
+  const injectScriptTag = (scriptId: string, doc: Document, url: string, async: boolean, defer: boolean, callback: callbackFn) => {
+    const scriptTag = doc.createElement('script');
+    scriptTag.referrerPolicy = 'origin';
+    scriptTag.type = 'application/javascript';
+    scriptTag.id = scriptId;
+    scriptTag.src = url;
+    scriptTag.async = async;
+    scriptTag.defer = defer;
+
+    // scriptTag.appendChild(document.createTextNode(url));
+
+    const handler = () => {
+      scriptTag.removeEventListener('load', handler);
+      callback();
+    };
+    scriptTag.addEventListener('load', handler);
+    if (doc.head) {
+      doc.head.appendChild(scriptTag);
+    }
+    // document.body.appendChild(scriptTag);
+  };
+
+  const load = (doc: Document, url: string, async: boolean, defer: boolean, delay: number, callback: callbackFn) => {
+
+    const scriptTagInjection = () => injectScriptTag(
+      state.scriptId, doc, url, async, defer,
+      () => {
+        state.listeners.forEach((fn) => fn());
+        state.scriptLoaded = true;
+      }
+    );
+
+    if (state.scriptLoaded) {
+      callback();
+    } else {
+      state.listeners.push(callback);
+      if (!state.scriptLoading) {
+        state.scriptLoading = true;
+        if (delay > 0) {
+          setTimeout(scriptTagInjection, delay);
+        } else {
+          scriptTagInjection();
+        }
+      }
+    }
+  };
+
+  // Only to be used by tests.
+  const reinitialize = () => {
+    state = createState();
+  };
+
+  return {
+    load,
+    reinitialize
+  };
+};
+
+const ScriptLoader = CreateScriptLoader();
+
+export {
+  ScriptLoader
+};

package/lib/components/Editor/TinyMCE.ts

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

package/lib/components/Editor/Utils.ts

@@ -1,3 +1,11 @@
+/**
+ * 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';
@@ -52,7 +60,6 @@ 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,
@@ -86,27 +93,3 @@ 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,13 +1,20 @@
+/**
+ * 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 { ScriptItem, ScriptLoader } from '../ScriptLoader2';
+import { ScriptLoader } from '../ScriptLoader';
 import { getTinymce } from '../TinyMCE';
-import { Bookmark, Editor as TinyMCEEditor, EditorEvent, TinyMCE } from '../tinymce/tinymce';
-import { isFunction, isTextareaOrInput, mergePlugins, uuid, configHandlers, isBeforeInputEventAvailable, isInDoc, setMode } from '../Utils';
+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 * as React from 'react';
 
-type EditorOptions = Parameters<TinyMCE['init']>[0];
-
 export interface IProps {
   apiKey: string;
   id: string;
@@ -15,15 +22,16 @@ export interface IProps {
   initialValue: string;
   onEditorChange: (a: string, editor: TinyMCEEditor) => void;
   value: string;
-  init: EditorOptions & { selector?: undefined; target?: undefined };
+  init: RawEditorOptions & { selector?: undefined; target?: undefined };
+  /** @deprecated use `editor.getContent({format: 'text' })` in `onEditorChange` prop instead */
+  outputFormat: 'html' | 'text';
   tagName: string;
   cloudChannel: string;
-  plugins: NonNullable<EditorOptions['plugins']>;
-  toolbar: NonNullable<EditorOptions['toolbar']>;
+  plugins: NonNullable<RawEditorOptions['plugins']>;
+  toolbar: NonNullable<RawEditorOptions['toolbar']>;
   disabled: boolean;
   textareaName: string;
-  tinymceScriptSrc: string | string[] | ScriptItem[];
-  rollback: number | false;
+  tinymceScriptSrc: string;
   scriptLoading: {
     async?: boolean;
     defer?: boolean;
@@ -33,11 +41,14 @@ 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: '6'
+    cloudChannel: '5'
   };
 
   public editor?: TinyMCEEditor;
@@ -58,10 +69,6 @@ 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);
@@ -107,31 +114,23 @@ export class Editor extends React.Component<IAllProps> {
         }
         if (this.props.disabled !== prevProps.disabled) {
           const disabled = this.props.disabled ?? false;
-          setMode(this.editor, disabled ? 'readonly' : 'design');
+          this.editor.mode.set(disabled ? 'readonly' : 'design');
         }
       }
     }
   }
 
   public componentDidMount() {
-    if (getTinymce(this.view) !== null) {
+    if (getTinymce() !== null) {
       this.initialise();
-    } 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(
+    } else if (this.elementRef.current && this.elementRef.current.ownerDocument) {
+      ScriptLoader.load(
         this.elementRef.current.ownerDocument,
-        this.getScriptSources(),
+        this.getScriptSrc(),
+        this.props.scriptLoading?.async ?? false,
+        this.props.scriptLoading?.defer ?? false,
         this.props.scriptLoading?.delay ?? 0,
-        successHandler,
-        errorHandler
+        this.initialise
       );
     }
   }
@@ -139,8 +138,8 @@ export class Editor extends React.Component<IAllProps> {
   public componentWillUnmount() {
     const editor = this.editor;
     if (editor) {
-      editor.off(this.changeEvents(), this.handleEditorChange);
-      editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+      editor.off(changeEvents(), this.handleEditorChange);
+      editor.off(beforeInputEvent(), this.handleBeforeInput);
       editor.off('keypress', this.handleEditorChangeSpecial);
       editor.off('keydown', this.handleBeforeInputSpecial);
       editor.off('NewBlock', this.handleEditorChange);
@@ -154,19 +153,11 @@ export class Editor extends React.Component<IAllProps> {
   }
 
   public render() {
-    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';
+    return <>
+      <Tema>
+        {this.inline ? this.renderInline() : this.renderIframe()}
+      </Tema>
+    </>;
   }
 
   private renderInline() {
@@ -187,29 +178,15 @@ export class Editor extends React.Component<IAllProps> {
     });
   }
 
-  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;
-        
-      });
+  private getScriptSrc() {
+    if (typeof this.props.tinymceScriptSrc === 'string') {
+      return this.props.tinymceScriptSrc;
     }
-    // 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';
-    const cloudTinyJs = `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
-    return [{ src: cloudTinyJs, async, defer }];
+
+    return `https://cdn.tiny.cloud/1/${apiKey}/tinymce/${channel}/tinymce.min.js`;
   }
 
   private getInitialValue() {
@@ -225,20 +202,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, prevProps, this.props, this.boundHandlers, (key) => this.props[key] as any);
+      configHandlers(this.editor as any, 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(this.changeEvents(), this.handleEditorChange);
-        this.editor.on(this.beforeInputEvent(), this.handleBeforeInput);
+        this.editor.on(changeEvents(), this.handleEditorChange);
+        this.editor.on(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(this.changeEvents(), this.handleEditorChange);
-        this.editor.off(this.beforeInputEvent(), this.handleBeforeInput);
+        this.editor.off(changeEvents(), this.handleEditorChange);
+        this.editor.off(beforeInputEvent(), this.handleBeforeInput);
         this.editor.off('keydown', this.handleBeforeInputSpecial);
         this.editor.off('keyup', this.handleEditorChangeSpecial);
         this.editor.off('NewBlock', this.handleEditorChange);
@@ -286,20 +263,19 @@ 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 && this.props.rollback !== false) {
+      if (this.props.value !== undefined && this.props.value !== newContent) {
         // start a timer and revert to the value if not applied in time
         if (!this.rollbackTimer) {
-          this.rollbackTimer = window.setTimeout(
-            this.rollbackChange,
-            typeof this.props.rollback === 'number' ? this.props.rollback : 200
-          );
+          this.rollbackTimer = window.setTimeout(this.rollbackChange, 200);
         }
       }
 
       if (newContent !== this.currentContent) {
         this.currentContent = newContent;
         if (isFunction(this.props.onEditorChange)) {
-          this.props.onEditorChange(newContent, editor);
+          const format = this.props.outputFormat;
+          const out = format === 'html' ? newContent : editor.getContent({ format });
+          this.props.onEditorChange(out, editor);
         }
       }
     }
@@ -311,41 +287,25 @@ export class Editor extends React.Component<IAllProps> {
     }
   };
 
-  private initialise = (attempts = 0) => {
+  private initialise = () => {
     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(this.view);
+    const tinymce = getTinymce();
     if (!tinymce) {
       throw new Error('tinymce should have been loaded into global scope');
     }
 
-    const finalInit: EditorOptions = {
+    const finalInit: RawEditorOptions = {
       ...this.props.init,
       selector: undefined,
       target,
       readonly: this.props.disabled,
       inline: this.inline,
-      plugins: mergePlugins(this.props.init?.plugins, this.props.plugins),
-      toolbar: this.props.toolbar ?? this.props.init?.toolbar,
+      plugins: mergePlugins(this.props.init && this.props.init.plugins, this.props.plugins),
+      toolbar: this.props.toolbar || (this.props.init && this.props.init.toolbar),
       setup: (editor) => {
         this.editor = editor;
         this.bindHandlers({});
@@ -379,7 +339,7 @@ export class Editor extends React.Component<IAllProps> {
           editor.setDirty(false);
         }
         const disabled = this.props.disabled ?? false;
-        setMode(this.editor, disabled ? 'readonly' : 'design');
+        editor.mode.set(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);
@@ -393,6 +353,24 @@ export class Editor extends React.Component<IAllProps> {
       target.value = this.getInitialValue();
     }
 
-    tinymce.init(finalInit);
+    tinymce.init(finalInit as any);
   };
 }
+
+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,8 +1,16 @@
+/**
+ * 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<unknown> };
+export type CopyProps<T> = { [P in keyof T]: PropTypes.Requireable<P | unknown> };
 
 export type IEventPropTypes = CopyProps<IEvents>;
 
@@ -22,7 +30,6 @@ 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,
@@ -71,15 +78,7 @@ export const eventPropTypes: IEventPropTypes = {
   onShow: PropTypes.func,
   onSubmit: PropTypes.func,
   onUndo: 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,
+  onVisualAid: PropTypes.func
 };
 
 export const EditorPropTypes: IEditorPropTypes = {
@@ -89,6 +88,7 @@ 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,16 +96,7 @@ export const EditorPropTypes: IEditorPropTypes = {
   toolbar: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   disabled: PropTypes.bool,
   textareaName: 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])]),
+  tinymceScriptSrc: PropTypes.string,
   scriptLoading: PropTypes.shape({
     async: PropTypes.bool,
     defer: PropTypes.bool,

package/lib/components/Editor/index.tsx

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

package/package.json

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