How to use the codemirror function in codemirror

initialize () {
        // _cm object can't be reinitialize
        if (this._inputs !== null) {
            return;
        }
        if (CommonParams.get('CodemirrorEnable') === true) {
            this._codemirror = true;
        }
        this._inputs = [];
        if (this._codemirror) {
            this._inputs.console = CodeMirror($('#pma_console').find('.console_query_input')[0], {
                theme: 'pma',
                mode: 'text/x-sql',
                lineWrapping: true,
                extraKeys: { 'Ctrl-Space': 'autocomplete' },
                hintOptions: { 'completeSingle': false, 'completeOnSingleClick': true },
                gutters: ['CodeMirror-lint-markers'],
                lint: {
                    'getAnnotations': CodeMirror.sqlLint,
                    'async': true,
                }
            });
            this._inputs.console.on('inputRead', codemirrorAutocompleteOnInputRead);
            this._inputs.console.on('keydown', function (instance, event) {
                this._historyNavigate(event);
            }.bind(this));
            if ($('#pma_bookmarks').length !== 0) {

const overlayId = this._elements.overlay.id;
  
    // Events
    const events = {
      'click [handle="share"]': '_onShareClick',
      'click [handle="run"]': '_onRunClick'
    };
  
    // Overlay
    events[`global:capture:change #${overlayId} [handle="livereload"]`] = '_onLiveReloadChange';
    events[`global:capture:change #${overlayId} [handle="screen"]`] = '_onScreenChange';
  
    this._delegateEvents(events);
    
    // Init editor
    this._editor = new CodeMirror(this._elements.editor, CODEMIRROR_CONFIG);
  
    // Bind editor
    this._editor.on('change', () => {
      if (this.livereload) {
        this._debounceTrigger('coral-playground:coderun');
      }
      else {
        this._elements.run.style.visibility = 'visible';
      }
    });
  
    this._elements.frame.onload = () => {
      this._elements.loading.hidden = true;
  
      this.trigger('coral-playground:load');
    };

componentDidMount() {
    this.cm = CodeMirror(this.node, {
      value: this.props.value,
      mode: this.props.mode,
      lineNumbers: this.props.lineNumbers,
      lineWrapping: this.props.lineWrapping,
      readOnly: this.props.readOnly,
      autofocus: this.props.autofocus,
      foldGutter: this.props.foldGutter,
      gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
    });

    if (this.props.onChange) {
      this.cm.on('change', (doc, change) => {
        this.props.onChange(doc.getValue(), change);
      });
    }
  }

makeResultViewer() {
    let widget = new Widget();
    widget.addClass(C.CSS.EDIT);
    this._results = CodeMirror(widget.node, this.resultViewerOptions() as any);
    return widget;
  }

componentDidMount() {
    const { onChange, value, mode, theme, lineNumbers, dragDrop } = this.props

    this.cm = CodeMirror(this.editor, {
      mode: mode,
      theme: theme || 'light',
      keyMap: 'sublime',
      viewportMargin: Infinity,
      lineNumbers: lineNumbers,
      dragDrop: dragDrop
    })

    this.cm.setValue(value)

    this.cm.on('changes', (cm) => {
      if (onChange) {
        clearTimeout(this.timeout);

        this.timeout = setTimeout(() => {
          onChange(cm.getValue());

oncreate: ({ dom }) => {
      const blockStart = /[{([]$/
          , onlyBlocks = /[^{}[\]()]/g

      const cm = CodeMirror(dom, {
        theme: model.state.theme || 'material',
        readOnly: !model.state.editable,
        autoCloseBrackets: true,
        autoCloseTags: true,
        matchBrackets: true,
        styleActiveLine: true,
        lineNumbers: true,
        foldGutter: true,
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        tabSize: 2,
        viewportMargin: model.state.autoHeight ? Infinity : 10,
        keyMap: 'sublime',
        extraKeys: {
          'Alt-F': 'findPersistent',
          'Shift-Tab': 'indentLess',
          'Cmd-L': false,

initSingleFileSnippetEditor () {
    const { config, snippet } = this.props
    if (snippet) {
      const { theme, showLineNumber, highlightCurrentLine } = config.editor
      const snippetMode = CodeMirror.findModeByName(snippet.lang).mode
      if (snippetMode && snippetMode !== 'null') {
        require(`codemirror/mode/${snippetMode}/${snippetMode}`)
      }
      const gutters = showLineNumber
        ? ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
        : []
      this.editor = CodeMirror(this.refs.editor, {
        lineNumbers: showLineNumber,
        value: snippet.value,
        foldGutter: showLineNumber,
        mode: snippetMode,
        theme: theme,
        gutters: gutters,
        readOnly: true,
        autoCloseBrackets: true,
        autoRefresh: true
      })
      if (highlightCurrentLine) {
        this.editor.setOption('styleActiveLine', { nonEmpty: false })
      } else {
        this.editor.setOption('styleActiveLine', null)
      }
      this.editor.setSize('100%', 'auto')

export function makeEditor(
  el: HTMLElement,
  opts: CodeMirror.EditorConfiguration
) {
  return {
    el,
    editor: Codemirror(el, opts)
  };
}

export const getCodeMirror = (el, doc) => {
  const cm = new CodeMirror(el, {
    value: doc,
    theme: 'oceanic',
    keyMap: 'sublime',
    indentUnit: 2,
    autoCloseBrackets: true,
    matchTags: { bothTags: true },
    foldGutter: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    lint: false,
  });

  return cm;
};