Mockup of notes editor for Modkit for VEX

by nilloc

HTML

<script src="http://www.modkit.com/vex/editor/scripts/markdown.min.js"></script>
<textarea name="tester" id="tester" cols="30" rows="10">
asdf
- list
- items
    - sub item

asdf
http://asdf.com
[asdf](http://asdf.com)
</textarea>
<pre id='output'></pre>
<button id='save'>Save</button>
<pre id='newText'></pre>

CSS

#tester, #output{
    border:1px solid gray;
    float:left;
    clear:both;
    padding:0.5em;
    background:yellow;
    font-family: monospace;
    overflow:auto;
}
button{
    clear:both;
}

#output h1{
    font-size:1em;
    margin-bottom:-2em;
}

#output>*{
    margin-top:0;
    margin-bottom:-1em;
}

#output>*:last-child{
    margin-bottom:0;
}



html{
    font-family:Helvetica, Arial, sans-serif;
}
#newText{
    float:left;
    position:absolute;
    right:1em;
    bottom:0;
    border:1px dotted teal;
    font-size:0.75em;
}
#newText>h1{
    font-size:1.25em;
    margin:-1em 0;
}

JavaScript

$(function(){
    
    //$('#tester').change(displayNote).blur(displayNote).mouseup(displayNote);
    $('#save').click(displayNote);
    
    $('#output').click(editNote);
    
    function editNote(){
        $('#tester, #save').show();
        $('#output').hide();
    }
    
    function displayNote(){
        var val =  $('#tester').val();
        
        // First remove the only auto formatting we're doing.
        if(val.indexOf('#') === 0){
            val = val.substr(1);
        }
        
        var newText = val.split('\n');
                
        if(newText.length > 1){
            //put the underline in there
            
            //console.debug(newText);
        
            var firstLine = newText.shift();
            
            newText = '#'+firstLine+'\n'+
            newText.join('\n');
            
            // to fix common formatting mistakes and add links and stuff
            //for( var i=0; i < newText.length; i++){
            //    newText[i] = cleanupMarkdown(newText[i]);
            //}
            
        }else{
            newText = '#'+newText[0];
        }
        
        // Update the textarea
        $('#tester').val(val);
        $('#newText').html("<h1>newText:</h1>\n"+formatNakedURLs(newText));
        
        // now look for naked links
        //formatNakedURLs(newText);
            
        // Display it
        $('#output')
        .html(markdown.toHTML(formatNakedURLs(newText)));
        $('#output').css({
            'height':$('#tester').height(), 
            'width': $('#tester').width()
        });
        
        $('#tester, #save').hide();
        $('#output').show();
    }
    
    function formatNakedURLs(content){
        var lines = content.split('\n');
               
        for(var line in lines){
            var words = lines[line].split(' ');
            
            //console.debug(words);
            for(var el in words){
                if(words[el].indexOf('http://') === 0){
            ...