Fixed the markdown treema node after changes to the ace editor node on treema broke things.

app/styles/treema-ext.sass

@@ -3,18 +3,24 @@
   background-color: #f5f5f5
   padding: 10px 20px 10px 0
     
-.treema-markdown.treema-edit, .treema-coffee.treema-edit, .treema-javascript.treema-edit
+.treema-markdown
   border: 1px solid gray
   padding: 5px
 
   &, & > div.ace_editor
     width: 100%
-
-.treema-markdown.treema-display, .treema-coffee.treema-display, .treema-javascript.treema-display
-  width: 100%
-  border: 3px inset rgba(0, 100, 100, 0.2)
-  box-sizing: border-box
-  padding: 5px
+    
+  .buttons button
+    float: left
+    margin-bottom: 5px
+    margin-right: 5px
+    
+  .preview
+    clear: both
+    width: 100%
+    border: 3px inset rgba(0, 100, 100, 0.2)
+    box-sizing: border-box
+    padding: 5px
     
 .treema-selection-map
   position: fixed

app/treema-ext.coffee

@@ -20,20 +20,30 @@ class LiveEditingMarkup extends TreemaNode.nodeMap.ace
     super(arguments...)
     @schema.aceMode = 'ace/mode/markdown'
 
-  buildValueForEditing: (valEl) ->
+  initEditor: (valEl) ->
+    buttonRow = $('<div class="buttons"></div>')
+    valEl.append(buttonRow)
+    @addPreviewToggle(buttonRow)
+    @addImageUpload(buttonRow)
     super(valEl)
-    @editor.on('change', @onEditorChange)
-    @addImageUpload(valEl)
+    valEl.append($('<div class="preview"></div>'))
 
   addImageUpload: (valEl) ->
     return unless me.isAdmin()
     valEl.append(
-      $('<div></div>').append(
+      $('<div class="pick-image-button"></div>').append(
         $('<button>Pick Image</button>')
           .addClass('btn btn-sm btn-primary')
           .click(=> filepicker.pick @onFileChosen)
       )
     )
+    
+  addPreviewToggle: (valEl) ->
+    valEl.append($('<div class="toggle-preview-button"></div>').append(
+      $('<button>Toggle Preview</button>')
+      .addClass('btn btn-sm btn-primary')
+      .click(@togglePreview)
+    ))
 
   onFileChosen: (InkBlob) =>
     body =
@@ -49,14 +59,19 @@ class LiveEditingMarkup extends TreemaNode.nodeMap.ace
   onFileUploaded: (e) =>
     @editor.insert "![#{e.metadata.name}](/file/#{@uploadingPath})"
 
-  onEditorChange: =>
-    @saveChanges()
-    @flushChanges()
-    @getRoot().broadcastChanges()
+  showingPreview: false
 
-  buildValueForDisplay: (valEl) ->
-    @editor?.destroy()
-    valEl.html(marked(@data))
+  togglePreview: =>
+    valEl = @getValEl()
+    if @showingPreview
+      valEl.find('.preview').hide()
+      valEl.find('.pick-image-button').show()
+      valEl.find('.ace_editor').show()
+    else
+      valEl.find('.preview').html(marked(@data)).show()
+      valEl.find('.pick-image-button').hide()
+      valEl.find('.ace_editor').hide()
+    @showingPreview = not @showingPreview
 
 class SoundFileTreema extends TreemaNode.nodeMap.string
   valueClass: 'treema-sound-file'