ZDDC
cb2cf1ebe3
The previous nested-flexbox layout produced indeterminate heights
inside the Toast UI editor host and made the TOC pane width fragile —
visually the editor and outline weren't laying out reliably. This
swaps the whole shell to CSS Grid, which gives every cell a definite
size.
Layout:
┌──────────────────────────────────────────────────────────────┐
│ toolbar (Save | ● modified | status | source) │
├─────────────────────────────────────┬────────────────────────┤
│ │ Outline │
│ Toast UI Editor │ • Heading 1 │
│ (md / wysiwyg / preview) │ • Subheading │
│ ├────────────────────────┤
│ │ Front matter │
│ │ title: … rev: … │
└─────────────────────────────────────┴────────────────────────┘
Notes:
- The shell mounts as a single child of #previewBody (not by
re-classing previewBody itself), so the outer flex layout that
fills the preview pane is preserved.
- Sidebar is its own grid (outline 1fr + front-matter auto/max 40%),
each section independently scrollable.
- Resizer is a 6 px element on the grid column boundary; drag
updates grid-template-columns. Keyboard left/right adjust by 24 px.
Width persists across mounts (lastTocWidth) within a session.
- parseHeadings now skips front-matter envelope + fenced code so a
"##" inside ```bash``` doesn't show up as an outline entry.
- scrollEditorToHeading uses findScrollParent + scrollTo({behavior:
'smooth'}) so jumps feel less jarring.
- Class names follow BEM: .md-shell__*, .md-side__*, .md-toc__*,
.md-fm__*. Tests updated to the new selectors.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
||
|---|---|---|
| .. | ||
| data | ||
| fixtures | ||
| lib | ||
| archive-cascade.spec.js | ||
| archive.spec.js | ||
| browse.spec.js | ||
| build-label.spec.js | ||
| classifier.spec.js | ||
| form-safety.spec.js | ||
| landing.spec.js | ||
| logo.spec.js | ||
| mdedit.spec.js | ||
| nav.spec.js | ||
| schema.spec.js | ||
| tables.spec.js | ||
| toast.spec.js | ||
| tokens.spec.js | ||
| transmittal-drag-drop.spec.js | ||
| transmittal-init-check.spec.js | ||
| transmittal.spec.js | ||
| zddc-filter.spec.js | ||
| zddc-source.spec.js | ||
| zddc.spec.js | ||