MarkDownEditorCSS+Button (Doesn't Save or Initially Render Markdown)

public/js/app.js

@@ -1,6 +1,12 @@
 $(function(){
 	//alert("jquery works"); 
 
+	$("#markdownButton").click(function(){
+		vo.thisView.createMarkDownBullet(); 
+	}); 
+
+
+
 	$("body").on("mouseover", "a.expandCollapse", function(event){
 		// console.log("bleh"); 
 		// debugger; 
@@ -122,6 +128,7 @@ voInitializer = function(that, event){
 	vo.thisId = vo.thisLI.attr("data-id"); //data-id. 
 	vo.thisIndex = vo.thisLI.index(); //returns -1 if there's no match. 
 	vo.thisModel = nodesCollection.findWhere({_id: vo.thisId});
+	vo.thisView = vo.thisModel.get("views")[0]; //split screen isn't implemented yet. 
 
 	//alert(thisIndex)
 	//thisModel = nodesCollection.get(thisId);

public/js/libs/externalLibs/markdownEditor.js

@@ -0,0 +1,121 @@
+marked.setOptions({
+    renderer: new marked.Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: false, // IMPORTANT, because we do MathJax before markdown,
+                     //            however we do escaping in 'CreatePreview'.
+    smartLists: true,
+    smartypants: false
+  });
+  
+var Preview = {
+  delay: 50,        // delay after keystroke before updating
+
+  preview: null,     // filled in by Init below
+  buffer: null,      // filled in by Init below
+
+  timeout: null,     // store setTimout id
+  mjRunning: false,  // true when MathJax is processing
+  oldText: null,     // used to check if an update is needed
+
+  //
+  //  Get the preview and buffer DIV's
+  //
+  Init: function () {
+    this.preview = document.getElementById("marked-mathjax-preview");
+    this.buffer = document.getElementById("marked-mathjax-preview-buffer");
+  },
+
+  //
+  //  Switch the buffer and preview, and display the right one.
+  //  (We use visibility:hidden rather than display:none since
+  //  the results of running MathJax are more accurate that way.)
+  //
+  SwapBuffers: function () {
+    var buffer = this.preview, preview = this.buffer;
+    this.buffer = buffer; this.preview = preview;
+    buffer.style.display = "none";
+    buffer.style.position = "absolute";
+    buffer.style.height = "auto"; //dunno
+    buffer.style.top = "0px"; 
+    buffer.style.left = "0px"; 
+
+    preview.style.display = "inline-block"; 
+    preview.style.position = ""; //dunno
+    preview.style.width = "90%"; 
+    preview.style.height = "auto"; 
+    preview.style.overflow = "auto"; 
+    
+
+    // preview.style.display = "";
+  },
+
+  //
+  //  This gets called when a key is pressed in the textarea.
+  //  We check if there is already a pending update and clear it if so.
+  //  Then set up an update to occur after a small delay (so if more keys
+  //    are pressed, the update won't occur until after there has been 
+  //    a pause in the typing).
+  //  The callback function is set up below, after the Preview object is set up.
+  //
+  Update: function () {
+    if (this.timeout) {clearTimeout(this.timeout)}
+    this.timeout = setTimeout(this.callback,this.delay);
+  },
+
+  //
+  //  Creates the preview and runs MathJax on it.
+  //  If MathJax is already trying to render the code, return
+  //  If the text hasn't changed, return
+  //  Otherwise, indicate that MathJax is running, and start the
+  //    typesetting.  After it is done, call PreviewDone.
+  //  
+  CreatePreview: function () {
+    Preview.timeout = null;
+    if (this.mjRunning) return;
+    var text = document.getElementById("marked-mathjax-input").value;
+    if (text === this.oldtext) return;
+    text = this.Escape(text);                       //Escape tags before doing stuff
+    this.buffer.innerHTML = this.oldtext = text;
+    this.mjRunning = true;
+    MathJax.Hub.Queue(
+      ["Typeset",MathJax.Hub,this.buffer],
+      ["PreviewDone",this],
+      ["resetEquationNumbers", MathJax.InputJax.TeX]
+    );
+  },
+
+  //
+  //  Indicate that MathJax is no longer running,
+  //  do markdown over MathJax's result, 
+  //  and swap the buffers to show the results.
+  //
+  PreviewDone: function () {
+    this.mjRunning = false;
+    text = this.buffer.innerHTML;
+    // replace occurrences of > at the beginning of a new line
+    // with > again, so Markdown blockquotes are handled correctly
+    text = text.replace(/^>/mg, '>');
+    this.buffer.innerHTML = marked (text);
+    this.SwapBuffers();
+  },
+
+  Escape: function (html, encode) {
+    return html
+      .replace(!encode ? /&(?!#?\w+;)/g : /&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+     .replace(/'/g, '&#39;');
+  }
+
+
+};
+
+//
+//  Cache a callback to the CreatePreview action
+//
+Preview.callback = MathJax.Callback(["CreatePreview",Preview]);
+Preview.callback.autoReset = true;  // make sure it can run more than once

public/js/views/showView.js

@@ -76,6 +76,17 @@ var showView = Backbone.View.extend({
 	  	return bullet;
   },
 
+  createMarkDownBullet: function(){
+  	var preview = "<div class='preview content' id='marked-mathjax-preview'>"+ this.model.get("text") + " </div>"; 
+  	var buffer = '<div class="preview content" id="marked-mathjax-preview-buffer" style="display:none; position:absolute; top:0; left: 0"></div>'; 
+  	var textareaInput = '<textarea id="marked-mathjax-input" onkeyup="Preview.Update()" name="comment" "autofocus"></textarea>'; 
+  	this.$el.find("textarea").remove(); 	
+  	this.$el.children(".content").html(preview+buffer+textareaInput); 
+  	Preview.Init();
+  	Preview.Update();
+  	return; 
+  }, 
+
  	addNode: function(newNode, index, cur){
  		var that = this;
  		console.log("addNodeText" + newNode.get("text"))

public/stylesheets/style.css

@@ -141,7 +141,11 @@ body {
 /**************** Panel ****************/
 
 /**************** List *****************/
-
+#marked-mathjax-input{
+  border: 2px dotted black;
+  margin-left: 0px;
+  background-color: rgb(245, 231, 234); 
+}
 
 
 ul {

views/index.ejs

@@ -26,10 +26,19 @@
 <script src="js/libs/externalLibs/textarea_auto_expand.js"></script>
 
 
-
+ <script type="text/x-mathjax-config">
+    MathJax.Hub.Config({
+      showProcessingMessages: false,
+      tex2jax: { inlineMath: [['$','$'],['\\(','\\)']] },
+      TeX: { equationNumbers: {autoNumber: "AMS"} }
+    });
+</script>
+<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+<script type="text/javascript" src="js/libs/externalLibs/marked.js"></script>
 
 <script src ="js/libs/externalLibs/underscore-min.js"></script>
 <script src="js/libs/externalLibs/backbone-min.js"></script>
+<script src="js/libs/externalLibs/markdowneditor.js"></script>
 
 
 <script src="js/models/node.js"></script>
@@ -40,6 +49,7 @@
 
 
 
+
 <body>
 	<p><br /><span class="math"><em>x</em><sup>2</sup></span><br /></p>