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

- 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

View file

@ -249,6 +249,7 @@ body {
content's natural size (which clips the content's natural size (which clips the
YAML editor's bottom when there are many YAML editor's bottom when there are many
lines, even with the editor's own scroll) */ lines, even with the editor's own scroll) */
min-width: 0;
overflow: auto; overflow: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -256,10 +257,16 @@ body {
} }
/* The body's children fill the available space. Plugins inject /* 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 > * { .preview-pane__body > * {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
min-width: 0;
} }
.preview-empty { .preview-empty {

View file

@ -485,6 +485,25 @@
} }
async function renderInPopup(node) { 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; var info;
try { try {
info = await getBlobUrl(node); info = await getBlobUrl(node);