Use tinyMDE which has better checklist support

This commit is contained in:
Maximilian Friedersdorff 2025-11-13 13:45:09 +00:00
parent d7b56c3b86
commit cb24ab18c5
2 changed files with 28 additions and 18 deletions

View file

@ -67,8 +67,8 @@ var (
assets []Asset = []Asset{ assets []Asset = []Asset{
{Path: "css/bootstrap.min.css", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"}, {Path: "css/bootstrap.min.css", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"},
{Path: "js/bootstrap.bundle.min.js", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"}, {Path: "js/bootstrap.bundle.min.js", Url: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"},
{Path: "css/tiny-mde.min.css", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.css"}, {Path: "css/easy-mde.min.css", Url: "https://unpkg.com/easymde/dist/easymde.min.css"},
{Path: "js/tiny-mde.min.js", Url: "https://unpkg.com/tiny-markdown-editor/dist/tiny-mde.min.js"}, {Path: "js/easy-mde.min.js", Url: "https://unpkg.com/easymde/dist/easymde.min.js"},
{Path: "icons/eye.svg", Url: "https://raw.githubusercontent.com/twbs/icons/refs/heads/main/icons/eye.svg"}, {Path: "icons/eye.svg", Url: "https://raw.githubusercontent.com/twbs/icons/refs/heads/main/icons/eye.svg"},
} }
BaseTemplate string = "base.tmpl.html" BaseTemplate string = "base.tmpl.html"

View file

@ -17,38 +17,48 @@
<button class="btn btn-primary" type="submit">Save</button> <button class="btn btn-primary" type="submit">Save</button>
</form> </form>
<script src="/static/js/tiny-mde.min.js"></script> <script src="/static/js/easy-mde.min.js"></script>
<link <link
rel="stylesheet" rel="stylesheet"
type="text/css" type="text/css"
href="/static/css/tiny-mde.min.css" href="/static/css/easy-mde.min.css"
/> />
<script type="text/javascript"> <script type="text/javascript">
var tinyMDE = new TinyMDE.Editor({ textarea: "noteBodyInput" }); var easyMDE = new EasyMDE({
var commandBar = new TinyMDE.CommandBar({ textarea: "noteBodyInput",
element: "toolbar", toolbar: [
editor: tinyMDE, 'bold',
commands: [ 'italic',
'bold', 'italic', 'strikethrough', 'strikethrough',
'heading',
'|', '|',
'code', 'unordered-list',
'ordered-list',
{
name: 'checklist',
action: (e) => {
e.codemirror.replaceSelection('* [ ] ');
e.codemirror.focus();
},
className: 'fa fa-check-square-o',
title: 'Add task list',
},
'|', '|',
'h1', 'h2', 'link',
'|', '|',
'ul', 'ol', 'preview',
'|', 'side-by-side'
'blockquote', 'hr',
'|',
'insertLink', 'insertImage'
], ],
autosave: {enabled: true, uniqueId: "{{.note.Uid}}"},
forceSync: true
}); });
let editTimeout; let editTimeout;
let autoSaveDelay = 2000; let autoSaveDelay = 2000;
tinyMDE.addEventListener("change", function() { easyMDE.codemirror.on("change" , function() {
clearTimeout(editTimeout); clearTimeout(editTimeout);
editTimeout = setTimeout(() => { editTimeout = setTimeout(() => {
let form = document.querySelector("form"); let form = document.querySelector("form");