Use buffer size for markdown preview (#29172)

Note:

This is implemented in a very hacky and one-off manner. The primary
change is to pass a rem size through the markdown render tree, and scale
all sizing (rems & pixels) based on the passed in rem size manually.
This required copying in the `CheckBox` component from `ui::CheckBox` to
make it use the manual rem scaling without modifying the `CheckBox`
implementation directly as it is used elsewhere.

A better solution is required, likely involving `window.with_rem_size`
and/or _actual_ `em` units that allow text-size-relative scaling.

Release Notes:

- Made it so Markdown preview uses the _buffer_ font size instead of the
_ui_ font size.

---------

Co-authored-by: Ben Kunkle <ben@zed.dev>
Co-authored-by: Nate Butler <nate@zed.dev>
This commit is contained in:
Mikayla Maki 2025-04-21 16:29:21 -07:00 committed by GitHub
parent 9249919b7a
commit 38afae86a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 230 additions and 27 deletions

View file

@ -11,6 +11,8 @@ use gpui::{
list,
};
use language::LanguageRegistry;
use settings::Settings;
use theme::ThemeSettings;
use ui::prelude::*;
use workspace::item::{Item, ItemHandle};
use workspace::{Pane, Workspace};
@ -185,6 +187,7 @@ impl MarkdownPreviewView {
})
}
});
let block = contents.children.get(ix).unwrap();
let rendered_block = render_markdown_block(block, &mut render_cx);
@ -195,7 +198,9 @@ impl MarkdownPreviewView {
div()
.id(ix)
.when(should_apply_padding, |this| this.pb_3())
.when(should_apply_padding, |this| {
this.pb(render_cx.scaled_rems(0.75))
})
.group("markdown-block")
.on_click(cx.listener(
move |this, event: &ClickEvent, window, cx| {
@ -234,7 +239,11 @@ impl MarkdownPreviewView {
container.child(
div()
.relative()
.child(div().pl_4().child(rendered_block))
.child(
div()
.pl(render_cx.scaled_rems(1.0))
.child(rendered_block),
)
.child(indicator.absolute().left_0().top_0()),
)
})
@ -504,6 +513,8 @@ impl Item for MarkdownPreviewView {
impl Render for MarkdownPreviewView {
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
let buffer_size = ThemeSettings::get_global(cx).buffer_font_size(cx);
let buffer_line_height = ThemeSettings::get_global(cx).buffer_line_height;
v_flex()
.id("MarkdownPreview")
.key_context("MarkdownPreview")
@ -511,6 +522,8 @@ impl Render for MarkdownPreviewView {
.size_full()
.bg(cx.theme().colors().editor_background)
.p_4()
.text_size(buffer_size)
.line_height(relative(buffer_line_height.value()))
.child(
div()
.flex_grow()