opentiny 6.9.0 → 6.9.2

package/src/core/main/ts/api/dom/DOMUtils.ts

@@ -1,1817 +0,0 @@
-import { Arr, Fun, Obj, Optionals, Strings, Type } from '@ephox/katamari';
-import { Attribute, Class, ContentEditable, Css, Html, Insert, Remove, Selectors, SugarElement, SugarNode, Traverse, WindowVisualViewport } from '@ephox/sugar';
-
-import * as TransparentElements from '../../content/TransparentElements';
-import * as Empty from '../../dom/Empty';
-import * as NodeType from '../../dom/NodeType';
-import * as Position from '../../dom/Position';
-import * as StyleSheetLoaderRegistry from '../../dom/StyleSheetLoaderRegistry';
-import * as TrimNode from '../../dom/TrimNode';
-import { GeomRect } from '../geom/Rect';
-import Entities from '../html/Entities';
-import Schema from '../html/Schema';
-import Styles, { StyleMap } from '../html/Styles';
-import { ForceHexColor, URLConverter } from '../OptionTypes';
-import { MappedEvent } from '../util/EventDispatcher';
-import Tools from '../util/Tools';
-import EventUtils, { EventUtilsCallback } from './EventUtils';
-import StyleSheetLoader from './StyleSheetLoader';
-
-/**
- * Utility class for various DOM manipulation and retrieval functions.
- *
- * @class tinymce.dom.DOMUtils
- * @example
- * // Add a class to an element by id in the page
- * tinymce.DOM.addClass('someid', 'someclass');
- *
- * // Add a class to an element by id inside the editor
- * tinymce.activeEditor.dom.addClass('someid', 'someclass');
- */
-
-// Shorten names
-const each = Tools.each;
-const grep = Tools.grep;
-
-const internalStyleName = 'data-mce-style';
-const numericalCssMap = Tools.makeMap('fill-opacity font-weight line-height opacity orphans widows z-index zoom', ' ');
-
-interface AttrHook {
-  set (elm: Element, value: string | boolean | number | null, name: string): void;
-  get (elm: Element, name: string): string | undefined;
-}
-
-interface AttrHooks {
-  style: AttrHook;
-  [key: string]: AttrHook;
-}
-
-export interface SetAttribEvent {
-  attrElm: HTMLElement;
-  attrName: string;
-  attrValue: string | boolean | number | null;
-}
-
-export interface DOMUtilsSettings {
-  schema: Schema;
-  url_converter: URLConverter;
-  url_converter_scope: any;
-  ownEvents: boolean;
-  keep_values: boolean;
-  update_styles: boolean;
-  root_element: HTMLElement | null;
-  collect: boolean;
-  onSetAttrib: (event: SetAttribEvent) => void;
-  contentCssCors: boolean;
-  referrerPolicy: ReferrerPolicy;
-  force_hex_color: ForceHexColor;
-}
-
-export type Target = Node | Window;
-export type RunArguments<T extends Node = Node> = string | T | Array<string | T> | null;
-export type BoundEvent = [ Target, string, EventUtilsCallback<any>, any ];
-type Callback<K extends string> = EventUtilsCallback<MappedEvent<HTMLElementEventMap, K>>;
-type RunResult<T, R> = T extends Array<any> ? R[] : false | R;
-
-interface DOMUtils {
-  doc: Document;
-  settings: Partial<DOMUtilsSettings>;
-  win: Window;
-  files: Record<string, boolean>;
-  stdMode: boolean;
-  boxModel: boolean;
-  styleSheetLoader: StyleSheetLoader;
-  boundEvents: BoundEvent[];
-  styles: Styles;
-  schema: Schema;
-  events: EventUtils;
-  root: Node | null;
-
-  isBlock: {
-    (node: Node | null): node is HTMLElement;
-    (node: string): boolean;
-  };
-  clone: (node: Node, deep: boolean) => Node;
-  getRoot: () => HTMLElement;
-  getViewPort: (argWin?: Window) => GeomRect;
-  getRect: (elm: string | HTMLElement) => GeomRect;
-  getSize: (elm: string | HTMLElement) => {
-    w: number;
-    h: number;
-  };
-  getParent: {
-    <K extends keyof HTMLElementTagNameMap>(node: string | Node | null, selector: K, root?: Node): HTMLElementTagNameMap[K] | null;
-    <T extends Element>(node: string | Node | null, selector: string | ((node: Node) => node is T), root?: Node): T | null;
-    (node: string | Node | null, selector?: string | ((node: Node) => boolean | void), root?: Node): Node | null;
-  };
-  getParents: {
-    <K extends keyof HTMLElementTagNameMap>(elm: string | HTMLElementTagNameMap[K] | null, selector: K, root?: Node, collect?: boolean): Array<HTMLElementTagNameMap[K]>;
-    <T extends Element>(node: string | Node | null, selector: string | ((node: Node) => node is T), root?: Node, collect?: boolean): T[];
-    (elm: string | Node | null, selector?: string | ((node: Node) => boolean | void), root?: Node, collect?: boolean): Node[];
-  };
-  get: {
-    <T extends Node>(elm: T): T;
-    (elm: string): HTMLElement | null;
-  };
-  getNext: (node: Node | null, selector: string | ((node: Node) => boolean)) => Node | null;
-  getPrev: (node: Node | null, selector: string | ((node: Node) => boolean)) => Node | null;
-  select: {
-    <K extends keyof HTMLElementTagNameMap>(selector: K, scope?: string | Node): Array<HTMLElementTagNameMap[K]>;
-    <T extends HTMLElement = HTMLElement>(selector: string, scope?: string | Node): T[];
-  };
-  is: {
-    <T extends Element>(elm: Node | Node[] | null, selector: string): elm is T;
-    (elm: Node | Node[] | null, selector: string): boolean;
-  };
-  add: (parentElm: RunArguments, name: string | Element, attrs?: Record<string, string | boolean | number | null>, html?: string | Node | null, create?: boolean) => HTMLElement;
-  create: {
-    <K extends keyof HTMLElementTagNameMap>(name: K, attrs?: Record<string, string | boolean | number | null>, html?: string | Node | null): HTMLElementTagNameMap[K];
-    (name: string, attrs?: Record<string, string | boolean | number | null>, html?: string | Node | null): HTMLElement;
-  };
-  createHTML: (name: string, attrs?: Record<string, string | null>, html?: string) => string;
-  createFragment: (html?: string) => DocumentFragment;
-  remove: {
-    <T extends Node>(node: T | T[], keepChildren?: boolean): typeof node extends Array<any> ? T[] : T;
-    <T extends Node>(node: string, keepChildren?: boolean): T | false;
-  };
-  getStyle: {
-    (elm: Element, name: string, computed: true): string;
-    (elm: string | Element | null, name: string, computed?: boolean): string | undefined;
-  };
-  setStyle: (elm: string | Element | Element[], name: string, value: string | number | null) => void;
-  setStyles: (elm: string | Element | Element[], stylesArg: StyleMap) => void;
-  removeAllAttribs: (e: RunArguments<Element>) => void;
-  setAttrib: (elm: RunArguments<Element>, name: string, value: string | boolean | number | null) => void;
-  setAttribs: (elm: RunArguments<Element>, attrs: Record<string, string | boolean | number | null>) => void;
-  getAttrib: (elm: string | Element | null, name: string, defaultVal?: string) => string;
-  getAttribs: (elm: string | Element) => NamedNodeMap | Attr[];
-  getPos: (elm: string | Element, rootElm?: Node) => {
-    x: number;
-    y: number;
-  };
-  parseStyle: (cssText: string) => Record<string, string>;
-  serializeStyle: (stylesArg: StyleMap, name?: string) => string;
-  addStyle: (cssText: string) => void;
-  loadCSS: (url: string) => void;
-  hasClass: (elm: string | Element, cls: string) => boolean;
-  addClass: (elm: RunArguments<Element>, cls: string) => void;
-  removeClass: (elm: RunArguments<Element>, cls: string) => void;
-  toggleClass: (elm: RunArguments<Element>, cls: string, state?: boolean) => void;
-  show: (elm: string | Node | Node[]) => void;
-  hide: (elm: string | Node | Node[]) => void;
-  isHidden: (elm: string | Node) => boolean;
-  uniqueId: (prefix?: string) => string;
-  setHTML: (elm: RunArguments<Element>, html: string) => void;
-  getOuterHTML: (elm: string | Node) => string;
-  setOuterHTML: (elm: string | Node | Node[], html: string) => void;
-  decode: (text: string) => string;
-  encode: (text: string) => string;
-  insertAfter: {
-    <T extends Node>(node: T | T[], reference: string | Node): T;
-    <T extends Node>(node: RunArguments<T>, reference: string | Node): RunResult<typeof node, T>;
-  };
-  replace: {
-    <T extends Node>(newElm: Node, oldElm: T | T[], keepChildren?: boolean): T;
-    <T extends Node>(newElm: Node, oldElm: RunArguments<T>, keepChildren?: boolean): false | T;
-  };
-  rename: {
-    <K extends keyof HTMLElementTagNameMap>(elm: Element, name: K): HTMLElementTagNameMap[K];
-    (elm: Element, name: string): Element;
-  };
-  findCommonAncestor: (a: Node, b: Node) => Node | null;
-  run <R, T extends Node>(this: DOMUtils, elm: T | T[], func: (node: T) => R, scope?: any): typeof elm extends Array<any> ? R[] : R;
-  run <R, T extends Node>(this: DOMUtils, elm: RunArguments<T>, func: (node: T) => R, scope?: any): RunResult<typeof elm, R>;
-  isEmpty: (node: Node, elements?: Record<string, any>, options?: Empty.IsEmptyOptions) => boolean;
-  createRng: () => Range;
-  nodeIndex: (node: Node, normalized?: boolean) => number;
-  split: {
-    <T extends Node>(parentElm: Node, splitElm: Node, replacementElm: T): T | undefined;
-    <T extends Node>(parentElm: Node, splitElm: T): T | undefined;
-  };
-  bind: {
-    <K extends string>(target: Target, name: K, func: Callback<K>, scope?: any): Callback<K>;
-    <K extends string>(target: Target[], name: K, func: Callback<K>, scope?: any): Callback<K>[];
-  };
-  unbind: {
-    <K extends string>(target: Target, name?: K, func?: EventUtilsCallback<MappedEvent<HTMLElementEventMap, K>>): EventUtils;
-    <K extends string>(target: Target[], name?: K, func?: EventUtilsCallback<MappedEvent<HTMLElementEventMap, K>>): EventUtils[];
-  };
-  fire: (target: Node | Window, name: string, evt?: {}) => EventUtils;
-  dispatch: (target: Node | Window, name: string, evt?: {}) => EventUtils;
-  getContentEditable: (node: Node) => string | null;
-  getContentEditableParent: (node: Node) => string | null;
-  isEditable: (node: Node | null | undefined) => boolean;
-  destroy: () => void;
-  isChildOf: (node: Node, parent: Node) => boolean;
-  dumpRng: (r: Range) => string;
-}
-
-const legacySetAttribute = (elm: SugarElement<Element>, name: string, value: string | number | boolean | null) => {
-  if (Type.isNullable(value) || value === '') {
-    Attribute.remove(elm, name);
-  } else {
-    Attribute.set(elm, name, value);
-  }
-};
-
-// Convert camel cased names back to hyphenated names
-const camelCaseToHyphens = (name: string): string =>
-  name.replace(/[A-Z]/g, (v) => '-' + v.toLowerCase());
-
-const findNodeIndex = (node: Node | null, normalized?: boolean) => {
-  let idx = 0;
-
-  if (node) {
-    for (let lastNodeType = node.nodeType, tempNode = node.previousSibling; tempNode; tempNode = tempNode.previousSibling) {
-      const nodeType = tempNode.nodeType;
-
-      // Normalize text nodes
-      if (normalized && NodeType.isText(tempNode)) {
-        if (nodeType === lastNodeType || !tempNode.data.length) {
-          continue;
-        }
-      }
-      idx++;
-      lastNodeType = nodeType;
-    }
-  }
-
-  return idx;
-};
-
-const updateInternalStyleAttr = (styles: Styles, elm: SugarElement<Element>) => {
-  const rawValue = Attribute.get(elm, 'style');
-  const value = styles.serialize(styles.parse(rawValue), SugarNode.name(elm));
-  legacySetAttribute(elm, internalStyleName, value);
-};
-
-const convertStyleToString = (cssValue: string | number, cssName: string): string => {
-  if (Type.isNumber(cssValue)) {
-    return Obj.has(numericalCssMap, cssName) ? cssValue + '' : cssValue + 'px';
-  } else {
-    return cssValue;
-  }
-};
-
-const applyStyle = ($elm: SugarElement<Node>, cssName: string, cssValue: string | number | null) => {
-  const normalizedName = camelCaseToHyphens(cssName);
-  if (Type.isNullable(cssValue) || cssValue === '') {
-    Css.remove($elm, normalizedName);
-  } else {
-    Css.set($elm, normalizedName, convertStyleToString(cssValue, normalizedName));
-  }
-};
-
-const setupAttrHooks = (styles: Styles, settings: Partial<DOMUtilsSettings>, getContext: () => any): AttrHooks => {
-  const keepValues = settings.keep_values;
-  const keepUrlHook: AttrHook = {
-    set: (elm, value, name) => {
-      const sugarElm = SugarElement.fromDom(elm);
-      if (Type.isFunction(settings.url_converter) && Type.isNonNullable(value)) {
-        value = settings.url_converter.call(settings.url_converter_scope || getContext(), String(value), name, elm);
-      }
-
-      const internalName = 'data-mce-' + name;
-      legacySetAttribute(sugarElm, internalName, value);
-      legacySetAttribute(sugarElm, name, value);
-    },
-
-    get: (elm, name) => {
-      const sugarElm = SugarElement.fromDom(elm);
-      return Attribute.get(sugarElm, 'data-mce-' + name) || Attribute.get(sugarElm, name);
-    }
-  };
-
-  const attrHooks: AttrHooks = {
-    style: {
-      set: (elm, value) => {
-        const sugarElm = SugarElement.fromDom(elm);
-
-        if (keepValues) {
-          legacySetAttribute(sugarElm, internalStyleName, value);
-        }
-
-        Attribute.remove(sugarElm, 'style');
-        // If setting a style then delegate to the css api, otherwise
-        // this will cause issues when using a content security policy
-        if (Type.isString(value)) {
-          Css.setAll(sugarElm, styles.parse(value));
-        }
-      },
-
-      get: (elm) => {
-        const sugarElm = SugarElement.fromDom(elm);
-        const value = Attribute.get(sugarElm, internalStyleName) || Attribute.get(sugarElm, 'style');
-        return styles.serialize(styles.parse(value), SugarNode.name(sugarElm));
-      }
-    }
-  };
-
-  if (keepValues) {
-    attrHooks.href = attrHooks.src = keepUrlHook;
-  }
-
-  return attrHooks;
-};
-
-/**
- * Constructs a new DOMUtils instance. Consult the TinyMCE Documentation for more details on settings etc for this class.
- *
- * @private
- * @constructor
- * @method DOMUtils
- * @param {Document} doc Document reference to bind the utility class to.
- * @param {settings} settings Optional settings collection.
- */
-const DOMUtils = (doc: Document, settings: Partial<DOMUtilsSettings> = {}): DOMUtils => {
-  const addedStyles: Record<string, boolean> = {};
-  const win = window;
-  const files: Record<string, boolean> = {};
-  let counter = 0;
-  const stdMode = true;
-  const boxModel = true;
-  const styleSheetLoader = StyleSheetLoaderRegistry.instance.forElement(SugarElement.fromDom(doc), {
-    contentCssCors: settings.contentCssCors,
-    referrerPolicy: settings.referrerPolicy
-  });
-  const boundEvents: Array<[ Target, string, Callback<any>, any ]> = [];
-  const schema = settings.schema ? settings.schema : Schema({});
-  const styles = Styles({
-    url_converter: settings.url_converter,
-    url_converter_scope: settings.url_converter_scope,
-    force_hex_color: settings.force_hex_color,
-  }, settings.schema);
-
-  const events = settings.ownEvents ? new EventUtils() : EventUtils.Event;
-  const blockElementsMap = schema.getBlockElements();
-
-  /**
-   * Returns true/false if the specified element is a block element or not.
-   *
-   * @method isBlock
-   * @param {Node/String} node Element/Node to check.
-   * @return {Boolean} True/False state if the node is a block element or not.
-   */
-  const isBlock = (node: string | Node | null) => {
-    if (Type.isString(node)) {
-      return Obj.has(blockElementsMap, node);
-    } else {
-      return NodeType.isElement(node) && (Obj.has(blockElementsMap, node.nodeName) || TransparentElements.isTransparentBlock(schema, node));
-    }
-  };
-
-  const get = <T extends Node | null | undefined>(elm: string | T): HTMLElement | T | null =>
-    elm && doc && Type.isString(elm)
-      ? doc.getElementById(elm)
-      : elm as T;
-
-  const _get = <T extends Node>(elm: string | T | null | undefined): SugarElement<T | HTMLElement> | null => {
-    const value = get(elm);
-    return Type.isNonNullable(value) ? SugarElement.fromDom(value) : null;
-  };
-
-  const getAttrib = (elm: string | Element | null, name: string, defaultVal: string = ''): string => {
-    let value: string | undefined;
-
-    const $elm = _get(elm);
-
-    if (Type.isNonNullable($elm) && SugarNode.isElement($elm)) {
-      const hook = attrHooks[name];
-
-      if (hook && hook.get) {
-        value = hook.get($elm.dom, name);
-      } else {
-        value = Attribute.get($elm, name);
-      }
-    }
-
-    return Type.isNonNullable(value) ? value : defaultVal;
-  };
-
-  const getAttribs = (elm: string | Element): NamedNodeMap | Attr[] => {
-    const node = get(elm);
-    return Type.isNullable(node) ? [] : node.attributes;
-  };
-
-  const setAttrib = (elm: RunArguments<Element>, name: string, value: string | boolean | number | null) => {
-    run(elm, (e) => {
-      if (NodeType.isElement(e)) {
-        const $elm = SugarElement.fromDom(e);
-        const val = value === '' ? null : value;
-
-        const originalValue = Attribute.get($elm, name);
-        const hook = attrHooks[name];
-        if (hook && hook.set) {
-          hook.set($elm.dom, val, name);
-        } else {
-          legacySetAttribute($elm, name, val);
-        }
-
-        if (originalValue !== val && settings.onSetAttrib) {
-          settings.onSetAttrib({
-            attrElm: $elm.dom as HTMLElement, // We lie here to not break backwards compatibility
-            attrName: name,
-            attrValue: val
-          });
-        }
-      }
-    });
-  };
-
-  const clone = (node: Node, deep: boolean) => {
-    return node.cloneNode(deep);
-  };
-
-  const getRoot = (): HTMLElement => settings.root_element || doc.body;
-
-  const getViewPort = (argWin?: Window): GeomRect => {
-    const vp = WindowVisualViewport.getBounds(argWin);
-
-    // Returns viewport size excluding scrollbars
-    return {
-      x: vp.x,
-      y: vp.y,
-      w: vp.width,
-      h: vp.height
-    };
-  };
-
-  const getPos = (elm: string | Element | null, rootElm?: Node) => Position.getPos(doc.body, get(elm), rootElm);
-
-  const setStyle = (elm: string | Element | Element[], name: string, value: string | number | null) => {
-    run(elm, (e) => {
-      const $elm = SugarElement.fromDom(e);
-      applyStyle($elm, name, value);
-
-      if (settings.update_styles) {
-        updateInternalStyleAttr(styles, $elm);
-      }
-    });
-  };
-
-  const setStyles = (elm: string | Element | Element[], stylesArg: StyleMap) => {
-    run(elm, (e) => {
-      const $elm = SugarElement.fromDom(e);
-      Obj.each(stylesArg, (v, n) => {
-        applyStyle($elm, n, v);
-      });
-
-      if (settings.update_styles) {
-        updateInternalStyleAttr(styles, $elm);
-      }
-    });
-  };
-
-  const getStyle = (elm: string | Element | null, name: string, computed?: boolean): string | undefined => {
-    const $elm = get(elm);
-
-    if (Type.isNullable($elm) || (!NodeType.isHTMLElement($elm) && !NodeType.isSVGElement($elm))) {
-      return undefined;
-    }
-
-    if (computed) {
-      return Css.get(SugarElement.fromDom($elm), camelCaseToHyphens(name));
-    } else {
-      // Camelcase it, if needed
-      name = name.replace(/-(\D)/g, (a, b) => b.toUpperCase());
-
-      if (name === 'float') {
-        name = 'cssFloat';
-      }
-
-      return $elm.style ? ($elm.style as Record<string, any>)[name] : undefined;
-    }
-  };
-
-  const getSize = (elm: HTMLElement | string | null): { w: number; h: number } => {
-    const $elm = get(elm);
-
-    if (!$elm) {
-      return { w: 0, h: 0 };
-    }
-
-    let w = getStyle($elm, 'width');
-    let h = getStyle($elm, 'height');
-
-    // Non pixel value, then force offset/clientWidth
-    if (!w || w.indexOf('px') === -1) {
-      w = '0';
-    }
-
-    // Non pixel value, then force offset/clientWidth
-    if (!h || h.indexOf('px') === -1) {
-      h = '0';
-    }
-
-    return {
-      w: parseInt(w, 10) || $elm.offsetWidth || $elm.clientWidth,
-      h: parseInt(h, 10) || $elm.offsetHeight || $elm.clientHeight
-    };
-  };
-
-  const getRect = (elm: string | HTMLElement): GeomRect => {
-    const $elm = get(elm);
-    const pos = getPos($elm);
-    const size = getSize($elm);
-
-    return {
-      x: pos.x, y: pos.y,
-      w: size.w, h: size.h
-    };
-  };
-
-  const is = <T extends Element>(elm: Node | Node[] | null, selector: string): elm is T => {
-    if (!elm) {
-      return false;
-    }
-
-    const elms = Type.isArray(elm) ? elm : [ elm ];
-
-    return Arr.exists(elms, (e) => {
-      return Selectors.is<T>(SugarElement.fromDom(e), selector);
-    });
-  };
-
-  const getParents = (elm: string | Node | null, selector?: string | ((node: Node) => boolean | void), root?: Node, collect?: boolean): Node[] | null => {
-    const result: Node[] = [];
-
-    let node = get(elm);
-    collect = collect === undefined;
-
-    // Default root on inline mode
-    const resolvedRoot = root || (getRoot().nodeName !== 'BODY' ? getRoot().parentNode : null);
-
-    // Wrap node name as func
-    if (Type.isString(selector)) {
-      if (selector === '*') {
-        selector = NodeType.isElement;
-      } else {
-        const selectorVal = selector;
-        selector = (node) => is(node, selectorVal);
-      }
-    }
-
-    while (node) {
-      // TODO: Remove nullable check once TINY-6599 is complete
-      if (node === resolvedRoot || Type.isNullable(node.nodeType) || NodeType.isDocument(node) || NodeType.isDocumentFragment(node)) {
-        break;
-      }
-
-      if (!selector || selector(node)) {
-        if (collect) {
-          result.push(node);
-        } else {
-          return [ node ];
-        }
-      }
-
-      node = node.parentNode;
-    }
-
-    return collect ? result : null;
-  };
-
-  const getParent = (node: string | Node | null, selector?: string | ((node: Node) => boolean | void), root?: Node): Node | null => {
-    const parents = getParents(node, selector, root, false);
-    return parents && parents.length > 0 ? parents[0] : null;
-  };
-
-  const _findSib = (node: Node | null, selector: string | ((node: Node) => boolean), name: 'previousSibling' | 'nextSibling') => {
-    let func = selector;
-
-    if (node) {
-      // If expression make a function of it using is
-      if (Type.isString(selector)) {
-        func = (node) => {
-          return is(node, selector);
-        };
-      }
-
-      // Loop all siblings
-      for (let tempNode = node[name]; tempNode; tempNode = tempNode[name]) {
-        if (Type.isFunction(func) && func(tempNode)) {
-          return tempNode;
-        }
-      }
-    }
-
-    return null;
-  };
-
-  const getNext = (node: Node | null, selector: string | ((node: Node) => boolean)) => _findSib(node, selector, 'nextSibling');
-
-  const getPrev = (node: Node | null, selector: string | ((node: Node) => boolean)) => _findSib(node, selector, 'previousSibling');
-
-  const isParentNode = (node: Node): node is ParentNode =>
-    Type.isFunction((node as any).querySelectorAll);
-
-  const select = (selector: string, scope?: Node | string): Element[] => {
-    const elm = get(scope) ?? settings.root_element ?? doc;
-    return isParentNode(elm) ? Arr.from(elm.querySelectorAll(selector)) : [];
-  };
-
-  const run = function <R, T extends Node> (this: any, elm: RunArguments<T>, func: (node: T, i?: number) => R, scope?: any): RunResult<typeof elm, R> {
-    const context = scope ?? this;
-
-    if (Type.isArray(elm)) {
-      const result: R[] = [];
-
-      each(elm, (e, i) => {
-        const node = get(e);
-        if (node) {
-          result.push(func.call(context, node as T, i));
-        }
-      });
-
-      return result;
-    } else {
-      const node = get(elm);
-      return !node ? false : func.call(context, node as T);
-    }
-  };
-
-  const setAttribs = (elm: RunArguments<Element>, attrs: Record<string, string | boolean | number | null>) => {
-    run(elm, ($elm) => {
-      Obj.each(attrs, (value, name) => {
-        setAttrib($elm, name, value);
-      });
-    });
-  };
-
-  const setHTML = (elm: RunArguments<Element>, html: string) => {
-    run(elm, (e) => {
-      const $elm = SugarElement.fromDom(e);
-      Html.set($elm, html);
-    });
-  };
-
-  const add = (parentElm: RunArguments, name: string | Element, attrs?: Record<string, string | boolean | number | null>, html?: string | Node | null, create?: boolean): HTMLElement =>
-    run(parentElm, (parentElm) => {
-      const newElm = Type.isString(name) ? doc.createElement(name) : name;
-
-      if (Type.isNonNullable(attrs)) {
-        setAttribs(newElm, attrs);
-      }
-
-      if (html) {
-        if (!Type.isString(html) && html.nodeType) {
-          newElm.appendChild(html);
-        } else if (Type.isString(html)) {
-          setHTML(newElm, html);
-        }
-      }
-
-      return !create ? parentElm.appendChild(newElm) : newElm;
-    }) as HTMLElement;
-
-  const create = (name: string, attrs?: Record<string, string | boolean | number | null>, html?: string | Node | null): HTMLElement =>
-    add(doc.createElement(name), name, attrs, html, true);
-
-  const decode = Entities.decode;
-  const encode = Entities.encodeAllRaw;
-
-  const createHTML = (name: string, attrs?: Record<string, string | null>, html: string = ''): string => {
-    let outHtml = '<' + name;
-
-    for (const key in attrs) {
-      if (Obj.hasNonNullableKey(attrs, key)) {
-        outHtml += ' ' + key + '="' + encode(attrs[key]) + '"';
-      }
-    }
-
-    if (Strings.isEmpty(html) && Obj.has(schema.getVoidElements(), name)) {
-      return outHtml + ' />';
-    } else {
-      return outHtml + '>' + html + '</' + name + '>';
-    }
-  };
-
-  const createFragment = (html?: string): DocumentFragment => {
-    const container = doc.createElement('div');
-    const frag = doc.createDocumentFragment();
-
-    // Append the container to the fragment so as to remove it from
-    // the current document context
-    frag.appendChild(container);
-
-    if (html) {
-      container.innerHTML = html;
-    }
-
-    let node: Node | null;
-    while ((node = container.firstChild)) {
-      frag.appendChild(node);
-    }
-
-    // Remove the container now that all the children have been transferred
-    frag.removeChild(container);
-
-    return frag;
-  };
-
-  const remove = <T extends Node>(node: string | T | T[], keepChildren?: boolean): RunResult<typeof node, T> => {
-    return run(node, (n) => {
-      const $node = SugarElement.fromDom(n);
-
-      if (keepChildren) {
-        // Unwrap but don't keep any empty text nodes
-        Arr.each(Traverse.children($node), (child) => {
-          if (SugarNode.isText(child) && child.dom.length === 0) {
-            Remove.remove(child);
-          } else {
-            Insert.before($node, child);
-          }
-        });
-      }
-
-      Remove.remove($node);
-
-      return $node.dom;
-    });
-  };
-
-  const removeAllAttribs = (e: RunArguments<Element>) => run(e, (e) => {
-    const attrs = e.attributes;
-    for (let i = attrs.length - 1; i >= 0; i--) {
-      e.removeAttributeNode(attrs.item(i) as Attr);
-    }
-  });
-
-  const parseStyle = (cssText: string): Record<string, string> => styles.parse(cssText);
-
-  const serializeStyle = (stylesArg: StyleMap, name?: string) => styles.serialize(stylesArg, name);
-
-  const addStyle = (cssText: string) => {
-    // Prevent inline from loading the same styles twice
-    if (self !== DOMUtils.DOM && doc === document) {
-      if (addedStyles[cssText]) {
-        return;
-      }
-
-      addedStyles[cssText] = true;
-    }
-
-    // Create style element if needed
-    let styleElm = doc.getElementById('mceDefaultStyles') as HTMLStyleElement | null;
-    if (!styleElm) {
-      styleElm = doc.createElement('style');
-      styleElm.id = 'mceDefaultStyles';
-      styleElm.type = 'text/css';
-
-      const head = doc.head;
-      if (head.firstChild) {
-        head.insertBefore(styleElm, head.firstChild);
-      } else {
-        head.appendChild(styleElm);
-      }
-    }
-
-    // Append style data to old or new style element
-    if ((styleElm as any).styleSheet) {
-      (styleElm as any).styleSheet.cssText += cssText;
-    } else {
-      styleElm.appendChild(doc.createTextNode(cssText));
-    }
-  };
-
-  const loadCSS = (urls: string) => {
-    if (!urls) {
-      urls = '';
-    }
-
-    Arr.each(urls.split(','), (url) => {
-      files[url] = true;
-      styleSheetLoader.load(url).catch(Fun.noop);
-    });
-  };
-
-  const toggleClass = (elm: RunArguments<Element>, cls: string, state?: boolean) => {
-    run(elm, (e) => {
-      if (NodeType.isElement(e)) {
-        const $elm = SugarElement.fromDom(e);
-        // TINY-4520: DomQuery used to handle specifying multiple classes and the
-        // formatter relies on it due to the changes made for TINY-7227
-        const classes = cls.split(' ');
-        Arr.each(classes, (c) => {
-          if (Type.isNonNullable(state)) {
-            const fn = state ? Class.add : Class.remove;
-            fn($elm, c);
-          } else {
-            Class.toggle($elm, c);
-          }
-        });
-      }
-    });
-  };
-
-  const addClass = (elm: RunArguments<Element>, cls: string) => {
-    toggleClass(elm, cls, true);
-  };
-
-  const removeClass = (elm: RunArguments<Element>, cls: string) => {
-    toggleClass(elm, cls, false);
-  };
-
-  const hasClass = (elm: string | Element, cls: string) => {
-    const $elm = _get(elm);
-    // TINY-4520: DomQuery used to handle specifying multiple classes and the
-    // formatter relies on it due to the changes made for TINY-7227
-    const classes = cls.split(' ');
-    return Type.isNonNullable($elm) && Arr.forall(classes, (c) => Class.has($elm, c));
-  };
-
-  const show = (elm: string | Node | Node[]) => {
-    run(elm, (e) => Css.remove(SugarElement.fromDom(e), 'display'));
-  };
-
-  const hide = (elm: string | Node | Node[]) => {
-    run(elm, (e) => Css.set(SugarElement.fromDom(e), 'display', 'none'));
-  };
-
-  const isHidden = (elm: string | Node): boolean => {
-    const $elm = _get(elm);
-    return Type.isNonNullable($elm) && Optionals.is(Css.getRaw($elm, 'display'), 'none');
-  };
-
-  const uniqueId = (prefix?: string) => (!prefix ? 'mce_' : prefix) + (counter++);
-
-  const getOuterHTML = (elm: string | Node): string => {
-    const $elm = _get(elm);
-
-    if (Type.isNonNullable($elm)) {
-      return NodeType.isElement($elm.dom) ? $elm.dom.outerHTML : Html.getOuter($elm);
-    } else {
-      return '';
-    }
-  };
-
-  const setOuterHTML = (elm: string | Node | Node[], html: string) => {
-    run(elm, ($elm) => {
-      if (NodeType.isElement($elm)) {
-        $elm.outerHTML = html;
-      }
-    });
-  };
-
-  const insertAfter = <T extends Node>(node: RunArguments<T>, reference: string | Node): RunResult<typeof node, T> => {
-    const referenceNode = get(reference);
-
-    return run(node, (node) => {
-      const parent = referenceNode?.parentNode;
-      const nextSibling = referenceNode?.nextSibling;
-
-      if (parent) {
-        if (nextSibling) {
-          parent.insertBefore(node, nextSibling);
-        } else {
-          parent.appendChild(node);
-        }
-      }
-
-      return node;
-    });
-  };
-
-  const replace = <T extends Node>(newElm: Node, oldElm: RunArguments<T>, keepChildren?: boolean) => run<T, T>(oldElm, (elm) => {
-    const replacee = Type.isArray(oldElm) ? newElm.cloneNode(true) : newElm;
-
-    if (keepChildren) {
-      each(grep(elm.childNodes), (node) => {
-        replacee.appendChild(node);
-      });
-    }
-
-    elm.parentNode?.replaceChild(replacee, elm);
-    return elm;
-  }) as T;
-
-  const rename = <K extends keyof HTMLElementTagNameMap>(elm: Element, name: K): HTMLElementTagNameMap[K] => {
-    if (elm.nodeName !== name.toUpperCase()) {
-      // Rename block element
-      const newElm = create(name) as HTMLElementTagNameMap[K];
-
-      // Copy attribs to new block
-      each(getAttribs(elm), (attrNode) => {
-        setAttrib(newElm, attrNode.nodeName, getAttrib(elm, attrNode.nodeName));
-      });
-
-      // Replace block
-      replace(newElm, elm, true);
-      return newElm;
-    } else {
-      return elm as HTMLElementTagNameMap[K];
-    }
-  };
-
-  const findCommonAncestor = (a: Node, b: Node) => {
-    let ps: Node | null = a;
-
-    while (ps) {
-      let pe: Node | null = b;
-
-      while (pe && ps !== pe) {
-        pe = pe.parentNode;
-      }
-
-      if (ps === pe) {
-        break;
-      }
-
-      ps = ps.parentNode;
-    }
-
-    if (!ps && a.ownerDocument) {
-      return a.ownerDocument.documentElement;
-    } else {
-      return ps;
-    }
-  };
-
-  const isEmpty = (node: Node, elements?: Record<string, boolean>, options?: Empty.IsEmptyOptions) => {
-    if (Type.isPlainObject(elements)) {
-      const isContent = (node: Node): boolean => {
-        const name = node.nodeName.toLowerCase();
-        return Boolean(elements[name]);
-      };
-      return Empty.isEmptyNode(schema, node, { ...options, isContent });
-    } else {
-      return Empty.isEmptyNode(schema, node, options);
-    }
-  };
-
-  const createRng = () => doc.createRange();
-
-  const split = <T extends Node>(parentElm: Node, splitElm: T, replacementElm?: T): T | undefined => {
-    let range = createRng();
-    let beforeFragment: DocumentFragment;
-    let afterFragment: DocumentFragment;
-
-    if (parentElm && splitElm && parentElm.parentNode && splitElm.parentNode) {
-      const parentNode = parentElm.parentNode;
-      // Get before chunk
-      range.setStart(parentNode, findNodeIndex(parentElm));
-      range.setEnd(splitElm.parentNode, findNodeIndex(splitElm));
-      beforeFragment = range.extractContents();
-
-      // Get after chunk
-      range = createRng();
-      range.setStart(splitElm.parentNode, findNodeIndex(splitElm) + 1);
-      range.setEnd(parentNode, findNodeIndex(parentElm) + 1);
-      afterFragment = range.extractContents();
-
-      // Insert before chunk
-      parentNode.insertBefore(TrimNode.trimNode(self, beforeFragment, schema), parentElm);
-
-      // Insert middle chunk
-      if (replacementElm) {
-        parentNode.insertBefore(replacementElm, parentElm);
-        // pa.replaceChild(replacementElm, splitElm);
-      } else {
-        parentNode.insertBefore(splitElm, parentElm);
-      }
-
-      // Insert after chunk
-      parentNode.insertBefore(TrimNode.trimNode(self, afterFragment, schema), parentElm);
-      remove(parentElm);
-
-      return replacementElm || splitElm;
-    } else {
-      return undefined;
-    }
-  };
-
-  const bind = <K extends string>(target: Target | Target[], name: K, func: Callback<K>, scope?: any): Callback<K> | Callback<K>[] => {
-    if (Type.isArray(target)) {
-      let i = target.length;
-      const rv: Callback<K>[] = [];
-
-      while (i--) {
-        rv[i] = bind(target[i], name, func, scope) as Callback<K>;
-      }
-
-      return rv;
-    } else {
-      // Collect all window/document events bound by editor instance
-      if (settings.collect && (target === doc || target === win)) {
-        boundEvents.push([ target, name, func, scope ]);
-      }
-
-      return events.bind(target, name, func, scope || self);
-    }
-  };
-
-  const unbind = <K extends string>(target: Target | Target[], name: K, func: EventUtilsCallback<MappedEvent<HTMLElementEventMap, K>>): EventUtils | EventUtils[] => {
-    if (Type.isArray(target)) {
-      let i = target.length;
-      const rv = [] as EventUtils[];
-
-      while (i--) {
-        rv[i] = unbind(target[i], name, func) as EventUtils;
-      }
-
-      return rv;
-    } else {
-      // Remove any bound events matching the input
-      if (boundEvents.length > 0 && (target === doc || target === win)) {
-        let i = boundEvents.length;
-
-        while (i--) {
-          const [ boundTarget, boundName, boundFunc ] = boundEvents[i];
-
-          if (target === boundTarget && (!name || name === boundName) && (!func || func === boundFunc)) {
-            events.unbind(boundTarget, boundName, boundFunc);
-          }
-        }
-      }
-      return events.unbind(target, name, func);
-    }
-  };
-
-  const dispatch = (target: Target, name: string, evt?: {}) => events.dispatch(target, name, evt);
-  const fire = (target: Target, name: string, evt?: {}) => events.dispatch(target, name, evt);
-
-  const getContentEditable = (node: Node) => {
-    if (node && NodeType.isHTMLElement(node)) {
-      // Check for fake content editable
-      const contentEditable = node.getAttribute('data-mce-contenteditable');
-      if (contentEditable && contentEditable !== 'inherit') {
-        return contentEditable;
-      }
-
-      // Check for real content editable
-      return node.contentEditable !== 'inherit' ? node.contentEditable : null;
-    } else {
-      return null;
-    }
-  };
-
-  const getContentEditableParent = (node: Node) => {
-    const root = getRoot();
-    let state: string | null = null;
-
-    for (let tempNode: Node | null = node; tempNode && tempNode !== root; tempNode = tempNode.parentNode) {
-      state = getContentEditable(tempNode);
-
-      if (state !== null) {
-        break;
-      }
-    }
-
-    return state;
-  };
-
-  const isEditable = (node: Node | null | undefined) => {
-    if (Type.isNonNullable(node)) {
-      const scope = NodeType.isElement(node) ? node : node.parentElement;
-      return Type.isNonNullable(scope) && NodeType.isHTMLElement(scope) && ContentEditable.isEditable(SugarElement.fromDom(scope));
-    } else {
-      return false;
-    }
-  };
-
-  const destroy = () => {
-    // Unbind all events bound to window/document by editor instance
-    if (boundEvents.length > 0) {
-      let i = boundEvents.length;
-
-      while (i--) {
-        const [ boundTarget, boundName, boundFunc ] = boundEvents[i];
-        events.unbind(boundTarget, boundName, boundFunc);
-      }
-    }
-
-    // Remove CSS files added to the dom
-    Obj.each(files, (_, url) => {
-      styleSheetLoader.unload(url);
-      delete files[url];
-    });
-  };
-
-  const isChildOf = (node: Node, parent: Node) => {
-    return node === parent || parent.contains(node);
-  };
-
-  const dumpRng = (r: Range) => (
-    'startContainer: ' + r.startContainer.nodeName +
-    ', startOffset: ' + r.startOffset +
-    ', endContainer: ' + r.endContainer.nodeName +
-    ', endOffset: ' + r.endOffset
-  );
-
-  const self: DOMUtils = {
-    doc,
-    settings,
-    win,
-    files,
-    stdMode,
-    boxModel,
-    styleSheetLoader,
-    boundEvents,
-    styles,
-    schema,
-    events,
-    isBlock: isBlock as DOMUtils['isBlock'],
-
-    root: null,
-
-    clone,
-
-    /**
-     * Returns the root node of the document. This is normally the body but might be a DIV. Parents like getParent will not
-     * go above the point of this root node.
-     *
-     * @method getRoot
-     * @return {Element} Root element for the utility class.
-     */
-    getRoot,
-
-    /**
-     * Returns the viewport of the window.
-     *
-     * @method getViewPort
-     * @param {Window} win Optional window to get viewport of.
-     * @return {Object} Viewport object with fields x, y, w and h.
-     */
-    getViewPort,
-
-    /**
-     * Returns the rectangle for a specific element.
-     *
-     * @method getRect
-     * @param {Element/String} elm Element object or element ID to get rectangle from.
-     * @return {Object} Rectangle for specified element object with x, y, w, h fields.
-     */
-    getRect,
-
-    /**
-     * Returns the size dimensions of the specified element.
-     *
-     * @method getSize
-     * @param {Element/String} elm Element object or element ID to get rectangle from.
-     * @return {Object} Rectangle for specified element object with w, h fields.
-     */
-    getSize,
-
-    /**
-     * Returns a node by the specified selector function. This function will
-     * loop through all parent nodes and call the specified function for each node.
-     * If the function then returns true indicating that it has found what it was looking for, the loop execution will then end
-     * and the node it found will be returned.
-     *
-     * @method getParent
-     * @param {Node/String} node DOM node to search parents on or ID string.
-     * @param {Function} selector Selection function or CSS selector to execute on each node.
-     * @param {Node} root Optional root element, never go beyond this point.
-     * @return {Node} DOM Node or null if it wasn't found.
-     */
-    getParent,
-
-    /**
-     * Returns a node list of all parents matching the specified selector function or pattern.
-     * If the function then returns true indicating that it has found what it was looking for and that node will be collected.
-     *
-     * @method getParents
-     * @param {Node/String} node DOM node to search parents on or ID string.
-     * @param {Function} selector Selection function to execute on each node or CSS pattern.
-     * @param {Node} root Optional root element, never go beyond this point.
-     * @return {Array} Array of nodes or null if it wasn't found.
-     */
-    getParents: getParents as DOMUtils['getParents'],
-
-    /**
-     * Returns the specified element by ID or the input element if it isn't a string.
-     *
-     * @method get
-     * @param {String/Element} n Element id to look for or element to just pass though.
-     * @return {Element} Element matching the specified id or null if it wasn't found.
-     */
-    get,
-
-    /**
-     * Returns the next node that matches selector or function
-     *
-     * @method getNext
-     * @param {Node} node Node to find siblings from.
-     * @param {String/function} selector Selector CSS expression or function.
-     * @return {Node} Next node item matching the selector or null if it wasn't found.
-     */
-    getNext,
-
-    /**
-     * Returns the previous node that matches selector or function
-     *
-     * @method getPrev
-     * @param {Node} node Node to find siblings from.
-     * @param {String/function} selector Selector CSS expression or function.
-     * @return {Node} Previous node item matching the selector or null if it wasn't found.
-     */
-    getPrev,
-
-    // #ifndef jquery
-
-    /**
-     * Returns a list of the elements specified by the given CSS selector. For example: `div#a1 p.test`
-     *
-     * @method select
-     * @param {String} selector Target CSS selector.
-     * @param {Object} scope Optional root element/scope element to search in.
-     * @return {Array} Array with all matched elements.
-     * @example
-     * // Adds a class to all paragraphs in the currently active editor
-     * tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');
-     *
-     * // Adds a class to all spans that have the test class in the currently active editor
-     * tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('span.test'), 'someclass')
-     */
-    select,
-
-    /**
-     * Returns true/false if the specified element matches the specified css pattern.
-     *
-     * @method is
-     * @param {Node/NodeList} elm DOM node to match or an array of nodes to match.
-     * @param {String} selector CSS pattern to match the element against.
-     */
-    is,
-
-    // #endif
-
-    /**
-     * Adds the specified element to another element or elements.
-     *
-     * @method add
-     * @param {String/Element/Array} parentElm Element id string, DOM node element or array of ids or elements to add to.
-     * @param {String/Element} name Name of new element to add or existing element to add.
-     * @param {Object} attrs Optional object collection with arguments to add to the new element(s).
-     * @param {String} html Optional inner HTML contents to add for each element.
-     * @param {Boolean} create Optional flag if the element should be created or added.
-     * @return {Element/Array} Element that got created, or an array of created elements if multiple input elements
-     * were passed in.
-     * @example
-     * // Adds a new paragraph to the end of the active editor
-     * tinymce.activeEditor.dom.add(tinymce.activeEditor.getBody(), 'p', { title: 'my title' }, 'Some content');
-     */
-    add,
-
-    /**
-     * Creates a new element.
-     *
-     * @method create
-     * @param {String} name Name of new element.
-     * @param {Object} attrs Optional object name/value collection with element attributes.
-     * @param {String} html Optional HTML string to set as inner HTML of the element.
-     * @return {Element} HTML DOM node element that got created.
-     * @example
-     * // Adds an element where the caret/selection is in the active editor
-     * var el = tinymce.activeEditor.dom.create('div', { id: 'test', 'class': 'myclass' }, 'some content');
-     * tinymce.activeEditor.selection.setNode(el);
-     */
-    create,
-
-    /**
-     * Creates HTML string for element. The element will be closed unless an empty inner HTML string is passed in.
-     *
-     * @method createHTML
-     * @param {String} name Name of new element.
-     * @param {Object} attrs Optional object name/value collection with element attributes.
-     * @param {String} html Optional HTML string to set as inner HTML of the element.
-     * @return {String} String with new HTML element, for example: <a href="#">test</a>.
-     * @example
-     * // Creates a html chunk and inserts it at the current selection/caret location
-     * tinymce.activeEditor.selection.setContent(tinymce.activeEditor.dom.createHTML('a', { href: 'test.html' }, 'some line'));
-     */
-    createHTML,
-
-    /**
-     * Creates a document fragment out of the specified HTML string.
-     *
-     * @method createFragment
-     * @param {String} html Html string to create fragment from.
-     * @return {DocumentFragment} Document fragment node.
-     */
-    createFragment,
-
-    /**
-     * Removes/deletes the specified element(s) from the DOM.
-     *
-     * @method remove
-     * @param {String/Element/Array} node ID of element or DOM element object or array containing multiple elements/ids.
-     * @param {Boolean} keepChildren Optional state to keep children or not. If set to true all children will be
-     * placed at the location of the removed element.
-     * @return {Element/Array} HTML DOM element that got removed, or an array of removed elements if multiple input elements
-     * were passed in.
-     * @example
-     * // Removes all paragraphs in the active editor
-     * tinymce.activeEditor.dom.remove(tinymce.activeEditor.dom.select('p'));
-     *
-     * // Removes an element by id in the document
-     * tinymce.DOM.remove('mydiv');
-     */
-    remove,
-
-    /**
-     * Sets the CSS style value on a HTML element. The name can be a camelcase string
-     * or the CSS style name like background-color.
-     *
-     * @method setStyle
-     * @param {String/Element/Array} elm HTML element/Array of elements to set CSS style value on.
-     * @param {String} name Name of the style value to set.
-     * @param {String} value Value to set on the style.
-     * @example
-     * // Sets a style value on all paragraphs in the currently active editor
-     * tinymce.activeEditor.dom.setStyle(tinymce.activeEditor.dom.select('p'), 'background-color', 'red');
-     *
-     * // Sets a style value to an element by id in the current document
-     * tinymce.DOM.setStyle('mydiv', 'background-color', 'red');
-     */
-    setStyle,
-
-    /**
-     * Returns the current style or runtime/computed value of an element.
-     *
-     * @method getStyle
-     * @param {String/Element} elm HTML element or element id string to get style from.
-     * @param {String} name Style name to return.
-     * @param {Boolean} computed Computed style.
-     * @return {String} Current style or computed style value of an element.
-     */
-    getStyle: getStyle as DOMUtils['getStyle'],
-
-    /**
-     * Sets multiple styles on the specified element(s).
-     *
-     * @method setStyles
-     * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set styles on.
-     * @param {Object} styles Name/Value collection of style items to add to the element(s).
-     * @example
-     * // Sets styles on all paragraphs in the currently active editor
-     * tinymce.activeEditor.dom.setStyles(tinymce.activeEditor.dom.select('p'), { 'background-color': 'red', 'color': 'green' });
-     *
-     * // Sets styles to an element by id in the current document
-     * tinymce.DOM.setStyles('mydiv', { 'background-color': 'red', 'color': 'green' });
-     */
-    setStyles,
-
-    /**
-     * Removes all attributes from an element or elements.
-     *
-     * @method removeAllAttribs
-     * @param {Element/String/Array} e DOM element, element id string or array of elements/ids to remove attributes from.
-     */
-    removeAllAttribs,
-
-    /**
-     * Sets the specified attribute of an element or elements.
-     *
-     * @method setAttrib
-     * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set attribute on.
-     * @param {String} name Name of attribute to set.
-     * @param {String} value Value to set on the attribute - if this value is falsy like null, 0 or '' it will remove
-     * the attribute instead.
-     * @example
-     * // Sets class attribute on all paragraphs in the active editor
-     * tinymce.activeEditor.dom.setAttrib(tinymce.activeEditor.dom.select('p'), 'class', 'myclass');
-     *
-     * // Sets class attribute on a specific element in the current page
-     * tinymce.dom.setAttrib('mydiv', 'class', 'myclass');
-     */
-    setAttrib,
-
-    /**
-     * Sets two or more specified attributes of an element or elements.
-     *
-     * @method setAttribs
-     * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set attributes on.
-     * @param {Object} attrs Name/Value collection of attribute items to add to the element(s).
-     * @example
-     * // Sets class and title attributes on all paragraphs in the active editor
-     * tinymce.activeEditor.dom.setAttribs(tinymce.activeEditor.dom.select('p'), { 'class': 'myclass', title: 'some title' });
-     *
-     * // Sets class and title attributes on a specific element in the current page
-     * tinymce.DOM.setAttribs('mydiv', { 'class': 'myclass', title: 'some title' });
-     */
-    setAttribs,
-
-    /**
-     * Returns the specified attribute by name.
-     *
-     * @method getAttrib
-     * @param {String/Element} elm Element string id or DOM element to get attribute from.
-     * @param {String} name Name of attribute to get.
-     * @param {String} defaultVal Optional default value to return if the attribute didn't exist.
-     * @return {String} Attribute value string, default value or null if the attribute wasn't found.
-     */
-    getAttrib,
-
-    /**
-     * Returns the absolute x, y position of a node. The position will be returned in an object with x, y fields.
-     *
-     * @method getPos
-     * @param {Element/String} elm HTML element or element id to get x, y position from.
-     * @param {Element} rootElm Optional root element to stop calculations at.
-     * @return {Object} Absolute position of the specified element object with x, y fields.
-     */
-    getPos,
-
-    /**
-     * Parses the specified style value into an object collection. This parser will also
-     * merge and remove any redundant items that browsers might have added. It will also convert non-hex
-     * colors to hex values. Urls inside the styles will also be converted to absolute/relative based on settings.
-     *
-     * @method parseStyle
-     * @param {String} cssText Style value to parse, for example: border:1px solid red;.
-     * @return {Object} Object representation of that style, for example: {border: '1px solid red'}
-     */
-    parseStyle,
-
-    /**
-     * Serializes the specified style object into a string.
-     *
-     * @method serializeStyle
-     * @param {Object} styles Object to serialize as string, for example: {border: '1px solid red'}
-     * @param {String} name Optional element name.
-     * @return {String} String representation of the style object, for example: border: 1px solid red.
-     */
-    serializeStyle,
-
-    /**
-     * Adds a style element at the top of the document with the specified cssText content.
-     *
-     * @method addStyle
-     * @param {String} cssText CSS Text style to add to top of head of document.
-     */
-    addStyle,
-
-    /**
-     * Imports/loads the specified CSS file into the document bound to the class.
-     *
-     * @method loadCSS
-     * @param {String} url URL to CSS file to load.
-     * @example
-     * // Loads a CSS file dynamically into the current document
-     * tinymce.DOM.loadCSS('somepath/some.css');
-     *
-     * // Loads a CSS file into the currently active editor instance
-     * tinymce.activeEditor.dom.loadCSS('somepath/some.css');
-     *
-     * // Loads a CSS file into an editor instance by id
-     * tinymce.get('someid').dom.loadCSS('somepath/some.css');
-     *
-     * // Loads multiple CSS files into the current document
-     * tinymce.DOM.loadCSS('somepath/some.css,somepath/someother.css');
-     */
-    loadCSS,
-
-    /**
-     * Adds a class to the specified element or elements.
-     *
-     * @method addClass
-     * @param {String/Element/Array} elm Element ID string or DOM element or array with elements or IDs.
-     * @param {String} cls Class name to add to each element.
-     * @return {String/Array} String with new class value or array with new class values for all elements.
-     * @example
-     * // Adds a class to all paragraphs in the active editor
-     * tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'myclass');
-     *
-     * // Adds a class to a specific element in the current page
-     * tinymce.DOM.addClass('mydiv', 'myclass');
-     */
-    addClass,
-
-    /**
-     * Removes a class from the specified element or elements.
-     *
-     * @method removeClass
-     * @param {String/Element/Array} elm Element ID string or DOM element or array with elements or IDs.
-     * @param {String} cls Class name to remove from each element.
-     * @return {String/Array} String of remaining class name(s), or an array of strings if multiple input elements
-     * were passed in.
-     * @example
-     * // Removes a class from all paragraphs in the active editor
-     * tinymce.activeEditor.dom.removeClass(tinymce.activeEditor.dom.select('p'), 'myclass');
-     *
-     * // Removes a class from a specific element in the current page
-     * tinymce.DOM.removeClass('mydiv', 'myclass');
-     */
-    removeClass,
-
-    /**
-     * Returns true if the specified element has the specified class.
-     *
-     * @method hasClass
-     * @param {String/Element} elm HTML element or element id string to check CSS class on.
-     * @param {String} cls CSS class to check for.
-     * @return {Boolean} true/false if the specified element has the specified class.
-     */
-    hasClass,
-
-    /**
-     * Toggles the specified class on/off.
-     *
-     * @method toggleClass
-     * @param {Element} elm Element to toggle class on.
-     * @param {String} cls Class to toggle on/off.
-     * @param {Boolean} state Optional state to set.
-     */
-    toggleClass,
-
-    /**
-     * Shows the specified element(s) by ID by setting the "display" style.
-     *
-     * @method show
-     * @param {String/Element/Array} elm ID of DOM element or DOM element or array with elements or IDs to show.
-     */
-    show,
-
-    /**
-     * Hides the specified element(s) by ID by setting the "display" style.
-     *
-     * @method hide
-     * @param {String/Element/Array} elm ID of DOM element or DOM element or array with elements or IDs to hide.
-     * @example
-     * // Hides an element by id in the document
-     * tinymce.DOM.hide('myid');
-     */
-    hide,
-
-    /**
-     * Returns true/false if the element is hidden or not by checking the "display" style.
-     *
-     * @method isHidden
-     * @param {String/Element} elm Id or element to check display state on.
-     * @return {Boolean} true/false if the element is hidden or not.
-     */
-    isHidden,
-
-    /**
-     * Returns a unique id. This can be useful when generating elements on the fly.
-     * This method will not check if the element already exists.
-     *
-     * @method uniqueId
-     * @param {String} prefix Optional prefix to add in front of all ids - defaults to "mce_".
-     * @return {String} Unique id.
-     */
-    uniqueId,
-
-    /**
-     * Sets the specified HTML content inside the element or elements. The HTML will first be processed. This means
-     * URLs will get converted, hex color values fixed etc. Check processHTML for details.
-     *
-     * @method setHTML
-     * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set HTML inside of.
-     * @param {String} html HTML content to set as inner HTML of the element.
-     * @example
-     * // Sets the inner HTML of all paragraphs in the active editor
-     * tinymce.activeEditor.dom.setHTML(tinymce.activeEditor.dom.select('p'), 'some inner html');
-     *
-     * // Sets the inner HTML of an element by id in the document
-     * tinymce.DOM.setHTML('mydiv', 'some inner html');
-     */
-    setHTML,
-
-    /**
-     * Returns the outer HTML of an element.
-     *
-     * @method getOuterHTML
-     * @param {String/Element} elm Element ID or element object to get outer HTML from.
-     * @return {String} Outer HTML string.
-     * @example
-     * tinymce.DOM.getOuterHTML(editorElement);
-     * tinymce.activeEditor.getOuterHTML(tinymce.activeEditor.getBody());
-     */
-    getOuterHTML,
-
-    /**
-     * Sets the specified outer HTML on an element or elements.
-     *
-     * @method setOuterHTML
-     * @param {Element/String/Array} elm DOM element, element id string or array of elements/ids to set outer HTML on.
-     * @param {Object} html HTML code to set as outer value for the element.
-     * @example
-     * // Sets the outer HTML of all paragraphs in the active editor
-     * tinymce.activeEditor.dom.setOuterHTML(tinymce.activeEditor.dom.select('p'), '<div>some html</div>');
-     *
-     * // Sets the outer HTML of an element by id in the document
-     * tinymce.DOM.setOuterHTML('mydiv', '<div>some html</div>');
-     */
-    setOuterHTML,
-
-    /**
-     * Entity decodes a string. This method decodes any HTML entities, such as `&amp;aring;`.
-     *
-     * @method decode
-     * @param {String} s String to decode entities on.
-     * @return {String} Entity decoded string.
-     */
-    decode,
-
-    /**
-     * Entity encodes a string. This method encodes the most common entities, such as `<`, `>`, `"` and `&`.
-     *
-     * @method encode
-     * @param {String} text String to encode with entities.
-     * @return {String} Entity encoded string.
-     */
-    encode,
-
-    /**
-     * Inserts an element after the reference element.
-     *
-     * @method insertAfter
-     * @param {Element} node Element to insert after the reference.
-     * @param {Element/String/Array} referenceNode Reference element, element id or array of elements to insert after.
-     * @return {Element/Array} Element that got added or an array with elements.
-     */
-    insertAfter,
-
-    /**
-     * Replaces the specified element or elements with the new element specified. The new element will
-     * be cloned if multiple input elements are passed in.
-     *
-     * @method replace
-     * @param {Element} newElm New element to replace old ones with.
-     * @param {Element/String/Array} oldElm Element DOM node, element id or array of elements or ids to replace.
-     * @param {Boolean} keepChildren Optional keep children state, if set to true child nodes from the old object will be added
-     * to new ones.
-     */
-    replace,
-
-    /**
-     * Renames the specified element and keeps its attributes and children.
-     *
-     * @method rename
-     * @param {Element} elm Element to rename.
-     * @param {String} name Name of the new element.
-     * @return {Element} New element or the old element if it needed renaming.
-     */
-    rename,
-
-    /**
-     * Find the common ancestor of two elements. This is a shorter method than using the DOM Range logic.
-     *
-     * @method findCommonAncestor
-     * @param {Element} a Element to find common ancestor of.
-     * @param {Element} b Element to find common ancestor of.
-     * @return {Element} Common ancestor element of the two input elements.
-     */
-    findCommonAncestor,
-
-    /**
-     * Executes the specified function on the element by id or dom element node or array of elements/id.
-     *
-     * @method run
-     * @param {String/Element/Array} elm ID or DOM element object or array with ids or elements.
-     * @param {Function} func Function to execute for each item.
-     * @param {Object} scope Optional scope to execute the function in.
-     * @return {Object/Array} Single object, or an array of objects if multiple input elements were passed in.
-     */
-    run,
-
-    /**
-     * Returns a NodeList with attributes for the element.
-     *
-     * @method getAttribs
-     * @param {HTMLElement/string} elm Element node or string id to get attributes from.
-     * @return {NodeList} NodeList with attributes.
-     */
-    getAttribs,
-
-    /**
-     * Returns true/false if the specified node is to be considered empty or not.
-     *
-     * @method isEmpty
-     * @param {Node} node The target node to check if it's empty.
-     * @param {Object} elements Optional name/value object with elements that are automatically treated as non-empty elements.
-     * @return {Boolean} true/false if the node is empty or not.
-     * @example
-     * tinymce.DOM.isEmpty(node, { img: true });
-     */
-    isEmpty,
-
-    /**
-     * Creates a new DOM Range object. This will use the native DOM Range API if it's
-     * available. If it's not, it will fall back to the custom TinyMCE implementation.
-     *
-     * @method createRng
-     * @return {DOMRange} DOM Range object.
-     * @example
-     * const rng = tinymce.DOM.createRng();
-     * alert(rng.startContainer + "," + rng.startOffset);
-     */
-    createRng,
-
-    /**
-     * Returns the index of the specified node within its parent.
-     *
-     * @method nodeIndex
-     * @param {Node} node Node to look for.
-     * @param {Boolean} normalized Optional true/false state if the index is what it would be after a normalization.
-     * @return {Number} Index of the specified node.
-     */
-    nodeIndex: findNodeIndex,
-
-    /**
-     * Splits an element into two new elements and places the specified split
-     * element or elements between the new ones. For example splitting the paragraph at the bold element in
-     * this example `<p>abc<b>abc</b>123</p>` would produce `<p>abc</p><b>abc</b><p>123</p>`.
-     *
-     * @method split
-     * @param {Element} parentElm Parent element to split.
-     * @param {Element} splitElm Element to split at.
-     * @param {Element} replacementElm Optional replacement element to replace the split element with.
-     * @return {Element} Returns the split element or the replacement element if that is specified.
-     */
-    split,
-
-    /**
-     * Adds an event handler to the specified object.
-     *
-     * @method bind
-     * @param {Element/Document/Window/Array} target Target element to bind events to.
-     * handler to or an array of elements/ids/documents.
-     * @param {String} name Name of event handler to add, for example: click.
-     * @param {Function} func Function to execute when the event occurs.
-     * @param {Object} scope Optional scope to execute the function in.
-     * @return {Function} Function callback handler the same as the one passed in.
-     */
-    bind: bind as DOMUtils['bind'],
-
-    /**
-     * Removes the specified event handler by name and function from an element or collection of elements.
-     *
-     * @method unbind
-     * @param {Element/Document/Window/Array} target Target element to unbind events on.
-     * @param {String} name Event handler name, for example: "click"
-     * @param {Function} func Function to remove.
-     * @return {Boolean/Array} Bool state of true if the handler was removed, or an array of states if multiple input elements
-     * were passed in.
-     */
-    unbind: unbind as DOMUtils['unbind'],
-
-    /**
-     * Fires the specified event name and optional object on the specified target.
-     * <br>
-     * <em>Deprecated in TinyMCE 6.0 and has been marked for removal in TinyMCE 7.0. Use <code>dispatch</code> instead.</em>
-     *
-     * @method fire
-     * @param {Node/Document/Window} target Target element or object to fire event on.
-     * @param {String} name Event name to fire.
-     * @param {Object} evt Event object to send.
-     * @return {Event} Event object.
-     * @deprecated Use dispatch() instead
-     */
-    fire,
-
-    /**
-     * Dispatches the specified event name and optional object on the specified target.
-     *
-     * @method dispatch
-     * @param {Node/Document/Window} target Target element or object to dispatch event on.
-     * @param {String} name Name of the event to fire.
-     * @param {Object} evt Event object to send.
-     * @return {Event} Event object.
-     */
-    dispatch,
-
-    // Returns the content editable state of a node
-    getContentEditable,
-    getContentEditableParent,
-
-    /**
-     * Checks if the specified node is editable within the given context of its parents.
-     *
-     * @method isEditable
-     * @param {Node} node Node to check if it's editable.
-     * @return {Boolean} Will be true if the node is editable and false if it's not editable.
-     */
-    isEditable,
-
-    /**
-     * Destroys all internal references to the DOM to solve memory leak issues.
-     *
-     * @method destroy
-     */
-    destroy,
-    isChildOf,
-    dumpRng
-  };
-
-  const attrHooks = setupAttrHooks(styles, settings, Fun.constant(self));
-
-  return self;
-};
-
-/**
- * Instance of DOMUtils for the current document.
- *
- * @static
- * @property DOM
- * @type tinymce.dom.DOMUtils
- * @example
- * // Example of how to add a class to some element by id
- * tinymce.DOM.addClass('someid', 'someclass');
- */
-DOMUtils.DOM = DOMUtils(document);
-DOMUtils.nodeIndex = findNodeIndex;
-
-export default DOMUtils;