Skip to main content

markdown/
style.rs

1//! No `theme_settings` crate exists in this workspace, so font
2//! family/size/weight are not read from a settings global; see
3//! `code_editor.rs`'s `CODE_FONT_FAMILY`/`CODE_FONT_SIZE` consts for the
4//! established alternative pattern here: stateless, explicit config instead
5//! of a settings global. [`MarkdownFontConfig`] carries that config
6//! explicitly at construction time; theme *colors*/*syntax* still come from
7//! `cx.theme()` (`boltz-theme`).
8//!
9//! `CodeBlockRenderer` is intentionally not defined here even though it's
10//! visually a "style" concern: its `Custom` variant's
11//! `CodeBlockRenderFn`/`CodeBlockTransformFn` types reference
12//! `ParsedMarkdown`/`AnyDiv`/`Div`, which live in `entity.rs`/`element.rs`.
13
14use std::rc::Rc;
15use std::sync::Arc;
16
17use gpui::{
18    AbsoluteLength, App, BorderStyle, DefiniteLength, EdgesRefinement, FontFallbacks, FontFeatures,
19    FontWeight, Hsla, Length, Pixels, Refineable as _, SharedString, StyleRefinement, TextStyle,
20    TextStyleRefinement, UnderlineStyle, Window, px, rems,
21};
22use pulldown_cmark::BlockQuoteKind;
23use syntax_theme::SyntaxTheme;
24use theme::{ActiveTheme, ThemeColors};
25
26/// A callback function that can be used to customize the style of links
27/// based on the destination URL. If the callback returns `None`, the
28/// default link style will be used.
29type LinkStyleCallback = Rc<dyn Fn(&str, &App) -> Option<TextStyleRefinement>>;
30
31#[derive(Clone, Copy, Default)]
32pub struct BlockQuoteKindColors {
33    pub note: Hsla,
34    pub tip: Hsla,
35    pub important: Hsla,
36    pub warning: Hsla,
37    pub caution: Hsla,
38}
39
40impl BlockQuoteKindColors {
41    pub(crate) fn for_kind(&self, kind: Option<BlockQuoteKind>, default: Hsla) -> Hsla {
42        match kind {
43            Some(BlockQuoteKind::Note) => self.note,
44            Some(BlockQuoteKind::Tip) => self.tip,
45            Some(BlockQuoteKind::Important) => self.important,
46            Some(BlockQuoteKind::Warning) => self.warning,
47            Some(BlockQuoteKind::Caution) => self.caution,
48            None => default,
49        }
50    }
51}
52
53#[derive(Clone, Default)]
54pub struct HeadingLevelStyles {
55    pub h1: Option<TextStyleRefinement>,
56    pub h2: Option<TextStyleRefinement>,
57    pub h3: Option<TextStyleRefinement>,
58    pub h4: Option<TextStyleRefinement>,
59    pub h5: Option<TextStyleRefinement>,
60    pub h6: Option<TextStyleRefinement>,
61}
62
63#[derive(Clone)]
64pub struct MarkdownStyle {
65    pub base_text_style: TextStyle,
66    pub container_style: StyleRefinement,
67    pub code_block: StyleRefinement,
68    pub code_block_overflow_x_scroll: bool,
69    pub inline_code: TextStyleRefinement,
70    pub block_quote: TextStyleRefinement,
71    pub link: TextStyleRefinement,
72    pub link_callback: Option<LinkStyleCallback>,
73    pub rule_color: Hsla,
74    pub block_quote_border_color: Hsla,
75    pub block_quote_kind_colors: BlockQuoteKindColors,
76    pub syntax: Arc<SyntaxTheme>,
77    pub selection_background_color: Hsla,
78    pub heading: StyleRefinement,
79    pub heading_level_styles: Option<HeadingLevelStyles>,
80    pub heading_border_color: Option<Hsla>,
81    pub height_is_multiple_of_line_height: bool,
82    pub prevent_mouse_interaction: bool,
83    pub table_columns_min_size: bool,
84    pub soft_break_as_hard_break: bool,
85}
86
87impl Default for MarkdownStyle {
88    fn default() -> Self {
89        Self {
90            base_text_style: Default::default(),
91            container_style: Default::default(),
92            code_block: Default::default(),
93            code_block_overflow_x_scroll: false,
94            inline_code: Default::default(),
95            block_quote: Default::default(),
96            link: Default::default(),
97            link_callback: None,
98            rule_color: Default::default(),
99            block_quote_border_color: Default::default(),
100            block_quote_kind_colors: Default::default(),
101            syntax: Arc::new(SyntaxTheme::default()),
102            selection_background_color: Default::default(),
103            heading: Default::default(),
104            heading_level_styles: None,
105            heading_border_color: None,
106            height_is_multiple_of_line_height: false,
107            prevent_mouse_interaction: false,
108            table_columns_min_size: false,
109            soft_break_as_hard_break: false,
110        }
111    }
112}
113
114#[derive(Clone, Copy)]
115pub enum MarkdownFont {
116    Agent,
117    Editor,
118    Preview,
119}
120
121/// Explicit font configuration, passed in by the caller instead of read from
122/// a global `ThemeSettings` (no `theme_settings` crate exists in this
123/// workspace — see module docs above).
124#[derive(Clone)]
125pub struct MarkdownFontConfig {
126    pub ui_font_family: SharedString,
127    pub ui_font_fallbacks: Option<FontFallbacks>,
128    pub ui_font_features: FontFeatures,
129    pub ui_font_size: Pixels,
130    pub buffer_font_family: SharedString,
131    pub buffer_font_fallbacks: Option<FontFallbacks>,
132    pub buffer_font_features: FontFeatures,
133    pub buffer_font_weight: FontWeight,
134    pub buffer_font_size: Pixels,
135    pub agent_buffer_font_size: Pixels,
136    pub agent_ui_font_size: Pixels,
137    pub markdown_preview_font_size: Pixels,
138    pub markdown_preview_font_family: SharedString,
139    pub markdown_preview_code_font_family: SharedString,
140}
141
142impl MarkdownStyle {
143    pub fn themed(
144        font: MarkdownFont,
145        fonts: &MarkdownFontConfig,
146        window: &Window,
147        cx: &App,
148    ) -> Self {
149        let colors = cx.theme().colors();
150        let syntax = cx.theme().syntax().clone();
151        Self::themed_with_overrides(font, colors, &syntax, fonts, window, cx)
152    }
153
154    /// Like [`Self::themed`], but takes explicit [`ThemeColors`] and
155    /// [`SyntaxTheme`] so callers (e.g. the markdown preview) can render the
156    /// markdown using a theme other than the active editor theme.
157    pub fn themed_with_overrides(
158        font: MarkdownFont,
159        colors: &ThemeColors,
160        syntax: &Arc<SyntaxTheme>,
161        fonts: &MarkdownFontConfig,
162        window: &Window,
163        cx: &App,
164    ) -> Self {
165        let is_preview = matches!(font, MarkdownFont::Preview);
166
167        let buffer_font_weight = fonts.buffer_font_weight;
168        let (buffer_font_size, ui_font_size) = match font {
169            MarkdownFont::Agent => (fonts.agent_buffer_font_size, fonts.agent_ui_font_size),
170            MarkdownFont::Editor => (fonts.buffer_font_size, fonts.ui_font_size),
171            MarkdownFont::Preview => (fonts.markdown_preview_font_size, fonts.ui_font_size),
172        };
173
174        let body_font_family = if is_preview {
175            fonts.markdown_preview_font_family.clone()
176        } else {
177            fonts.ui_font_family.clone()
178        };
179        let code_font_family = if is_preview {
180            fonts.markdown_preview_code_font_family.clone()
181        } else {
182            fonts.buffer_font_family.clone()
183        };
184
185        let mut text_style = window.text_style();
186        let line_height = buffer_font_size * 1.75;
187
188        text_style.refine(&TextStyleRefinement {
189            font_family: Some(body_font_family),
190            font_fallbacks: fonts.ui_font_fallbacks.clone(),
191            font_features: Some(fonts.ui_font_features.clone()),
192            font_size: Some(if is_preview {
193                rems(1.0).into()
194            } else {
195                ui_font_size.into()
196            }),
197            line_height: Some(line_height.into()),
198            color: Some(colors.text),
199            ..Default::default()
200        });
201
202        let style = MarkdownStyle {
203            base_text_style: text_style.clone(),
204            syntax: syntax.clone(),
205            selection_background_color: colors.element_selection_background,
206            rule_color: colors.border,
207            block_quote_border_color: colors.border,
208            block_quote_kind_colors: {
209                let status = cx.theme().status();
210                BlockQuoteKindColors {
211                    note: status.info,
212                    tip: status.success,
213                    important: status.info,
214                    warning: status.warning,
215                    caution: status.error,
216                }
217            },
218            code_block_overflow_x_scroll: true,
219            code_block: StyleRefinement {
220                padding: EdgesRefinement {
221                    top: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
222                    left: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
223                    right: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
224                    bottom: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
225                },
226                margin: EdgesRefinement {
227                    top: Some(Length::Definite(px(8.).into())),
228                    left: Some(Length::Definite(px(0.).into())),
229                    right: Some(Length::Definite(px(0.).into())),
230                    bottom: Some(Length::Definite(px(12.).into())),
231                },
232                border_style: Some(BorderStyle::Solid),
233                border_widths: EdgesRefinement {
234                    top: Some(AbsoluteLength::Pixels(px(1.))),
235                    left: Some(AbsoluteLength::Pixels(px(1.))),
236                    right: Some(AbsoluteLength::Pixels(px(1.))),
237                    bottom: Some(AbsoluteLength::Pixels(px(1.))),
238                },
239                border_color: Some(colors.border_variant),
240                background: Some(colors.editor_background.into()),
241                text: TextStyleRefinement {
242                    font_family: Some(code_font_family.clone()),
243                    font_fallbacks: fonts.buffer_font_fallbacks.clone(),
244                    font_features: Some(fonts.buffer_font_features.clone()),
245                    font_size: Some(buffer_font_size.into()),
246                    font_weight: Some(buffer_font_weight),
247                    ..Default::default()
248                },
249                ..Default::default()
250            },
251            inline_code: TextStyleRefinement {
252                font_family: Some(code_font_family),
253                font_fallbacks: fonts.buffer_font_fallbacks.clone(),
254                font_features: Some(fonts.buffer_font_features.clone()),
255                font_size: Some(buffer_font_size.into()),
256                font_weight: Some(buffer_font_weight),
257                background_color: Some(colors.editor_foreground.opacity(0.08)),
258                ..Default::default()
259            },
260            link: TextStyleRefinement {
261                background_color: Some(colors.editor_foreground.opacity(0.025)),
262                color: Some(colors.text_accent),
263                underline: Some(UnderlineStyle {
264                    color: Some(colors.text_accent.opacity(0.5)),
265                    thickness: px(1.),
266                    ..Default::default()
267                }),
268                ..Default::default()
269            },
270            soft_break_as_hard_break: matches!(font, MarkdownFont::Agent),
271            heading_level_styles: matches!(font, MarkdownFont::Agent).then_some(
272                HeadingLevelStyles {
273                    h1: Some(TextStyleRefinement {
274                        font_size: Some(rems(1.15).into()),
275                        ..Default::default()
276                    }),
277                    h2: Some(TextStyleRefinement {
278                        font_size: Some(rems(1.1).into()),
279                        ..Default::default()
280                    }),
281                    h3: Some(TextStyleRefinement {
282                        font_size: Some(rems(1.05).into()),
283                        ..Default::default()
284                    }),
285                    h4: Some(TextStyleRefinement {
286                        font_size: Some(rems(1.).into()),
287                        ..Default::default()
288                    }),
289                    h5: Some(TextStyleRefinement {
290                        font_size: Some(rems(0.95).into()),
291                        ..Default::default()
292                    }),
293                    h6: Some(TextStyleRefinement {
294                        font_size: Some(rems(0.875).into()),
295                        ..Default::default()
296                    }),
297                },
298            ),
299            ..Default::default()
300        };
301
302        if is_preview {
303            style.with_preview_overrides(colors)
304        } else {
305            style
306        }
307    }
308
309    fn with_preview_overrides(mut self, colors: &ThemeColors) -> Self {
310        let body_font_size = rems(0.92);
311        self.base_text_style.font_size = body_font_size.into();
312        self.container_style.text.font_size = Some(body_font_size.into());
313
314        self.base_text_style.color = colors.text_muted.blend(colors.text.opacity(0.25));
315        self.inline_code.color = Some(colors.text);
316        self.heading.text.color = Some(colors.text);
317
318        self.heading_level_styles = Some(HeadingLevelStyles {
319            h1: Some(TextStyleRefinement {
320                font_size: Some(rems(1.45).into()),
321                ..Default::default()
322            }),
323            h2: Some(TextStyleRefinement {
324                font_size: Some(rems(1.3).into()),
325                ..Default::default()
326            }),
327            h3: Some(TextStyleRefinement {
328                font_size: Some(rems(1.1).into()),
329                ..Default::default()
330            }),
331            h4: Some(TextStyleRefinement {
332                font_size: Some(rems(1.01).into()),
333                ..Default::default()
334            }),
335            h5: Some(TextStyleRefinement {
336                font_size: Some(rems(0.95).into()),
337                ..Default::default()
338            }),
339            h6: Some(TextStyleRefinement {
340                font_size: Some(rems(0.85).into()),
341                ..Default::default()
342            }),
343        });
344
345        self.heading_border_color = Some(colors.border_variant);
346
347        self
348    }
349
350    pub fn with_buffer_font(mut self, fonts: &MarkdownFontConfig) -> Self {
351        self.base_text_style.font_family = fonts.buffer_font_family.clone();
352        self.base_text_style.font_fallbacks = fonts.buffer_font_fallbacks.clone();
353        self.base_text_style.font_features = fonts.buffer_font_features.clone();
354        self.base_text_style.font_weight = fonts.buffer_font_weight;
355        self
356    }
357
358    pub fn with_muted_text(mut self, cx: &App) -> Self {
359        let colors = cx.theme().colors();
360        self.base_text_style.color = colors.text_muted;
361        self
362    }
363}
364
365#[derive(Clone, Copy, PartialEq, Eq)]
366pub enum CopyButtonVisibility {
367    Hidden,
368    AlwaysVisible,
369    VisibleOnHover,
370}
371
372#[derive(Debug, Clone, Copy, PartialEq, Eq)]
373pub enum WrapButtonVisibility {
374    Hidden,
375    AlwaysVisible,
376    VisibleOnHover,
377}