Skip to content

Instantly share code, notes, and snippets.

@justinkelly
Last active March 14, 2017 23:49
Show Gist options
  • Save justinkelly/cdf57ee55799fb092364543d11f82a64 to your computer and use it in GitHub Desktop.
Save justinkelly/cdf57ee55799fb092364543d11f82a64 to your computer and use it in GitHub Desktop.
Markdown editor for StandardNotes
<!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>
@justinkelly
Copy link
Author

the changeMode code can be removed - as this editor will just be for markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment