How to use the codemirror.keyMap function in codemirror

if (ch == ")")
        stack.push("(");
      else if (ch == "]")
        stack.push("[");
      else if (ch == "}")
        stack.push("{");
      else if (/[\(\{\[]/.test(ch) && (!stack.length || stack.pop() != ch))
        return cm.extendSelection(Pos(line, i));
    }
    --line; ch = null;
  }
}

// Actual keymap

var keyMap = CodeMirror.keyMap.emacs = CodeMirror.normalizeKeyMap({
  "Ctrl-W": function(cm) {kill(cm, cm.getCursor("start"), cm.getCursor("end"));},
  "Ctrl-K": repeated(function(cm) {
    var start = cm.getCursor(), end = cm.clipPos(Pos(start.line));
    var text = cm.getRange(start, end);
    if (!/\S/.test(text)) {
      text += "\n";
      end = Pos(start.line + 1, 0);
    }
    kill(cm, start, end, true, text);
  }),
  "Alt-W": function(cm) {
    addToRing(cm.getSelection());
    clearMark(cm);
  },
  "Ctrl-Y": function(cm) {
    var start = cm.getCursor();

// not clear of the users intention (new indented item or same level)
        if ((startIndent.length < nextIndent.length) && (lookAhead === 1)) return;
        skipCount += 1;
      }
    }
  } while (nextItem);
}

Object.assign(CodeMirror.commands, {
  hmdNewlineAndContinue: newlineAndContinue,
  hmdNewline: newline,
  hmdShiftTab: shiftTab,
  hmdTab: tab,
})

const defaultKeyMap = CodeMirror.keyMap["default"]
const modPrefix = defaultKeyMap === CodeMirror.keyMap["macDefault"] ? "Cmd" : "Ctrl"
export var keyMap: CodeMirror.KeyMap = {
  "Shift-Tab": "hmdShiftTab",
  "Tab": "hmdTab",
  "Enter": "hmdNewlineAndContinue",
  "Shift-Enter": "hmdNewline",

  [`${modPrefix}-B`]: createStyleToggler(
    state => state.strong,
    token => / formatting-strong /.test(token.type),
    state => repeatStr(state && state.strong || "*", 2)     // ** or __
  ),
  [`${modPrefix}-I`]: createStyleToggler(
    state => state.em,
    token => / formatting-em /.test(token.type),
    state => (state && state.em || "*")

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: http://codemirror.net/LICENSE

// A rough approximation of Sublime Text's keybindings
// Depends on addon/search/searchcursor.js and optionally addon/dialog/dialogs.js

import CodeMirror from 'codemirror';

const map = CodeMirror.keyMap.sublime = {fallthrough: "default"};
const cmds = CodeMirror.commands;
const Pos = CodeMirror.Pos;
const mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
const ctrl = mac ? "Cmd-" : "Ctrl-";

// This is not exactly Sublime's algorithm. I couldn't make heads or tails of that.
function findPosSubword(doc, start, dir) {
  if (dir < 0 && start.ch == 0) return doc.clipPos(Pos(start.line - 1));
  var line = doc.getLine(start.line);
  if (dir > 0 && start.ch >= line.length) return doc.clipPos(Pos(start.line + 1, 0));
  var state = "start", type;
  for (var pos = start.ch, e = dir < 0 ? 0 : line.length, i = 0; pos != e; pos += dir, i++) {
    var next = line.charAt(dir < 0 ? pos - 1 : pos);
    var cat = next != "_" && CodeMirror.isWordChar(next) ? "w" : "o";
    if (cat == "w" && next.toUpperCase() == next) cat = "W";
    if (state == "start") {
      if (cat != "o") { state = "in"; type = cat; }
    } else if (state == "in") {
      if (type != cat) {

componentDidMount() {
    const { formatFn } = this.state;
    const { geojson } = this.props;
    const node = this.codeMirrorContainer.current;

    CodeMirror.keyMap.tabSpace = {
      Tab: cm => {
        var spaces = new Array(cm.getOption("indentUnit") + 1).join(" ");
        cm.replaceSelection(spaces, "end", "+input");
      },
      // "Ctrl-S": saveAction,
      // "Cmd-S": saveAction,
      fallthrough: ["default"]
    };
    const editor = new CodeMirror(node, {
      mode: "application/json",
      matchBrackets: true,
      tabSize: 2,
      gutters: ["error"],
      autofocus: window === window.top,
      keyMap: "tabSpace",
      lineNumbers: true,

const toggleGUI = function() {
    if( hidden === false ) {
      cm.getWrapperElement().style.display = 'none'
      toggleToolbar() 
    }else{
      cm.getWrapperElement().style.display = 'block'
      toggleToolbar()
    }

    hidden = !hidden
  }
  // have to bind to window for when editor is hidden
  Mousetrap.bind('ctrl+shift+g', toggleGUI )

  delete CodeMirror.keyMap.default[ 'Ctrl-H' ]

  const cm = CodeMirror( document.body, { 
    value:demos.introduction,
    mode:'javascript',
    fullScreen:true,
    keyMap:'playground',
    styleActiveLine:true,
    autofocus:true,
    matchBrackets:true,
    autoCloseBrackets:true
  })
  cm.setOption('fullScreen', true )

  const sel = document.querySelector('select')
  const demoGroup = document.createElement('optgroup')
  demoGroup.setAttribute( 'label', '----- demos -----' )

cm.scrollIntoView()
            })
        }

        // Update key mapping
        const duplicateLine = (codeMirror) =>
        {
            const currentLine = codeMirror.getCursor().line
            codeMirror.replaceRange(`${codeMirror.getLine(currentLine)}\n`, { line: currentLine, ch: 0 })
        }
        const save = (codeMirror) =>
        {
            this.trigger('save')
        }

        CodeMirror.keyMap.default['Alt-Up'] = 'swapLineUp'
        CodeMirror.keyMap.default['Alt-Down'] = 'swapLineDown'
        CodeMirror.keyMap.default['Shift-Tab'] = 'indentLess'
        CodeMirror.keyMap.default['Shift-Cmd-D'] = duplicateLine
        CodeMirror.keyMap.default['Shift-Ctrl-D'] = duplicateLine
        CodeMirror.keyMap.default['Cmd-S'] = save
        CodeMirror.keyMap.default['Ctrl-S'] = save

        // Set code mirror
        this.codeMirror = CodeMirror.fromTextArea(
            this.$textarea,
            {
                // lineNumbers: true,
                foldGutter:
                {
                    rangeFinder: CodeMirror.fold.indent
                },

window.onload = function() {
  const ta = document.querySelector( '#cm' )

  const SDF = window.Marching

  SDF.init( document.querySelector('canvas') )
  SDF.export( window )
  Math.export()
  SDF.useProxies = false

  let hidden = false
  let fontSize = .95
  CodeMirror.keyMap.playground =  {
    fallthrough:'default',

    'Ctrl-Enter'( cm ) {
      try {
        const selectedCode = getSelectionCodeColumn( cm, false )

        flash( cm, selectedCode.selection )

        const code = selectedCode.code

        const func = new Function( code )
        
        if( SDF.useProxies === true ) {
          const preWindowMembers = Object.keys( window )
          func()
          const postWindowMembers = Object.keys( window )

function getMetaKey() {
    let mac = CodeMirror.keyMap["default"] == CodeMirror.keyMap.macDefault;
    return mac ? "Cmd" : "Ctrl";
}

import 'codemirror/mode/css/css'
import 'codemirror/mode/mllike/mllike'
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/edit/matchtags'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/addon/edit/closetag'
import 'codemirror/addon/comment/comment'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/addon/fold/comment-fold'

const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault

export default function (el, opts = {}) {
  const editor = CodeMirror.fromTextArea(el, {
    lineNumbers: true,
    lineWrapping: true,
    styleActiveLine: true,
    matchTags: { bothTags: true },
    matchBrackets: true,
    foldGutter: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    ...opts
  })

  editor.setOption('extraKeys', {
    ...editor.getOption('extraKeys'),
    Tab(cm) {