2016-04-03 11:01:21 -04:00
|
|
|
"use strict";
|
|
|
|
|
|
2016-04-09 14:24:16 -04:00
|
|
|
//! {"require": ["ui"]}
|
|
|
|
|
|
2016-04-03 11:01:21 -04:00
|
|
|
terminal.setEcho(false);
|
2016-04-04 16:26:01 -04:00
|
|
|
terminal.setTitle("Live Markdeep Editor");
|
2016-04-03 11:01:21 -04:00
|
|
|
|
2016-04-09 14:24:16 -04:00
|
|
|
let gEditEvent = null;
|
2016-04-03 11:01:21 -04:00
|
|
|
|
2016-04-09 14:24:16 -04:00
|
|
|
function back() {
|
2016-04-04 16:26:01 -04:00
|
|
|
terminal.split([{name: "terminal"}]);
|
2016-04-09 14:24:16 -04:00
|
|
|
if (gEditEvent) {
|
|
|
|
|
gEditEvent.back();
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
core.register("onWindowMessage", function(event) {
|
|
|
|
|
if (event.message.ready) {
|
2016-04-09 14:24:16 -04:00
|
|
|
terminal.postMessageToIframe("iframe", {title: gEditEvent.name, contents: gEditEvent.value});
|
2016-04-03 11:01:21 -04:00
|
|
|
} else if (event.message.index) {
|
2016-04-09 14:24:16 -04:00
|
|
|
back();
|
2016-04-03 11:01:21 -04:00
|
|
|
} else {
|
2016-04-09 14:24:16 -04:00
|
|
|
gEditEvent.save(event.message.title, event.message.contents).then(back);
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
2016-04-09 14:24:16 -04:00
|
|
|
function editPage(event) {
|
|
|
|
|
gEditEvent = event;
|
2016-04-04 16:26:01 -04:00
|
|
|
terminal.split([{name: "terminal", type: "vertical"}]);
|
2016-04-03 11:01:21 -04:00
|
|
|
terminal.clear();
|
|
|
|
|
terminal.print({iframe: `<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/codemirror.min.css"></link>
|
2020-09-22 21:58:13 -04:00
|
|
|
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.2/theme/base16-dark.min.css"></link>
|
2016-04-03 11:01:21 -04:00
|
|
|
<style>
|
2016-04-04 16:26:01 -04:00
|
|
|
html {
|
|
|
|
|
height: 100%;
|
2016-04-03 11:01:21 -04:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
2016-04-04 16:26:01 -04:00
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
2016-04-03 11:01:21 -04:00
|
|
|
height: 100%;
|
2016-04-04 16:26:01 -04:00
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
#menu {
|
|
|
|
|
flex: 0 0 auto;
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
#container {
|
2016-04-04 16:26:01 -04:00
|
|
|
flex: 1 1 auto;
|
2016-04-03 11:01:21 -04:00
|
|
|
display: flex;
|
|
|
|
|
flex-direction: row;
|
2016-04-04 16:26:01 -04:00
|
|
|
width: 100%;
|
|
|
|
|
background-color: white;
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
2016-04-04 16:26:01 -04:00
|
|
|
.CodeMirror {
|
|
|
|
|
width: 100%;
|
2016-04-03 11:01:21 -04:00
|
|
|
height: 100%;
|
|
|
|
|
}
|
2016-04-04 16:26:01 -04:00
|
|
|
.CodeMirror-scroll {
|
|
|
|
|
}
|
2020-09-22 21:58:13 -04:00
|
|
|
|
|
|
|
|
.cm-tab {
|
|
|
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
|
|
|
|
|
background-position: right;
|
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
|
-webkit-filter: invert(100%);
|
|
|
|
|
filter: invert(100%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.cm-trailingspace {
|
|
|
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QUXCToH00Y1UgAAACFJREFUCNdjPMDBUc/AwNDAAAFMTAwMDA0OP34wQgX/AQBYgwYEx4f9lQAAAABJRU5ErkJggg==);
|
|
|
|
|
background-position: bottom left;
|
|
|
|
|
background-repeat: repeat-x;
|
|
|
|
|
}
|
2016-04-04 16:26:01 -04:00
|
|
|
#edit { background-color: white }
|
|
|
|
|
#preview { background-color: white }
|
|
|
|
|
#edit, #preview {
|
|
|
|
|
display: flex;
|
2016-04-03 11:01:21 -04:00
|
|
|
overflow: auto;
|
2016-04-04 16:26:01 -04:00
|
|
|
flex: 0 0 50%;
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
<script>
|
|
|
|
|
var gEditor;
|
|
|
|
|
function index() {
|
|
|
|
|
parent.postMessage({index: true}, "*");
|
|
|
|
|
}
|
|
|
|
|
function submit() {
|
|
|
|
|
parent.postMessage({
|
|
|
|
|
title: document.getElementById("title").value,
|
|
|
|
|
contents: gEditor.getValue(),
|
|
|
|
|
}, "*");
|
|
|
|
|
}
|
|
|
|
|
function textChanged() {
|
|
|
|
|
var preview = document.getElementById("preview");
|
2016-04-17 10:33:40 -04:00
|
|
|
preview.innerHTML = markdeep.format(gEditor.getValue() + "\\n", false);
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
window.markdeepOptions = {mode: 'script'};
|
|
|
|
|
</script>
|
|
|
|
|
<script src="https://casual-effects.com/markdeep/latest/markdeep.min.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
document.head.innerHTML += markdeep.stylesheet();
|
|
|
|
|
|
|
|
|
|
window.addEventListener("message", function(message) {
|
|
|
|
|
document.getElementById("title").value = message.data.title;
|
|
|
|
|
gEditor.setValue(message.data.contents);
|
|
|
|
|
textChanged();
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
window.addEventListener("load", function() {
|
|
|
|
|
gEditor = CodeMirror.fromTextArea(document.getElementById("contents"), {
|
2020-09-22 21:58:13 -04:00
|
|
|
theme: 'base16-dark',
|
|
|
|
|
lineNumbers: true,
|
|
|
|
|
tabSize: 4,
|
|
|
|
|
intentUnit: 4,
|
|
|
|
|
indentWithTabs: true,
|
|
|
|
|
showTrailingSpace: true,
|
2016-04-03 11:01:21 -04:00
|
|
|
});
|
|
|
|
|
gEditor.on("change", textChanged);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
parent.postMessage({ready: true}, "*");
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2016-04-04 16:26:01 -04:00
|
|
|
<div id="menu">
|
|
|
|
|
<input type="button" value="Back" onclick="index()">
|
2016-04-25 16:43:28 -04:00
|
|
|
` + (core.user.credentials.permissions && core.user.credentials.permissions.authenticated ? `
|
2016-04-04 16:26:01 -04:00
|
|
|
<input type="button" value="Save" onclick="submit()">
|
|
|
|
|
` : "") +
|
|
|
|
|
` <a target="_top" href="https://casual-effects.com/markdeep/">Markdeep</a>
|
|
|
|
|
<input type="text" id="title" oninput="textChanged()">
|
|
|
|
|
</div>
|
2016-04-03 11:01:21 -04:00
|
|
|
<div id="container">
|
2016-04-04 16:26:01 -04:00
|
|
|
<div id="edit"><textarea id="contents" oninput="textChanged()"></textarea></div>
|
|
|
|
|
<div id="preview"></div>
|
2016-04-03 11:01:21 -04:00
|
|
|
</div>
|
|
|
|
|
</body>
|
2016-04-04 16:26:01 -04:00
|
|
|
</html>`, name: "iframe", style: "flex: 1 1 auto; border: 0; width: 100%"});
|
2016-04-03 11:01:21 -04:00
|
|
|
}
|
|
|
|
|
|
2016-04-09 14:36:43 -04:00
|
|
|
require("ui").fileList({
|
2016-04-09 14:24:16 -04:00
|
|
|
title: "Live Markdeep Editor",
|
|
|
|
|
edit: editPage,
|
|
|
|
|
});
|
