How to use codemirror - 10 common examples

cm.setValue(str);
    expect(cm.getValue()).eql(str);
    expect(cm.isClean()).not.ok;

    // blur event
    var i = 0;
    cm.on('blur', function () {
      i += 1;
      expect(i === 1).ok;
    });
    cm.on('focus', function () {
      i += 1;
      expect(i === 2).ok;
      done();
    });
    CodeMirror.signal(cm, 'blur');
    CodeMirror.signal(cm, 'focus');
  });

})

function onChangeHandler(cm, changes) {
    var cur = cm.getCursor()

    if (
        cm.hasFocus() &&
        !/\w/.test(
            cm.getRange(cur, { line: cur.line, ch: Infinity })
        ) /* && cm.findPosH(cm.getCursor(), 1, 'char', true).hitSide */
    ) {
        cm.showPrediction(cm.options.hintOptions)
    }
}

CodeMirror.defineOption('showPredictions', false, function(cm, val, old) {
    if (old && old != CodeMirror.Init) {
        // cm.removeKeyMap(keyMap);
        // cm.state.closeBrackets = null;
    }
    if (val) {
        // console.log('attcaching predictions')
        // cm.state.closeBrackets = val;
        // cm.addKeyMap(keyMap);

        cm.on('changes', onChangeHandler)
    } else {
        cm.off('changes', onChangeHandler)
    }
})

var requestAnimationFrame =

async mounted() {
		this._options = Object.assign(defaultOptions, this.options);

		if (this._options.mode === 'css') {
			await import(/* webpackChunkName: "codemirror" */ 'codemirror/mode/css/css.js' as any);
		} else if (this._options.mode === 'gfm') {
			await import(/* webpackChunkName: "codemirror" */ 'codemirror/mode/gfm/gfm.js' as any);
		}

		// Codemirror doesn't work in SSR, so bootstrap it in mounted().
		const CodeMirror = require('codemirror');
		this.editor = CodeMirror.fromTextArea(this.$el, this._options);
		this.editor.setValue(this.value || '');

		this.editor.on('change', cm => {
			this.$emit('changed', cm.getValue());
			this.$emit('input', cm.getValue());
		});

		this.bootstrapped = true;
	}

componentDidMount () {
    // console.log(this.cnt_node, this.cnt_node.value);
    this.codemirror = CodeMirror.fromTextArea(this.cnt_node, {
      lineNumbers: true,
      readOnly: true,
      mode: 'hosts'
    })

    this.codemirror.setSize('100%', '100%')

    this.codemirror.on('change', (a) => {
      let v = a.getDoc().getValue()
      this.setValue(v)
    })

    this.codemirror.on('gutterClick', (cm, n) => {
      if (this.props.readonly === true) return

      let info = cm.lineInfo(n)

function hintList(editor, options, cursor, token, list) {
  var hints = filterAndSortList(list, normalizeText(token.string));
  if (!hints) {
    return;
  }

  var tokenStart = token.type === null ? token.end :
    /\w/.test(token.string[0]) ? token.start :
    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;

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) {

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(() => {

/**
 * Author: Koh Zi Han, based on implementation by Koh Zi Chun
 */

var CodeMirror = require('codemirror');

CodeMirror.defineMode("scheme", function () {
    var BUILTIN = "builtin", COMMENT = "comment", STRING = "string",
        ATOM = "atom", NUMBER = "number", BRACKET = "bracket";
    var INDENT_WORD_SKIP = 2;

    function makeKeywords(str) {
        var obj = {}, words = str.split(" ");
        for (var i = 0; i < words.length; ++i) obj[words[i]] = true;
        return obj;
    }

    var keywords = makeKeywords("λ case-lambda call/cc class define-class exit-handler field import inherit init-field interface let*-values let-values let/ec mixin opt-lambda override protect provide public rename require require-for-syntax syntax syntax-case syntax-error unit/sig unless when with-syntax and begin call-with-current-continuation call-with-input-file call-with-output-file case cond define define-syntax delay do dynamic-wind else for-each if lambda let let* let-syntax letrec letrec-syntax map or syntax-rules abs acos angle append apply asin assoc assq assv atan boolean? caar cadr call-with-values car cdddar cddddr cdr ceiling char->integer char-alphabetic? char-ci<=? char-ci=? char-ci>? char-downcase char-lower-case? char-numeric? char-ready? char-upcase char-upper-case? char-whitespace? char<=? char=? char>? char? close-input-port close-output-port complex? cons cos current-input-port current-output-port denominator display eof-object? eq? equal? eqv? eval even? exact->inexact exact? exp expt #f floor force gcd imag-part inexact->exact inexact? input-port? integer->char integer? interaction-environment lcm length list list->string list->vector list-ref list-tail list? load log magnitude make-polar make-rectangular make-string make-vector max member memq memv min modulo negative? newline not null-environment null? number->string number? numerator odd? open-input-file open-output-file output-port? pair? peek-char port? positive? procedure? quasiquote quote quotient rational? rationalize read read-char real-part real? remainder reverse round scheme-report-environment set! set-car! set-cdr! sin sqrt string string->list string->number string->symbol string-append string-ci<=? string-ci=? string-ci>? string-copy string-fill! string-length string-ref string-set! string<=? string=? string>? string? substring symbol->string symbol? #t tan transcript-off transcript-on truncate values vector vector->list vector-fill! vector-length vector-ref vector-set! with-input-from-file with-output-to-file write write-char zero? barplot enumeration-query rejection-query mh-query condition factor fold flatten pair first second third fourth fifth sixth seventh rest flip hist repeat gaussian density multiviz uniform-draw mem sum runPhysics animatePhysics uniform worldWidth worldHeight scatter lineplot dirichlet multinomial beta mean");
    var indentKeys = makeKeywords("define let letrec let* lambda");

    function stateStack(indent, type, prev) { // represents a state stack object
        this.indent = indent;
        this.type = type;

module.exports = (function() {
  var CodeMirror = require("codemirror");
  require("codemirror/addon/mode/multiplex.js");
  require("codemirror/mode/clike/clike.js");
  require("codemirror/mode/javascript/javascript.js");
  require("codemirror/mode/xml/xml.js");

  CodeMirror.defineMIME("text/x-overpassQL", {
      name: "clike",
      keywords: (function(str){var r={}; var a=str.split(" "); for(var i=0; i

/**
 * @typedef PasteOption
 * @type {object}
 * @property {boolean} enabled
 * @property {PasteImageUploader | string} uploadTo
 */

/**
 * @type {PasteOption}
 */
var defaultOption = { // exposed options from Paste class
  enabled: false,
  uploadTo: 'sm.ms'
}

CodeMirror.defineOption('hmdPasteImage', false, function (cm, newVal) {
  // complete newCfg with default values
  var paste = getPaste(cm)
  var newCfg = {}

  if (newVal === true) newVal = { enabled: true }
  else if (/string|function/.test(typeof newVal)) newVal = { enabled: true, uploadTo: newVal }
  else {
    // normalize to boolean
    newVal.enabled = !!newVal.enabled
  }

  for (let k in defaultOption) {
    newCfg[k] = newVal.hasOwnProperty(k) ? newVal[k] : defaultOption[k]
  }

  if (paste.enabled !== newCfg.enabled) {