const setupEvents = (editor: Editor) => {
  const contentWindow = editor.getWin();
  const initialDocEle = editor.getDoc().documentElement;

  const lastWindowDimensions = Cell(Position(contentWindow.innerWidth, contentWindow.innerHeight));
  const lastDocumentDimensions = Cell(Position(initialDocEle.offsetWidth, initialDocEle.offsetHeight));

  const resize = () => {
    // Don't use the initial doc ele, as there's a small chance it may have changed
    const docEle = editor.getDoc().documentElement;

    // Check if the window or document dimensions have changed and if so then trigger a content resize event
    const outer = lastWindowDimensions.get();
    const inner = lastDocumentDimensions.get();
    if (outer.left() !== contentWindow.innerWidth || outer.top() !== contentWindow.innerHeight) {
      lastWindowDimensions.set(Position(contentWindow.innerWidth, contentWindow.innerHeight));
      Events.fireResizeContent(editor);
    } else if (inner.left() !== docEle.offsetWidth || inner.top() !== docEle.offsetHeight) {
      lastDocumentDimensions.set(Position(docEle.offsetWidth, docEle.offsetHeight));
      Events.fireResizeContent(editor);
    }
  };

  DOM.bind(contentWindow, 'resize', resize);

  // Bind to async load events and trigger a content resize event if the size has changed
  const elementLoad = DomEvent.capture(Element.fromDom(editor.getBody()), 'load', resize);

  editor.on('remove', () => {
    elementLoad.unbind();
    DOM.unbind(contentWindow, 'resize', resize);
  });
};

const done = function (editor: Editor, currentIndexState, keepEditorSelection?) {
  let i, nodes, startContainer, endContainer;

  nodes = Tools.toArray(editor.getBody().getElementsByTagName('span'));
  for (i = 0; i < nodes.length; i++) {
    const nodeIndex = getElmIndex(nodes[i]);

    if (nodeIndex !== null && nodeIndex.length) {
      if (nodeIndex === currentIndexState.get().toString()) {
        if (!startContainer) {
          startContainer = nodes[i].firstChild;
        }

        endContainer = nodes[i].firstChild;
      }

      unwrap(nodes[i]);
    }
  }

  if (startContainer && endContainer) {
    const rng = editor.dom.createRng();
    rng.setStart(startContainer, 0);
    rng.setEnd(endContainer, endContainer.data.length);

    if (keepEditorSelection !== false) {
      editor.selection.setRng(rng);
    }

    return rng;
  }
};

const fallback = (editor: Editor): FallbackFn => (html, done) => {
  const markedHtml = InternalHtml.mark(html);
  const outer = editor.dom.create('div', {
    'contenteditable': 'false',
    'data-mce-bogus': 'all'
  });
  const inner = editor.dom.create('div', { contenteditable: 'true' }, markedHtml);
  editor.dom.setStyles(outer, {
    position: 'fixed',
    top: '0',
    left: '-3000px',
    width: '1000px',
    overflow: 'hidden'
  });
  outer.appendChild(inner);
  editor.dom.add(editor.getBody(), outer);

  const range = editor.selection.getRng();
  inner.focus();

  const offscreenRange: Range = editor.dom.createRng();
  offscreenRange.selectNodeContents(inner);
  editor.selection.setRng(offscreenRange);

  Delay.setTimeout(() => {
    editor.selection.setRng(range);
    outer.parentNode.removeChild(outer);
    done();
  }, 0);
};

  const paintClientRect = function (rect, color, id) {
    const editor: Editor = tinymce.activeEditor;
    const $ = editor.$;
    let rectDiv;
    const viewPort = editor.dom.getViewPort();

    if (!rect) {
      return;
    }

    color = color || 'red';
    id = id || color;
    rectDiv = $('#' + id);

    if (!rectDiv[0]) {
      rectDiv = $('<div></div>').appendTo(editor.getBody());
    }

    rectDiv.attr('id', id).css({
      position: 'absolute',
      left: (rect.left + viewPort.x) + 'px',
      top: (rect.top + viewPort.y) + 'px',
      width: (rect.width || 1) + 'px',
      height: rect.height + 'px',
      background: color,
      opacity: 0.8
    });
  };

    editor.on('contextmenu', (e) => {
      if (isNativeOverrideKeyEvent(editor, e)) {
        return;
      }

      // Different browsers trigger the context menu from keyboards differently, so need to check both the button and target here
      // Chrome: button = 0 & target = the selection range node
      // Firefox: button = 0 & target = body
      // IE: button = 2 & target = body
      // Safari: N/A (Mac's don't expose a contextmenu keyboard shortcut)
      const isTriggeredByKeyboardEvent = e.button !== 2 || e.target === editor.getBody();
      const anchorSpec = isTriggeredByKeyboardEvent ? getNodeAnchor(editor) : getPointAnchor(editor, e);

      const registry = editor.ui.registry.getAll();
      const menuConfig = Settings.getContextMenu(editor);

      // Use the event target element for mouse clicks, otherwise fallback to the current selection
      const selectedElement = isTriggeredByKeyboardEvent ? editor.selection.getStart(true) : e.target as Element;

      const items = generateContextMenu(registry.contextMenus, menuConfig, selectedElement);

      NestedMenus.build(items, ItemResponse.CLOSE_ON_EXECUTE, backstage).map((menuData) => {
        e.preventDefault();

        // show the context menu, with items set to close on click
        InlineView.showMenuAt(contextmenu, anchorSpec, {
          menu: {
            markers: MenuParts.markers('normal')
          },
          data: menuData
        });
      });
    });

const create = (editor: Editor, lastRngCell, pasteBinDefaultContent: string) => {
  const dom = editor.dom, body = editor.getBody();
  let pasteBinElm;

  lastRngCell.set(editor.selection.getRng());

  // Create a pastebin
  pasteBinElm = editor.dom.add(getPasteBinParent(editor), 'div', {
    'id': 'mcepastebin',
    'class': 'mce-pastebin',
    'contentEditable': true,
    'data-mce-bogus': 'all',
    'style': 'position: fixed; top: 50%; width: 10px; height: 10px; overflow: hidden; opacity: 0'
  }, pasteBinDefaultContent);

  // Move paste bin out of sight since the controlSelection rect gets displayed otherwise on IE and Gecko
  if (Env.ie || Env.gecko) {
    dom.setStyle(pasteBinElm, 'left', dom.getStyle(body, 'direction', true) === 'rtl' ? 0xFFFF : -0xFFFF);
  }

  // Prevent focus events from bubbeling fixed FocusManager issues
  dom.bind(pasteBinElm, 'beforedeactivate focusin focusout', function (e) {
    e.stopPropagation();
  });

  delegatePasteEvents(editor, pasteBinElm, pasteBinDefaultContent);

  pasteBinElm.focus();
  editor.selection.select(pasteBinElm, true);
};

export const getNodeAnchor = (editor: Editor): NodeAnchorSpec => {
  return {
    anchor: 'node',
    node: Option.some(Element.fromDom(editor.selection.getNode())),
    root: Element.fromDom(editor.getBody())
  };
};

    return Step.sync(function () {
      const x = Cursors.calculateOne(Element.fromDom(editor.getBody()), path);
      const rng = editor.dom.createRng();
      rng.setStart(x.dom(), offset);
      rng.setEnd(x.dom(), offset);

      ScrollIntoView.scrollRangeIntoView(editor, rng);
    });

const toggleVisualBlocks = function (editor: Editor, pluginUrl: string, enabledState: Cell<boolean>) {
  const dom = editor.dom;

  dom.toggleClass(editor.getBody(), 'mce-visualblocks');
  enabledState.set(!enabledState.get());

  Events.fireVisualBlocks(editor, enabledState.get());
};

const isEmpty = (editor: Editor, html?: string) => {
  const forcedRootBlockName = editor.settings.forced_root_block;

  html = Tools.trim(typeof html === 'undefined' ? editor.getBody().innerHTML : html);

  return html === '' || new RegExp(
    '^<' + forcedRootBlockName + '[^>]*>((\u00a0|&nbsp;|[ \t]|<br[^>]*>)+?|)<\/' + forcedRootBlockName + '>|<br>$', 'i'
  ).test(html);
};