HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
  <head>
    <title>Codemirror: HTML5 Preview</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src='http://codemirror.net/lib/codemirror.js'></script>
    <link rel='stylesheet'  href="http://codemirror.net/lib/codemirror.css">
    <link rel="stylesheet"  href="http://codemirror.net/addon/fold/foldgutter.css" />
    <script src='http://codemirror.net/javascripts/code-completion.js'></script>
    <script src='http://codemirror.net/javascripts/css-completion.js'></script>
    <script src='http://codemirror.net/javascripts/html-completion.js'></script>
    <script src='http://codemirror.net/mode/javascript/javascript.js'></script>
    <script src='http://codemirror.net/mode/xml/xml.js'></script>
    <script src='http://codemirror.net/mode/css/css.js'></script>
    <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
    <script src='http://codemirror.net/addon/edit/closetag.js'></script>
    <script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
    <script src='http://codemirror.net/addon/selection/active-line.js'></script>
    <script src='http://codemirror.net/keymap/extra.js'></script>
    <script src='http://codemirror.net/addon/fold/foldcode.js'></script>
    <script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
    <script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/comment-fold.js'></script>
  </head>
  <body>
    <div align='center'>
      <button class='undo'>Undo</button>
      <button class='redo'>Redo</button>
      <button class='jquery'>Add JQuery</button>
      <button class='bold'>Bold</button>
    </div>
    <textarea id='code' name='code'><!doctype html>
<html>
  <head>
    <meta charset=utf-8>
    <title>HTML5 canvas demo</title>
    <style>p {font-family: monospace;}</style>
  </head>
  <body>
    <p>Canvas pane goes here:</p>
    <canvas id=pane width=300 height=200></canvas>

context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    </script>
  </body>
</html></textarea>

// Append JS library to HTML <head>
function appendJSLib(txt) {
  var textArea = editor.getValue();
  var searchText = textArea.search('<head>');
  if(searchText>0) {
    txt = '<head>'+'\n'+txt;
    var updatedTextArea = textArea.replace('<head>',txt);
    editor.setValue(updatedTextArea);
  }
  else {
    reset();
    alert('WARNING! The &lt;head&gt tag seems to be missing in your HTML. Although your code may still work, we highly recommened that you have a valid HTML syntax. Please refer to the new document of correct formatted');
    txt = txt+textArea;
    htmlEditor.setLine(0, txt);
    return false;
  }
}

// Add JQuery as JS Source
$('.jquery').click(function() {
  txt = '<'+'script type=\'text/javascript\' src=\'http://code.jquery.com/jquery-latest.min.js\'>'+'</'+'script'+'>';
  appendJSLib(txt);
});

// Undo/Redo Initiation
$('.undo').click(function() {
  editor.undo();
});
$('.redo').click(function() {
  editor.redo();
});

// Make selected text bold (If no text selected it adds the code and focus's cursor to center of tag)
$('.bold').click(function() {
  // For codemirror & center cursor
  var selected_text = editor.getSelection();  // Need to grab the Active Selection
  console.log(selected_text);  // Active Selection
  
  editor.replaceSelection('', editor.getCursor());
  editor.replaceRange('<strong></strong>', editor.getCursor());
  editor.focus();
  var str = '</strong>';
  var mynum = str.length;
  var start_cursor = editor.getCursor();  // Need to get the cursor position
  console.log(start_cursor);  // Cursor position 
  var cursorLine = start_cursor.line;
  var cursorCh = start_cursor.ch;
  
  // Code to move cursor back [x] amount of spaces. [x] is the data-val value.
  editor.setCursor({line: cursorLine , ch : cursorCh -mynum });
  editor.replaceRange(selected_text, editor.getCursor());
  editor.focus();
});

var delay;

// Initialize CodeMirror editor
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
  mode: "text/html",
  tabMode: 'indent',
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop : true,
  gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});

// Live preview
editor.on('change', function() {
  clearTimeout(delay);
  delay = setTimeout(updatePreview, 300);
});

function updatePreview() {
  var previewFrame = document.getElementById('preview');
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  preview.open();
  preview.write(editor.getValue());
  document.title = $('#preview').contents().find('title').html();
  if ( document.title === 'undefined' ) {
    document.title = 'App name';
  }
  preview.close();
}
setTimeout(updatePreview, 300);

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  
  var files = evt.dataTransfer.files; // FileList object.
  var reader = new FileReader();  
  reader.onload = function(event) {
    editor.setValue( event.target.result );
  };
  reader.readAsText(files[0],"UTF-8");
}