quarto-dev / quarto-dev/quarto

Visual editor: body text font shrinks after toggling outline (Ctrl+Alt+O) and stays shrunk

Open
#1,113 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

visual-editor
Dominant language
TypeScript
Stars
645
Forks
62
Avg merge
17h 42m
Merged PRs (30d)
13

Description

Description

In the Quarto visual editor, opening the outline (Ctrl+Alt+O / Show Outline) shrinks the body text font and it stays shrunk after closing the outline. Code blocks are unaffected.

Environment
  • Positron 1.130.0 (VS Code / Code OSS derivative) on Windows 11
  • Quarto extension: 1.136.0 and 1.137.0 (both reproduce)
  • Setting: quarto.visualEditor.fontSize: 20 (pt rendering ~21.33px)
Steps to reproduce
  1. Open any .qmd document in the Quarto visual editor (body text renders at the configured 16pt/20px).
  2. Open the outline panel (Ctrl+Alt+O or Show Outline button).
  3. Observe: body text shrinks to ~14px (14.4px = body {0.9rem} × 16px inherited).
  4. Close the outline: font stays shrunk (does not recover until document reload / source↔visual toggle).

Code cells (.pm-fixedwidth-font) keep their size in every step.

Root cause (instrumented, confirmed on 1.136.0/1.137.0)

Toggling the outline triggers a re-render of the editor; during that re-render the ProseMirror decoration that applies the .pm-proportional-font class to the body is lost. The CSS rule still exists, but the class is no longer on the element, so body text falls back to the inherited font size (~14px). Code blocks use the independent .pm-fixedwidth-font class which is not dropped, which is why only body text shrinks.

Evidence from a DOM probe around the toggle:

  • before: .pm-proportional-font present, computed font-size 21.33px
  • after: .pm-proportional-font count = 0, computed font-size 14px (CSS rule unchanged)
Expected behavior

Body text font size must not depend on a decoration class surviving re-renders. After toggling the outline (or any layout-affecting UI state change) the font-size decoration should be re-applied, or the proportional font should be styled on a stable element (e.g. the ProseMirror root).

Local workaround (what we ship)

Patch the theme CSS generator so the rule targets the editor root as well:

.pm-proportional-font, .ProseMirror {
  font-family: ${x.proportionalFont} !important;
  font-size: ${x.proportionalFontSizePt}pt !important;
}

This keeps body text at the configured size even when the class is dropped. It works, but it is a stopgap; the decoration-loss bug itself should be fixed upstream.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in the visual editor's theme CSS generator and inspect how the ProseMirror font-size decoration is applied during outline-triggered re-renders. Reproduce the toggle with a configured font size and verify the body font remains unchanged afterward while code blocks remain unaffected. Done means the configured body text size survives opening and closing the outline without reloading the document.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
72/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.