335 lines
14 KiB
HTML
335 lines
14 KiB
HTML
|
{{define "title"}}Edition: {{.Page.Title}} — Talas Wiki{{end}}
|
||
|
|
{{define "pagePath"}}{{encodeURL .Page.URLPath}}{{end}}
|
||
|
|
|
||
|
|
{{define "content"}}
|
||
|
|
<div class="breadcrumb">
|
||
|
|
<a href="/">/</a>
|
||
|
|
{{range breadcrumbs .Page.URLPath}}
|
||
|
|
/ <a href="/wiki/{{encodeURL .path}}">{{.name}}</a>
|
||
|
|
{{end}}
|
||
|
|
/ <span class="edit-marker">edition</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="page-header">
|
||
|
|
<h1>Edition: {{.Page.Title}}</h1>
|
||
|
|
<div class="page-actions"><a href="/wiki/{{encodeURL .Page.URLPath}}" class="btn-cancel">annuler</a></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="draft-banner" class="draft-banner" style="display:none">
|
||
|
|
<span class="draft-banner-text">Brouillon non sauvegarde trouve.</span>
|
||
|
|
<button class="draft-banner-btn" onclick="restoreDraft()">Restaurer</button>
|
||
|
|
<button class="draft-banner-btn" onclick="dismissDraft()">Ignorer</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="editor-toolbar">
|
||
|
|
<div class="toolbar-buttons">
|
||
|
|
<button type="button" onclick="wrap('**','**')" title="Ctrl+B"><b>B</b></button>
|
||
|
|
<button type="button" onclick="wrap('*','*')" title="Ctrl+I"><i>I</i></button>
|
||
|
|
<button type="button" onclick="prefix('## ')" title="Heading">H</button>
|
||
|
|
<button type="button" onclick="wrapLink()" title="Ctrl+K">Lien</button>
|
||
|
|
<button type="button" onclick="prefix('- ')">Liste</button>
|
||
|
|
<button type="button" onclick="wrap('`','`')">Code</button>
|
||
|
|
<button type="button" onclick="insertTable()">Table</button>
|
||
|
|
</div>
|
||
|
|
<button type="button" class="toolbar-btn" onclick="togglePreview()" id="preview-toggle">preview</button>
|
||
|
|
<label class="toolbar-upload"><input type="file" id="upload-input" style="display:none" accept="image/*,.pdf">upload</label>
|
||
|
|
<span class="toolbar-hint">Ctrl+S sauvegarder | [[ autocomplete</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<form method="POST" action="/save/{{encodeURL .Page.URLPath}}" class="edit-form" id="edit-form">
|
||
|
|
<div class="editor-split" id="editor-split">
|
||
|
|
<div style="position:relative;flex:1">
|
||
|
|
<textarea name="content" class="edit-textarea" id="editor" spellcheck="false">{{.Content}}</textarea>
|
||
|
|
<div id="wl-autocomplete" class="wl-autocomplete"></div>
|
||
|
|
</div>
|
||
|
|
<div class="preview-pane" id="preview-pane" style="display:none">
|
||
|
|
<div class="preview-content page-content" id="preview-content"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="edit-actions">
|
||
|
|
<button type="submit" class="btn-save">sauvegarder</button>
|
||
|
|
<a href="/wiki/{{encodeURL .Page.URLPath}}" class="btn-cancel">annuler</a>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{define "scripts"}}
|
||
|
|
<script>
|
||
|
|
var editor = document.getElementById('editor');
|
||
|
|
var previewPane = document.getElementById('preview-pane');
|
||
|
|
var previewContent = document.getElementById('preview-content');
|
||
|
|
var editorSplit = document.getElementById('editor-split');
|
||
|
|
var previewVisible = false;
|
||
|
|
var previewTimer = null;
|
||
|
|
var pagePath = '{{.Page.URLPath}}';
|
||
|
|
var draftKey = 'draft:' + pagePath;
|
||
|
|
|
||
|
|
// === Preview ===
|
||
|
|
function togglePreview() {
|
||
|
|
previewVisible = !previewVisible;
|
||
|
|
previewPane.style.display = previewVisible ? 'block' : 'none';
|
||
|
|
editorSplit.classList.toggle('split-active', previewVisible);
|
||
|
|
document.getElementById('preview-toggle').textContent = previewVisible ? 'masquer' : 'preview';
|
||
|
|
if (previewVisible) updatePreview();
|
||
|
|
}
|
||
|
|
function updatePreview() {
|
||
|
|
if (!previewVisible) return;
|
||
|
|
clearTimeout(previewTimer);
|
||
|
|
previewTimer = setTimeout(function() {
|
||
|
|
fetch('/api/preview?content=' + encodeURIComponent(editor.value))
|
||
|
|
.then(function(r) { return r.text(); })
|
||
|
|
.then(function(html) { previewContent.innerHTML = html; hljs.highlightAll(); });
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
editor.addEventListener('input', function() { updatePreview(); saveDraft(); });
|
||
|
|
|
||
|
|
// === Toolbar ===
|
||
|
|
function wrap(before, after) {
|
||
|
|
var s = editor.selectionStart, e = editor.selectionEnd;
|
||
|
|
var sel = editor.value.substring(s, e) || 'texte';
|
||
|
|
editor.value = editor.value.substring(0, s) + before + sel + after + editor.value.substring(e);
|
||
|
|
editor.selectionStart = s + before.length;
|
||
|
|
editor.selectionEnd = s + before.length + sel.length;
|
||
|
|
editor.focus();
|
||
|
|
}
|
||
|
|
function prefix(pre) {
|
||
|
|
var s = editor.selectionStart;
|
||
|
|
var lineStart = editor.value.lastIndexOf('\n', s - 1) + 1;
|
||
|
|
editor.value = editor.value.substring(0, lineStart) + pre + editor.value.substring(lineStart);
|
||
|
|
editor.selectionStart = editor.selectionEnd = s + pre.length;
|
||
|
|
editor.focus();
|
||
|
|
}
|
||
|
|
function wrapLink() {
|
||
|
|
var s = editor.selectionStart, e = editor.selectionEnd;
|
||
|
|
var sel = editor.value.substring(s, e) || 'texte';
|
||
|
|
var ins = '[' + sel + '](url)';
|
||
|
|
editor.value = editor.value.substring(0, s) + ins + editor.value.substring(e);
|
||
|
|
editor.selectionStart = s + sel.length + 3;
|
||
|
|
editor.selectionEnd = s + sel.length + 6;
|
||
|
|
editor.focus();
|
||
|
|
}
|
||
|
|
function insertTable() {
|
||
|
|
var s = editor.selectionStart;
|
||
|
|
var tbl = '\n| Colonne 1 | Colonne 2 |\n|-----------|----------|\n| | |\n';
|
||
|
|
editor.value = editor.value.substring(0, s) + tbl + editor.value.substring(s);
|
||
|
|
editor.focus();
|
||
|
|
}
|
||
|
|
|
||
|
|
// === Keyboard shortcuts ===
|
||
|
|
editor.addEventListener('keydown', function(e) {
|
||
|
|
if (e.key === 'Tab') { e.preventDefault(); var s = this.selectionStart; this.value = this.value.substring(0, s) + '\t' + this.value.substring(this.selectionEnd); this.selectionStart = this.selectionEnd = s + 1; }
|
||
|
|
if (e.ctrlKey && e.key === 's') { e.preventDefault(); document.getElementById('edit-form').submit(); }
|
||
|
|
if (e.ctrlKey && e.key === 'b') { e.preventDefault(); wrap('**', '**'); }
|
||
|
|
if (e.ctrlKey && e.key === 'i') { e.preventDefault(); wrap('*', '*'); }
|
||
|
|
if (e.ctrlKey && e.key === 'k') { e.preventDefault(); wrapLink(); }
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Wikilink autocomplete ===
|
||
|
|
var wlBox = document.getElementById('wl-autocomplete');
|
||
|
|
var wlTimer = null;
|
||
|
|
editor.addEventListener('input', function() {
|
||
|
|
clearTimeout(wlTimer);
|
||
|
|
var pos = this.selectionStart;
|
||
|
|
var text = this.value.substring(0, pos);
|
||
|
|
var openIdx = text.lastIndexOf('[[');
|
||
|
|
var closeIdx = text.lastIndexOf(']]');
|
||
|
|
if (openIdx < 0 || closeIdx > openIdx) { wlBox.style.display = 'none'; return; }
|
||
|
|
var query = text.substring(openIdx + 2);
|
||
|
|
if (query.length < 1) { wlBox.style.display = 'none'; return; }
|
||
|
|
wlTimer = setTimeout(function() {
|
||
|
|
fetch('/api/suggest?q=' + encodeURIComponent(query))
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(items) {
|
||
|
|
if (!items.length) { wlBox.style.display = 'none'; return; }
|
||
|
|
wlBox.innerHTML = items.map(function(item) {
|
||
|
|
return '<a class="suggestion" data-path="' + item.path + '" href="#"><span class="sug-title">' + item.title + '</span><span class="sug-domain">' + item.domain + '</span></a>';
|
||
|
|
}).join('');
|
||
|
|
wlBox.style.display = 'block';
|
||
|
|
});
|
||
|
|
}, 150);
|
||
|
|
});
|
||
|
|
wlBox.addEventListener('click', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
var link = e.target.closest('.suggestion');
|
||
|
|
if (!link) return;
|
||
|
|
var path = link.dataset.path;
|
||
|
|
var pos = editor.selectionStart;
|
||
|
|
var text = editor.value.substring(0, pos);
|
||
|
|
var openIdx = text.lastIndexOf('[[');
|
||
|
|
editor.value = editor.value.substring(0, openIdx) + '[[' + path + ']]' + editor.value.substring(pos);
|
||
|
|
editor.selectionStart = editor.selectionEnd = openIdx + path.length + 4;
|
||
|
|
wlBox.style.display = 'none';
|
||
|
|
editor.focus();
|
||
|
|
});
|
||
|
|
editor.addEventListener('keydown', function(e) {
|
||
|
|
if (wlBox.style.display === 'block' && e.key === 'Escape') { wlBox.style.display = 'none'; e.stopPropagation(); }
|
||
|
|
if (wlBox.style.display === 'block' && e.key === 'Enter') {
|
||
|
|
var first = wlBox.querySelector('.suggestion');
|
||
|
|
if (first) { e.preventDefault(); first.click(); }
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Drag & Drop upload ===
|
||
|
|
editor.addEventListener('dragover', function(e) { e.preventDefault(); this.classList.add('editor-dragover'); });
|
||
|
|
editor.addEventListener('dragleave', function() { this.classList.remove('editor-dragover'); });
|
||
|
|
editor.addEventListener('drop', function(e) {
|
||
|
|
e.preventDefault();
|
||
|
|
this.classList.remove('editor-dragover');
|
||
|
|
var files = e.dataTransfer.files;
|
||
|
|
for (var i = 0; i < files.length; i++) {
|
||
|
|
(function(file) {
|
||
|
|
var form = new FormData();
|
||
|
|
form.append('file', file);
|
||
|
|
form.append('dir', '{{.Page.Domain}}');
|
||
|
|
fetch('/upload', {method: 'POST', body: form})
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(data) {
|
||
|
|
var pos = editor.selectionStart;
|
||
|
|
editor.value = editor.value.substring(0, pos) + '\n' + data.markdown + '\n' + editor.value.substring(pos);
|
||
|
|
updatePreview();
|
||
|
|
});
|
||
|
|
})(files[i]);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Clipboard image paste ===
|
||
|
|
editor.addEventListener('paste', function(e) {
|
||
|
|
var items = (e.clipboardData || {}).items;
|
||
|
|
if (!items) return;
|
||
|
|
for (var i = 0; i < items.length; i++) {
|
||
|
|
if (items[i].type.indexOf('image') !== -1) {
|
||
|
|
e.preventDefault();
|
||
|
|
var file = items[i].getAsFile();
|
||
|
|
var form = new FormData();
|
||
|
|
form.append('file', file, 'paste-' + Date.now() + '.png');
|
||
|
|
form.append('dir', '{{.Page.Domain}}');
|
||
|
|
fetch('/upload', {method: 'POST', body: form})
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(data) {
|
||
|
|
var pos = editor.selectionStart;
|
||
|
|
editor.value = editor.value.substring(0, pos) + '\n' + data.markdown + '\n' + editor.value.substring(pos);
|
||
|
|
updatePreview();
|
||
|
|
});
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Auto-close markdown pairs ===
|
||
|
|
editor.addEventListener('keydown', function(e) {
|
||
|
|
var pairs = {'(': ')', '[': ']', '{': '}', '`': '`', '*': '*', '_': '_'};
|
||
|
|
if (pairs[e.key] && this.selectionStart === this.selectionEnd) {
|
||
|
|
// Don't auto-close if next char is alphanumeric
|
||
|
|
var next = this.value[this.selectionStart] || '';
|
||
|
|
if (/\w/.test(next)) return;
|
||
|
|
}
|
||
|
|
if (pairs[e.key] && this.selectionStart !== this.selectionEnd) {
|
||
|
|
e.preventDefault();
|
||
|
|
var s = this.selectionStart, end = this.selectionEnd;
|
||
|
|
var sel = this.value.substring(s, end);
|
||
|
|
this.value = this.value.substring(0, s) + e.key + sel + pairs[e.key] + this.value.substring(end);
|
||
|
|
this.selectionStart = s + 1;
|
||
|
|
this.selectionEnd = end + 1;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Find & Replace ===
|
||
|
|
document.addEventListener('keydown', function(e) {
|
||
|
|
if ((e.ctrlKey || e.metaKey) && e.key === 'h' && document.activeElement === editor) {
|
||
|
|
e.preventDefault();
|
||
|
|
var find = prompt('Chercher:');
|
||
|
|
if (!find) return;
|
||
|
|
var replace = prompt('Remplacer par:');
|
||
|
|
if (replace === null) return;
|
||
|
|
var count = (editor.value.match(new RegExp(find.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g')) || []).length;
|
||
|
|
if (count > 0 && confirm('Remplacer ' + count + ' occurrence(s) ?')) {
|
||
|
|
editor.value = editor.value.split(find).join(replace);
|
||
|
|
updatePreview();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Snippets ===
|
||
|
|
var snippets = {
|
||
|
|
'/date': new Date().toISOString().substring(0,10),
|
||
|
|
'/time': new Date().toLocaleTimeString('fr-FR', {hour:'2-digit',minute:'2-digit'}),
|
||
|
|
'/todo': '- [ ] ',
|
||
|
|
'/hr': '\n---\n',
|
||
|
|
'/h1': '# ', '/h2': '## ', '/h3': '### ',
|
||
|
|
'/table': '| Col1 | Col2 |\n|------|------|\n| | |\n',
|
||
|
|
'/link': '[[]]',
|
||
|
|
'/img': '',
|
||
|
|
};
|
||
|
|
editor.addEventListener('input', function() {
|
||
|
|
var pos = this.selectionStart;
|
||
|
|
var text = this.value.substring(Math.max(0, pos - 10), pos);
|
||
|
|
for (var key in snippets) {
|
||
|
|
if (text.endsWith(key)) {
|
||
|
|
var before = this.value.substring(0, pos - key.length);
|
||
|
|
var after = this.value.substring(pos);
|
||
|
|
this.value = before + snippets[key] + after;
|
||
|
|
this.selectionStart = this.selectionEnd = before.length + snippets[key].length;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Diff before save ===
|
||
|
|
var originalContent = editor.value;
|
||
|
|
document.getElementById('edit-form').addEventListener('submit', function(e) {
|
||
|
|
if (editor.value === originalContent) {
|
||
|
|
if (!confirm('Aucune modification detectee. Sauvegarder quand meme ?')) {
|
||
|
|
e.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Auto-save localStorage ===
|
||
|
|
function saveDraft() {
|
||
|
|
try { localStorage.setItem(draftKey, JSON.stringify({content: editor.value, ts: Date.now()})); } catch(e) {}
|
||
|
|
}
|
||
|
|
function restoreDraft() {
|
||
|
|
try {
|
||
|
|
var d = JSON.parse(localStorage.getItem(draftKey));
|
||
|
|
if (d && d.content) { editor.value = d.content; updatePreview(); }
|
||
|
|
} catch(e) {}
|
||
|
|
document.getElementById('draft-banner').style.display = 'none';
|
||
|
|
}
|
||
|
|
function dismissDraft() {
|
||
|
|
localStorage.removeItem(draftKey);
|
||
|
|
document.getElementById('draft-banner').style.display = 'none';
|
||
|
|
}
|
||
|
|
// Check for draft on load
|
||
|
|
(function() {
|
||
|
|
try {
|
||
|
|
var d = JSON.parse(localStorage.getItem(draftKey));
|
||
|
|
if (d && d.content && d.content !== editor.value && d.ts) {
|
||
|
|
document.getElementById('draft-banner').style.display = 'flex';
|
||
|
|
}
|
||
|
|
} catch(e) {}
|
||
|
|
})();
|
||
|
|
// Auto-save interval
|
||
|
|
setInterval(saveDraft, 5000);
|
||
|
|
// Clear draft on successful submit
|
||
|
|
document.getElementById('edit-form').addEventListener('submit', function() {
|
||
|
|
localStorage.removeItem(draftKey);
|
||
|
|
});
|
||
|
|
|
||
|
|
// === Upload button ===
|
||
|
|
document.getElementById('upload-input').addEventListener('change', function(e) {
|
||
|
|
var file = e.target.files[0];
|
||
|
|
if (!file) return;
|
||
|
|
var form = new FormData();
|
||
|
|
form.append('file', file);
|
||
|
|
form.append('dir', '{{.Page.Domain}}');
|
||
|
|
fetch('/upload', {method: 'POST', body: form})
|
||
|
|
.then(function(r) { return r.json(); })
|
||
|
|
.then(function(data) {
|
||
|
|
var pos = editor.selectionStart;
|
||
|
|
editor.value = editor.value.substring(0, pos) + '\n' + data.markdown + '\n' + editor.value.substring(pos);
|
||
|
|
updatePreview();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{{end}}
|