Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#1,113 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
72/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

visual-editor
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.

Ngôn ngữ chính
TypeScript
Star
655
Fork
64
Merge trung bình
21 giờ
Pull request đã merge (30 ngày)
45

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của quarto-dev/quarto

Tất cả issue của quarto-dev/quarto

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.