gonotes/internal/conf/templates/edit.tmpl.html

77 lines
2.1 KiB
HTML

{{define "title"}}Edit: {{.note.Title}}{{end}}
{{define "navExtra"}}<!-- -->{{end}}
{{define "main"}}
<form action="{{.urlSave}}" method="POST">
<div class="mb-3">
<input type="text" class="form-control" id="noteTitleInput" name="title" aria-described-by="titleHelp" value="{{.note.Title}}"/>
<div id="titleHelp" class="form-text">Enter your note title</div>
</div>
<div class="mb-3">
<div class="border rounded rounded-1">
<div id="toolbar"></div>
<textarea class="form-control" id="noteBodyInput" name="body" aria-described-by="bodyHelp">{{.text}}</textarea>
</div>
<div id="bodyHelp" class="form-text">Enter your note content in markdown</div>
</div>
<button class="btn btn-primary" type="submit">Save</button>
</form>
<script src="/static/js/easy-mde.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/static/css/easy-mde.min.css"
/>
<script type="text/javascript">
var easyMDE = new EasyMDE({
textarea: "noteBodyInput",
toolbar: [
'bold',
'italic',
'strikethrough',
'heading',
'|',
'unordered-list',
'ordered-list',
{
name: 'checklist',
action: (e) => {
e.codemirror.replaceSelection('* [ ] ');
e.codemirror.focus();
},
className: 'fa fa-check-square-o',
title: 'Add task list',
},
'|',
'link',
'|',
'preview',
'side-by-side'
],
autosave: {enabled: true, uniqueId: "{{.note.Uid}}"},
forceSync: true
});
let editTimeout;
let autoSaveDelay = 2000;
easyMDE.codemirror.on("change" , function() {
clearTimeout(editTimeout);
editTimeout = setTimeout(() => {
let form = document.querySelector("form");
let formData = new FormData(form);
fetch("{{.urlSave}}", {
method: "POST",
body: formData,
}).then((data) => {
console.log("Saved Note")
});
}, autoSaveDelay);
});
</script>
{{end}}