Markdown App with Mithril JS

by ramnathv

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.js"></script>
<script src="//libs.cncdn.cn/KaTeX/0.5.1/contrib/auto-render.min.js"></script>

CSS

.main{
  margin-top: 30px;
}

CoffeeScript

KAdelimiters = [
  {left: "$$", right: "$$", display: true},
  {left: "\\[", right: "\\]", display: true},
  {left: "$", right: "$", display: false},
  {left: "\\(", right: "\\)", display: false}
]

debounce = (fn, delay) ->
  timer = null
  ->
    context = this
    args = arguments
    clearTimeout timer
    timer = setTimeout((->
      fn.apply context, args
      return
    ), delay)
    return

TextArea = 
  view: (c, props) ->
    m "textarea#new.form-control", {
       oninput: m.withAttr("value", props.text)
       value: props.text()
     }

Markdown = 
  view: (c, props) ->
    m '.panel.panel-default',
      m '.panel-body', {
          config: (el) -> debounce(
            renderMathInElement(el, KAdelimiters), 300
          )
        }, m.trust(marked(props.text()))
        
Katex = 
  view: (c, args) ->
    m 'div', {
       config: (el) -> katex.render(args.expr, el)
     }
    
myeqn = m.component(Katex, 
  {expr: "c = \\pm\\sqrt{a^2 + b^2}"}
)
    
Page = 
  controller: ->
    text: m.prop("")
  view: (c) ->
    m '.container-fluid.main',
      m '.row',
        m '.col-xs-12.col-md-6',
          m.component(TextArea, {text: c.text})
          m('br')
          m.component(Markdown, text: c.text)
          myeqn
            
m.mount(document.body, Page)