16f2083253
- markdown_editor Edit toggle uses themed ghost button - .md-preview gets full blackflame styling incl. tables (migrated BookStack tables now render as tables) - reusable back button on page/reference/project/resource reading views - Little Blue actions regrouped into themed cards, pairing Start/Stop per guest Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
78 lines
2.3 KiB
JavaScript
78 lines
2.3 KiB
JavaScript
// Single-pane Markdown view with an Edit/Preview toggle.
|
|
// - Default: rendered HTML (marked → DOMPurify).
|
|
// - Click "Edit" to replace the pane in place with a raw-markdown textarea + Save.
|
|
// - Click "Preview" to re-render and go back to read mode.
|
|
// save(value) is caller-supplied and returns a promise resolving to the updated row.
|
|
|
|
import { marked } from '../vendor/marked.esm.js';
|
|
import DOMPurify from '../vendor/purify.es.mjs';
|
|
import { el } from '../dom.js';
|
|
|
|
marked.setOptions({ gfm: true, breaks: true });
|
|
|
|
export function markdownEditor({ initial = '', save }) {
|
|
let editing = false;
|
|
|
|
const ta = el('textarea', {
|
|
style: {
|
|
width: '100%', minHeight: '420px', resize: 'vertical',
|
|
fontFamily: 'var(--font-mono)', fontSize: '13px', lineHeight: '1.5'
|
|
}
|
|
});
|
|
ta.value = initial;
|
|
|
|
const preview = el('div', { class: 'md-preview' });
|
|
function rerender() {
|
|
preview.innerHTML = DOMPurify.sanitize(marked.parse(ta.value)); // sanitized
|
|
}
|
|
rerender();
|
|
|
|
// The pane shows EITHER the preview (read) or the textarea (edit).
|
|
const pane = el('div', {}, preview);
|
|
|
|
const stamp = el('span', { class: 'muted', style: { fontSize: '11px' } }, '');
|
|
|
|
const saveBtn = el('button', {
|
|
class: 'primary',
|
|
style: { display: 'none' },
|
|
onclick: async () => {
|
|
saveBtn.disabled = true;
|
|
try {
|
|
const updated = await save(ta.value);
|
|
stamp.textContent = updated?.updated_at
|
|
? 'Saved ' + new Date(updated.updated_at).toLocaleString()
|
|
: 'Saved';
|
|
} catch (e) {
|
|
stamp.textContent = 'Save failed: ' + e.message;
|
|
} finally {
|
|
saveBtn.disabled = false;
|
|
}
|
|
}
|
|
}, 'Save');
|
|
|
|
const toggle = el('button', {
|
|
class: 'ghost',
|
|
onclick: () => {
|
|
editing = !editing;
|
|
if (editing) {
|
|
pane.replaceChild(ta, preview);
|
|
ta.focus();
|
|
toggle.textContent = 'Preview';
|
|
saveBtn.style.display = '';
|
|
} else {
|
|
rerender();
|
|
pane.replaceChild(preview, ta);
|
|
toggle.textContent = 'Edit';
|
|
saveBtn.style.display = 'none';
|
|
}
|
|
}
|
|
}, 'Edit');
|
|
|
|
return el('div', {},
|
|
el('div', { style: { display: 'flex', gap: '12px', alignItems: 'center', marginBottom: '8px' } },
|
|
toggle, saveBtn, stamp
|
|
),
|
|
el('div', { class: 'card' }, pane)
|
|
);
|
|
}
|