CodeMirror Playground

by valllabh

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.2.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/foldgutter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/fold/brace-fold.min.js"></script>
<div id="editor"></div>
<br />

CSS

body, html {
    padding: 15px;
}

#editor {
    border: 1px solid #DDD
}

.marked-text {
    /* background: red;     */
}

JavaScript

var editor = CodeMirror(document.getElementById("editor"), {
    value: JSON.stringify({"quiz":{"sport":{"q1":{"question":"Which one is correct team name in NBA?","options":["New York Bulls","Los Angeles Kings","Golden State Warriros","Huston Rocket"],"answer":"Huston Rocket"}},"maths":{"q1":{"question":"5 + 7 = ?","options":["10","11","12","13"],"answer":"12"},"q2":{"question":"12 - 8 = ?","options":["1","2","3","4"],"answer":"4"}}}}, null, "\t"),
    mode: "application/json",
    indentUnit: 4,
    lineNumbers: true,
    indentWithTabs: true,
    lineWrapping: false,
    autofocus: true,
    foldGutter: true,
    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});

editor.on("mousedown", function(instance, event) {
  var cursor = instance.coordsChar({left: event.clientX, top: event.clientY});
  var token = instance.getTokenAt(cursor);

	if (true) {
    // Find the start of the object
    while (cursor.line > 0) {
      var line = instance.getLine(cursor.line);
      var lineString = line.trim()
      if (lineString.startsWith("{") || lineString.endsWith("{")) {
      	console.log(cursor.line)
        instance.setSelection({line: cursor.line, ch: 0}, cursor);
        break;
      }
      cursor.line--;
    }
  }
});

var textMarker;