How to use the tinymce/core/api/dom/DomQuery function in tinymce

});

    Tools.each(handles, function (handle) {
      DomQuery('#' + id, containerElm).append(
        '<div title="' + handle.label + '" aria-grabbed="false" aria-label="' + handle.label + '" tabindex="-1" role="gridcell" data-mce-bogus="all" class="' + prefix +
        'croprect-handle ' + prefix + 'croprect-handle-' + handle.name + '" id="' + id + '-' + handle.name + '">' // TODO: tooltips AP-213
      );
    });

    dragHelpers = Tools.map(handles, createDragHelper);

    repaint(currentRect);

    DomQuery(containerElm).on('focusin focusout', function (e) {
      DomQuery(e.target).attr('aria-grabbed', e.type === 'focus' ? 'true' : 'false');
    });

    DomQuery(containerElm).on('keydown', function (e) {
      let activeHandle;

      Tools.each(handles, function (handle) {
        if (e.target.id === id + '-' + handle.name) {
          activeHandle = handle;
          return false;
        }
      });

      function moveAndBlock(evt, handle, startRect, deltaX, deltaY) {
        evt.stopPropagation();
        evt.preventDefault();</div>

let startRect;
      return new DragHelper(id, {
        document: containerElm.ownerDocument,
        handle: id + '-' + handle.name,

        start () {
          startRect = currentRect;
        },

        drag (e) {
          moveRect(handle, startRect, e.deltaX, e.deltaY);
        }
      });
    }

    DomQuery(
      '<div aria-dropeffect="execute" role="grid" class="' + prefix + 'croprect-container" id="' + id + '">'
    ).appendTo(containerElm);

    Tools.each(blockers, function (blocker) {
      DomQuery('#' + id, containerElm).append(
        '<div data-mce-bogus="all" style="display: none" class="' + prefix + 'croprect-block" id="' + id + '-' + blocker + '">'
      );
    });

    Tools.each(handles, function (handle) {
      DomQuery('#' + id, containerElm).append(
        '<div title="' + handle.label + '" aria-grabbed="false" aria-label="' + handle.label + '" tabindex="-1" role="gridcell" data-mce-bogus="all" class="' + prefix +
        'croprect-handle ' + prefix + 'croprect-handle-' + handle.name + '" id="' + id + '-' + handle.name + '">' // TODO: tooltips AP-213</div></div></div>

'<div title="' + handle.label + '" aria-grabbed="false" aria-label="' + handle.label + '" tabindex="-1" role="gridcell" data-mce-bogus="all" class="' + prefix +
        'croprect-handle ' + prefix + 'croprect-handle-' + handle.name + '" id="' + id + '-' + handle.name + '">' // TODO: tooltips AP-213
      );
    });

    dragHelpers = Tools.map(handles, createDragHelper);

    repaint(currentRect);

    DomQuery(containerElm).on('focusin focusout', function (e) {
      DomQuery(e.target).attr('aria-grabbed', e.type === 'focus' ? 'true' : 'false');
    });

    DomQuery(containerElm).on('keydown', function (e) {
      let activeHandle;

      Tools.each(handles, function (handle) {
        if (e.target.id === id + '-' + handle.name) {
          activeHandle = handle;
          return false;
        }
      });

      function moveAndBlock(evt, handle, startRect, deltaX, deltaY) {
        evt.stopPropagation();
        evt.preventDefault();

        moveRect(activeHandle, startRect, deltaX, deltaY);
      }
</div>

Tools.each(handles, function (handle) {
      DomQuery('#' + id, containerElm).append(
        '<div title="' + handle.label + '" aria-grabbed="false" aria-label="' + handle.label + '" tabindex="-1" role="gridcell" data-mce-bogus="all" class="' + prefix +
        'croprect-handle ' + prefix + 'croprect-handle-' + handle.name + '" id="' + id + '-' + handle.name + '">' // TODO: tooltips AP-213
      );
    });
</div>

function toggleVisibility(state: boolean) {
    let selectors;

    selectors = Tools.map(handles, function (handle) {
      return '#' + id + '-' + handle.name;
    }).concat(Tools.map(blockers, function (blocker) {
      return '#' + id + '-' + blocker;
    })).join(',');

    if (state) {
      DomQuery(selectors, containerElm).show();
    } else {
      DomQuery(selectors, containerElm).hide();
    }
  }

function toggleVisibility(state: boolean) {
    let selectors;

    selectors = Tools.map(handles, function (handle) {
      return '#' + id + '-' + handle.name;
    }).concat(Tools.map(blockers, function (blocker) {
      return '#' + id + '-' + blocker;
    })).join(',');

    if (state) {
      DomQuery(selectors, containerElm).show();
    } else {
      DomQuery(selectors, containerElm).hide();
    }
  }

Tools.each(handles, function (handle) {
      DomQuery('#' + id + '-' + handle.name, containerElm).css({
        left: rect.w * handle.xMul + rect.x,
        top: rect.h * handle.yMul + rect.y
      });
    });

DomQuery(containerElm).on('focusin focusout', function (e) {
      DomQuery(e.target).attr('aria-grabbed', e.type === 'focus' ? 'true' : 'false');
    });