OXIESEC PANEL

Name	Size	Modified	Perms
📁 ..	-	02/20/2020 05:40:27 AM	rwxr-xr-x
📄 DragDropOverrides.ts	7.64 KB	02/20/2020 05:40:30 AM	rw-r--r--
📄 EditorRemove.ts	2.73 KB	02/20/2020 05:40:30 AM	rw-r--r--
📄 EditorSettings.ts	7.92 KB	02/20/2020 05:40:32 AM	rw-r--r--
📄 EditorView.ts	2.47 KB	02/20/2020 05:40:32 AM	rw-r--r--
📄 ErrorReporter.ts	2.43 KB	02/20/2020 05:40:33 AM	rw-r--r--
📄 ForceBlocks.ts	3.71 KB	02/20/2020 05:40:33 AM	rw-r--r--
📄 Mode.ts	4.53 KB	02/20/2020 05:40:34 AM	rw-r--r--
📄 NodeChange.ts	5.19 KB	02/20/2020 05:40:34 AM	rw-r--r--
📄 SelectionOverrides.ts	16.08 KB	02/20/2020 05:40:35 AM	rw-r--r--
📁 annotate	-	02/20/2020 05:41:49 AM	rwxr-xr-x
📁 api	-	02/20/2020 06:12:10 AM	rwxr-xr-x
📁 bookmark	-	02/20/2020 05:42:16 AM	rwxr-xr-x
📁 caret	-	02/20/2020 05:42:30 AM	rwxr-xr-x
📁 commands	-	02/20/2020 05:42:34 AM	rwxr-xr-x
📁 content	-	02/20/2020 05:42:42 AM	rwxr-xr-x
📁 delete	-	02/20/2020 05:42:54 AM	rwxr-xr-x
📁 dom	-	02/20/2020 05:43:08 AM	rwxr-xr-x
📁 file	-	02/20/2020 05:43:14 AM	rwxr-xr-x
📁 fmt	-	02/20/2020 05:43:26 AM	rwxr-xr-x
📁 focus	-	02/20/2020 05:43:32 AM	rwxr-xr-x
📁 geom	-	02/20/2020 05:43:36 AM	rwxr-xr-x
📁 html	-	02/20/2020 05:43:38 AM	rwxr-xr-x
📁 init	-	02/20/2020 05:43:46 AM	rwxr-xr-x
📁 keyboard	-	02/20/2020 05:44:00 AM	rwxr-xr-x
📁 newline	-	02/20/2020 05:44:07 AM	rwxr-xr-x
📁 selection	-	02/20/2020 05:44:24 AM	rwxr-xr-x
📁 text	-	02/20/2020 05:44:30 AM	rwxr-xr-x
📁 ui	-	02/20/2020 05:44:34 AM	rwxr-xr-x
📁 undo	-	02/20/2020 05:44:41 AM	rwxr-xr-x
📁 util	-	02/20/2020 05:44:48 AM	rwxr-xr-x

Editing: Mode.ts

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */
/**
 * TinyMCE 5 Mode API.
 *
 * @class tinymce.editor.mode
 */

import { Element, Class } from '@ephox/sugar';
import Editor from './api/Editor';
import Events from './api/Events';
import { Obj, Fun, Arr } from '@ephox/katamari';
import { console } from '@ephox/dom-globals';

export interface Mode {
  /**
   * @method isReadOnly
   * @return {Boolean} true if the editor is in a readonly state.
   */
  isReadOnly: () => boolean;

/**
   * Sets the editor mode. Mode can be for example "design", "code" or "readonly".
   *
   * @method set
   * @param {String} mode Mode to set the editor in.
   */
  set: (mode: string) => void;

/**
   * @method get
   * @return {String} The active editor mode.
   */
  get: () => string;

/**
   * Registers a new editor mode.
   *
   * @method register
   * @param {ModeApi} api Activation and Deactivation API for the new mode.
   */
  register: (mode: string, api: ModeApi) => void;
}

export interface ModeApi {
  /**
   * Handler to activate this mode, called before deactivating the previous mode.
   *
   * @method activate
   */
  activate: () => void;

/**
   * Handler to deactivate this mode, called after activating the new mode.
   *
   * @method deactivate
   */
  deactivate: () => void;

/**
   * Flags whether the editor should be made readonly while this mode is active.
   *
   * @property editorReadOnly
   * @type boolean
   */
  editorReadOnly: boolean;
}

// Not quite sugar Class.toggle, it's more of a Class.set
const toggleClass = (elm, cls, state: boolean) => {
  if (Class.has(elm, cls) && state === false) {
    Class.remove(elm, cls);
  } else if (state) {
    Class.add(elm, cls);
  }
};

export const create = (editor: Editor): Mode => {
  let activeMode = 'design';
  const defaultModes = ['design', 'readonly'];

const availableModes: Record<string, ModeApi> = {
    design: {
      activate: Fun.noop,
      deactivate: Fun.noop,
      editorReadOnly: false
    },
    readonly: {
      activate: Fun.noop,
      deactivate: Fun.noop,
      editorReadOnly: true
    }
  };

const setEditorCommandState = (cmd: string, state: boolean) => {
    try {
      editor.getDoc().execCommand(cmd, false, state);
    } catch (ex) {
      // Ignore
    }
  };

const toggleReadOnly = (state: boolean) => {
    toggleClass(Element.fromDom(editor.getBody()), 'mce-content-readonly', state);

if (state) {
      editor.selection.controlSelection.hideResizeRect();
      editor.readonly = true;
      editor.getBody().contentEditable = 'false';
    } else {
      editor.readonly = false;
      editor.getBody().contentEditable = 'true';
      setEditorCommandState('StyleWithCSS', false);
      setEditorCommandState('enableInlineTableEditing', false);
      setEditorCommandState('enableObjectResizing', false);
      editor.focus();
      editor.nodeChanged();
    }
  };

const switchToMode = (mode: string) => {
    const oldMode = availableModes[activeMode];
    const newMode = availableModes[mode];

// if activate fails, hope nothing bad happened and abort
    try {
      newMode.activate();
    } catch (e) {
      console.error(`problem while activating editor mode ${mode}:`, e);
      return;
    }
    oldMode.deactivate();
    if (oldMode.editorReadOnly !== newMode.editorReadOnly) {
      toggleReadOnly(newMode.editorReadOnly);
    }
    activeMode = mode;
    Events.fireSwitchMode(editor, mode);
  };

const set = (mode: string) => {
    if (mode === activeMode) {
      return;
    } else if (!Obj.has(availableModes, mode)) {
      throw new Error(`Editor mode '${mode}' is invalid`);
    }

if (editor.initialized) {
      switchToMode(mode);
    } else {
      editor.on('init', () => switchToMode(mode));
    }
  };

const get = () => activeMode;

const isReadOnly = () => editor.readonly === true;

return {
    isReadOnly,
    set,
    get,
    register
  };
};