feat(browse): markdown version-history viewer with diff + restore
Adds a "History…" context-menu item on markdown files in a history:true subtree (server mode only — the audit is server-stamped). It opens a modal that lists every saved version newest-first (timestamp + author + size, current flagged), lets you View any version, Diff any two, and Restore one (a forward PUT — non-destructive). - shared/diff.js: dependency-free line/word LCS diff (window.zddc.diff), prefix/suffix trimming + a cell cap so large files don't stall the UI. - browse/js/history.js: the modal (list / view / diff / restore), talking to GET <url>?history=1 and ?history=<sha>. - loader.js carries the per-file history flag; events.js adds the menu item. - Wired diff.js + history.js + history.css into browse/build.sh; diff.js into the zddc-test.html shim. tests/diff.spec.js covers the diff algorithm. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
d00afa1ddc
commit
9972e6773a
9 changed files with 739 additions and 1 deletions
|
|
@ -32,6 +32,7 @@ concat_files \
|
||||||
"css/base.css" \
|
"css/base.css" \
|
||||||
"css/tree.css" \
|
"css/tree.css" \
|
||||||
"css/preview-yaml.css" \
|
"css/preview-yaml.css" \
|
||||||
|
"css/history.css" \
|
||||||
> "$css_temp"
|
> "$css_temp"
|
||||||
|
|
||||||
# JS files: shared canonical helpers, then browse modules.
|
# JS files: shared canonical helpers, then browse modules.
|
||||||
|
|
@ -47,6 +48,7 @@ concat_files \
|
||||||
"../shared/vendor/toastui-editor-all.min.js" \
|
"../shared/vendor/toastui-editor-all.min.js" \
|
||||||
"../shared/zddc.js" \
|
"../shared/zddc.js" \
|
||||||
"../shared/zddc-filter.js" \
|
"../shared/zddc-filter.js" \
|
||||||
|
"../shared/diff.js" \
|
||||||
"../shared/zip-source.js" \
|
"../shared/zip-source.js" \
|
||||||
"../shared/theme.js" \
|
"../shared/theme.js" \
|
||||||
"../shared/toast.js" \
|
"../shared/toast.js" \
|
||||||
|
|
@ -71,6 +73,7 @@ concat_files \
|
||||||
"js/plan-review.js" \
|
"js/plan-review.js" \
|
||||||
"js/accept-transmittal.js" \
|
"js/accept-transmittal.js" \
|
||||||
"js/stage.js" \
|
"js/stage.js" \
|
||||||
|
"js/history.js" \
|
||||||
"js/create-transmittal.js" \
|
"js/create-transmittal.js" \
|
||||||
"js/events.js" \
|
"js/events.js" \
|
||||||
"js/app.js" \
|
"js/app.js" \
|
||||||
|
|
|
||||||
131
browse/css/history.css
Normal file
131
browse/css/history.css
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
/* history.css — markdown edit-history modal (browse/js/history.js). */
|
||||||
|
|
||||||
|
.md-history-box {
|
||||||
|
background: var(--bg, #fff);
|
||||||
|
color: var(--fg, #111);
|
||||||
|
padding: 1.1rem 1.35rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
min-width: 30rem;
|
||||||
|
max-width: 56rem;
|
||||||
|
width: 80vw;
|
||||||
|
max-height: 85vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-title {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 0; /* allow inner scroll regions to shrink */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-hint {
|
||||||
|
margin: 0 0 0.6rem 0;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
color: var(--muted, #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-empty {
|
||||||
|
margin: 1rem 0;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--muted, #666);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── version list ── */
|
||||||
|
.md-history-list {
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 1px solid var(--border, #ddd);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
padding: 0.4rem 0.6rem;
|
||||||
|
border-bottom: 1px solid var(--border, #eee);
|
||||||
|
font-size: 0.88rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-row:last-child { border-bottom: none; }
|
||||||
|
.md-history-row.is-current { background: var(--accent-bg, rgba(60, 130, 246, 0.08)); }
|
||||||
|
|
||||||
|
.md-history-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.75rem;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-time { font-variant-numeric: tabular-nums; }
|
||||||
|
.md-history-by { color: var(--muted, #555); overflow-wrap: anywhere; }
|
||||||
|
.md-history-size { color: var(--muted, #888); font-size: 0.8rem; }
|
||||||
|
|
||||||
|
.md-history-badge {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 0.05rem 0.4rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: var(--accent, #3c82f6);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-history-actions { display: flex; gap: 0.35rem; }
|
||||||
|
|
||||||
|
/* ── single-version view ── */
|
||||||
|
.md-history-pre {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0.6rem 0.8rem;
|
||||||
|
border: 1px solid var(--border, #ddd);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--code-bg, #f7f7f8);
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── diff view ── */
|
||||||
|
.md-diff {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
overflow: auto;
|
||||||
|
border: 1px solid var(--border, #ddd);
|
||||||
|
border-radius: 4px;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
line-height: 1.45;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-diff-line { display: flex; gap: 0.5rem; padding: 0 0.5rem; white-space: pre-wrap; overflow-wrap: anywhere; }
|
||||||
|
.md-diff-gutter { flex: 0 0 1ch; text-align: center; color: var(--muted, #999); user-select: none; }
|
||||||
|
.md-diff-text { flex: 1 1 auto; }
|
||||||
|
|
||||||
|
.md-diff-add { background: rgba(46, 160, 67, 0.16); }
|
||||||
|
.md-diff-add .md-diff-gutter { color: #2ea043; }
|
||||||
|
.md-diff-del { background: rgba(248, 81, 73, 0.16); }
|
||||||
|
.md-diff-del .md-diff-gutter { color: #f85149; }
|
||||||
|
.md-diff-eq { color: var(--muted, #777); }
|
||||||
|
|
||||||
|
.md-diff-old { color: #f85149; }
|
||||||
|
.md-diff-new { color: #2ea043; }
|
||||||
|
|
||||||
|
/* ── footer ── */
|
||||||
|
.md-history-footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
}
|
||||||
|
|
@ -1061,6 +1061,24 @@
|
||||||
if (s) s.invokeUnstage(c.node);
|
if (s) s.invokeUnstage(c.node);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
// ── Version history (history:true subtree, real files only) ──
|
||||||
|
// Server-mode only: the audit trail (who saved when) is
|
||||||
|
// server-stamped, so there's no offline equivalent. node.history
|
||||||
|
// is set by the listing when this file sits in a history-enabled
|
||||||
|
// cascade subtree (working/).
|
||||||
|
{
|
||||||
|
label: 'History…',
|
||||||
|
icon: '🕘',
|
||||||
|
visible: function (c) {
|
||||||
|
if (!serverMode) return false;
|
||||||
|
if (c.node.isDir || c.node.isZip || c.node.virtual) return false;
|
||||||
|
return !!c.node.history;
|
||||||
|
},
|
||||||
|
action: function (c) {
|
||||||
|
var h = window.app.modules.history;
|
||||||
|
if (h) h.open(c.node);
|
||||||
|
}
|
||||||
|
},
|
||||||
{ separator: true },
|
{ separator: true },
|
||||||
|
|
||||||
// ── View ──
|
// ── View ──
|
||||||
|
|
|
||||||
396
browse/js/history.js
Normal file
396
browse/js/history.js
Normal file
|
|
@ -0,0 +1,396 @@
|
||||||
|
// history.js — markdown edit-history viewer for the browse tool.
|
||||||
|
//
|
||||||
|
// Surfaced by events.js as a "History…" right-click item on files in a
|
||||||
|
// history:true cascade subtree (working/). Server mode only — the audit
|
||||||
|
// trail (who saved when) is stamped server-side, so there's no offline
|
||||||
|
// equivalent.
|
||||||
|
//
|
||||||
|
// Talks to the zddc-server history endpoints on the file's own URL:
|
||||||
|
// GET <url>?history=1 → JSON [{ts, by, sha, prev, bytes, current}]
|
||||||
|
// GET <url>?history=<sha> → that version's raw bytes
|
||||||
|
// Restore re-PUTs a chosen version's bytes to <url>, which the server
|
||||||
|
// records as a new version (forward-only; never destructive).
|
||||||
|
//
|
||||||
|
// Diffs are computed client-side via window.zddc.diff (shared/diff.js).
|
||||||
|
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function escapeHtml(s) {
|
||||||
|
return String(s == null ? '' : s)
|
||||||
|
.replace(/&/g, '&').replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>').replace(/"/g, '"');
|
||||||
|
}
|
||||||
|
|
||||||
|
function toast(msg, kind) {
|
||||||
|
if (window.zddc && typeof window.zddc.toast === 'function') {
|
||||||
|
window.zddc.toast(msg, kind || 'info');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Append ?history=<v> (or &history=) to a file URL.
|
||||||
|
function histURL(baseURL, v) {
|
||||||
|
var sep = baseURL.indexOf('?') === -1 ? '?' : '&';
|
||||||
|
return baseURL + sep + 'history=' + encodeURIComponent(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtTime(ts) {
|
||||||
|
var d = new Date(ts);
|
||||||
|
if (isNaN(d.getTime())) return ts || '';
|
||||||
|
return d.toLocaleString();
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtBytes(n) {
|
||||||
|
if (n == null) return '';
|
||||||
|
if (n < 1024) return n + ' B';
|
||||||
|
if (n < 1024 * 1024) return (n / 1024).toFixed(1) + ' KB';
|
||||||
|
return (n / (1024 * 1024)).toFixed(1) + ' MB';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Can the principal write (restore) to this file? Mirrors the
|
||||||
|
// events.js Rename/Delete gating: verbs===undefined means a non-zddc
|
||||||
|
// backend (no cascade signal) → allow the attempt; otherwise check w.
|
||||||
|
function canRestore(node) {
|
||||||
|
if (!node || !node.url) return false;
|
||||||
|
if (!window.zddc || !window.zddc.cap) return true;
|
||||||
|
if (typeof node.verbs !== 'string') return true;
|
||||||
|
return window.zddc.cap.has(node, 'w');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchList(node) {
|
||||||
|
var resp = await fetch(histURL(node.url, '1'), {
|
||||||
|
headers: { 'Accept': 'application/json' },
|
||||||
|
credentials: 'same-origin'
|
||||||
|
});
|
||||||
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
||||||
|
var data = await resp.json();
|
||||||
|
return Array.isArray(data) ? data : [];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchVersion(node, sha) {
|
||||||
|
var resp = await fetch(histURL(node.url, sha), { credentials: 'same-origin' });
|
||||||
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
||||||
|
return await resp.text();
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Modal shell ──────────────────────────────────────────────────────
|
||||||
|
// One overlay; its body is swapped between the list, a diff, and a
|
||||||
|
// single-version view. Returns { overlay, body, setTitle, close }.
|
||||||
|
function makeModal(titleText) {
|
||||||
|
var overlay = document.createElement('div');
|
||||||
|
overlay.className = 'modal-overlay md-history-overlay';
|
||||||
|
overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:9000;';
|
||||||
|
|
||||||
|
var box = document.createElement('div');
|
||||||
|
box.className = 'md-history-box';
|
||||||
|
|
||||||
|
var title = document.createElement('h2');
|
||||||
|
title.className = 'md-history-title';
|
||||||
|
title.textContent = titleText;
|
||||||
|
|
||||||
|
var body = document.createElement('div');
|
||||||
|
body.className = 'md-history-body';
|
||||||
|
|
||||||
|
box.appendChild(title);
|
||||||
|
box.appendChild(body);
|
||||||
|
overlay.appendChild(box);
|
||||||
|
document.body.appendChild(overlay);
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
|
||||||
|
document.removeEventListener('keydown', onKey);
|
||||||
|
}
|
||||||
|
function onKey(e) { if (e.key === 'Escape') close(); }
|
||||||
|
document.addEventListener('keydown', onKey);
|
||||||
|
overlay.addEventListener('mousedown', function (e) {
|
||||||
|
if (e.target === overlay) close();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
overlay: overlay,
|
||||||
|
body: body,
|
||||||
|
setTitle: function (t) { title.textContent = t; },
|
||||||
|
close: close
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function footerBar() {
|
||||||
|
var f = document.createElement('div');
|
||||||
|
f.className = 'md-history-footer';
|
||||||
|
return f;
|
||||||
|
}
|
||||||
|
|
||||||
|
function button(label, opts) {
|
||||||
|
opts = opts || {};
|
||||||
|
var b = document.createElement('button');
|
||||||
|
b.type = 'button';
|
||||||
|
b.textContent = label;
|
||||||
|
if (opts.primary) b.className = 'btn-primary';
|
||||||
|
if (opts.disabled) b.disabled = true;
|
||||||
|
if (opts.onClick) b.addEventListener('click', opts.onClick);
|
||||||
|
return b;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── List view ──────────────────────────────────────────────────────
|
||||||
|
function renderList(modal, node, entries) {
|
||||||
|
modal.setTitle('History — ' + node.name);
|
||||||
|
var body = modal.body;
|
||||||
|
body.innerHTML = '';
|
||||||
|
|
||||||
|
if (!entries.length) {
|
||||||
|
var empty = document.createElement('p');
|
||||||
|
empty.className = 'md-history-empty';
|
||||||
|
empty.textContent = 'No saved versions yet. Each save of this file is recorded here.';
|
||||||
|
body.appendChild(empty);
|
||||||
|
var f0 = footerBar();
|
||||||
|
f0.appendChild(button('Close', { onClick: modal.close }));
|
||||||
|
body.appendChild(f0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var hint = document.createElement('p');
|
||||||
|
hint.className = 'md-history-hint';
|
||||||
|
hint.textContent = 'Newest first. Select two versions to diff.';
|
||||||
|
body.appendChild(hint);
|
||||||
|
|
||||||
|
var list = document.createElement('div');
|
||||||
|
list.className = 'md-history-list';
|
||||||
|
var selected = []; // shas, in click order (max 2)
|
||||||
|
|
||||||
|
var diffBtn;
|
||||||
|
function syncDiffBtn() {
|
||||||
|
if (diffBtn) diffBtn.disabled = selected.length !== 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
entries.forEach(function (ent) {
|
||||||
|
var row = document.createElement('div');
|
||||||
|
row.className = 'md-history-row' + (ent.current ? ' is-current' : '');
|
||||||
|
|
||||||
|
var cb = document.createElement('input');
|
||||||
|
cb.type = 'checkbox';
|
||||||
|
cb.className = 'md-history-pick';
|
||||||
|
cb.addEventListener('change', function () {
|
||||||
|
if (cb.checked) {
|
||||||
|
selected.push(ent.sha);
|
||||||
|
// Keep at most two: drop the oldest selection.
|
||||||
|
if (selected.length > 2) {
|
||||||
|
var dropped = selected.shift();
|
||||||
|
var others = list.querySelectorAll('.md-history-pick');
|
||||||
|
others.forEach(function (o, i) {
|
||||||
|
if (o !== cb && entries[i] && entries[i].sha === dropped) o.checked = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selected = selected.filter(function (s) { return s !== ent.sha; });
|
||||||
|
}
|
||||||
|
syncDiffBtn();
|
||||||
|
});
|
||||||
|
|
||||||
|
var meta = document.createElement('div');
|
||||||
|
meta.className = 'md-history-meta';
|
||||||
|
meta.innerHTML =
|
||||||
|
'<span class="md-history-time">' + escapeHtml(fmtTime(ent.ts)) + '</span>' +
|
||||||
|
'<span class="md-history-by">' + escapeHtml(ent.by || '—') + '</span>' +
|
||||||
|
'<span class="md-history-size">' + escapeHtml(fmtBytes(ent.bytes)) + '</span>' +
|
||||||
|
(ent.current ? '<span class="md-history-badge">current</span>' : '');
|
||||||
|
|
||||||
|
var actions = document.createElement('div');
|
||||||
|
actions.className = 'md-history-actions';
|
||||||
|
actions.appendChild(button('View', {
|
||||||
|
onClick: function () { renderView(modal, node, ent, entries); }
|
||||||
|
}));
|
||||||
|
if (!ent.current && canRestore(node)) {
|
||||||
|
actions.appendChild(button('Restore', {
|
||||||
|
onClick: function () { restore(modal, node, ent); }
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
row.appendChild(cb);
|
||||||
|
row.appendChild(meta);
|
||||||
|
row.appendChild(actions);
|
||||||
|
list.appendChild(row);
|
||||||
|
});
|
||||||
|
|
||||||
|
body.appendChild(list);
|
||||||
|
|
||||||
|
var f = footerBar();
|
||||||
|
diffBtn = button('Diff selected', {
|
||||||
|
primary: true, disabled: true,
|
||||||
|
onClick: function () {
|
||||||
|
if (selected.length !== 2) return;
|
||||||
|
// Order oldest→newest by the entries' position (newest
|
||||||
|
// first in the list), so the diff reads old → new.
|
||||||
|
var picks = entries.filter(function (e) { return selected.indexOf(e.sha) !== -1; });
|
||||||
|
picks.sort(function (a, b) { return (a.ts < b.ts ? -1 : 1); });
|
||||||
|
renderDiff(modal, node, picks[0], picks[1], entries);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
f.appendChild(diffBtn);
|
||||||
|
f.appendChild(button('Close', { onClick: modal.close }));
|
||||||
|
body.appendChild(f);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Single-version view ──────────────────────────────────────────────
|
||||||
|
async function renderView(modal, node, ent, entries) {
|
||||||
|
modal.setTitle('Version — ' + fmtTime(ent.ts));
|
||||||
|
var body = modal.body;
|
||||||
|
body.innerHTML = '<p class="md-history-hint">Loading…</p>';
|
||||||
|
var text;
|
||||||
|
try {
|
||||||
|
text = await fetchVersion(node, ent.sha);
|
||||||
|
} catch (e) {
|
||||||
|
body.innerHTML = '';
|
||||||
|
var err = document.createElement('p');
|
||||||
|
err.className = 'md-history-empty';
|
||||||
|
err.textContent = 'Could not load this version: ' + (e.message || e);
|
||||||
|
body.appendChild(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
body.innerHTML = '';
|
||||||
|
var meta = document.createElement('p');
|
||||||
|
meta.className = 'md-history-hint';
|
||||||
|
meta.textContent = (ent.by || '—') + ' · ' + fmtTime(ent.ts);
|
||||||
|
body.appendChild(meta);
|
||||||
|
|
||||||
|
var pre = document.createElement('pre');
|
||||||
|
pre.className = 'md-history-pre';
|
||||||
|
pre.textContent = text;
|
||||||
|
body.appendChild(pre);
|
||||||
|
|
||||||
|
var f = footerBar();
|
||||||
|
f.appendChild(button('Back', { onClick: function () { renderList(modal, node, entries); } }));
|
||||||
|
if (!ent.current && canRestore(node)) {
|
||||||
|
f.appendChild(button('Restore this version', {
|
||||||
|
primary: true, onClick: function () { restore(modal, node, ent); }
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
body.appendChild(f);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Diff view ─────────────────────────────────────────────────────────
|
||||||
|
async function renderDiff(modal, node, oldEnt, newEnt, entries) {
|
||||||
|
modal.setTitle('Diff');
|
||||||
|
var body = modal.body;
|
||||||
|
body.innerHTML = '<p class="md-history-hint">Loading…</p>';
|
||||||
|
var oldText, newText;
|
||||||
|
try {
|
||||||
|
oldText = await fetchVersion(node, oldEnt.sha);
|
||||||
|
newText = await fetchVersion(node, newEnt.sha);
|
||||||
|
} catch (e) {
|
||||||
|
body.innerHTML = '';
|
||||||
|
var err = document.createElement('p');
|
||||||
|
err.className = 'md-history-empty';
|
||||||
|
err.textContent = 'Could not load versions: ' + (e.message || e);
|
||||||
|
body.appendChild(err);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
body.innerHTML = '';
|
||||||
|
|
||||||
|
var hdr = document.createElement('p');
|
||||||
|
hdr.className = 'md-history-hint';
|
||||||
|
hdr.innerHTML =
|
||||||
|
'<span class="md-diff-old">' + escapeHtml(fmtTime(oldEnt.ts)) + ' · ' + escapeHtml(oldEnt.by || '—') + '</span>' +
|
||||||
|
' → ' +
|
||||||
|
'<span class="md-diff-new">' + escapeHtml(fmtTime(newEnt.ts)) + ' · ' + escapeHtml(newEnt.by || '—') + '</span>';
|
||||||
|
body.appendChild(hdr);
|
||||||
|
|
||||||
|
var ops = (window.zddc && window.zddc.diff)
|
||||||
|
? window.zddc.diff.lines(oldText, newText)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
var pane = document.createElement('div');
|
||||||
|
pane.className = 'md-diff';
|
||||||
|
if (!ops) {
|
||||||
|
pane.textContent = 'Diff unavailable (diff module not loaded).';
|
||||||
|
} else {
|
||||||
|
var unchanged = true;
|
||||||
|
ops.forEach(function (op) {
|
||||||
|
if (op.type !== 'eq') unchanged = false;
|
||||||
|
var line = document.createElement('div');
|
||||||
|
line.className = 'md-diff-line md-diff-' + op.type;
|
||||||
|
var gutter = op.type === 'add' ? '+' : (op.type === 'del' ? '-' : ' ');
|
||||||
|
var g = document.createElement('span');
|
||||||
|
g.className = 'md-diff-gutter';
|
||||||
|
g.textContent = gutter;
|
||||||
|
var t = document.createElement('span');
|
||||||
|
t.className = 'md-diff-text';
|
||||||
|
t.textContent = op.text;
|
||||||
|
line.appendChild(g);
|
||||||
|
line.appendChild(t);
|
||||||
|
pane.appendChild(line);
|
||||||
|
});
|
||||||
|
if (unchanged) {
|
||||||
|
var same = document.createElement('div');
|
||||||
|
same.className = 'md-diff-line md-diff-eq';
|
||||||
|
same.textContent = '(no differences)';
|
||||||
|
pane.appendChild(same);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
body.appendChild(pane);
|
||||||
|
|
||||||
|
if (window.zddc && window.zddc.diff && ops) {
|
||||||
|
var s = window.zddc.diff.stats(ops);
|
||||||
|
var statline = document.createElement('p');
|
||||||
|
statline.className = 'md-history-hint';
|
||||||
|
statline.textContent = '+' + s.added + ' / −' + s.removed;
|
||||||
|
body.appendChild(statline);
|
||||||
|
}
|
||||||
|
|
||||||
|
var f = footerBar();
|
||||||
|
f.appendChild(button('Back', { onClick: function () { renderList(modal, node, entries); } }));
|
||||||
|
body.appendChild(f);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Restore ───────────────────────────────────────────────────────────
|
||||||
|
async function restore(modal, node, ent) {
|
||||||
|
if (!confirm('Restore the version from ' + fmtTime(ent.ts) + '?\nThis is saved as a new version — nothing is lost.')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
var text = await fetchVersion(node, ent.sha);
|
||||||
|
var resp = await fetch(node.url, {
|
||||||
|
method: 'PUT',
|
||||||
|
credentials: 'same-origin',
|
||||||
|
headers: { 'Content-Type': 'text/markdown' },
|
||||||
|
body: text
|
||||||
|
});
|
||||||
|
if (!resp.ok) throw new Error('HTTP ' + resp.status);
|
||||||
|
toast('Restored version from ' + fmtTime(ent.ts), 'success');
|
||||||
|
// Reflect the new head: refetch the list.
|
||||||
|
var entries = await fetchList(node);
|
||||||
|
renderList(modal, node, entries);
|
||||||
|
// If the file is open in the preview pane, reload it.
|
||||||
|
var preview = window.app && window.app.modules && window.app.modules.preview;
|
||||||
|
if (preview && typeof preview.showFilePreview === 'function') {
|
||||||
|
try { preview.showFilePreview(node); } catch (_e) { /* best effort */ }
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
toast('Restore failed: ' + (e.message || e), 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Entry point ─────────────────────────────────────────────────────
|
||||||
|
async function open(node) {
|
||||||
|
if (!node || !node.url) {
|
||||||
|
toast('History is only available in server mode.', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var modal = makeModal('History — ' + node.name);
|
||||||
|
modal.body.innerHTML = '<p class="md-history-hint">Loading…</p>';
|
||||||
|
try {
|
||||||
|
var entries = await fetchList(node);
|
||||||
|
renderList(modal, node, entries);
|
||||||
|
} catch (e) {
|
||||||
|
modal.body.innerHTML = '';
|
||||||
|
var err = document.createElement('p');
|
||||||
|
err.className = 'md-history-empty';
|
||||||
|
err.textContent = 'Could not load history: ' + (e.message || e);
|
||||||
|
modal.body.appendChild(err);
|
||||||
|
var f = footerBar();
|
||||||
|
f.appendChild(button('Close', { onClick: modal.close }));
|
||||||
|
modal.body.appendChild(f);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.app.modules.history = { open: open };
|
||||||
|
})();
|
||||||
|
|
@ -60,6 +60,12 @@
|
||||||
// whatever the server enforces on the
|
// whatever the server enforces on the
|
||||||
// actual PUT/DELETE still apply.
|
// actual PUT/DELETE still apply.
|
||||||
verbs: typeof e.verbs === 'string' ? e.verbs : undefined,
|
verbs: typeof e.verbs === 'string' ? e.verbs : undefined,
|
||||||
|
// Server-computed: true when this file lives in a history:true
|
||||||
|
// cascade subtree, so every save is versioned and
|
||||||
|
// GET <url>?history lists prior versions. Drives the "History…"
|
||||||
|
// context-menu affordance (server mode only — offline has no
|
||||||
|
// authenticated identity to attribute saves to).
|
||||||
|
history: !!e.history,
|
||||||
// FS-API specific (null in server mode):
|
// FS-API specific (null in server mode):
|
||||||
handle: null
|
handle: null
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -75,6 +75,10 @@ export default defineConfig({
|
||||||
name: 'zddc',
|
name: 'zddc',
|
||||||
testMatch: 'zddc.spec.js',
|
testMatch: 'zddc.spec.js',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'diff',
|
||||||
|
testMatch: 'diff.spec.js',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'form-safety',
|
name: 'form-safety',
|
||||||
testMatch: 'form-safety.spec.js',
|
testMatch: 'form-safety.spec.js',
|
||||||
|
|
|
||||||
108
shared/diff.js
Normal file
108
shared/diff.js
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
/*
|
||||||
|
* shared/diff.js — a small, dependency-free text diff.
|
||||||
|
*
|
||||||
|
* Attaches to window.zddc.diff. Must load AFTER shared/zddc.js (which
|
||||||
|
* creates the window.zddc object). Used by the browse tool's markdown
|
||||||
|
* version-history viewer to show what changed between any two saved
|
||||||
|
* versions; kept in shared/ so other tools can reuse it.
|
||||||
|
*
|
||||||
|
* API:
|
||||||
|
* window.zddc.diff.lines(oldStr, newStr)
|
||||||
|
* → [{ type: 'eq'|'del'|'add', text }] line-level diff (LCS)
|
||||||
|
* window.zddc.diff.words(oldStr, newStr)
|
||||||
|
* → [{ type: 'eq'|'del'|'add', text }] token-level diff for one
|
||||||
|
* changed line (whitespace-preserving), for intra-line highlights
|
||||||
|
* window.zddc.diff.stats(ops) → { added, removed }
|
||||||
|
*
|
||||||
|
* The line diff trims the common prefix/suffix before running the O(n*m)
|
||||||
|
* LCS dynamic program, so a small edit in a large file stays cheap. A
|
||||||
|
* safety cap falls back to "replace whole block" when the changed middle
|
||||||
|
* is pathologically large, so the UI never freezes.
|
||||||
|
*/
|
||||||
|
(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var LCS_CELL_CAP = 4000000; // ~4M cells (n*m) before the fallback
|
||||||
|
|
||||||
|
function splitLines(s) {
|
||||||
|
return String(s == null ? '' : s).replace(/\r\n/g, '\n').split('\n');
|
||||||
|
}
|
||||||
|
|
||||||
|
// LCS diff of two arrays of strings → ordered [{type, text}] ops.
|
||||||
|
function lcsDiff(a, b) {
|
||||||
|
var n = a.length, m = b.length;
|
||||||
|
if (n === 0 && m === 0) return [];
|
||||||
|
if (n === 0) return b.map(function (t) { return { type: 'add', text: t }; });
|
||||||
|
if (m === 0) return a.map(function (t) { return { type: 'del', text: t }; });
|
||||||
|
|
||||||
|
if (n * m > LCS_CELL_CAP) {
|
||||||
|
// Too large to diff finely without risking a UI stall: treat
|
||||||
|
// the whole block as a wholesale replacement.
|
||||||
|
var out = a.map(function (t) { return { type: 'del', text: t }; });
|
||||||
|
return out.concat(b.map(function (t) { return { type: 'add', text: t }; }));
|
||||||
|
}
|
||||||
|
|
||||||
|
// dp[i][j] = LCS length of a[i:] and b[j:].
|
||||||
|
var dp = new Array(n + 1);
|
||||||
|
for (var i = 0; i <= n; i++) dp[i] = new Array(m + 1).fill(0);
|
||||||
|
for (var ii = n - 1; ii >= 0; ii--) {
|
||||||
|
for (var jj = m - 1; jj >= 0; jj--) {
|
||||||
|
if (a[ii] === b[jj]) dp[ii][jj] = dp[ii + 1][jj + 1] + 1;
|
||||||
|
else dp[ii][jj] = Math.max(dp[ii + 1][jj], dp[ii][jj + 1]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var ops = [], i = 0, j = 0;
|
||||||
|
while (i < n && j < m) {
|
||||||
|
if (a[i] === b[j]) { ops.push({ type: 'eq', text: a[i] }); i++; j++; }
|
||||||
|
else if (dp[i + 1][j] >= dp[i][j + 1]) { ops.push({ type: 'del', text: a[i] }); i++; }
|
||||||
|
else { ops.push({ type: 'add', text: b[j] }); j++; }
|
||||||
|
}
|
||||||
|
while (i < n) ops.push({ type: 'del', text: a[i++] });
|
||||||
|
while (j < m) ops.push({ type: 'add', text: b[j++] });
|
||||||
|
return ops;
|
||||||
|
}
|
||||||
|
|
||||||
|
function diffLines(oldStr, newStr) {
|
||||||
|
var a = splitLines(oldStr), b = splitLines(newStr);
|
||||||
|
var ops = [];
|
||||||
|
|
||||||
|
// Common prefix.
|
||||||
|
var start = 0;
|
||||||
|
while (start < a.length && start < b.length && a[start] === b[start]) start++;
|
||||||
|
// Common suffix (not overlapping the prefix).
|
||||||
|
var endA = a.length, endB = b.length;
|
||||||
|
while (endA > start && endB > start && a[endA - 1] === b[endB - 1]) { endA--; endB--; }
|
||||||
|
|
||||||
|
for (var p = 0; p < start; p++) ops.push({ type: 'eq', text: a[p] });
|
||||||
|
var mid = lcsDiff(a.slice(start, endA), b.slice(start, endB));
|
||||||
|
for (var k = 0; k < mid.length; k++) ops.push(mid[k]);
|
||||||
|
for (var s = endA; s < a.length; s++) ops.push({ type: 'eq', text: a[s] });
|
||||||
|
return ops;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Whitespace-preserving tokenization: words and the runs of
|
||||||
|
// whitespace between them are separate tokens, so a re-diff lines up
|
||||||
|
// on word boundaries while keeping the original spacing renderable.
|
||||||
|
function tokenize(s) {
|
||||||
|
return String(s == null ? '' : s).split(/(\s+)/).filter(function (x) { return x !== ''; });
|
||||||
|
}
|
||||||
|
|
||||||
|
function diffWords(oldStr, newStr) {
|
||||||
|
return lcsDiff(tokenize(oldStr), tokenize(newStr));
|
||||||
|
}
|
||||||
|
|
||||||
|
function stats(ops) {
|
||||||
|
var added = 0, removed = 0;
|
||||||
|
for (var i = 0; i < ops.length; i++) {
|
||||||
|
if (ops[i].type === 'add') added++;
|
||||||
|
else if (ops[i].type === 'del') removed++;
|
||||||
|
}
|
||||||
|
return { added: added, removed: removed };
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!window.zddc) {
|
||||||
|
throw new Error('shared/diff.js: window.zddc must be loaded first');
|
||||||
|
}
|
||||||
|
window.zddc.diff = { lines: diffLines, words: diffWords, stats: stats };
|
||||||
|
})();
|
||||||
|
|
@ -2,8 +2,9 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head><meta charset="utf-8"><title>ZDDC library test shim</title></head>
|
<head><meta charset="utf-8"><title>ZDDC library test shim</title></head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Loads shared/zddc.js + shared/hash.js so Playwright tests can call window.zddc.* -->
|
<!-- Loads shared/zddc.js + shared/hash.js + shared/diff.js so Playwright tests can call window.zddc.* -->
|
||||||
<script src="zddc.js"></script>
|
<script src="zddc.js"></script>
|
||||||
<script src="hash.js"></script>
|
<script src="hash.js"></script>
|
||||||
|
<script src="diff.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
71
tests/diff.spec.js
Normal file
71
tests/diff.spec.js
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/**
|
||||||
|
* Tests for shared/diff.js — the dependency-free text diff used by the
|
||||||
|
* browse tool's markdown version-history viewer.
|
||||||
|
*
|
||||||
|
* Runs against the same shim as zddc.spec.js (shared/zddc-test.html,
|
||||||
|
* which loads shared/diff.js and exposes window.zddc.diff).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { test, expect } from '@playwright/test';
|
||||||
|
import * as path from 'path';
|
||||||
|
|
||||||
|
const SHIM_PATH = 'file://' + path.resolve('shared/zddc-test.html');
|
||||||
|
|
||||||
|
async function diff(page, fn, ...args) {
|
||||||
|
return page.evaluate(
|
||||||
|
([fn, args]) => window.zddc.diff[fn](...args),
|
||||||
|
[fn, args]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
test.beforeEach(async ({ page }) => {
|
||||||
|
await page.goto(SHIM_PATH, { waitUntil: 'load' });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('diff module is attached to window.zddc', async ({ page }) => {
|
||||||
|
const present = await page.evaluate(() =>
|
||||||
|
!!(window.zddc && window.zddc.diff &&
|
||||||
|
typeof window.zddc.diff.lines === 'function' &&
|
||||||
|
typeof window.zddc.diff.words === 'function'));
|
||||||
|
expect(present).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('identical text produces only eq ops', async ({ page }) => {
|
||||||
|
const ops = await diff(page, 'lines', 'a\nb\nc', 'a\nb\nc');
|
||||||
|
expect(ops.every(o => o.type === 'eq')).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('a changed middle line shows del then add', async ({ page }) => {
|
||||||
|
const ops = await diff(page, 'lines', 'a\nb\nc', 'a\nB\nc');
|
||||||
|
const compact = ops.map(o => `${o.type}:${o.text}`).join('|');
|
||||||
|
expect(compact).toContain('eq:a');
|
||||||
|
expect(compact).toContain('del:b');
|
||||||
|
expect(compact).toContain('add:B');
|
||||||
|
expect(compact).toContain('eq:c');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('stats count added and removed lines', async ({ page }) => {
|
||||||
|
const addStats = await diff(page, 'stats', await diff(page, 'lines', 'a\nb', 'a\nx\nb'));
|
||||||
|
expect(addStats).toEqual({ added: 1, removed: 0 });
|
||||||
|
|
||||||
|
const delStats = await diff(page, 'stats', await diff(page, 'lines', 'a\nb\nc', 'a\nc'));
|
||||||
|
expect(delStats).toEqual({ added: 0, removed: 1 });
|
||||||
|
});
|
||||||
|
|
||||||
|
test('pure insertion at end', async ({ page }) => {
|
||||||
|
const ops = await diff(page, 'lines', 'one\ntwo', 'one\ntwo\nthree');
|
||||||
|
const added = ops.filter(o => o.type === 'add').map(o => o.text);
|
||||||
|
expect(added).toEqual(['three']);
|
||||||
|
expect(ops.filter(o => o.type === 'del')).toHaveLength(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('word diff aligns on word boundaries, preserving spaces', async ({ page }) => {
|
||||||
|
const ops = await diff(page, 'words', 'the quick fox', 'the slow fox');
|
||||||
|
const changed = ops.filter(o => o.type !== 'eq').map(o => `${o.type}:${o.text}`);
|
||||||
|
expect(changed).toEqual(['del:quick', 'add:slow']);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('empty inputs do not throw', async ({ page }) => {
|
||||||
|
const ops = await diff(page, 'lines', '', '');
|
||||||
|
expect(Array.isArray(ops)).toBe(true);
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue