How to use the codemirror.on function in codemirror

lint: {
        getAnnotations,
        lintOnChange: true,
      },
      ...props,
    }

    this._codeMirror = CodeMirror.fromTextArea(
      this._textareaRef.current,
      options,
    )
    this._codeMirror.on('change', this.handleChange)
    this._codeMirror.on('focus', this.handleFocus)
    this._codeMirror.on('cursorActivity', this.props.onCursorActivity)

    CodeMirror.on(this._codeMirror.getWrapperElement(), 'mouseover', e => {
      const target = e.target || e.srcElement
      const box = target.getBoundingClientRect(),
        x = (box.left + box.right) / 2,
        y = (box.top + box.bottom) / 2
      const pos = this._codeMirror.coordsChar({left: x, top: y}, 'client')
      // console.log(pos)
    })

    this._codeMirror.setValue((this._cached = this.props.value || ''))

    this.props.setCursor.watch(({line, column}) => {
      this._codeMirror.focus()
      this._codeMirror.setCursor({line: line - 1, ch: column})
    })

    this.props.performLint.watch(() => {

function onHasCompletion(cm, data, onHintInformationRender?) {
  let information;
  let deprecation;

  // When a hint result is selected, we augment the UI with information.
  CodeMirror.on(data, 'select', (ctx, el) => {
    // Only the first time (usually when the hint UI is first displayed)
    // do we create the information nodes.
    if (!information) {
      const hintsUl = el.parentNode;

      // This "information" node will contain the additional info about the
      // highlighted typeahead option.
      information = document.createElement('div');
      information.className = 'CodeMirror-hint-information';
      hintsUl.appendChild(information);

      // This "deprecation" node will contain info about deprecated usage.
      deprecation = document.createElement('div');
      deprecation.className = 'CodeMirror-hint-deprecation';
      hintsUl.appendChild(deprecation);

delete cm.state.lint;
  }

  if (val) {
    var gutters = cm.getOption("gutters"),
      hasLintGutter = false;
    for (var i = 0; i < gutters.length; ++i)
      if (gutters[i] == GUTTER_ID) hasLintGutter = true;
    var state = (cm.state.lint = new LintState(
      cm,
      parseOptions(cm, val),
      hasLintGutter
    ));
    if (state.options.lintOnChange !== false) cm.on("change", onChange);
    if (state.options.tooltips != false && state.options.tooltips != "gutter")
      CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
  }

  // XXX(freiksenet): This is commented out because currently codemirror
  // reloads plugins on every change, causing infinite linting
  // startLinting(this);
});

token.start + 1;

  var results = {
    list: hints,
    from: CodeMirror.Pos(cursor.line, tokenStart),
    to: CodeMirror.Pos(cursor.line, token.end),
  };

  // GraphiQL displays the custom typeahead which appends information to the
  // end of the UI.
  if (options.displayInfo) {
    var wrapper;
    var information;

    // When a hint result is selected, we touch the UI.
    CodeMirror.on(results, 'select', (ctx, el) => {
      // Only the first time (usually when the hint UI is first displayed)
      // do we create the wrapping node.
      if (!wrapper) {
        // Wrap the existing hint UI, so we have a place to put information.
        var hintsUl = el.parentNode;
        var container = hintsUl.parentNode;
        wrapper = document.createElement('div');
        container.appendChild(wrapper);

        // CodeMirror vertically inverts the hint UI if there is not enough
        // space below the cursor. Since this modified UI appends to the bottom
        // of CodeMirror's existing UI, it could cover the cursor. This adjusts
        // the positioning of the hint UI to accomodate.
        var top = hintsUl.style.top;
        var bottom = '';
        var cursorTop = editor.cursorCoords().top;

let index = ArrayExt.findFirstIndex(this._keydownHandlers, handler => {
        if (handler(this, event) === true) {
          event.preventDefault();
          return true;
        }
        return false;
      });
      if (index === -1) {
        this.onKeydown(event);
      }
    });
    CodeMirror.on(editor, 'cursorActivity', () => this._onCursorActivity());
    CodeMirror.on(editor.getDoc(), 'beforeChange', (instance, change) => {
      this._beforeDocChanged(instance, change);
    });
    CodeMirror.on(editor.getDoc(), 'change', (instance, change) => {
      // Manually refresh after setValue to make sure editor is properly sized.
      if (change.origin === 'setValue' && this.hasFocus()) {
        this.refresh();
      }
      this._lastChange = change;
    });

    // Manually refresh on paste to make sure editor is properly sized.
    editor.getWrapperElement().addEventListener('paste', () => {
      if (this.hasFocus()) {
        this.refresh();
      }
    });
  }

cm.removeKeyMap(state.keyMap);
    }
    var poll = setInterval(function() {
      if (tooltip)
        for ( var n = node;; n = n.parentNode) {
          if (n == document.body)
            return;
          if (!n) {
            hide();
            break;
          }
        }
      if (!tooltip)
        return clearInterval(poll);
    }, 400);
    CodeMirror.on(node, "mouseout", hide);
    CodeMirror.on(node, "click", hide);
    state.keyMap = {Esc: hide};
    cm.addKeyMap(state.keyMap);
    //BAS
    hidePreviousToolTip = hide;
  }

tooltip = null;
    }
  }
  var poll = setInterval(function() {
    if (tooltip)
      for (var n = node; ; n = n.parentNode) {
        if (n && n.nodeType == 11) n = n.host;
        if (n == document.body) return;
        if (!n) {
          hide();
          break;
        }
      }
    if (!tooltip) return clearInterval(poll);
  }, 400);
  CodeMirror.on(node, "mouseout", hide);
}

if (popup.style.opacity) {
      popup.style.opacity = 0;
      setTimeout(() => {
        if (popup.parentNode) {
          popup.parentNode.removeChild(popup);
        }
      }, 600);
    } else if (popup.parentNode) {
      popup.parentNode.removeChild(popup);
    }
  };

  CodeMirror.on(popup, 'mouseover', onMouseOverPopup);
  CodeMirror.on(popup, 'mouseout', onMouseOut);
  CodeMirror.on(cm.getWrapperElement(), 'mouseout', onMouseOut);
}

buildGap(): HTMLElement {
    let lock = this.lockButton = elt('div', undefined, 'CodeMirror-merge-scrolllock');
    lock.title = 'Toggle locked scrolling';
    let lockWrap = elt('div', [lock], 'CodeMirror-merge-scrolllock-wrap');
    let self: DiffView = this;
    CodeMirror.on(lock, 'click', function() {
      self.setScrollLock(!self.lockScroll);
    });
    return this.gap = elt('div', [lockWrap], 'CodeMirror-merge-gap');
  }

function showTooltip(e, msg) {
  var tt = document.createElement("div");
  tt.className = "compiler-error-tooltip";
  tt.appendChild(document.createTextNode(msg));
  document.body.appendChild(tt);

  function position(e) {
    if(!tt.parentNode) return CodeMirror.off(document, "mousemove", position);
    tt.style.top = Math.max (0, e.clientY - tt.offsetHeight - 5) + "px";
    tt.style.left = (e.clientX + 5) + "px";
  }

  CodeMirror.on(document, "mousemove", position);
  position(e);
  if(tt.style.opacity != null) tt.style.opacity = 1;
  return tt;
}