125 lines
3.5 KiB
Plaintext
125 lines
3.5 KiB
Plaintext
{{ define "_editor" }}
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<style>
|
|
#easyMDEwrap {
|
|
flex-grow: 1;
|
|
}
|
|
.CodeMirror-scroll, .CodeMirror-sizer {
|
|
min-height: 10px !important;
|
|
height: auto !important;
|
|
}
|
|
#article {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
#titlepath, #title {
|
|
font-size: 2rem;
|
|
font-weight: 600;
|
|
}
|
|
.EasyMDEContainer button {
|
|
color: black;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
.monospace {
|
|
font-family: Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace;
|
|
}
|
|
.lil_btn {
|
|
width: initial;
|
|
display: inline-block;
|
|
}
|
|
input, label, textarea {
|
|
margin: initial;
|
|
}
|
|
.editor-toolbar > button.preview {
|
|
color: #08c;
|
|
}
|
|
</style>
|
|
<script>
|
|
var saveFeedbackInterval = null
|
|
function pushFile() {
|
|
const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
|
|
const body = easyMDE.value() ? easyMDE.value() : ""
|
|
const id = window.location.pathname.includes("/ui/files/") ? window.location.pathname.split("/ui/files/")[1] : ""
|
|
headers = {}
|
|
if (title)
|
|
headers["Title"] = title
|
|
http("PUT", "/api/v0/files/" + id, (body, status) => {
|
|
if (status != 200) {
|
|
alert(`failed to push file ${id}: ${status}: ${body}`)
|
|
throw `failed to push file ${id}: ${status}: ${body}`
|
|
}
|
|
document.getElementById("saveFeedback").innerHTML = "success!"
|
|
if (saveFeedbackInterval) {
|
|
clearTimeout(saveFeedbackInterval)
|
|
}
|
|
saveFeedbackInterval = setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
|
|
}, body, headers)
|
|
}
|
|
</script>
|
|
<div class="fullscreen tb_fullscreen">
|
|
<article id="article">
|
|
<div class="columns">
|
|
<span class="r_buffer">
|
|
<form action="#" onsubmit="pushFile(); return false;">
|
|
<input class="button-info lil_btn" type="submit" value="SAVE"/>
|
|
</form>
|
|
</span>
|
|
<span id="titlePath">
|
|
/
|
|
{{ if ne .This.PID "" }}
|
|
<a href="/ui/files/{{ .This.PID }}">{{ .This.PTitle }}</a> /
|
|
{{ end }}
|
|
</span>
|
|
<span id="title" class="thic_flex" contenteditable>{{ .This.Title }}</span>
|
|
<span class="l_buffer">
|
|
<form action="" method="delete" onsubmit="return confirm('are you sure?');"> <!-- TODO -->
|
|
<input class="button-error lil_btn" type="submit" value="DELETE"/>
|
|
</form>
|
|
</span>
|
|
</div>
|
|
<!-- todo: each line no is an anchor -->
|
|
<div id="easyMDEwrap" class="monospace">
|
|
<textarea id="my-text-area"></textarea>
|
|
</div>
|
|
<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<script>
|
|
const easyMDE = new EasyMDE({
|
|
autoDownloadFontAwesome: true,
|
|
autofocus: true,
|
|
autosave: {
|
|
enabled: false,
|
|
},
|
|
element: document.getElementById('my-text-area'),
|
|
forceSync: true,
|
|
indentWithTabs: false,
|
|
initialValue: "loading...",
|
|
showIcons: ["code", "table"],
|
|
spellChecker: false,
|
|
sideBySideFullscreen: false,
|
|
tabSize: 3,
|
|
previewImagesInEditor: true,
|
|
insertTexts: {
|
|
image: ["![](", ")"],
|
|
link: ["[](", ")"],
|
|
},
|
|
lineNumbers: true,
|
|
lineWrapping: false,
|
|
uploadImage: true,
|
|
imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
|
|
imagePathAbsolute: false,
|
|
renderingConfig: {
|
|
codeSyntaxHighlighting: true,
|
|
},
|
|
status: ["lines", "words", "cursor"],
|
|
})
|
|
easyMDE.value({{ .This.Content }})
|
|
</script>
|
|
{{ end }}
|