Use CodeMirror editor
This commit is contained in:
+150
-160
@@ -1,145 +1,147 @@
|
||||
(function () {
|
||||
var textarea = document.getElementById('editor');
|
||||
if (!textarea) return;
|
||||
var mount = document.getElementById('editor');
|
||||
var hidden = document.getElementById('editor-content');
|
||||
if (!mount || !hidden || !window.CM) return;
|
||||
|
||||
var form = textarea.closest('form');
|
||||
|
||||
// --- DOM helpers ---
|
||||
|
||||
// Route every edit through execCommand so the browser's native undo/redo
|
||||
// stack is preserved. Direct assignment to textarea.value would wipe it.
|
||||
function replaceRange(start, end, text) {
|
||||
textarea.focus();
|
||||
textarea.selectionStart = start;
|
||||
textarea.selectionEnd = end;
|
||||
document.execCommand('insertText', false, text);
|
||||
}
|
||||
|
||||
function wrap(before, after, placeholder) {
|
||||
var start = textarea.selectionStart;
|
||||
var end = textarea.selectionEnd;
|
||||
var hadSelection = end > start;
|
||||
var selected = hadSelection ? textarea.value.slice(start, end) : placeholder;
|
||||
replaceRange(start, end, before + selected + after);
|
||||
if (!hadSelection) {
|
||||
textarea.selectionStart = start + before.length;
|
||||
textarea.selectionEnd = start + before.length + placeholder.length;
|
||||
}
|
||||
}
|
||||
|
||||
function linePrefix(prefix) {
|
||||
var start = textarea.selectionStart;
|
||||
var lineStart = textarea.value.lastIndexOf('\n', start - 1) + 1;
|
||||
replaceRange(lineStart, lineStart, prefix);
|
||||
textarea.selectionStart = textarea.selectionEnd = start + prefix.length;
|
||||
}
|
||||
|
||||
function insertAtCursor(s) {
|
||||
replaceRange(textarea.selectionStart, textarea.selectionEnd, s);
|
||||
}
|
||||
|
||||
function applyResult(result) {
|
||||
var oldText = textarea.value;
|
||||
var newText = result.text;
|
||||
var prefixLen = 0;
|
||||
var maxPrefix = Math.min(oldText.length, newText.length);
|
||||
while (prefixLen < maxPrefix && oldText.charCodeAt(prefixLen) === newText.charCodeAt(prefixLen)) {
|
||||
prefixLen++;
|
||||
}
|
||||
var oldEnd = oldText.length;
|
||||
var newEnd = newText.length;
|
||||
while (oldEnd > prefixLen && newEnd > prefixLen
|
||||
&& oldText.charCodeAt(oldEnd - 1) === newText.charCodeAt(newEnd - 1)) {
|
||||
oldEnd--;
|
||||
newEnd--;
|
||||
}
|
||||
replaceRange(prefixLen, oldEnd, newText.slice(prefixLen, newEnd));
|
||||
textarea.selectionStart = textarea.selectionEnd = result.cursor;
|
||||
}
|
||||
|
||||
function applyTableOp(fn, arg) {
|
||||
var result = arg !== undefined
|
||||
? fn(textarea.value, textarea.selectionStart, arg)
|
||||
: fn(textarea.value, textarea.selectionStart);
|
||||
if (result) applyResult(result);
|
||||
}
|
||||
|
||||
// isValidWikiTarget mirrors the Go validator in wikilinks.go — absolute
|
||||
// path, no empty/dot segments. Used to gate the INSERT confirm button.
|
||||
function isValidWikiTarget(p) {
|
||||
if (!p || p[0] !== '/') return false;
|
||||
var trimmed = p.replace(/^\/+|\/+$/g, '');
|
||||
if (trimmed === '') return true;
|
||||
var segs = trimmed.split('/');
|
||||
for (var i = 0; i < segs.length; i++) {
|
||||
if (segs[i] === '' || segs[i] === '.' || segs[i] === '..') return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function insertWikilink() {
|
||||
var sel = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
|
||||
|
||||
var container = document.createElement('div');
|
||||
|
||||
var targetWrap = document.createElement('div');
|
||||
var targetInput = document.createElement('input');
|
||||
targetInput.type = 'text';
|
||||
targetInput.className = 'input';
|
||||
targetInput.placeholder = 'Page path or search…';
|
||||
targetWrap.appendChild(targetInput);
|
||||
|
||||
var displayInput = document.createElement('input');
|
||||
displayInput.type = 'text';
|
||||
displayInput.className = 'input';
|
||||
displayInput.placeholder = 'Display text (optional)';
|
||||
if (sel) displayInput.value = sel;
|
||||
|
||||
container.appendChild(targetWrap);
|
||||
container.appendChild(displayInput);
|
||||
|
||||
var handle = openModal({
|
||||
title: 'Insert link',
|
||||
body: container,
|
||||
confirm: {
|
||||
label: 'INSERT',
|
||||
initiallyDisabled: true,
|
||||
onConfirm: function () {
|
||||
var target = targetInput.value.trim();
|
||||
if (!isValidWikiTarget(target)) return;
|
||||
var display = displayInput.value.trim();
|
||||
handle.close();
|
||||
insertAtCursor(display ? '[[' + target + '::' + display + ']]' : '[[' + target + ']]');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateConfirm() {
|
||||
handle.setConfirmDisabled(!isValidWikiTarget(targetInput.value.trim()));
|
||||
}
|
||||
targetInput.addEventListener('input', updateConfirm);
|
||||
|
||||
window.attachSuggestions(targetInput, {
|
||||
showFooter: false,
|
||||
container: targetWrap,
|
||||
onPick: function (r) {
|
||||
targetInput.value = '/' + r.path;
|
||||
updateConfirm();
|
||||
displayInput.focus();
|
||||
displayInput.select();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Actions ---
|
||||
var form = hidden.closest('form');
|
||||
|
||||
var T = EditorTables;
|
||||
var L = EditorLists;
|
||||
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;
|
||||
};
|
||||
}
|
||||
|
||||
var tableKeymap = [
|
||||
{ key: 'Shift-Enter', run: tableKey(T.insertRowBelow) },
|
||||
{ key: 'Shift-Delete', run: tableKey(T.deleteRow) },
|
||||
];
|
||||
|
||||
var state = CM.EditorState.create({
|
||||
doc: hidden.value,
|
||||
extensions: [
|
||||
CM.history(),
|
||||
CM.drawSelection(),
|
||||
CM.indentOnInput(),
|
||||
CM.EditorView.lineWrapping,
|
||||
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();
|
||||
},
|
||||
};
|
||||
|
||||
// --- Content sync ---
|
||||
|
||||
// Serialize the CM document into the hidden textarea on submit only — Save
|
||||
// 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();
|
||||
}
|
||||
form.addEventListener('submit', syncContent);
|
||||
|
||||
// --- Actions ---
|
||||
|
||||
var actions = {
|
||||
save: function () { form.submit(); },
|
||||
save: function () { form.requestSubmit(); },
|
||||
bold: function () { wrap('**', '**', 'bold text'); },
|
||||
italic: function () { wrap('*', '*', 'italic text'); },
|
||||
h1: function () { linePrefix('# '); },
|
||||
@@ -164,7 +166,7 @@
|
||||
tbldeleterow: function () { applyTableOp(T.deleteRow); },
|
||||
dateiso: function () { insertAtCursor(D.isoDate()); },
|
||||
datelong: function () { insertAtCursor(D.longDate()); },
|
||||
movie: function () { M.run(textarea); },
|
||||
movie: function () { M.run(movieCtx); },
|
||||
wide: function () {
|
||||
var enabled = !document.body.classList.contains('editor-wide');
|
||||
document.body.classList.toggle('editor-wide', enabled);
|
||||
@@ -172,6 +174,19 @@
|
||||
},
|
||||
};
|
||||
|
||||
// Wiki link button: drop an empty [[]] at the cursor and open the `[[`
|
||||
// completion popup so the same autocomplete flow handles target selection.
|
||||
function insertWikilink() {
|
||||
var sel = view.state.selection.main;
|
||||
view.dispatch({
|
||||
changes: { from: sel.from, to: sel.to, insert: '[[]]' },
|
||||
selection: { anchor: sel.from + 2 },
|
||||
scrollIntoView: true,
|
||||
});
|
||||
view.focus();
|
||||
CM.startCompletion(view);
|
||||
}
|
||||
|
||||
// --- Keyboard shortcut registration ---
|
||||
|
||||
var keyMap = {};
|
||||
@@ -197,31 +212,6 @@
|
||||
}
|
||||
});
|
||||
|
||||
// --- Textarea key handling ---
|
||||
|
||||
textarea.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Delete' && e.shiftKey) {
|
||||
var result = T.deleteRow(textarea.value, textarea.selectionStart)
|
||||
|| L.deleteOrderedLine(textarea.value, textarea.selectionStart);
|
||||
if (!result) return;
|
||||
e.preventDefault();
|
||||
applyResult(result);
|
||||
return;
|
||||
}
|
||||
if (e.key === 'Enter' && e.shiftKey) {
|
||||
var result = T.insertRowBelow(textarea.value, textarea.selectionStart);
|
||||
if (!result) return;
|
||||
e.preventDefault();
|
||||
applyResult(result);
|
||||
return;
|
||||
}
|
||||
if (e.key !== 'Enter') return;
|
||||
var result = L.handleEnterKey(textarea.value, textarea.selectionStart);
|
||||
if (!result) return;
|
||||
e.preventDefault();
|
||||
applyResult(result);
|
||||
});
|
||||
|
||||
// --- Dropdowns ---
|
||||
|
||||
document.querySelectorAll('.dropdown-toggle').forEach(wireDropdown);
|
||||
|
||||
Reference in New Issue
Block a user