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

fix(browse): markdown editor shrinks instead of overhanging; pop out opens the real editor

Browse source 
- Overflow: the preview pane's child (the markdown shell) was a flex item with
  the default min-width:auto, so the editor's wide internal min-content pushed
  the whole pane past the viewport's right edge. Add min-width:0 on
  .preview-pane__body and its children so the editor shrinks (and its own +
  the grid's minmax(0) scrolling takes over) — the pane never overhangs.
- Pop out: editor-type files (markdown, yaml/.zddc, code text) were popped into
  the lightweight preview window, which can't host the bundled editor — so
  markdown showed as raw <pre>. Now they open the FULL browse app deep-linked
  to the file (<dir>?file=<name>) in a new window, loading the real editor.
  HTML keeps its rendered popup; images/pdf/office unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
ZDDC 2026-06-08 11:56:36 -05:00
parent af16b14a52
commit 49e8ea4b4f
2 changed files with 27 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
browse/css/tree.css
View file

@ -249,6 +249,7 @@ body {
content's natural size (which clips the
YAML editor's bottom when there are many
lines, even with the editor's own scroll) */
min-width: 0;
overflow: auto;
display: flex;
flex-direction: column;
@ -256,10 +257,16 @@ body {
}
/* The body's children fill the available space. Plugins inject
different content here — img, iframe, pre, custom markdown editor. */
different content here — img, iframe, pre, custom markdown editor.
min-width:0 is load-bearing: a flex item defaults to min-width:auto
(its min-content width), so the markdown editor's wide internal
min-content would push the whole pane past the viewport's right edge
instead of shrinking. With min-width:0 the editor shrinks and its own
(and the grid's minmax(0)) scrolling takes over. */
.preview-pane__body > * {
flex: 1;
min-height: 0;
min-width: 0;
}
.preview-empty {

19
browse/js/preview.js
View file

@ -485,6 +485,25 @@
}
async function renderInPopup(node) {
// Editor-type files (markdown, yaml/.zddc, code text) can't be hosted
// in the lightweight popup window — they need the bundled editor. Pop
// them out as the FULL browse app deep-linked to the file, which loads
// the real editor in a new window. Server mode only; HTML keeps its
// rendered popup. Falls through to the lightweight popup otherwise.
var pext = (node.ext || '').toLowerCase();
var ym = window.app.modules.yamledit;
var isEditorType = pext === 'md' || pext === 'markdown'
|| (ym && ym.handles && ym.handles(node) && pext !== 'html' && pext !== 'htm');
if (isEditorType && window.app.state.source === 'server' && node.url) {
var slash = node.url.lastIndexOf('/');
var pdir = slash >= 0 ? node.url.slice(0, slash + 1) : '/';
var pbase = slash >= 0 ? node.url.slice(slash + 1) : node.url;
var pp = new URLSearchParams();
try { pp.set('file', decodeURIComponent(pbase)); } catch (_e) { pp.set('file', pbase); }
if (window.app.state.showHidden) pp.set('hidden', '1');
window.open(pdir + '?' + pp.toString(), '_blank', 'noopener');
return;
}
var info;
try {
info = await getBlobUrl(node);