justinkelly/markdown-editor.html.erb

## markdown-editor.html.erb
<!DOCTYPE html>
<html>
<head>
  <%= stylesheet_link_tag 'codemirror' %>
  <%= javascript_include_tag 'codemirror' %>
  <%= javascript_include_tag 'loadmode' %>
  <%= javascript_include_tag 'cm-meta' %>
  <style>

  body, html {
    font-family: sans-serif;
    font-size: 16px;
    height: 100%;
  }

  #wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  }

  .CodeMirror {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    resize: none;
    font-size: 16px;
    border-radius: 4px;
    padding: 15px;
    font-family: monospace;
    padding: 0;
  }

  #select-wrapper {
    width: 100%;
    margin: 0;
    padding-left: 16px;
    background-color: rgb(247, 247, 247);
    border-top: 1px solid rgb(221, 221, 221);
  }

  #language-label {
    font-size: 12px;
  }

  #select {
    margin: 5px;
  }

  </style>

  <script>

    var editor, modeInput, select;
    var defaultMode = "markdown";

    var modes = [
    "markdown",
    ];

    function changeMode(inputMode) {
      var val = inputMode, m, mode, spec;
      if (m = /.+\.([^.]+)$/.exec(val)) {
        var info = CodeMirror.findModeByExtension(m[1]);
        if (info) {
          mode = info.mode;
          spec = info.mime;
        }
      } else if (/\//.test(val)) {
        var info = CodeMirror.findModeByMIME(val);
        if (info) {
          mode = info.mode;
          spec = val;
        }
      } else {
        mode = spec = val;
      }
      if (mode) {
        editor.setOption("mode", spec);
        CodeMirror.autoLoadMode(editor, mode);
        if(window.data) {
          window.data.mode = mode;
        }
        document.getElementById("select").selectedIndex = modes.indexOf(mode);
      } else {
        alert("Could not find a mode corresponding to " + val);
      }
    }

    window.addEventListener("message", function(event){
      if(isDemo) {
        return;
      }

      window.noteText = event.data.text;
      window.noteId = event.data.id;
      window.data = event.data.data || {};
      var mode = window.data.mode;
      if(mode) {
        changeMode(mode);
      }
      if(editor) {
        editor.getDoc().setValue(window.noteText);
      }
    }, false);

    function postMessageToParent() {
      window.parent.postMessage({text: editor.getValue(), data: window.data, id: window.noteId}, '*');
    }

    function onLanguageSelect(event) {
      var language = modes[select.selectedIndex];
      changeMode(language);
      postMessageToParent();
    }

    document.addEventListener("DOMContentLoaded", function(event) {

      if(window.parent != window) {
        window.parent.postMessage({status: "ready"}, '*');
      }

      CodeMirror.modeURL = "/assets/modes/%N/%N.js";
      editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: false,
        mode: "markdown",
        lineWrapping: true,
        extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
      });
      editor.setSize("100%", "100%");


      setTimeout(function () {
        changeMode(defaultMode);
      }, 1);

      select = document.getElementById("select");

      var index = 0;
      for(element in modes) {
         var opt = document.createElement("option");
         opt.value = index;
         opt.innerHTML = modes[index];

         select.appendChild(opt);
         index++;
      }

      editor.on("change", function(){
        if(window.parent != window) {
          if(isDemo) {
            return;
          }

          postMessageToParent();
        }
      });
    });
  </script>
</head>
<body>

<div id="wrapper">
<textarea id="code" name="code">
</textarea>
<div>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<%= stylesheet_link_tag 'codemirror' %>
	<%= javascript_include_tag 'codemirror' %>
	<%= javascript_include_tag 'loadmode' %>
	<%= javascript_include_tag 'cm-meta' %>
	<style>

	body, html {
	font-family: sans-serif;
	font-size: 16px;
	height: 100%;
	}

	#wrapper {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
	}

	.CodeMirror {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	resize: none;
	font-size: 16px;
	border-radius: 4px;
	padding: 15px;
	font-family: monospace;
	padding: 0;
	}

	#select-wrapper {
	width: 100%;
	margin: 0;
	padding-left: 16px;
	background-color: rgb(247, 247, 247);
	border-top: 1px solid rgb(221, 221, 221);
	}

	#language-label {
	font-size: 12px;
	}

	#select {
	margin: 5px;
	}

	</style>

	<script>

	var editor, modeInput, select;
	var defaultMode = "markdown";

	var modes = [
	"markdown",
	];

	function changeMode(inputMode) {
	var val = inputMode, m, mode, spec;
	if (m = /.+\.([^.]+)$/.exec(val)) {
	var info = CodeMirror.findModeByExtension(m[1]);
	if (info) {
	mode = info.mode;
	spec = info.mime;
	}
	} else if (/\//.test(val)) {
	var info = CodeMirror.findModeByMIME(val);
	if (info) {
	mode = info.mode;
	spec = val;
	}
	} else {
	mode = spec = val;
	}
	if (mode) {
	editor.setOption("mode", spec);
	CodeMirror.autoLoadMode(editor, mode);
	if(window.data) {
	window.data.mode = mode;
	}
	document.getElementById("select").selectedIndex = modes.indexOf(mode);
	} else {
	alert("Could not find a mode corresponding to " + val);
	}
	}

	window.addEventListener("message", function(event){
	if(isDemo) {
	return;
	}

	window.noteText = event.data.text;
	window.noteId = event.data.id;
	window.data = event.data.data \|\| {};
	var mode = window.data.mode;
	if(mode) {
	changeMode(mode);
	}
	if(editor) {
	editor.getDoc().setValue(window.noteText);
	}
	}, false);

	function postMessageToParent() {
	window.parent.postMessage({text: editor.getValue(), data: window.data, id: window.noteId}, '*');
	}

	function onLanguageSelect(event) {
	var language = modes[select.selectedIndex];
	changeMode(language);
	postMessageToParent();
	}

	document.addEventListener("DOMContentLoaded", function(event) {

	if(window.parent != window) {
	window.parent.postMessage({status: "ready"}, '*');
	}

	CodeMirror.modeURL = "/assets/modes/%N/%N.js";
	editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	lineNumbers: false,
	mode: "markdown",
	lineWrapping: true,
	extraKeys: {"Enter": "newlineAndIndentContinueMarkdownList"}
	});
	editor.setSize("100%", "100%");



	setTimeout(function () {
	changeMode(defaultMode);
	}, 1);

	select = document.getElementById("select");

	var index = 0;
	for(element in modes) {
	var opt = document.createElement("option");
	opt.value = index;
	opt.innerHTML = modes[index];

	select.appendChild(opt);
	index++;
	}

	editor.on("change", function(){
	if(window.parent != window) {
	if(isDemo) {
	return;
	}

	postMessageToParent();
	}
	});
	});
	</script>
	</head>
	<body>

	<div id="wrapper">
	<textarea id="code" name="code">
	</textarea>
	<div>

	</body>
	</html>