How to use the tinymce/core/api/dom/DOMUtils.DOM function in tinymce

const render = (editor: Editor, uiComponents: RenderUiComponents, rawUiConfig: RenderUiConfig, backstage: UiFactoryBackstage, args: RenderArgs): ModeRenderInfo => {
  let floatContainer;
  const DOM = DOMUtils.DOM;
  const useFixedToolbarContainer = useFixedContainer(editor);
  const isSticky = isStickyToolbar(editor);
  const targetElm = Element.fromDom(args.targetNode);
  const editorMaxWidthOpt = getMaxWidthSetting(editor).or(EditorSize.getWidth(editor));

  const splitSetting = getToolbarDrawer(editor);
  const split = splitSetting === ToolbarDrawer.sliding || splitSetting === ToolbarDrawer.floating;

  loadInlineSkin(editor);

  const updateChromePosition = (toolbar: Option) => {
    // Calculate the toolbar offset when using a split toolbar drawer
    const offset = split ? toolbar.fold(() => 0, (tbar) => {
      // If we have an overflow toolbar, we need to offset the positioning by the height of the overflow toolbar
      return tbar.components().length > 1 ? Height.get(tbar.components()[1].element()) : 0;
    }) : 0;

import { Cell } from '@ephox/katamari';
import { Body, DomEvent, Element, Position, Css } from '@ephox/sugar';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Editor from 'tinymce/core/api/Editor';
import Events from '../api/Events';
import * as Settings from '../api/Settings';
import { UiFactoryBackstage } from '../backstage/Backstage';
import { setupReadonlyModeSwitch } from '../ReadOnly';
import { ModeRenderInfo, RenderArgs, RenderUiComponents, RenderUiConfig } from '../Render';
import OuterContainer from '../ui/general/OuterContainer';
import { identifyMenus } from '../ui/menus/menubar/Integration';
import { iframe as loadIframeSkin } from './../ui/skin/Loader';
import { setToolbar } from './Toolbars';
import { PlatformDetection } from '@ephox/sand';

const DOM = DOMUtils.DOM;
const detection = PlatformDetection.detect();
const isTouch = detection.deviceType.isTouch();

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 processSelector = function (selector: string, group: StyleGroup) {
      if (isUniqueSelector(editor, selector, group, globallyUniqueSelectors)) {
        markUniqueSelector(editor, selector, group, globallyUniqueSelectors);

        const format = convertSelectorToFormat(editor, editor.plugins.importcss, selector, group);
        if (format) {
          const formatName = format.name || DOMUtils.DOM.uniqueId();
          editor.formatter.register(formatName, format);

          // NOTE: itemDefaults has been removed as it was not supported by bridge and its concept
          // is handled elsewhere.
          return Tools.extend({}, {
            title: format.title,
            format: formatName
          });
        }
      }

      return null;
    };

/**
 * Copyright (c) Tiny Technologies, Inc. All rights reserved.
 * Licensed under the LGPL or a commercial license.
 * For LGPL see License.txt in the project root for license information.
 * For commercial licenses see https://www.tiny.cloud/
 */
import { document, window } from '@ephox/dom-globals';
import { Fun, Singleton } from '@ephox/katamari';
import { Css, Element, VisualViewport } from '@ephox/sugar';
import Events from '../api/Events';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Env from 'tinymce/core/api/Env';
import Delay from 'tinymce/core/api/util/Delay';
import Thor from './Thor';

const DOM = DOMUtils.DOM;

const getScrollPos = function () {
  const vp = VisualViewport.getBounds(window);

  return {
    x: vp.x(),
    y: vp.y()
  };
};

const setScrollPos = function (pos) {
  window.scrollTo(pos.x, pos.y);
};

/* tslint:disable-next-line:no-string-literal */
const visualViewport: VisualViewport.VisualViewport = window['visualViewport'];

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

import { HTMLElement, Node, document } from '@ephox/dom-globals';
import { Merger } from '@ephox/katamari';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Utils from './Utils';

const DOM = DOMUtils.DOM;

interface ImageData {
  src: string;
  alt: string;
  title: string;
  width: string;
  height: string;
  class: string;
  style: string;
  caption: boolean;
  hspace: string;
  vspace: string;
  border: string;
  borderStyle: string;
}

const transposeContentAreaContainer = function (element, pos) {
  const containerPos = DOMUtils.DOM.getPos(element);
  return transpose(pos, containerPos.x, containerPos.y);
};

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

import { HTMLElement, Node } from '@ephox/dom-globals';
import Tools from 'tinymce/core/api/util/Tools';
import SaxParser from 'tinymce/core/api/html/SaxParser';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Size from './Size';
import { MediaData } from './Types';
import { VideoScript, getVideoScriptMatch } from './VideoScript';

const DOM = DOMUtils.DOM;

const getEphoxEmbedIri = function (elm: Node): string {
  return DOM.getAttrib(elm, 'data-ephox-embed-iri');
};

const isEphoxEmbed = function (html: string): boolean {
  const fragment = DOM.createFragment(html);
  return getEphoxEmbedIri(fragment.firstChild) !== '';
};

const htmlToDataSax = function (prefixes: VideoScript[], html: string): MediaData {
  let data: any = {};

  SaxParser({
    validate: false,
    allow_conditional_comments: true,

const renderUI = function () {
    const targetNode = editor.getElement();
    const cssUrls = CssUrls.derive(editor);

    if (Settings.isSkinDisabled(editor) === false) {
      editor.contentCSS.push(cssUrls.content);
      DOMUtils.DOM.styleSheetLoader.load(cssUrls.ui, SkinLoaded.fireSkinLoaded(editor));
    } else {
      SkinLoaded.fireSkinLoaded(editor)();
    }

    const doScrollIntoView = function () {
      editor.fire('ScrollIntoView');
    };

    const realm = PlatformDetection.detect().os.isAndroid() ? AndroidRealm(doScrollIntoView) : IosRealm(doScrollIntoView);
    const original = Element.fromDom(targetNode);
    Attachment.attachSystemAfter(original, realm.system());

    const findFocusIn = function (elem) {
      return Focus.search(elem).bind(function (focused) {
        return realm.system().getByDom(focused).toOption();
      });

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

import { HTMLElement } from '@ephox/dom-globals';
import Writer from 'tinymce/core/api/html/Writer';
import SaxParser from 'tinymce/core/api/html/SaxParser';
import Schema from 'tinymce/core/api/html/Schema';
import DOMUtils from 'tinymce/core/api/dom/DOMUtils';
import Size from './Size';
import { MediaData } from './Types';

const DOM = DOMUtils.DOM;

type AttrList = Array<{ name: string, value: string }> & { map: Record };

const setAttributes = function (attrs: AttrList, updatedAttrs: Record) {
  let name;
  let i;
  let value;
  let attr;

  for (name in updatedAttrs) {
    value = '' + updatedAttrs[name];

    if (attrs.map[name]) {
      i = attrs.length;
      while (i--) {
        attr = attrs[i];

editor.undoManager.transact(() => {
    const node = getSelectedCodeSample(editor);

    code = DOMUtils.DOM.encode(code);

    return node.fold(() => {
      editor.insertContent('<pre class="language-' + language + '" id="__new">' + code + '</pre>');
      editor.selection.select(editor.$('#__new').removeAttr('id')[0]);
    }, (n) =&gt; {
      editor.dom.setAttrib(n, 'class', 'language-' + language);
      n.innerHTML = code;
      Prism.highlightElement(n);
      editor.selection.select(n);
    });
  });
};