opentiny 6.9.0

package/src/core/main/ts/fmt/TableFormats.ts

@@ -0,0 +1,51 @@
+import { Fun } from '@ephox/katamari';
+
+const genericBase = {
+  remove_similar: true,
+  inherit: false
+};
+
+const cellBase = {
+  selector: 'td,th',
+  ...genericBase
+};
+
+const cellFormats = {
+  tablecellbackgroundcolor: {
+    styles: { backgroundColor: '%value' },
+    ...cellBase
+  },
+  tablecellverticalalign: {
+    styles: {
+      'vertical-align': '%value'
+    },
+    ...cellBase
+  },
+  tablecellbordercolor: {
+    styles: { borderColor: '%value' },
+    ...cellBase
+  },
+  tablecellclass: {
+    classes: [ '%value' ],
+    ...cellBase
+  },
+  tableclass: {
+    selector: 'table',
+    classes: [ '%value' ],
+    ...genericBase
+  },
+  tablecellborderstyle: {
+    styles: { borderStyle: '%value' },
+    ...cellBase
+  },
+  tablecellborderwidth: {
+    styles: { borderWidth: '%value' },
+    ...cellBase
+  }
+};
+
+const get = Fun.constant(cellFormats);
+
+export {
+  get
+};

package/src/core/main/ts/fmt/ToggleFormat.ts

@@ -0,0 +1,20 @@
+import Editor from '../api/Editor';
+import * as ApplyFormat from './ApplyFormat';
+import { FormatVars } from './FormatTypes';
+import * as MatchFormat from './MatchFormat';
+import * as RemoveFormat from './RemoveFormat';
+
+const toggle = (editor: Editor, name: string, vars?: FormatVars, node?: Node): void => {
+  const fmt = editor.formatter.get(name);
+  if (fmt) {
+    if (MatchFormat.match(editor, name, vars, node) && (!('toggle' in fmt[0]) || fmt[0].toggle)) {
+      RemoveFormat.removeFormat(editor, name, vars, node);
+    } else {
+      ApplyFormat.applyFormat(editor, name, vars, node);
+    }
+  }
+};
+
+export {
+  toggle
+};

package/src/core/main/ts/focus/CefFocus.ts

@@ -0,0 +1,33 @@
+import { Throttler } from '@ephox/katamari';
+
+import Editor from '../api/Editor';
+import * as FakeCaretUtils from '../caret/FakeCaretUtils';
+
+const setup = (editor: Editor): void => {
+  const renderFocusCaret = Throttler.first(() => {
+    // AP-24 Added the second condition in this if because of a race condition with setting focus on the PowerPaste
+    // remove/keep formatting dialog on paste in IE11. Without this, because we paste twice on IE11, focus ends up set
+    // in the editor, not the dialog buttons. Specifically, we focus, blur, focus, blur, focus then enter this throttled
+    // code before the next blur has been able to run. With this check, this function doesn't run at all in this case,
+    // so focus goes to the dialog's buttons correctly.
+    if (!editor.removed && editor.getBody().contains(document.activeElement)) {
+      const rng = editor.selection.getRng();
+      if (rng.collapsed) { // see TINY-1479
+        const caretRange = FakeCaretUtils.renderRangeCaret(editor, rng, false);
+        editor.selection.setRng(caretRange);
+      }
+    }
+  }, 0);
+
+  editor.on('focus', () => {
+    renderFocusCaret.throttle();
+  });
+
+  editor.on('blur', () => {
+    renderFocusCaret.cancel();
+  });
+};
+
+export {
+  setup
+};

package/src/core/main/ts/focus/EditorFocus.ts

@@ -0,0 +1,139 @@
+import { Optional, Type } from '@ephox/katamari';
+import { Compare, Focus, SugarElement, SugarShadowDom } from '@ephox/sugar';
+
+import EditorSelection from '../api/dom/Selection';
+import Editor from '../api/Editor';
+import Env from '../api/Env';
+import * as CaretFinder from '../caret/CaretFinder';
+import { CaretPosition } from '../caret/CaretPosition';
+import * as ElementType from '../dom/ElementType';
+import * as RangeNodes from '../selection/RangeNodes';
+import * as SelectionBookmark from '../selection/SelectionBookmark';
+import * as FocusController from './FocusController';
+
+const getContentEditableHost = (editor: Editor, node: Node): HTMLElement | null =>
+  editor.dom.getParent(node, (node): node is HTMLElement => editor.dom.getContentEditable(node) === 'true');
+
+const getCollapsedNode = (rng: Range): Optional<SugarElement<Node>> =>
+  rng.collapsed ? Optional.from(RangeNodes.getNode(rng.startContainer, rng.startOffset)).map(SugarElement.fromDom) : Optional.none();
+
+const getFocusInElement = (root: SugarElement<Node>, rng: Range): Optional<SugarElement<Node>> => getCollapsedNode(rng).bind((node) => {
+  if (ElementType.isTableSection(node)) {
+    return Optional.some(node);
+  } else if (!Compare.contains(root, node)) {
+    return Optional.some(root);
+  } else {
+    return Optional.none();
+  }
+});
+
+const normalizeSelection = (editor: Editor, rng: Range): void => {
+  getFocusInElement(SugarElement.fromDom(editor.getBody()), rng).bind((elm) => {
+    return CaretFinder.firstPositionIn(elm.dom);
+  }).fold(
+    () => {
+      editor.selection.normalize();
+    },
+    (caretPos: CaretPosition) => editor.selection.setRng(caretPos.toRange())
+  );
+};
+
+const focusBody = (body: HTMLElement & { setActive?: VoidFunction }) => {
+  if (body.setActive) {
+    // IE 11 sometimes throws "Invalid function" then fallback to focus
+    // setActive is better since it doesn't scroll to the element being focused
+    try {
+      body.setActive();
+    } catch (ex) {
+      body.focus();
+    }
+  } else {
+    body.focus();
+  }
+};
+
+const hasElementFocus = (elm: SugarElement<Element>): boolean => Focus.hasFocus(elm) || Focus.search(elm).isSome();
+
+const hasIframeFocus = (editor: Editor): boolean =>
+  Type.isNonNullable(editor.iframeElement) && Focus.hasFocus(SugarElement.fromDom(editor.iframeElement));
+
+const hasInlineFocus = (editor: Editor): boolean => {
+  const rawBody = editor.getBody();
+  return rawBody && hasElementFocus(SugarElement.fromDom(rawBody));
+};
+
+const hasUiFocus = (editor: Editor): boolean => {
+  const dos = SugarShadowDom.getRootNode(SugarElement.fromDom(editor.getElement()));
+  // Editor container is the obvious one (Menubar, Toolbar, Status bar, Sidebar) and dialogs and menus are in an auxiliary element (silver theme specific)
+  // This can't use Focus.search() because only the theme has this element reference
+  return Focus.active(dos)
+    .filter((elem) => !FocusController.isEditorContentAreaElement(elem.dom) && FocusController.isUIElement(editor, elem.dom))
+    .isSome();
+};
+
+const hasFocus = (editor: Editor): boolean => editor.inline ? hasInlineFocus(editor) : hasIframeFocus(editor);
+
+const hasEditorOrUiFocus = (editor: Editor): boolean => hasFocus(editor) || hasUiFocus(editor);
+
+const focusEditor = (editor: Editor) => {
+  const selection: EditorSelection = editor.selection;
+  const body = editor.getBody();
+  let rng = selection.getRng();
+
+  editor.quirks.refreshContentEditable();
+
+  if (Type.isNonNullable(editor.bookmark) && !hasFocus(editor)) {
+    SelectionBookmark.getRng(editor).each((bookmarkRng) => {
+      editor.selection.setRng(bookmarkRng);
+      rng = bookmarkRng;
+    });
+  }
+
+  // Move focus to contentEditable=true child if needed
+  const contentEditableHost = getContentEditableHost(editor, selection.getNode());
+  if (contentEditableHost && editor.dom.isChildOf(contentEditableHost, body)) {
+    focusBody(contentEditableHost);
+    normalizeSelection(editor, rng);
+    activateEditor(editor);
+    return;
+  }
+
+  // Focus the window iframe
+  if (!editor.inline) {
+    // WebKit needs this call to fire focusin event properly see #5948
+    // But Opera pre Blink engine will produce an empty selection so skip Opera
+    if (!Env.browser.isOpera()) {
+      focusBody(body);
+    }
+
+    editor.getWin().focus();
+  }
+
+  // Focus the body as well since it's contentEditable
+  if (Env.browser.isFirefox() || editor.inline) {
+    focusBody(body);
+    normalizeSelection(editor, rng);
+  }
+
+  activateEditor(editor);
+};
+
+const activateEditor = (editor: Editor) => editor.editorManager.setActive(editor);
+
+const focus = (editor: Editor, skipFocus: boolean): void => {
+  if (editor.removed) {
+    return;
+  }
+
+  if (skipFocus) {
+    activateEditor(editor);
+  } else {
+    focusEditor(editor);
+  }
+};
+
+export {
+  focus,
+  hasFocus,
+  hasEditorOrUiFocus
+};

package/src/core/main/ts/focus/FocusController.ts

@@ -0,0 +1,151 @@
+import { Fun } from '@ephox/katamari';
+import { Class, Focus, SugarElement, SugarShadowDom } from '@ephox/sugar';
+
+import DOMUtils from '../api/dom/DOMUtils';
+import Editor from '../api/Editor';
+import EditorManager from '../api/EditorManager';
+import FocusManager from '../api/FocusManager';
+import * as Options from '../api/Options';
+import Delay from '../api/util/Delay';
+import * as NodeType from '../dom/NodeType';
+import * as SelectionRestore from '../selection/SelectionRestore';
+
+let documentFocusInHandler: ((e: FocusEvent) => void) | null;
+const DOM = DOMUtils.DOM;
+
+const isEditorUIElement = (elm: Node): boolean => {
+  // Since this can be overridden by third party we need to use the API reference here
+  return NodeType.isElement(elm) && FocusManager.isEditorUIElement(elm);
+};
+
+const isEditorContentAreaElement = (elm: Element): boolean => {
+  const classList = elm.classList;
+  if (classList !== undefined) {
+    // tox-edit-area__iframe === iframe container element
+    // mce-content-body === inline body element
+    return classList.contains('tox-edit-area') || classList.contains('tox-edit-area__iframe') || classList.contains('mce-content-body');
+  } else {
+    return false;
+  }
+};
+
+const isUIElement = (editor: Editor, elm: Node): boolean => {
+  const customSelector = Options.getCustomUiSelector(editor);
+  const parent = DOM.getParent(elm, (elm) => {
+    return (
+      isEditorUIElement(elm) ||
+      (customSelector ? editor.dom.is(elm, customSelector) : false)
+    );
+  });
+  return parent !== null;
+};
+
+const getActiveElement = (editor: Editor): Element => {
+  try {
+    const root = SugarShadowDom.getRootNode(SugarElement.fromDom(editor.getElement()));
+    return Focus.active(root).fold(
+      () => document.body,
+      (x) => x.dom
+    );
+  } catch (ex) {
+    // IE sometimes fails to get the activeElement when resizing table
+    // TODO: Investigate this
+    return document.body;
+  }
+};
+
+const registerEvents = (editorManager: EditorManager, e: { editor: Editor }) => {
+  const editor = e.editor;
+
+  SelectionRestore.register(editor);
+
+  const toggleContentAreaOnFocus = (editor: Editor, fn: (element: SugarElement<Element>, clazz: string) => void) => {
+    // Inline editors have a different approach to highlight the content area on focus
+    if (Options.shouldHighlightOnFocus(editor) && editor.inline !== true) {
+      const contentArea = SugarElement.fromDom(editor.getContainer());
+      fn(contentArea, 'tox-edit-focus');
+    }
+  };
+
+  editor.on('focusin', () => {
+    const focusedEditor = editorManager.focusedEditor;
+
+    if (isEditorContentAreaElement(getActiveElement(editor))) {
+      toggleContentAreaOnFocus(editor, Class.add);
+    }
+
+    if (focusedEditor !== editor) {
+      if (focusedEditor) {
+        focusedEditor.dispatch('blur', { focusedEditor: editor });
+      }
+
+      editorManager.setActive(editor);
+      editorManager.focusedEditor = editor;
+      editor.dispatch('focus', { blurredEditor: focusedEditor });
+      editor.focus(true);
+    }
+  });
+
+  editor.on('focusout', () => {
+    Delay.setEditorTimeout(editor, () => {
+      const focusedEditor = editorManager.focusedEditor;
+
+      // Remove focus highlight when the content area is no longer the active editor element, or if the highlighted editor is not the current focused editor
+      if (!isEditorContentAreaElement(getActiveElement(editor)) || focusedEditor !== editor) {
+        toggleContentAreaOnFocus(editor, Class.remove);
+      }
+
+      // Still the same editor the blur was outside any editor UI
+      if (!isUIElement(editor, getActiveElement(editor)) && focusedEditor === editor) {
+        editor.dispatch('blur', { focusedEditor: null });
+        editorManager.focusedEditor = null;
+      }
+    });
+  });
+
+  // Check if focus is moved to an element outside the active editor by checking if the target node
+  // isn't within the body of the activeEditor nor a UI element such as a dialog child control
+  if (!documentFocusInHandler) {
+    documentFocusInHandler = (e: FocusEvent) => {
+      const activeEditor = editorManager.activeEditor;
+
+      if (activeEditor) {
+        SugarShadowDom.getOriginalEventTarget(e).each((target) => {
+          const elem = (target as Node);
+          if (elem.ownerDocument === document) {
+            // Fire a blur event if the element isn't a UI element
+            if (elem !== document.body && !isUIElement(activeEditor, elem) && editorManager.focusedEditor === activeEditor) {
+              activeEditor.dispatch('blur', { focusedEditor: null });
+              editorManager.focusedEditor = null;
+            }
+          }
+        });
+      }
+    };
+
+    DOM.bind(document, 'focusin', documentFocusInHandler);
+  }
+};
+
+const unregisterDocumentEvents = (editorManager: EditorManager, e: { editor: Editor }) => {
+  if (editorManager.focusedEditor === e.editor) {
+    editorManager.focusedEditor = null;
+  }
+
+  if (!editorManager.activeEditor && documentFocusInHandler) {
+    DOM.unbind(document, 'focusin', documentFocusInHandler);
+    documentFocusInHandler = null;
+  }
+};
+
+const setup = (editorManager: EditorManager): void => {
+  editorManager.on('AddEditor', Fun.curry(registerEvents, editorManager));
+  editorManager.on('RemoveEditor', Fun.curry(unregisterDocumentEvents, editorManager));
+};
+
+export {
+  setup,
+  isEditorUIElement,
+  isEditorContentAreaElement,
+  isUIElement
+};

package/src/core/main/ts/focus/MediaFocus.ts

@@ -0,0 +1,25 @@
+import Editor from '../api/Editor';
+import * as FakeCaretUtils from '../caret/FakeCaretUtils';
+import * as CefUtils from '../dom/CefUtils';
+import { isContentEditableFalse, isMedia } from '../dom/NodeType';
+
+const setup = (editor: Editor): void => {
+  editor.on('init', () => {
+    // Audio elements don't fire mousedown/click events and only fire a focus event so
+    // we need to capture that event being fired and use it to update the selection.
+    editor.on('focusin', (e) => {
+      const target = e.target;
+      if (isMedia(target)) {
+        const ceRoot = CefUtils.getContentEditableRoot(editor.getBody(), target);
+        const node = isContentEditableFalse(ceRoot) ? ceRoot : target;
+        if (editor.selection.getNode() !== node) {
+          FakeCaretUtils.selectNode(editor, node).each((rng) => editor.selection.setRng(rng));
+        }
+      }
+    });
+  });
+};
+
+export {
+  setup
+};

package/src/core/main/ts/frames/Frames.ts

@@ -0,0 +1,22 @@
+import { Fun } from '@ephox/katamari';
+import { SugarElement } from '@ephox/sugar';
+
+import { Navigation } from './Navigation';
+
+const walkUp = (navigation: Navigation, doc: SugarElement<Document>): SugarElement<Element>[] => {
+  const frame = navigation.view(doc);
+  return frame.fold(Fun.constant([]), (f) => {
+    const parent = navigation.owner(f);
+    const rest = walkUp(navigation, parent);
+    return [ f ].concat(rest);
+  });
+};
+
+const pathTo = (element: SugarElement<Node>, navigation: Navigation): SugarElement<Element>[] => {
+  const d = navigation.owner(element);
+  return walkUp(navigation, d);
+};
+
+export {
+  pathTo
+};

package/src/core/main/ts/frames/Navigation.ts

@@ -0,0 +1,21 @@
+import { Optional } from '@ephox/katamari';
+import { SugarElement, Traverse } from '@ephox/sugar';
+
+export interface Navigation {
+  readonly view: (doc: SugarElement<Document>) => Optional<SugarElement<Element>>;
+  readonly owner: (elem: SugarElement<Node>) => SugarElement<Document>;
+}
+
+const view = (doc: SugarElement<Document>): Optional<SugarElement<Element>> => {
+  // Only walk up to the document this script is defined in.
+  // This prevents walking up to the parent window when the editor is in an iframe.
+  const element = doc.dom === document ? Optional.none<Element>() : Optional.from(doc.dom.defaultView?.frameElement);
+  return element.map(SugarElement.fromDom);
+};
+
+const owner = (element: SugarElement<Node>): SugarElement<Document> => Traverse.documentOrOwner(element);
+
+export {
+  view,
+  owner
+};

package/src/core/main/ts/frames/OuterPosition.ts

@@ -0,0 +1,26 @@
+import { Arr } from '@ephox/katamari';
+import { Scroll, SugarDocument, SugarElement, SugarLocation, SugarPosition } from '@ephox/sugar';
+
+import * as Frames from './Frames';
+import * as Navigation from './Navigation';
+
+const find = (element: SugarElement<Element>): SugarPosition => {
+  const doc = SugarDocument.getDocument();
+  const scroll = Scroll.get(doc);
+  const frames = Frames.pathTo(element, Navigation);
+  const offset = SugarLocation.viewport(element);
+
+  const r = Arr.foldr(frames, (b, a) => {
+    const loc = SugarLocation.viewport(a);
+    return {
+      left: b.left + loc.left,
+      top: b.top + loc.top
+    };
+  }, { left: 0, top: 0 });
+
+  return SugarPosition(r.left + offset.left + scroll.left, r.top + offset.top + scroll.top);
+};
+
+export {
+  find
+};

package/src/core/main/ts/geom/ClientRect.ts

@@ -0,0 +1,154 @@
+import { Arr, Optional } from '@ephox/katamari';
+
+export interface ClientRect {
+  left: number;
+  top: number;
+  bottom: number;
+  right: number;
+  width: number;
+  height: number;
+}
+
+const round = Math.round;
+
+const clone = (rect: ClientRect): ClientRect => {
+  if (!rect) {
+    return { left: 0, top: 0, bottom: 0, right: 0, width: 0, height: 0 };
+  }
+
+  return {
+    left: round(rect.left),
+    top: round(rect.top),
+    bottom: round(rect.bottom),
+    right: round(rect.right),
+    width: round(rect.width),
+    height: round(rect.height)
+  };
+};
+
+const collapse = (rect: ClientRect, toStart: boolean): ClientRect => {
+  rect = clone(rect);
+
+  if (toStart) {
+    rect.right = rect.left;
+  } else {
+    rect.left = rect.left + rect.width;
+    rect.right = rect.left;
+  }
+
+  rect.width = 0;
+
+  return rect;
+};
+
+const isEqual = (rect1: ClientRect, rect2: ClientRect): boolean => (
+  rect1.left === rect2.left &&
+    rect1.top === rect2.top &&
+    rect1.bottom === rect2.bottom &&
+    rect1.right === rect2.right
+);
+
+const isValidOverflow = (overflowY: number, rect1: ClientRect, rect2: ClientRect): boolean => overflowY >= 0 && overflowY <= Math.min(rect1.height, rect2.height) / 2;
+
+const isAbove = (rect1: ClientRect, rect2: ClientRect): boolean => {
+  const halfHeight = Math.min(rect2.height / 2, rect1.height / 2);
+  if ((rect1.bottom - halfHeight) < rect2.top) {
+    return true;
+  }
+
+  if (rect1.top > rect2.bottom) {
+    return false;
+  }
+
+  return isValidOverflow(rect2.top - rect1.bottom, rect1, rect2);
+};
+
+const isBelow = (rect1: ClientRect, rect2: ClientRect): boolean => {
+  if (rect1.top > rect2.bottom) {
+    return true;
+  }
+
+  if (rect1.bottom < rect2.top) {
+    return false;
+  }
+
+  return isValidOverflow(rect2.bottom - rect1.top, rect1, rect2);
+};
+
+const isLeft = (rect1: ClientRect, rect2: ClientRect): boolean => rect1.left < rect2.left;
+const isRight = (rect1: ClientRect, rect2: ClientRect): boolean => rect1.right > rect2.right;
+
+const compare = (rect1: ClientRect, rect2: ClientRect): number => {
+  if (isAbove(rect1, rect2)) {
+    return -1;
+  }
+
+  if (isBelow(rect1, rect2)) {
+    return 1;
+  }
+
+  if (isLeft(rect1, rect2)) {
+    return -1;
+  }
+
+  if (isRight(rect1, rect2)) {
+    return 1;
+  }
+
+  return 0;
+};
+
+const containsXY = (rect: ClientRect, clientX: number, clientY: number): boolean => (
+  clientX >= rect.left &&
+    clientX <= rect.right &&
+    clientY >= rect.top &&
+    clientY <= rect.bottom
+);
+
+const boundingClientRectFromRects = (rects: ClientRect[]): Optional<ClientRect> => {
+  return Arr.foldl(rects, (acc, rect) => {
+    return acc.fold(
+      () => Optional.some(rect),
+      (prevRect) => {
+        const left = Math.min(rect.left, prevRect.left);
+        const top = Math.min(rect.top, prevRect.top);
+        const right = Math.max(rect.right, prevRect.right);
+        const bottom = Math.max(rect.bottom, prevRect.bottom);
+
+        return Optional.some({
+          top,
+          right,
+          bottom,
+          left,
+          width: right - left,
+          height: bottom - top
+        });
+      }
+    );
+  }, Optional.none());
+};
+
+const distanceToRectEdgeFromXY = <T extends ClientRect>(rect: T, x: number, y: number): number => {
+  const cx = Math.max(Math.min(x, rect.left + rect.width), rect.left);
+  const cy = Math.max(Math.min(y, rect.top + rect.height), rect.top);
+  return Math.sqrt((x - cx) * (x - cx) + (y - cy) * (y - cy));
+};
+
+const overlapX = <T extends ClientRect>(r1: T, r2: T): number => Math.max(0, Math.min(r1.right, r2.right) - Math.max(r1.left, r2.left));
+const overlapY = <T extends ClientRect>(r1: T, r2: T): number => Math.max(0, Math.min(r1.bottom, r2.bottom) - Math.max(r1.top, r2.top));
+
+export {
+  clone,
+  collapse,
+  isEqual,
+  isAbove,
+  isBelow,
+  isLeft,
+  isRight,
+  compare,
+  containsXY,
+  boundingClientRectFromRects,
+  distanceToRectEdgeFromXY,
+  overlapX,
+  overlapY
+};

package/src/core/main/ts/html/AstNodeType.ts

@@ -0,0 +1,10 @@
+import AstNode from '../api/html/Node';
+
+const isHeading = (node: AstNode): boolean => [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ].includes(node.name);
+
+const isSummary = (node: AstNode): boolean => node.name === 'summary';
+
+export {
+  isHeading,
+  isSummary
+};