Update editor layout. add delete line button

This commit is contained in:
2026-06-05 10:34:40 +02:00
parent 7be8bec446
commit 11cae7df36
5 changed files with 21 additions and 27 deletions
+1 -3
View File
@@ -6,7 +6,6 @@
{{define "content"}}
<script>
document.body.classList.add('edit-mode');
if (sessionStorage.getItem('editor-wide') === '1') document.body.classList.add('editor-wide');
</script>
<form id="edit-form" class="edit-form" method="POST" action="{{.PostURL}}">
{{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
@@ -45,6 +44,7 @@
</span>
<button type="button" class="btn btn-tool" data-action="quote" data-key="Q" title="Blockquote (Q)">&gt;</button>
<button type="button" class="btn btn-tool" data-action="hr" data-key="R" title="Horizontal rule (R)">---</button>
<button type="button" class="btn btn-tool" data-action="deleteline" data-key="Y" title="Delete line (Y)"></button>
<span class="toolbar-sep"></span>
<span class="dropdown">
<button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button>
@@ -72,8 +72,6 @@
<button type="button" class="btn btn-tool btn-block" data-action="movie" data-key="V" title="Import movie (V)">Import movie</button>
</div>
</span>
<span class="toolbar-sep"></span>
<button type="button" class="btn btn-tool" data-action="wide" data-key="Z" title="Toggle wide mode (Z)"></button>
</div>
<div id="editor" class="editor-cm"></div>
<textarea name="content" id="editor-content" hidden>{{.RawContent}}</textarea>
+1 -5
View File
@@ -144,6 +144,7 @@
save: function () { form.requestSubmit(); },
undo: function () { CM.undo(view); view.focus(); },
redo: function () { CM.redo(view); view.focus(); },
deleteline: function () { CM.deleteLine(view); view.focus(); },
bold: function () { wrap('**', '**', 'bold text'); },
italic: function () { wrap('*', '*', 'italic text'); },
h1: function () { linePrefix('# '); },
@@ -169,11 +170,6 @@
dateiso: function () { insertAtCursor(D.isoDate()); },
datelong: function () { insertAtCursor(D.longDate()); },
movie: function () { M.run(movieCtx); },
wide: function () {
var enabled = !document.body.classList.contains('editor-wide');
document.body.classList.toggle('editor-wide', enabled);
sessionStorage.setItem('editor-wide', enabled ? '1' : '0');
},
};
// Wiki link button: drop an empty [[]] at the cursor and open the `[[`
File diff suppressed because one or more lines are too long
+3 -4
View File
@@ -379,10 +379,9 @@ main > h2 {
/* === Edit form === */
.edit-form { display: flex; flex-direction: column; }
/* The sidebar is always empty while editing, so drop its grid track instead of
leaving a reserved 14rem gap on the right; wide mode then fills the viewport. */
body.edit-mode .page-wrap { grid-template-columns: minmax(0, 1fr); }
body.editor-wide .page-wrap { max-width: none; }
/* The sidebar is always empty while editing, so the editor uses the full
viewport: drop the reserved 14rem sidebar track and the centered max-width. */
body.edit-mode .page-wrap { grid-template-columns: minmax(0, 1fr); max-width: none; }
/* CodeMirror mount. The .cm-editor visual treatment (border, bg, font, padding)
lives in the CM theme (editor-build/entry.js), keyed off the same :root
variables; this only sizes the container. */
+2 -1
View File
@@ -6,7 +6,7 @@
// :root CSS variables so there are no hardcoded colors/spacing here.
import { EditorState, EditorSelection, Compartment, Prec } from "@codemirror/state";
import { EditorView, keymap, drawSelection } from "@codemirror/view";
import { history, historyKeymap, defaultKeymap, indentWithTab, undo, redo } from "@codemirror/commands";
import { history, historyKeymap, defaultKeymap, indentWithTab, undo, redo, deleteLine } from "@codemirror/commands";
import { markdown, markdownLanguage, markdownKeymap } from "@codemirror/lang-markdown";
import { syntaxHighlighting, HighlightStyle, indentOnInput } from "@codemirror/language";
import {
@@ -91,6 +91,7 @@ window.CM = {
indentWithTab,
undo,
redo,
deleteLine,
markdown,
markdownLanguage,
markdownKeymap,