- Remove the Monaco Editor because it was to heavy and hard to integrate - Use Ace instead - Use the lowercase identifier for languages (ex: "Text" -> "text") - Select automatically the default language in the drop down to create a note (like the expiration) - Add `ace_directory` to serve assets from a local folder instead of a CDN - "hcl" syntax highlighting has been removed - "go" syntax highlighting has been renamed to "golang" - Add option to disable the editor Fixes #32. Signed-off-by: Julien Riou <julien@riou.xyz>
This commit is contained in:
parent
9e0254c0b5
commit
b5701b5a4d
GPG key ID:
9A099EDA51316854
9 changed files with 113 additions and 73 deletions
|
|
@ -4,6 +4,8 @@
|
|||
<title>{{.Title}}</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="{{if ne .BootstrapDirectory ``}}/static/bootstrap/css/bootstrap.min.css{{else}}https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css{{end}}" rel="stylesheet">
|
||||
<link
|
||||
href="{{if .BootstrapDirectory}}/static/bootstrap/css/bootstrap.min.css{{else}}https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css{{end}}"
|
||||
rel="stylesheet">
|
||||
</head>
|
||||
{{end}}
|
||||
|
|
@ -59,9 +59,10 @@
|
|||
</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>
|
||||
<option disabled>Language</option>
|
||||
{{range $language := .Languages}}
|
||||
<option {{ if eq $language $.Language }}selected="selected" {{end}}value="{{lower .}}">
|
||||
{{$language}}</option>
|
||||
{{end}}
|
||||
</select>
|
||||
</div>
|
||||
|
|
@ -69,11 +70,15 @@
|
|||
</div>
|
||||
|
||||
<div class="container mb-4">
|
||||
{{if .DisableEditor}}
|
||||
<textarea class="form-control" id="content" name="content" cols="40" rows="12"></textarea>
|
||||
{{else}}
|
||||
<div class="row">
|
||||
<div id="editor" name="editor" class="form-control"
|
||||
style="height: 300px; resize: vertical; overflow: auto;"></div>
|
||||
style="min-height: 300px; resize: vertical; overflow: auto;"></div>
|
||||
<input type="hidden" id="content" />
|
||||
</div>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="container mb-4">
|
||||
<div class="row text-center justify-content-center">
|
||||
|
|
@ -82,38 +87,40 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
|
||||
{{if eq false .DisableEditor}}
|
||||
<script
|
||||
src="{{if .AceDirectory}}/static/ace-builds{{else}}https://cdn.jsdelivr.net/npm/ace-builds@1.43.3{{end}}/src-noconflict/ace.js"
|
||||
type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
|
||||
var editor = ace.edit("editor");
|
||||
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
||||
editor.setTheme("ace/theme/github_light_default");
|
||||
} else {
|
||||
editor.setTheme("ace/theme/github_dark");
|
||||
}
|
||||
|
||||
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 != "") {
|
||||
editor.getSession().setMode("ace/mode/" + e.target.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') {
|
||||
editor.setTheme("ace/theme/github_light_default")
|
||||
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
|
||||
editor.setTheme("ace/theme/github_dark")
|
||||
}
|
||||
});
|
||||
|
||||
// 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());
|
||||
});
|
||||
// Copy content on submit
|
||||
document.getElementById("form").addEventListener("formdata", (e) => {
|
||||
e.formData.append('content', editor.getValue());
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
</form>
|
||||
|
||||
{{block "footer" .}}{{end}}
|
||||
|
|
|
|||
|
|
@ -20,32 +20,44 @@
|
|||
{{end}}
|
||||
</ul>
|
||||
</div>
|
||||
{{if .DisableEditor}}
|
||||
<div class="row">
|
||||
<div id="editor" name="editor" class="form-control" style="height: 300px; resize: vertical; overflow: auto;">
|
||||
<pre class="border px-3 pt-3" style="min-height: 300px; resize: vertical; overflow: auto;">
|
||||
{{string .Note.Content}}
|
||||
</pre>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="row">
|
||||
<div id="editor" name="editor" class="form-control" style="min-height: 300px; resize: vertical; overflow: auto;">
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs/loader.min.js"></script>
|
||||
<script
|
||||
src="{{if .AceDirectory}}/static/ace-builds{{else}}https://cdn.jsdelivr.net/npm/ace-builds@1.43.3{{end}}/src-noconflict/ace.js"
|
||||
type="text/javascript" charset="utf-8"></script>
|
||||
<script>
|
||||
require.config({ paths: { vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.52.2/min/vs' } });
|
||||
var editor = ace.edit("editor");
|
||||
editor.setValue("{{string .Note.Content}}");
|
||||
editor.setReadOnly(true);
|
||||
editor.getSession().setMode("ace/mode/{{.Note.Language}}");
|
||||
editor.getSession().selection.clearSelection();
|
||||
editor.setOptions({ maxLines: Infinity });
|
||||
|
||||
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: "{{.Note.Language}}",
|
||||
readOnly: true,
|
||||
value: "{{string .Note.Content}}"
|
||||
});
|
||||
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
||||
editor.setTheme("ace/theme/github_light_default");
|
||||
} else {
|
||||
editor.setTheme("ace/theme/github_dark");
|
||||
}
|
||||
|
||||
// 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")
|
||||
}
|
||||
});
|
||||
// Dark mode
|
||||
document.getElementById("lightSwitch").addEventListener("click", () => {
|
||||
if (document.documentElement.getAttribute('data-bs-theme') == 'light') {
|
||||
editor.setTheme("ace/theme/github_light_default")
|
||||
} else if (document.documentElement.getAttribute('data-bs-theme') == 'dark') {
|
||||
editor.setTheme("ace/theme/github_dark")
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{{end}}
|
||||
</div>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Loading…
Add table
Add a link
Reference in a new issue