Canvas support V1
This commit is contained in:
@@ -0,0 +1,430 @@
|
||||
// core.js — the markdown editor: the CodeMirror setup plus the formatting
|
||||
// actions behind the toolbar (editor/toolbar.html) and the Alt+Shift
|
||||
// shortcuts. Shared by the page editor (main.js) and the canvas node editor
|
||||
// (canvas/canvas.js).
|
||||
//
|
||||
// MarkdownEditor.create(mount, opts) → { view, actions, getValue, focus, destroy }
|
||||
// opts.doc initial text
|
||||
// opts.keymap extra CM key bindings, ahead of the defaults
|
||||
// MarkdownEditor.bind(root, getActions)
|
||||
// wires root's [data-action] buttons, [data-key] shortcuts and toolbar
|
||||
// dropdowns to whatever getActions() returns (null = no editor open).
|
||||
window.MarkdownEditor = (function () {
|
||||
var T = EditorTables;
|
||||
var D = EditorDates;
|
||||
var M = EditorMovie;
|
||||
|
||||
// Enter/Tab cell navigation must yield to an open autocomplete popup so those
|
||||
// keys still accept a suggestion (e.g. a [[wiki-link]] typed inside a cell).
|
||||
// The table keymap sits at Prec.highest, so without this guard it would
|
||||
// swallow the key before the completion keymap ever sees it. Detect the popup
|
||||
// via its tooltip element rather than exporting completionStatus from the
|
||||
// vendored bundle (which would force a bundle rebuild).
|
||||
function completionOpen() {
|
||||
return !!document.querySelector('.cm-tooltip-autocomplete');
|
||||
}
|
||||
|
||||
// pageBase is the folder of the page being edited, slash-terminated: the
|
||||
// page URL itself, or for a canvas (/Page/Board.canvas) the folder it
|
||||
// lives in. Relative embed destinations resolve against it.
|
||||
function pageBase() {
|
||||
var p = decodeURIComponent(window.location.pathname);
|
||||
return p.slice(0, p.lastIndexOf('/') + 1);
|
||||
}
|
||||
|
||||
function create(mount, opts) {
|
||||
opts = opts || {};
|
||||
var doc = opts.doc || '';
|
||||
var view;
|
||||
|
||||
// Shift+Enter (new table row below) / Shift+Delete (delete table row) run at
|
||||
// highest precedence so they win over CM's default newline/forward-delete.
|
||||
// Returning false (no table at cursor) lets CM fall back to its default.
|
||||
function tableKey(fn) {
|
||||
return function (v) {
|
||||
var result = fn(v.state.doc.toString(), v.state.selection.main.head);
|
||||
if (!result) return false;
|
||||
dispatchFullReplace(result);
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
function tableNavKey(fn) {
|
||||
var handler = tableKey(fn);
|
||||
return function (v) {
|
||||
if (completionOpen()) return false;
|
||||
return handler(v);
|
||||
};
|
||||
}
|
||||
|
||||
var tableKeymap = [
|
||||
{ key: 'Shift-Enter', run: tableKey(T.insertRowBelow) },
|
||||
{ key: 'Shift-Delete', run: tableKey(T.deleteRow) },
|
||||
{ key: 'Enter', run: tableNavKey(T.nextRowSameColumn) },
|
||||
{ key: 'Tab', run: tableNavKey(T.nextCell) },
|
||||
{ key: 'Shift-Tab', run: tableNavKey(T.prevCell) },
|
||||
];
|
||||
|
||||
var state = CM.EditorState.create({
|
||||
doc: doc,
|
||||
// Start with the caret at the end of the existing content — editing an
|
||||
// existing page almost always means appending, and the default (start
|
||||
// of doc) buries the caret behind the leading heading.
|
||||
selection: { anchor: doc.length },
|
||||
extensions: [
|
||||
// The caller's keys go first, ahead of even autocompletion's
|
||||
// own highest-precedence keys: those swallow an Escape while a
|
||||
// completion query is still pending, with no popup in sight.
|
||||
CM.Prec.highest(CM.keymap.of(opts.keymap || [])),
|
||||
CM.history(),
|
||||
CM.drawSelection(),
|
||||
CM.indentOnInput(),
|
||||
CM.EditorView.lineWrapping,
|
||||
// Enable native browser spellcheck on the contenteditable surface
|
||||
// (CM6 leaves it off by default). autocapitalize helps prose entry
|
||||
// on the Android/mobile path; CM's DOM observer absorbs corrections.
|
||||
CM.EditorView.contentAttributes.of({ spellcheck: 'true', autocapitalize: 'sentences' }),
|
||||
CM.markdown({ base: CM.markdownLanguage }),
|
||||
CM.syntaxHighlighting(CM.highlightStyle),
|
||||
CM.closeBrackets(),
|
||||
CM.autocompletion({ override: [WikiComplete.source] }),
|
||||
CM.theme,
|
||||
CM.Prec.highest(CM.keymap.of(tableKeymap)),
|
||||
CM.keymap.of([].concat(
|
||||
CM.closeBracketsKeymap,
|
||||
CM.completionKeymap,
|
||||
CM.markdownKeymap,
|
||||
CM.defaultKeymap,
|
||||
CM.historyKeymap,
|
||||
[CM.indentWithTab]
|
||||
)),
|
||||
],
|
||||
});
|
||||
|
||||
view = new CM.EditorView({ state: state, parent: mount });
|
||||
view.focus();
|
||||
|
||||
// --- CM document helpers ---
|
||||
|
||||
function dispatchFullReplace(result) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: result.text },
|
||||
selection: { anchor: result.cursor },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function insertAtCursor(s) {
|
||||
var sel = view.state.selection.main;
|
||||
view.dispatch({
|
||||
changes: { from: sel.from, to: sel.to, insert: s },
|
||||
selection: { anchor: sel.from + s.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function wrap(before, after, placeholder) {
|
||||
var sel = view.state.selection.main;
|
||||
var hadSelection = sel.to > sel.from;
|
||||
var selected = hadSelection ? view.state.sliceDoc(sel.from, sel.to) : placeholder;
|
||||
var insert = before + selected + after;
|
||||
var anchor, head;
|
||||
if (hadSelection) {
|
||||
anchor = head = sel.from + insert.length;
|
||||
} else {
|
||||
anchor = sel.from + before.length;
|
||||
head = anchor + placeholder.length;
|
||||
}
|
||||
view.dispatch({
|
||||
changes: { from: sel.from, to: sel.to, insert: insert },
|
||||
selection: { anchor: anchor, head: head },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function linePrefix(prefix) {
|
||||
var sel = view.state.selection.main;
|
||||
var line = view.state.doc.lineAt(sel.from);
|
||||
view.dispatch({
|
||||
changes: { from: line.from, to: line.from, insert: prefix },
|
||||
selection: { anchor: sel.from + prefix.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function applyTableOp(fn, arg) {
|
||||
var text = view.state.doc.toString();
|
||||
var pos = view.state.selection.main.head;
|
||||
var result = arg !== undefined ? fn(text, pos, arg) : fn(text, pos);
|
||||
if (result) dispatchFullReplace(result);
|
||||
}
|
||||
|
||||
// Adapter passed to movie.js so it reads/writes the CM document instead of a
|
||||
// textarea (replace() dispatches a transaction; cursor lands after the block).
|
||||
var movieCtx = {
|
||||
getValue: function () { return view.state.doc.toString(); },
|
||||
replace: function (start, end, text) {
|
||||
view.dispatch({
|
||||
changes: { from: start, to: end, insert: text },
|
||||
selection: { anchor: start + text.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
},
|
||||
};
|
||||
|
||||
// Wiki link button (ALT+SHIFT+P): a query field backed by /_search typeahead
|
||||
// plus an optional display-text field, inserting [[query]] or
|
||||
// [[query::display]] at the cursor. Picking a suggestion only fills in that
|
||||
// page's name — the link resolves through search at click time, so a path
|
||||
// never enters the document. Inline `[[` typing uses the same suggestions
|
||||
// via wikicomplete.js.
|
||||
function insertWikilink() {
|
||||
var sel = view.state.selection.main;
|
||||
var selectedText = view.state.sliceDoc(sel.from, sel.to).trim();
|
||||
|
||||
var container = document.createElement('div');
|
||||
|
||||
var queryWrap = document.createElement('div');
|
||||
var queryInput = document.createElement('input');
|
||||
queryInput.type = 'text';
|
||||
queryInput.className = 'input';
|
||||
queryInput.placeholder = 'Search query';
|
||||
// A selection is the query, not the label: [[selection]] renders with
|
||||
// the same visible text anyway, and it seeds the typeahead.
|
||||
queryInput.value = selectedText;
|
||||
queryWrap.appendChild(queryInput);
|
||||
|
||||
var displayInput = document.createElement('input');
|
||||
displayInput.type = 'text';
|
||||
displayInput.className = 'input';
|
||||
displayInput.placeholder = 'Display text (optional)';
|
||||
|
||||
container.appendChild(queryWrap);
|
||||
container.appendChild(displayInput);
|
||||
|
||||
var handle = openModal({
|
||||
title: 'Insert link',
|
||||
body: container,
|
||||
confirm: {
|
||||
label: 'INSERT',
|
||||
initiallyDisabled: !selectedText,
|
||||
onConfirm: function () {
|
||||
var query = queryInput.value.trim();
|
||||
if (!query) return;
|
||||
var display = displayInput.value.trim();
|
||||
handle.close();
|
||||
insertAtCursor(display ? '[[' + query + '::' + display + ']]' : '[[' + query + ']]');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateConfirm() {
|
||||
handle.setConfirmDisabled(!queryInput.value.trim());
|
||||
}
|
||||
queryInput.addEventListener('input', updateConfirm);
|
||||
|
||||
window.attachSuggestions(queryInput, {
|
||||
showFooter: false,
|
||||
container: queryWrap,
|
||||
onPick: function (r) {
|
||||
queryInput.value = r.name;
|
||||
updateConfirm();
|
||||
displayInput.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// embedDest turns the absolute wiki path the tree picker hands back into the
|
||||
// destination written to the document: relative to the page being edited
|
||||
// when the file lives under it, absolute otherwise. Pages render at a
|
||||
// slash-terminated URL, so a relative destination resolves against the page
|
||||
// in the browser.
|
||||
function embedDest(absPath) {
|
||||
var base = pageBase();
|
||||
return absPath.indexOf(base) === 0 ? absPath.slice(base.length) : absPath;
|
||||
}
|
||||
|
||||
// embedToken formats a Markdown image. A destination carrying spaces or
|
||||
// brackets goes in <angle brackets> — CommonMark's way of keeping it in one
|
||||
// piece — and the title slot holds the alignment keyword the renderer reads.
|
||||
// Right is the renderer's default, so it is left off.
|
||||
function embedToken(dest, caption, align) {
|
||||
if (/[\s()<>]/.test(dest)) dest = '<' + dest + '>';
|
||||
var title = (align && align !== 'right') ? ' "' + align + '"' : '';
|
||||
return '![' + caption.replace(/([\[\]\\])/g, '\\$1') + '](' + dest + title + ')';
|
||||
}
|
||||
|
||||
// Embed button (ALT+SHIFT+G): pick a file from the tree, then give it a
|
||||
// caption and an alignment. Images render as a floated figure; anything
|
||||
// else degrades to a link.
|
||||
function insertEmbed() {
|
||||
var sel = view.state.selection.main;
|
||||
var selectedText = view.state.sliceDoc(sel.from, sel.to).trim();
|
||||
var here = pageBase().replace(/\/+$/, '') || '/';
|
||||
|
||||
openTreePicker({
|
||||
title: 'Embed — pick a file',
|
||||
mode: 'file',
|
||||
initialPath: here,
|
||||
confirmLabel: 'NEXT',
|
||||
onSelect: function (absPath) {
|
||||
var container = document.createElement('div');
|
||||
|
||||
var captionInput = document.createElement('input');
|
||||
captionInput.type = 'text';
|
||||
captionInput.className = 'input';
|
||||
captionInput.placeholder = 'Caption (optional)';
|
||||
captionInput.value = selectedText;
|
||||
|
||||
var alignSelect = document.createElement('select');
|
||||
alignSelect.className = 'input';
|
||||
[['right', 'Float right'], ['left', 'Float left'], ['center', 'Centered']]
|
||||
.forEach(function (opt) {
|
||||
var o = document.createElement('option');
|
||||
o.value = opt[0];
|
||||
o.textContent = opt[1];
|
||||
alignSelect.appendChild(o);
|
||||
});
|
||||
|
||||
container.appendChild(captionInput);
|
||||
container.appendChild(alignSelect);
|
||||
|
||||
var handle = openModal({
|
||||
title: 'Embed — caption?',
|
||||
body: container,
|
||||
confirm: {
|
||||
label: 'INSERT',
|
||||
onConfirm: function () {
|
||||
handle.close();
|
||||
insertAtCursor(embedToken(
|
||||
embedDest(absPath),
|
||||
captionInput.value.trim(),
|
||||
alignSelect.value
|
||||
));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var actions = {
|
||||
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('# '); },
|
||||
h2: function () { linePrefix('## '); },
|
||||
h3: function () { linePrefix('### '); },
|
||||
code: function () { wrap('`', '`', 'code'); },
|
||||
codeblock: function () { wrap('```\n', '\n```', 'code'); },
|
||||
quote: function () { linePrefix('> '); },
|
||||
link: function () { wrap('[', '](url)', 'link text'); },
|
||||
wikilink: insertWikilink,
|
||||
embed: insertEmbed,
|
||||
ul: function () { linePrefix('- '); },
|
||||
ol: function () { linePrefix('1. '); },
|
||||
task: function () { linePrefix('- [ ] '); },
|
||||
hr: function () { wrap('\n\n---\n\n', '', ''); },
|
||||
fmttable: function () { applyTableOp(T.formatTableText); },
|
||||
tblalignleft: function () { applyTableOp(T.setColumnAlignment, 'left'); },
|
||||
tblaligncenter: function () { applyTableOp(T.setColumnAlignment, 'center'); },
|
||||
tblalignright: function () { applyTableOp(T.setColumnAlignment, 'right'); },
|
||||
tblinsertcol: function () { applyTableOp(T.insertColumn); },
|
||||
tbldeletecol: function () { applyTableOp(T.deleteColumn); },
|
||||
tblinsertrow: function () { applyTableOp(T.insertRow); },
|
||||
tbldeleterow: function () { applyTableOp(T.deleteRow); },
|
||||
dateiso: function () { insertAtCursor(D.isoDate()); },
|
||||
datelong: function () { insertAtCursor(D.longDate()); },
|
||||
movie: function () { M.run(movieCtx); },
|
||||
};
|
||||
|
||||
return {
|
||||
view: view,
|
||||
actions: actions,
|
||||
getValue: function () { return view.state.doc.toString(); },
|
||||
focus: function () { view.focus(); },
|
||||
destroy: function () { view.destroy(); },
|
||||
};
|
||||
}
|
||||
|
||||
// The toolbar scrolls horizontally (so it clips its absolutely-positioned
|
||||
// menus) and on mobile is fixed to the bottom of the viewport. Pin an open
|
||||
// menu to the viewport so it escapes the clip, opening upward when there
|
||||
// isn't room below it (the bottom-toolbar case).
|
||||
function pinMenu(toggle, menu) {
|
||||
if (!menu.classList.contains('is-open')) return;
|
||||
var r = toggle.getBoundingClientRect();
|
||||
var vh = window.innerHeight;
|
||||
menu.style.position = 'fixed';
|
||||
menu.style.overflowY = 'auto';
|
||||
var spaceBelow = vh - r.bottom;
|
||||
var spaceAbove = r.top;
|
||||
if (spaceBelow < menu.offsetHeight + 8 && spaceAbove > spaceBelow) {
|
||||
menu.style.top = 'auto';
|
||||
menu.style.bottom = (vh - r.top) + 'px';
|
||||
menu.style.maxHeight = (spaceAbove - 8) + 'px';
|
||||
} else {
|
||||
menu.style.bottom = 'auto';
|
||||
menu.style.top = r.bottom + 'px';
|
||||
menu.style.maxHeight = (spaceBelow - 8) + 'px';
|
||||
}
|
||||
var left = Math.min(r.left, document.documentElement.clientWidth - menu.offsetWidth - 4);
|
||||
menu.style.left = Math.max(4, left) + 'px';
|
||||
}
|
||||
|
||||
function bind(root, getActions) {
|
||||
function run(name) {
|
||||
var actions = getActions();
|
||||
var action = actions && actions[name];
|
||||
if (action) action();
|
||||
}
|
||||
|
||||
var keyMap = {};
|
||||
root.querySelectorAll('[data-action]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () { run(btn.dataset.action); });
|
||||
if (btn.dataset.key) keyMap[btn.dataset.key] = btn.dataset.action;
|
||||
});
|
||||
|
||||
// Keep the editor focused when a toolbar button is tapped. Without this the
|
||||
// button steals focus on mousedown, which dismisses the mobile soft keyboard
|
||||
// before the action runs (and view.focus() can't reopen it without a direct
|
||||
// gesture). preventDefault on mousedown blocks the focus shift; click still
|
||||
// fires. Scoped to the toolbar so header SAVE/CANCEL are unaffected. Includes
|
||||
// dropdown toggles, which also must not pull focus off the editor.
|
||||
var toolbar = root.classList.contains('editor-toolbar') ? root : root.querySelector('.editor-toolbar');
|
||||
if (toolbar) {
|
||||
toolbar.addEventListener('mousedown', function (e) {
|
||||
if (e.target.closest('.btn')) e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (!e.altKey || !e.shiftKey || !getActions()) return;
|
||||
// Shift+digit produces a layout-dependent character in e.key (e.g. "!"
|
||||
// on US, "!" on DE), so fall back to e.code for digit rows.
|
||||
var key = /^Digit[0-9]$/.test(e.code) ? e.code.slice(5) : e.key;
|
||||
var name = keyMap[key];
|
||||
if (name) {
|
||||
e.preventDefault();
|
||||
run(name);
|
||||
}
|
||||
});
|
||||
|
||||
root.querySelectorAll('.dropdown-toggle').forEach(function (toggle) {
|
||||
wireDropdown(toggle);
|
||||
var menu = toggle.parentElement.querySelector('.dropdown-menu');
|
||||
if (!menu || !toolbar || !toolbar.contains(toggle)) return;
|
||||
// Runs after wireDropdown's own click handler has toggled is-open.
|
||||
toggle.addEventListener('click', function () { pinMenu(toggle, menu); });
|
||||
});
|
||||
}
|
||||
|
||||
return { create: create, bind: bind };
|
||||
})();
|
||||
+2
-64
@@ -11,70 +11,7 @@
|
||||
{{if ge .SectionIndex 0}}<input type="hidden" name="section" value="{{.SectionIndex}}">{{end}}
|
||||
{{if .Span}}<input type="hidden" name="span" value="1">{{end}}
|
||||
{{if ge .InsertBefore 0}}<input type="hidden" name="insert_before" value="{{.InsertBefore}}">{{end}}
|
||||
<div class="editor-toolbar">
|
||||
<button type="button" class="btn btn-tool" data-action="undo" title="Undo">↶</button>
|
||||
<button type="button" class="btn btn-tool" data-action="redo" title="Redo">↷</button>
|
||||
<button type="button" class="btn btn-tool" data-action="deleteline" data-key="Y" title="Delete line (Y)">×</button>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="bold" data-key="B" title="Bold (B)">**</button>
|
||||
<button type="button" class="btn btn-tool" data-action="italic" data-key="I" title="Italic (I)">*</button>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Heading (1/2/3)">H▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h1" data-key="1" title="Heading 1 (1)">Heading 1</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h2" data-key="2" title="Heading 2 (2)">Heading 2</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h3" data-key="3" title="Heading 3 (3)">Heading 3</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="code" data-key="C" title="Inline code (C)">`</button>
|
||||
<button type="button" class="btn btn-tool" data-action="codeblock" data-key="K" title="Code block (K)">```</button>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Link (L/P/G)">L▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="link" data-key="L" title="Link (L)">Link</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="wikilink" data-key="P" title="Wiki link (P)">Wiki link</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="embed" data-key="G" title="Embed file (G)">Embed file</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="List (U/O/X)">≡▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="ul" data-key="U" title="Unordered list (U)">Unordered list</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="ol" data-key="O" title="Ordered list (O)">Ordered list</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="task" data-key="X" title="Task list (X)">Task list</button>
|
||||
</div>
|
||||
</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>
|
||||
<span class="toolbar-sep"></span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="fmttable" data-key="T" title="Format table (T)">Format table</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblalignleft" title="Align left">Align left</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblaligncenter" title="Align center">Align center</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblalignright" title="Align right">Align right</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblinsertcol" title="Insert column">Insert column</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tbldeletecol" title="Delete column">Delete column</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblinsertrow" title="Insert row">Insert row</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tbldeleterow" title="Delete row">Delete row</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Insert date (D/W)">D▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="dateiso" data-key="D" title="YYYY-MM-DD (D)">YYYY-MM-DD</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="datelong" data-key="W" title="DE Long (W)">DE Long</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Special (V)">★▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="movie" data-key="V" title="Import movie (V)">Import movie</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
{{template "editor-toolbar"}}
|
||||
<div id="editor" class="editor-cm"></div>
|
||||
<textarea name="content" id="editor-content" hidden>{{.RawContent}}</textarea>
|
||||
</form>
|
||||
@@ -83,5 +20,6 @@
|
||||
<script src="{{asset "editor/dates.js"}}"></script>
|
||||
<script src="{{asset "editor/movie.js"}}"></script>
|
||||
<script src="{{asset "editor/wikicomplete.js"}}"></script>
|
||||
<script src="{{asset "editor/core.js"}}"></script>
|
||||
<script src="{{asset "editor/main.js"}}"></script>
|
||||
{{end}}
|
||||
|
||||
+7
-394
@@ -1,161 +1,12 @@
|
||||
// The page editor: one markdown editor (core.js) inside the edit form, saved
|
||||
// with the header's SAVE button.
|
||||
(function () {
|
||||
var mount = document.getElementById('editor');
|
||||
var hidden = document.getElementById('editor-content');
|
||||
if (!mount || !hidden || !window.CM) return;
|
||||
|
||||
var form = hidden.closest('form');
|
||||
|
||||
var T = EditorTables;
|
||||
var D = EditorDates;
|
||||
var M = EditorMovie;
|
||||
|
||||
// --- CodeMirror setup ---
|
||||
|
||||
// Shift+Enter (new table row below) / Shift+Delete (delete table row) run at
|
||||
// highest precedence so they win over CM's default newline/forward-delete.
|
||||
// Returning false (no table at cursor) lets CM fall back to its default.
|
||||
function tableKey(fn) {
|
||||
return function (view) {
|
||||
var result = fn(view.state.doc.toString(), view.state.selection.main.head);
|
||||
if (!result) return false;
|
||||
dispatchFullReplace(result);
|
||||
return true;
|
||||
};
|
||||
}
|
||||
|
||||
// Enter/Tab cell navigation must yield to an open autocomplete popup so those
|
||||
// keys still accept a suggestion (e.g. a [[wiki-link]] typed inside a cell).
|
||||
// The table keymap sits at Prec.highest, so without this guard it would
|
||||
// swallow the key before the completion keymap ever sees it. Detect the popup
|
||||
// via its tooltip element rather than exporting completionStatus from the
|
||||
// vendored bundle (which would force a bundle rebuild).
|
||||
function completionOpen() {
|
||||
return !!document.querySelector('.cm-tooltip-autocomplete');
|
||||
}
|
||||
|
||||
function tableNavKey(fn) {
|
||||
var handler = tableKey(fn);
|
||||
return function (view) {
|
||||
if (completionOpen()) return false;
|
||||
return handler(view);
|
||||
};
|
||||
}
|
||||
|
||||
var tableKeymap = [
|
||||
{ key: 'Shift-Enter', run: tableKey(T.insertRowBelow) },
|
||||
{ key: 'Shift-Delete', run: tableKey(T.deleteRow) },
|
||||
{ key: 'Enter', run: tableNavKey(T.nextRowSameColumn) },
|
||||
{ key: 'Tab', run: tableNavKey(T.nextCell) },
|
||||
{ key: 'Shift-Tab', run: tableNavKey(T.prevCell) },
|
||||
];
|
||||
|
||||
var state = CM.EditorState.create({
|
||||
doc: hidden.value,
|
||||
// Start with the caret at the end of the existing content — editing an
|
||||
// existing page almost always means appending, and the default (start
|
||||
// of doc) buries the caret behind the leading heading.
|
||||
selection: { anchor: hidden.value.length },
|
||||
extensions: [
|
||||
CM.history(),
|
||||
CM.drawSelection(),
|
||||
CM.indentOnInput(),
|
||||
CM.EditorView.lineWrapping,
|
||||
// Enable native browser spellcheck on the contenteditable surface
|
||||
// (CM6 leaves it off by default). autocapitalize helps prose entry
|
||||
// on the Android/mobile path; CM's DOM observer absorbs corrections.
|
||||
CM.EditorView.contentAttributes.of({ spellcheck: 'true', autocapitalize: 'sentences' }),
|
||||
CM.markdown({ base: CM.markdownLanguage }),
|
||||
CM.syntaxHighlighting(CM.highlightStyle),
|
||||
CM.closeBrackets(),
|
||||
CM.autocompletion({ override: [WikiComplete.source] }),
|
||||
CM.theme,
|
||||
CM.Prec.highest(CM.keymap.of(tableKeymap)),
|
||||
CM.keymap.of([].concat(
|
||||
CM.closeBracketsKeymap,
|
||||
CM.completionKeymap,
|
||||
CM.markdownKeymap,
|
||||
CM.defaultKeymap,
|
||||
CM.historyKeymap,
|
||||
[CM.indentWithTab]
|
||||
)),
|
||||
],
|
||||
});
|
||||
|
||||
var view = new CM.EditorView({ state: state, parent: mount });
|
||||
view.focus();
|
||||
|
||||
// --- CM document helpers ---
|
||||
|
||||
function dispatchFullReplace(result) {
|
||||
view.dispatch({
|
||||
changes: { from: 0, to: view.state.doc.length, insert: result.text },
|
||||
selection: { anchor: result.cursor },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function insertAtCursor(s) {
|
||||
var sel = view.state.selection.main;
|
||||
view.dispatch({
|
||||
changes: { from: sel.from, to: sel.to, insert: s },
|
||||
selection: { anchor: sel.from + s.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function wrap(before, after, placeholder) {
|
||||
var sel = view.state.selection.main;
|
||||
var hadSelection = sel.to > sel.from;
|
||||
var selected = hadSelection ? view.state.sliceDoc(sel.from, sel.to) : placeholder;
|
||||
var insert = before + selected + after;
|
||||
var anchor, head;
|
||||
if (hadSelection) {
|
||||
anchor = head = sel.from + insert.length;
|
||||
} else {
|
||||
anchor = sel.from + before.length;
|
||||
head = anchor + placeholder.length;
|
||||
}
|
||||
view.dispatch({
|
||||
changes: { from: sel.from, to: sel.to, insert: insert },
|
||||
selection: { anchor: anchor, head: head },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function linePrefix(prefix) {
|
||||
var sel = view.state.selection.main;
|
||||
var line = view.state.doc.lineAt(sel.from);
|
||||
view.dispatch({
|
||||
changes: { from: line.from, to: line.from, insert: prefix },
|
||||
selection: { anchor: sel.from + prefix.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
}
|
||||
|
||||
function applyTableOp(fn, arg) {
|
||||
var text = view.state.doc.toString();
|
||||
var pos = view.state.selection.main.head;
|
||||
var result = arg !== undefined ? fn(text, pos, arg) : fn(text, pos);
|
||||
if (result) dispatchFullReplace(result);
|
||||
}
|
||||
|
||||
// Adapter passed to movie.js so it reads/writes the CM document instead of a
|
||||
// textarea (replace() dispatches a transaction; cursor lands after the block).
|
||||
var movieCtx = {
|
||||
getValue: function () { return view.state.doc.toString(); },
|
||||
replace: function (start, end, text) {
|
||||
view.dispatch({
|
||||
changes: { from: start, to: end, insert: text },
|
||||
selection: { anchor: start + text.length },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
},
|
||||
};
|
||||
var editor = MarkdownEditor.create(mount, { doc: hidden.value });
|
||||
|
||||
// --- Content sync ---
|
||||
|
||||
@@ -163,7 +14,7 @@
|
||||
// must not depend on CM focus or async state (decision 8). requestSubmit
|
||||
// fires this listener even for the ALT+SHIFT+S path.
|
||||
function syncContent() {
|
||||
hidden.value = view.state.doc.toString();
|
||||
hidden.value = editor.getValue();
|
||||
}
|
||||
|
||||
// Save POSTs via fetch and then rewrites the *editor's* history entry with
|
||||
@@ -208,246 +59,8 @@
|
||||
|
||||
// --- Actions ---
|
||||
|
||||
var actions = {
|
||||
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('# '); },
|
||||
h2: function () { linePrefix('## '); },
|
||||
h3: function () { linePrefix('### '); },
|
||||
code: function () { wrap('`', '`', 'code'); },
|
||||
codeblock: function () { wrap('```\n', '\n```', 'code'); },
|
||||
quote: function () { linePrefix('> '); },
|
||||
link: function () { wrap('[', '](url)', 'link text'); },
|
||||
wikilink: insertWikilink,
|
||||
embed: insertEmbed,
|
||||
ul: function () { linePrefix('- '); },
|
||||
ol: function () { linePrefix('1. '); },
|
||||
task: function () { linePrefix('- [ ] '); },
|
||||
hr: function () { wrap('\n\n---\n\n', '', ''); },
|
||||
fmttable: function () { applyTableOp(T.formatTableText); },
|
||||
tblalignleft: function () { applyTableOp(T.setColumnAlignment, 'left'); },
|
||||
tblaligncenter: function () { applyTableOp(T.setColumnAlignment, 'center'); },
|
||||
tblalignright: function () { applyTableOp(T.setColumnAlignment, 'right'); },
|
||||
tblinsertcol: function () { applyTableOp(T.insertColumn); },
|
||||
tbldeletecol: function () { applyTableOp(T.deleteColumn); },
|
||||
tblinsertrow: function () { applyTableOp(T.insertRow); },
|
||||
tbldeleterow: function () { applyTableOp(T.deleteRow); },
|
||||
dateiso: function () { insertAtCursor(D.isoDate()); },
|
||||
datelong: function () { insertAtCursor(D.longDate()); },
|
||||
movie: function () { M.run(movieCtx); },
|
||||
};
|
||||
editor.actions.save = function () { form.requestSubmit(); };
|
||||
|
||||
// Wiki link button (ALT+SHIFT+P): a query field backed by /_search typeahead
|
||||
// plus an optional display-text field, inserting [[query]] or
|
||||
// [[query::display]] at the cursor. Picking a suggestion only fills in that
|
||||
// page's name — the link resolves through search at click time, so a path
|
||||
// never enters the document. Inline `[[` typing uses the same suggestions
|
||||
// via wikicomplete.js.
|
||||
function insertWikilink() {
|
||||
var sel = view.state.selection.main;
|
||||
var selectedText = view.state.sliceDoc(sel.from, sel.to).trim();
|
||||
|
||||
var container = document.createElement('div');
|
||||
|
||||
var queryWrap = document.createElement('div');
|
||||
var queryInput = document.createElement('input');
|
||||
queryInput.type = 'text';
|
||||
queryInput.className = 'input';
|
||||
queryInput.placeholder = 'Search query';
|
||||
// A selection is the query, not the label: [[selection]] renders with
|
||||
// the same visible text anyway, and it seeds the typeahead.
|
||||
queryInput.value = selectedText;
|
||||
queryWrap.appendChild(queryInput);
|
||||
|
||||
var displayInput = document.createElement('input');
|
||||
displayInput.type = 'text';
|
||||
displayInput.className = 'input';
|
||||
displayInput.placeholder = 'Display text (optional)';
|
||||
|
||||
container.appendChild(queryWrap);
|
||||
container.appendChild(displayInput);
|
||||
|
||||
var handle = openModal({
|
||||
title: 'Insert link',
|
||||
body: container,
|
||||
confirm: {
|
||||
label: 'INSERT',
|
||||
initiallyDisabled: !selectedText,
|
||||
onConfirm: function () {
|
||||
var query = queryInput.value.trim();
|
||||
if (!query) return;
|
||||
var display = displayInput.value.trim();
|
||||
handle.close();
|
||||
insertAtCursor(display ? '[[' + query + '::' + display + ']]' : '[[' + query + ']]');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateConfirm() {
|
||||
handle.setConfirmDisabled(!queryInput.value.trim());
|
||||
}
|
||||
queryInput.addEventListener('input', updateConfirm);
|
||||
|
||||
window.attachSuggestions(queryInput, {
|
||||
showFooter: false,
|
||||
container: queryWrap,
|
||||
onPick: function (r) {
|
||||
queryInput.value = r.name;
|
||||
updateConfirm();
|
||||
displayInput.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// embedDest turns the absolute wiki path the tree picker hands back into the
|
||||
// destination written to the document: relative to the page being edited
|
||||
// when the file lives under it, absolute otherwise. Pages render at a
|
||||
// slash-terminated URL, so a relative destination resolves against the page
|
||||
// in the browser.
|
||||
function embedDest(absPath) {
|
||||
var base = decodeURIComponent(window.location.pathname);
|
||||
if (base.slice(-1) !== '/') base += '/';
|
||||
return absPath.indexOf(base) === 0 ? absPath.slice(base.length) : absPath;
|
||||
}
|
||||
|
||||
// embedToken formats a Markdown image. A destination carrying spaces or
|
||||
// brackets goes in <angle brackets> — CommonMark's way of keeping it in one
|
||||
// piece — and the title slot holds the alignment keyword the renderer reads.
|
||||
// Right is the renderer's default, so it is left off.
|
||||
function embedToken(dest, caption, align) {
|
||||
if (/[\s()<>]/.test(dest)) dest = '<' + dest + '>';
|
||||
var title = (align && align !== 'right') ? ' "' + align + '"' : '';
|
||||
return '![' + caption.replace(/([\[\]\\])/g, '\\$1') + '](' + dest + title + ')';
|
||||
}
|
||||
|
||||
// Embed button (ALT+SHIFT+G): pick a file from the tree, then give it a
|
||||
// caption and an alignment. Images render as a floated figure; anything
|
||||
// else degrades to a link.
|
||||
function insertEmbed() {
|
||||
var sel = view.state.selection.main;
|
||||
var selectedText = view.state.sliceDoc(sel.from, sel.to).trim();
|
||||
var here = decodeURIComponent(window.location.pathname).replace(/\/+$/, '') || '/';
|
||||
|
||||
openTreePicker({
|
||||
title: 'Embed — pick a file',
|
||||
mode: 'file',
|
||||
initialPath: here,
|
||||
confirmLabel: 'NEXT',
|
||||
onSelect: function (absPath) {
|
||||
var container = document.createElement('div');
|
||||
|
||||
var captionInput = document.createElement('input');
|
||||
captionInput.type = 'text';
|
||||
captionInput.className = 'input';
|
||||
captionInput.placeholder = 'Caption (optional)';
|
||||
captionInput.value = selectedText;
|
||||
|
||||
var alignSelect = document.createElement('select');
|
||||
alignSelect.className = 'input';
|
||||
[['right', 'Float right'], ['left', 'Float left'], ['center', 'Centered']]
|
||||
.forEach(function (opt) {
|
||||
var o = document.createElement('option');
|
||||
o.value = opt[0];
|
||||
o.textContent = opt[1];
|
||||
alignSelect.appendChild(o);
|
||||
});
|
||||
|
||||
container.appendChild(captionInput);
|
||||
container.appendChild(alignSelect);
|
||||
|
||||
var handle = openModal({
|
||||
title: 'Embed — caption?',
|
||||
body: container,
|
||||
confirm: {
|
||||
label: 'INSERT',
|
||||
onConfirm: function () {
|
||||
handle.close();
|
||||
insertAtCursor(embedToken(
|
||||
embedDest(absPath),
|
||||
captionInput.value.trim(),
|
||||
alignSelect.value
|
||||
));
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Keyboard shortcut registration ---
|
||||
|
||||
var keyMap = {};
|
||||
document.querySelectorAll('[data-action]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var action = actions[btn.dataset.action];
|
||||
if (action) action();
|
||||
});
|
||||
if (btn.dataset.key) {
|
||||
keyMap[btn.dataset.key] = actions[btn.dataset.action];
|
||||
}
|
||||
});
|
||||
|
||||
// Keep the editor focused when a toolbar button is tapped. Without this the
|
||||
// button steals focus on mousedown, which dismisses the mobile soft keyboard
|
||||
// before the action runs (and view.focus() can't reopen it without a direct
|
||||
// gesture). preventDefault on mousedown blocks the focus shift; click still
|
||||
// fires. Scoped to the toolbar so header SAVE/CANCEL are unaffected. Includes
|
||||
// dropdown toggles, which also must not pull focus off the editor.
|
||||
var toolbar = document.querySelector('.editor-toolbar');
|
||||
if (toolbar) {
|
||||
toolbar.addEventListener('mousedown', function (e) {
|
||||
if (e.target.closest('.btn')) e.preventDefault();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (!e.altKey || !e.shiftKey) return;
|
||||
// Shift+digit produces a layout-dependent character in e.key (e.g. "!"
|
||||
// on US, "!" on DE), so fall back to e.code for digit rows.
|
||||
var key = /^Digit[0-9]$/.test(e.code) ? e.code.slice(5) : e.key;
|
||||
var action = keyMap[key];
|
||||
if (action) {
|
||||
e.preventDefault();
|
||||
action();
|
||||
}
|
||||
});
|
||||
|
||||
// --- Dropdowns ---
|
||||
|
||||
// The toolbar scrolls horizontally (so it clips its absolutely-positioned
|
||||
// menus) and on mobile is fixed to the bottom of the viewport. Pin an open
|
||||
// menu to the viewport so it escapes the clip, opening upward when there
|
||||
// isn't room below it (the bottom-toolbar case).
|
||||
function pinMenu(toggle, menu) {
|
||||
if (!menu.classList.contains('is-open')) return;
|
||||
var r = toggle.getBoundingClientRect();
|
||||
var vh = window.innerHeight;
|
||||
menu.style.position = 'fixed';
|
||||
menu.style.overflowY = 'auto';
|
||||
var spaceBelow = vh - r.bottom;
|
||||
var spaceAbove = r.top;
|
||||
if (spaceBelow < menu.offsetHeight + 8 && spaceAbove > spaceBelow) {
|
||||
menu.style.top = 'auto';
|
||||
menu.style.bottom = (vh - r.top) + 'px';
|
||||
menu.style.maxHeight = (spaceAbove - 8) + 'px';
|
||||
} else {
|
||||
menu.style.bottom = 'auto';
|
||||
menu.style.top = r.bottom + 'px';
|
||||
menu.style.maxHeight = (spaceBelow - 8) + 'px';
|
||||
}
|
||||
var left = Math.min(r.left, document.documentElement.clientWidth - menu.offsetWidth - 4);
|
||||
menu.style.left = Math.max(4, left) + 'px';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.dropdown-toggle').forEach(function (toggle) {
|
||||
wireDropdown(toggle);
|
||||
var menu = toggle.parentElement.querySelector('.dropdown-menu');
|
||||
if (!menu || !toolbar || !toolbar.contains(toggle)) return;
|
||||
// Runs after wireDropdown's own click handler has toggled is-open.
|
||||
toggle.addEventListener('click', function () { pinMenu(toggle, menu); });
|
||||
});
|
||||
// The toolbar and the header SAVE button both name actions.
|
||||
MarkdownEditor.bind(document.body, function () { return editor.actions; });
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
{{/* The markdown editor's toolbar, shared by the page editor and the canvas
|
||||
node editor. Buttons name an action of editor/core.js (data-action) and its
|
||||
Alt+Shift shortcut (data-key). */}}
|
||||
{{define "editor-toolbar"}}<div class="editor-toolbar">
|
||||
<button type="button" class="btn btn-tool" data-action="undo" title="Undo">↶</button>
|
||||
<button type="button" class="btn btn-tool" data-action="redo" title="Redo">↷</button>
|
||||
<button type="button" class="btn btn-tool" data-action="deleteline" data-key="Y" title="Delete line (Y)">×</button>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="bold" data-key="B" title="Bold (B)">**</button>
|
||||
<button type="button" class="btn btn-tool" data-action="italic" data-key="I" title="Italic (I)">*</button>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Heading (1/2/3)">H▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h1" data-key="1" title="Heading 1 (1)">Heading 1</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h2" data-key="2" title="Heading 2 (2)">Heading 2</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="h3" data-key="3" title="Heading 3 (3)">Heading 3</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="toolbar-sep"></span>
|
||||
<button type="button" class="btn btn-tool" data-action="code" data-key="C" title="Inline code (C)">`</button>
|
||||
<button type="button" class="btn btn-tool" data-action="codeblock" data-key="K" title="Code block (K)">```</button>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Link (L/P/G)">L▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="link" data-key="L" title="Link (L)">Link</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="wikilink" data-key="P" title="Wiki link (P)">Wiki link</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="embed" data-key="G" title="Embed file (G)">Embed file</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="List (U/O/X)">≡▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="ul" data-key="U" title="Unordered list (U)">Unordered list</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="ol" data-key="O" title="Ordered list (O)">Ordered list</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="task" data-key="X" title="Task list (X)">Task list</button>
|
||||
</div>
|
||||
</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>
|
||||
<span class="toolbar-sep"></span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Table (T)">T▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="fmttable" data-key="T" title="Format table (T)">Format table</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblalignleft" title="Align left">Align left</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblaligncenter" title="Align center">Align center</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblalignright" title="Align right">Align right</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblinsertcol" title="Insert column">Insert column</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tbldeletecol" title="Delete column">Delete column</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tblinsertrow" title="Insert row">Insert row</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="tbldeleterow" title="Delete row">Delete row</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Insert date (D/W)">D▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="dateiso" data-key="D" title="YYYY-MM-DD (D)">YYYY-MM-DD</button>
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="datelong" data-key="W" title="DE Long (W)">DE Long</button>
|
||||
</div>
|
||||
</span>
|
||||
<span class="dropdown">
|
||||
<button type="button" class="btn btn-tool dropdown-toggle" title="Special (V)">★▾</button>
|
||||
<div class="dropdown-menu">
|
||||
<button type="button" class="btn btn-tool btn-block" data-action="movie" data-key="V" title="Import movie (V)">Import movie</button>
|
||||
</div>
|
||||
</span>
|
||||
</div>{{end}}
|
||||
Reference in New Issue
Block a user