VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(browse): turn DOCX/HTML/PDF buttons into anchor links

Browse source 
Right-click → "Copy Link Address" / "Open in New Tab" / "Save Link
As" now work natively, so users can share the conversion URL or pick
their own download path. The buttons are styled <a href> elements
instead of <button>, with the `download` attribute set to the
expected filename (foo.docx etc.) so a plain click still downloads.

Click handler simplifies a lot: on clean buffer, the handler returns
immediately and the browser handles the navigation. On dirty buffer,
the handler intercepts, auto-saves, then re-fires the click — which
re-enters the handler with dirty=false and falls through to the
native navigation. No more JS fetch + blob + objectURL plumbing for
the common path.

Side effect: if the server returns 422 or 503, the browser shows the
response body in the target tab. That's less polished than the
previous toast, but it's also a more direct view of what the server
actually said. The toast path stays in shared/zddc-source.js's
downloadConverted helper for tools that prefer the JS-driven flow.
This commit is contained in:
ZDDC 2026-05-13 12:55:03 -05:00
parent 52a6f139bb
commit 9245017798
1 changed files with 54 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
browse/js/preview-markdown.js
View file

@ -436,25 +436,33 @@
sourceEl.textContent = 'server'; sourceEl.textContent = 'server';
} }
// Download-as-{docx,html,pdf} buttons. Server-mode + .md only: // Download-as-{docx,html,pdf} affordances. Server-mode + .md
// the server endpoint runs pandoc/chromium in a container and // only: the server endpoint runs pandoc/chromium in a
// returns the converted bytes. Click handlers wire up below // container and returns the converted bytes.
// (after save() is defined) because they auto-save first when //
// the buffer is dirty. // These are real <a> elements with href + download attributes,
// styled like buttons. That means right-click → "Copy link
// address" / "Open in new tab" / "Save link as" all work
// natively — users can share the conversion URL or download
// through their preferred path. Click is intercepted only
// when the buffer is dirty (auto-save first, then re-fire
// the click so the browser fetches the saved bytes).
var serverModeMd = window.app && window.app.state && var serverModeMd = window.app && window.app.state &&
window.app.state.source === 'server' && window.app.state.source === 'server' &&
node.url && /\.md$/i.test(node.name); node.url && /\.md$/i.test(node.name);
var convertBtns = []; var convertBtns = [];
if (serverModeMd && window.zddc && window.zddc.source && if (serverModeMd) {
typeof window.zddc.source.downloadConverted === 'function') {
['docx', 'html', 'pdf'].forEach(function (fmt) { ['docx', 'html', 'pdf'].forEach(function (fmt) {
var btn = document.createElement('button'); var a = document.createElement('a');
btn.className = 'btn btn-sm btn-secondary md-shell__download'; a.className = 'btn btn-sm btn-secondary md-shell__download';
btn.type = 'button'; a.href = node.url + '?convert=' + encodeURIComponent(fmt);
btn.textContent = fmt.toUpperCase(); a.download = node.name.replace(/\.md$/i, '') + '.' + fmt;
btn.title = 'Download as ' + fmt.toUpperCase(); a.textContent = fmt.toUpperCase();
btn.dataset.fmt = fmt; a.title = 'Download as ' + fmt.toUpperCase()
convertBtns.push(btn); + ' (right-click to copy link or open in new tab)';
a.dataset.fmt = fmt;
a.rel = 'noopener';
convertBtns.push(a);
}); });
} }
@ -653,39 +661,42 @@
} }
}); });
// Download-as-* click handlers. Auto-save when the buffer is // Download-as-* click handlers. The anchors are real <a href>
// dirty so the converted file reflects what's on screen. If // links so right-click / middle-click / Copy Link Address all
// the save fails the existing toast/status surfaces it; we // work natively. The JS handler only steps in when the buffer
// bail without firing the conversion. // is dirty — auto-save first, then re-fire the click so the
convertBtns.forEach(function (btn) { // browser fetches the just-saved bytes. After the click is
btn.addEventListener('click', async function () { // re-fired, currentInstance.dirty is false so the handler
var fmt = btn.dataset.fmt; // is a no-op on the second pass and the native navigation
if (currentInstance.dirty) { // proceeds.
if (!writable) { convertBtns.forEach(function (a) {
if (window.zddc && window.zddc.toast) { a.addEventListener('click', async function (e) {
window.zddc.toast( var fmt = a.dataset.fmt;
'This source is read-only — save a copy elsewhere first.', if (!currentInstance.dirty) {
'error'); // Clean — let the browser handle the click. The
} // server's response (DOCX/HTML/PDF bytes, 422,
return; // 503, etc.) lands in whatever target the user
} // picked (current tab, new tab, save-as).
btn.disabled = true; return;
try { await save(); } finally { btn.disabled = false; }
if (currentInstance.dirty) return; // save failed
} }
btn.disabled = true; // Dirty: intercept, save, retry.
try { e.preventDefault();
statusEl.textContent = 'Converting to ' + fmt.toUpperCase() + '…'; if (!writable) {
await window.zddc.source.downloadConverted(node.url, node.name, fmt);
statusEl.textContent = 'Downloaded ' + fmt.toUpperCase();
} catch (e) {
statusEl.textContent = (e && e.message) || String(e);
if (window.zddc && window.zddc.toast) { if (window.zddc && window.zddc.toast) {
window.zddc.toast((e && e.message) || String(e), 'error'); window.zddc.toast(
'This source is read-only — save a copy elsewhere first.',
'error');
} }
} finally { return;
btn.disabled = false;
} }
statusEl.textContent = 'Saving before download…';
try { await save(); } catch (_) { /* save() surfaces its own error */ }
if (currentInstance.dirty) return; // save failed; toast already shown
statusEl.textContent = 'Downloading ' + fmt.toUpperCase() + '…';
// Re-trigger the click. dirty=false now so the handler
// exits early on the second pass and the browser
// processes the native navigation.
a.click();
}); });
}); });
} }