Skip to content

vscode: in-preview typography controls (zoom) for the Codev Markdown Preview #1070

@amrmelsayed

Description

@amrmelsayed

Problem

#1053 added a typography token tier to the Codev Markdown Preview (artifact canvas) plus two user settings — codev.markdownPreview.fontSize and codev.markdownPreview.lineHeight — that adjust the preview's prose without moving the rest of the IDE chrome (unlike global workbench zoom or the UI font setting).

But the only way to change them today is through VSCode's Settings editor (Cmd+, → search "Codev Markdown Preview") or settings.json. A reviewer reading a long spec has to leave the preview, open Settings, and type a number. There is no control inside the preview itself.

This is the discoverable-affordance gap: VSCode's built-in markdown preview, and browsers (Cmd+ / Cmd-), expose zoom directly on the surface being read.

Proposal

Add an in-preview control for the typography knobs #1053 already wired:

  • A small toolbar affordance in the preview (zoom + / , and a reset), and/or a command-palette command (Codev: Increase/Decrease Markdown Preview Font Size) with optional keybindings.
  • The control adjusts codev.markdownPreview.fontSize (and possibly lineHeight) and persists the value back to the setting, so the in-preview control and the Settings editor stay the single source of truth.
  • Reuse the existing live-reflow path (onDidChangeConfiguration re-render in preview-provider.ts), so a control change reflows immediately.

Scope notes

  • The tokens and settings already exist (vscode: typography tokens for the Codev Markdown Preview (artifact canvas) #1053) — this issue is purely the UI affordance + write-back, not new theming.
  • Decide: webview toolbar buttons (needs a webview→host message for the +/− intent) vs. command-palette commands (simpler, no webview chrome) vs. both.
  • Consider whether the control should widen to the other typography tokens (paragraph spacing, prose width, heading scale) or stay font-size/line-height only.

Related

Metadata

Metadata

Assignees

Labels

area/vscodeArea: VS Code extension

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions