feat(preview): unified reading width + outline (TOC) panel#100
Closed
beihai23 wants to merge 1 commit into
Closed
Conversation
Two reading-mode enhancements:
1. Unify preview width into the reading-width control
- Remove the standalone "fill width" toggle; its behavior (fill
viewport + 100% tables + tighter padding) moves into the "full"
step of the existing reading-width slider.
- Split preview now follows reading-width too — .mdv-prose uses the
--mdv-reading-prose-width variable instead of a hardcoded 720px.
- One width control (narrow / comfort / wide / full), effective in
both split and reading modes, persisted.
2. Add a docked table-of-contents (outline) panel for reading mode
- Toggle from the reading-mode title bar or the command palette.
- Reads the rendered headings (each already carries a GitHub-style
slug id from the markdown renderer) and scrolls to the chosen
heading on click. State persisted.
Co-Authored-By: Claude <[email protected]>
Owner
|
LOOKS F-IN GOOD TO ME |
Owner
|
Closing as superseded by #102, which landed the unified reading width/outline work plus the follow-up editor gutter polish. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two small, related reading-mode enhancements. Happy to split into two PRs if you prefer — they only share
app.cssandapp.tsx; the rest of the files are independent.1. Unified reading-width control
The reading-width slider (narrow / comfort / wide / full) previously only affected reading mode — the split preview's
.mdv-prosewas hardcoded tomax-width: 720px. This makes split preview follow the same setting, and repurposes the full step to mean "fill the viewport":.mdv-prosenow usesvar(--mdv-reading-prose-width)instead of720px, so both split and reading modes respect the slider.fulladds anis-reading-width-fullclass →max-width: none,table { width: 100% }, and tighter16pxhorizontal padding (handy for wide multi-column tables).2. Outline (TOC) panel for reading mode
A docked outline panel on the right of the reading view:
show outline/hide outline). State is persisted.h1–h6from the prose article — each heading already carries a GitHub-style slugidfrom the markdown renderer (heading_openrule inmarkdown.ts), so no separate parser is needed.ReadingFind's(open, scope, contentKey)contract so it re-walks fresh DOM after each preview re-render.Verification
bun run build(tsc) ✅bun test— 24/24 ✅🤖 Generated with Claude Code