gonotes/internal/conf/templates/edit.tmpl.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/tiny-mde.min.js"></script>
<link
  rel="stylesheet"
  type="text/css"
  href="/static/css/tiny-mde.min.css"
/>
<script type="text/javascript">


var tinyMDE = new TinyMDE.Editor({ textarea: "noteBodyInput" });
var commandBar = new TinyMDE.CommandBar({
    element: "toolbar",
    editor: tinyMDE,
    commands: [
        'bold', 'italic', 'strikethrough',
        '|',
        'code',
        '|',
        'h1', 'h2',
        '|',
        'ul', 'ol',
        '|',
        'blockquote', 'hr',
        '|',
        'insertLink', 'insertImage'
    ],
});

let editTimeout;
let autoSaveDelay = 2000;

tinyMDE.addEventListener("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}}