CodeMirror Mithril Component

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/codemirror.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.12.0/mode/javascript/javascript.min.js"></script>
<div id="app"></div>

CSS

.CodeMirror{
  height: 100px;
}

CoffeeScript

#elt = document.getElementById("editor")
#editor = CodeMirror.fromTextArea elt, 
#  lineNumbers: true
  
  
CodeMirrorComponent = 
  view: (ctrl, props) -> m "div", m "textarea", 
    {config: CodeMirrorComponent.config(props)}, props.value()
  config: (props) -> (el, isInit) ->
    if (typeof CodeMirror != 'undefined')
      if (!isInit)
        editor = CodeMirror.fromTextArea(el, {lineNumbers: true})
        editor.on "change", (instance, object) ->
          m.startComputation()
          props.value editor.doc.getValue()
          if (typeof props.onchange is "function")
            props.onchange(instance, object)
          m.endComputation()
    else
      console.warn "ERROR: You need CodeMirror on the page"


App = 
  controller: (props) ->
    value: m.prop("")
  view: (ctrl, props) ->
    m CodeMirrorComponent, 
      value: ctrl.value
      onchange: (instance, object) ->
        console.log instance.getValue()
    
m.mount(
  document.getElementById("app"),
  m App
)