jriou/coller
1
0
Fork 1
Code Issues 9 Pull requests 1 Releases 1 Activity Actions

feat: Add text editor
All checks were successful
/ pre-commit (push) Successful in 1m45s
Details

Browse source 
Use Monaco Editor to create notes. Support syntax highlighting. Store the
language with the note in the database to later support syntax highlighting in
a note web view.

Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
Julien Riou 2025-08-27 22:42:12 +02:00
commit c54f32495b
Signed by: jriou
GPG key ID: 9A099EDA51316854
9 changed files with 170 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

49
src/server/templates/index.html
View file

@ -7,7 +7,7 @@
<body>
{{block "header" .}}{{end}}
<form action="/create" method="post" enctype="multipart/form-data">
<form id="form" action="/create" method="post" enctype="multipart/form-data">
<div class="container mb-4">
<p class="fs-4">New note</p>
</div>
@ -36,28 +36,69 @@
</div>
<div class="col">
<select class="form-select" aria-label="Expiration" id="expiration" name="expiration">
<option selected>Expiration</option>
<option selected="selected" disabled>Expiration</option>
{{range .Expirations}}
<option value="{{.}}">{{HumanDuration .}}</option>
{{end}}
</select>
</div>
<div class="col">
<select class="form-select" aria-label="Language" id="language" name="language">
<option selected="selected" value="" disabled>Language</option>
{{range .Languages}}
<option value="{{lower .}}">{{.}}</option>
{{end}}
</select>
</div>
</div>
</div>
<div class="container mb-4">
<div class="row">
<textarea class="form-control" id="content" name="content" cols="40" rows="12"></textarea>
<div id="editor" name="editor" class="form-control"
style="height: 300px; resize: vertical; overflow: auto;"></div>
<input type="hidden" id="content" />
</div>
</div>
<div class="container mb-4">
<div class="row text-center justify-content-center">
<div class="col-1">
<button type="submit" class="btn btn-success">Create</button>
<button type="submit" id="submit" class="btn btn-success">Create</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
<script>
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
require(['vs/editor/editor.main'], function () {
var editor = monaco.editor.create(document.getElementById('editor'), {
theme: document.documentElement.getAttribute('data-bs-theme') == 'light' ? "vs" : "vs-dark",
language: document.getElementById("language").value,
});
// Syntax highlighting
document.getElementById("language").addEventListener("change", (e) => {
if (e.target.value != "") {
monaco.editor.setModelLanguage(editor.getModel(), e.target.value);
}
});
// Dark mode
document.getElementById("lightSwitch").addEventListener("click", () => {
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
monaco.editor.setTheme("vs")
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
monaco.editor.setTheme("vs-dark")
}
});
// Copy content on submit
document.getElementById("form").addEventListener("formdata", (e) => {
e.formData.append('content', editor.getModel().getValue());
});
});
</script>
</form>
{{block "footer" .}}{{end}}