'
+ + '
';
+ return;
+ }
+
+ if (!classifierAvailableHere()) {
+ host.innerHTML =
+ 'Grid mode
' + + 'The classifier (bulk ZDDC rename) workflow runs as an embedded' + + ' iframe and requires the page be served by zddc-server.
' + + 'If you opened this file directly (file://), open the standalone'
+ + ' classifier.html tool instead — it provides the same'
+ + ' workflow against a local folder you pick from the file system.
'
+ + '
';
+ return;
+ }
+
+ // Compute the iframe src: current page's directory + classifier.html.
+ var pathname = window.location.pathname || '/';
+ if (!pathname.endsWith('/')) {
+ // Strip trailing /Grid mode
' + + 'The classifier (bulk ZDDC rename) workflow auto-serves at'
+ + ' working/, staging/, and'
+ + ' incoming/ URLs. The current page'
+ + ' (' + escapeHtml(window.location.pathname) + ') isn\'t'
+ + ' inside any of those, so classifier isn\'t available here.
Navigate browse into a working/ or staging/ folder, then' + + ' switch to Grid.
' + + ''
+ + 'Toast UI Editor isn\'t bundled in this build.
';
+ return;
+ }
+
+ // Tear down any previous markdown instance (single-file model).
+ dispose();
+
+ // Read the file content.
+ var text;
+ try {
+ var buf = await ctx.getArrayBuffer(node);
+ text = new TextDecoder('utf-8', { fatal: false }).decode(buf);
+ } catch (e) {
+ container.innerHTML =
+ ''
+ + 'Could not read ' + escapeHtml(node.name) + ': '
+ + escapeHtml(e.message || String(e)) + '
';
+ return;
+ }
+
+ // Build the markdown plugin's DOM:
+ // ┌──────────────────────────────────┐
+ // │ toolbar (Save, dirty marker) │
+ // ├──────────────────────────────────┤
+ // │ Toast UI editor │
+ // └──────────────────────────────────┘
+ //
+ // TOC pane is deferred — a near-term iteration can split this
+ // into editor | toc once the simpler form is exercised.
+ container.innerHTML = '';
+ container.style.display = 'flex';
+ container.style.flexDirection = 'column';
+
+ var toolbar = document.createElement('div');
+ toolbar.className = 'md-toolbar';
+ toolbar.style.cssText = 'display:flex;align-items:center;gap:0.5rem;'
+ + 'padding:0.35rem 0.75rem;background:var(--bg-secondary);'
+ + 'border-bottom:1px solid var(--border);flex-shrink:0;';
+
+ var saveBtn = document.createElement('button');
+ saveBtn.className = 'btn btn-sm btn-primary';
+ saveBtn.type = 'button';
+ saveBtn.textContent = 'Save';
+ saveBtn.disabled = true; // enabled when content changes
+
+ var dirty = document.createElement('span');
+ dirty.style.cssText = 'color:var(--text-muted);font-size:0.85rem;';
+ dirty.textContent = '';
+
+ var status = document.createElement('span');
+ status.style.cssText = 'flex:1;text-align:right;color:var(--text-muted);font-size:0.85rem;';
+
+ toolbar.appendChild(saveBtn);
+ toolbar.appendChild(dirty);
+ toolbar.appendChild(status);
+ container.appendChild(toolbar);
+
+ var editorHost = document.createElement('div');
+ editorHost.style.cssText = 'flex:1;min-height:0;overflow:hidden;';
+ container.appendChild(editorHost);
+
+ var initialHash = await hashContent(text);
+ var editor = new window.toastui.Editor({
+ el: editorHost,
+ height: '100%',
+ initialEditType: 'markdown',
+ previewStyle: 'vertical',
+ initialValue: text,
+ usageStatistics: false,
+ toolbarItems: [
+ ['heading', 'bold', 'italic', 'strike'],
+ ['hr', 'quote'],
+ ['ul', 'ol', 'task', 'indent', 'outdent'],
+ ['table', 'image', 'link'],
+ ['code', 'codeblock']
+ ]
+ });
+
+ currentInstance = { editor: editor, container: container, dirty: false, node: node, hash: initialHash };
+
+ function markDirty(isDirty) {
+ currentInstance.dirty = isDirty;
+ saveBtn.disabled = !isDirty;
+ dirty.textContent = isDirty ? '● modified' : '';
+ }
+
+ editor.on('change', async function () {
+ var current = editor.getMarkdown();
+ var h = await hashContent(current);
+ markDirty(h !== currentInstance.hash);
+ });
+
+ async function save() {
+ if (!currentInstance.dirty) return;
+ var content = editor.getMarkdown();
+ // Read-only sources: zip-virtual, FS-API without write
+ // permission. For now we only attempt PUT against server URLs;
+ // FS-API saves can be wired in a later iteration via the
+ // existing zddc-source polyfill.
+ if (!node.url || window.app.state.source !== 'server') {
+ status.textContent = 'Save not yet supported for this source.';
+ return;
+ }
+ try {
+ status.textContent = 'Saving…';
+ var resp = await fetch(node.url, {
+ method: 'PUT',
+ headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
+ body: content,
+ credentials: 'same-origin'
+ });
+ if (!resp.ok) {
+ throw new Error('HTTP ' + resp.status);
+ }
+ currentInstance.hash = await hashContent(content);
+ markDirty(false);
+ status.textContent = 'Saved ' + new Date().toLocaleTimeString();
+ } catch (e) {
+ status.textContent = 'Save failed: ' + (e.message || e);
+ }
+ }
+
+ saveBtn.addEventListener('click', save);
+
+ // Ctrl+S / Cmd+S inside the editor → save.
+ container.addEventListener('keydown', function (e) {
+ if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+ e.preventDefault();
+ save();
+ }
+ });
+ }
+
+ window.app.modules.markdown = {
+ render: render,
+ dispose: dispose
+ };
+})();
diff --git a/browse/js/preview.js b/browse/js/preview.js
index 51585ef..d35e0cf 100644
--- a/browse/js/preview.js
+++ b/browse/js/preview.js
@@ -1,11 +1,14 @@
-// preview.js — file preview popup. Reuses shared/preview-lib.js for
-// TIFF, ZIP listing, and image-rendering helpers; native iframe for
-// PDF and HTML; for text; download button for everything else.
+// preview.js — file-preview rendering for the browse tool's right pane.
//
-// Lifecycle: a single popup window is reused across multiple file
-// clicks (state.previewWindow). Subsequent clicks rewrite its
-// contents instead of spawning a new window — same UX as the archive
-// tool.
+// Default flow: showFilePreview(node) renders into the inline preview
+// pane (#previewBody). Popup flow: showFilePreview(node, {popup:true})
+// opens a separate window — kept for users who want previews on a
+// second monitor.
+//
+// Rendering uses shared/preview-lib.js for content types it handles
+// (TIFF, ZIP listing, image-mime detection). PDF / HTML go in iframes;
+// text into a ; markdown into the dedicated markdown plugin
+// (preview-markdown.js); unknown extensions show a download button.
(function () {
'use strict';
@@ -13,9 +16,7 @@
var loader = window.app.modules.loader;
var preview = window.zddc && window.zddc.preview;
if (!preview) {
- // shared/preview-lib.js wasn't concatenated in. Bail loudly so
- // the bug shows up in console rather than mysteriously failing.
- console.error('[browse] zddc.preview not loaded — preview popup disabled.');
+ console.error('[browse] zddc.preview not loaded — preview disabled.');
}
function escapeHtml(s) {
@@ -32,15 +33,22 @@
'zip': 'application/zip',
'txt': 'text/plain', 'md': 'text/markdown', 'json': 'application/json',
'xml': 'application/xml', 'csv': 'text/csv', 'log': 'text/plain',
- 'js': 'text/javascript', 'css': 'text/css'
+ 'js': 'text/javascript', 'css': 'text/css',
+ 'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+ 'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+ 'xls': 'application/vnd.ms-excel'
};
- // Pull bytes for a file node. Three sources:
- // - server URL (zddc-server-backed file, including downloads
- // of archived files served at real paths)
- // - FS-API handle (local folder)
- // - JSZip entry (file inside an expanded zip; reads from
- // parent's cached JSZip instance)
+ function getMime(ext) { return MIME[ext] || 'application/octet-stream'; }
+
+ function fmtSize(bytes) {
+ if (bytes == null) return '';
+ if (bytes < 1024) return bytes + ' B';
+ if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+ if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+ return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
+ }
+
async function getArrayBuffer(node) {
if (node.zipParentId != null) {
var owner = state.nodes.get(node.zipParentId);
@@ -61,13 +69,6 @@
throw new Error('no source for file');
}
- function getMime(ext) {
- return MIME[ext] || 'application/octet-stream';
- }
-
- // Build a blob URL for the file's bytes. For server-mode regular
- // files (not in a zip), prefer the live URL — relative links and
- // server-side interception (e.g. .archive resolution) work then.
async function getBlobUrl(node) {
if (state.source === 'server' && node.url && node.zipParentId == null) {
return { url: node.url, fromServer: true };
@@ -77,14 +78,134 @@
return { url: URL.createObjectURL(blob), fromServer: false };
}
+ // ── Inline rendering ────────────────────────────────────────────────────
+
+ function renderEmpty(container, msg) {
+ container.innerHTML = '' + escapeHtml(msg) + '';
+ }
+
+ function renderError(container, msg) {
+ container.innerHTML = ''
+ + escapeHtml(msg) + '';
+ }
+
+ async function renderInline(node) {
+ var container = document.getElementById('previewBody');
+ var titleEl = document.getElementById('previewTitle');
+ var metaEl = document.getElementById('previewMeta');
+ var popoutBtn = document.getElementById('previewPopout');
+ if (!container) return;
+
+ if (titleEl) titleEl.textContent = node.name;
+ if (metaEl) {
+ var meta = [];
+ if (!node.isDir && !node.isZip) meta.push(fmtSize(node.size));
+ if (node.ext) meta.push(node.ext.toUpperCase());
+ metaEl.textContent = meta.join(' · ');
+ }
+ if (popoutBtn) popoutBtn.classList.remove('hidden');
+
+ var ext = (node.ext || '').toLowerCase();
+
+ // Markdown plugin (if loaded) takes over for .md / .markdown.
+ if ((ext === 'md' || ext === 'markdown') &&
+ window.app.modules.markdown &&
+ typeof window.app.modules.markdown.render === 'function') {
+ try {
+ await window.app.modules.markdown.render(node, container, { getArrayBuffer: getArrayBuffer });
+ } catch (e) {
+ renderError(container, 'Markdown render failed: ' + (e.message || e));
+ }
+ return;
+ }
+
+ // PDF / HTML → iframe.
+ if (ext === 'pdf' || ext === 'html' || ext === 'htm') {
+ try {
+ var info = await getBlobUrl(node);
+ var sandbox = (ext === 'pdf') ? '' : ' sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"';
+ container.innerHTML = '';
+ } catch (e) {
+ renderError(container, e.message || String(e));
+ }
+ return;
+ }
+
+ // Plain images (jpg/png/gif/webp/svg) → ![]()
. TIFF goes through preview-lib.
+ if (preview && preview.isImage(ext) && !preview.isTiff(ext)) {
+ try {
+ var imgInfo = await getBlobUrl(node);
+ container.innerHTML = ' + ')
';
+ } catch (e) {
+ renderError(container, e.message || String(e));
+ }
+ return;
+ }
+
+ if (preview && preview.isTiff(ext)) {
+ try {
+ var tiffBuf = await getArrayBuffer(node);
+ container.innerHTML = '';
+ await preview.renderTiff(document, container, tiffBuf, { fileName: node.name });
+ } catch (e) {
+ renderError(container, 'Failed to render TIFF: ' + (e.message || e));
+ }
+ return;
+ }
+
+ if (preview && preview.isZip(ext)) {
+ try {
+ var zipBuf = await getArrayBuffer(node);
+ container.innerHTML = '';
+ await preview.renderZipListing(document, container, zipBuf, { fileName: node.name });
+ } catch (e) {
+ renderError(container, 'Failed to read ZIP: ' + (e.message || e));
+ }
+ return;
+ }
+
+ if (preview && preview.isText(ext)) {
+ try {
+ var txtBuf = await getArrayBuffer(node);
+ var text = new TextDecoder('utf-8', { fatal: false }).decode(txtBuf);
+ var MAX = 200000;
+ if (text.length > MAX) {
+ text = text.substring(0, MAX) + '\n\n... (truncated, '
+ + (text.length - MAX) + ' more chars)';
+ }
+ container.innerHTML = '';
+ var pre = document.createElement('pre');
+ pre.className = 'preview-text';
+ pre.textContent = text;
+ container.appendChild(pre);
+ } catch (e) {
+ renderError(container, e.message || String(e));
+ }
+ return;
+ }
+
+ // Unknown type — offer a download link.
+ try {
+ var fallbackInfo = await getBlobUrl(node);
+ container.innerHTML =
+ ''
+ + 'No inline preview for .' + escapeHtml(ext) + '. '
+ + '
'
+ + 'Download ' + escapeHtml(node.name) + ''
+ + '';
+ } catch (e) {
+ renderError(container, 'No source for ' + node.name);
+ }
+ }
+
+ // ── Popup window (kept for "Pop out" button) ────────────────────────────
+
function popupShell(node, primaryUrl) {
var safeName = escapeHtml(node.name);
var safeHref = escapeHtml(primaryUrl);
var ext = (node.ext || '').toLowerCase();
- // Inline PDF and HTML previews load in iframes. HTML uses
- // sandbox="allow-same-origin allow-popups
- // allow-popups-to-escape-sandbox" — same posture as archive's
- // preview: links navigate, scripts blocked, popups allowed.
var contentHtml;
if (ext === 'pdf') {
contentHtml = '';
@@ -128,64 +249,47 @@
+ '