Update editor layout. add delete line button
This commit is contained in:
@@ -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)">></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>
|
||||
|
||||
@@ -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 `[[`
|
||||
|
||||
+14
-14
File diff suppressed because one or more lines are too long
+3
-4
@@ -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. */
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user