1pub mod html;
2mod mermaid;
3pub mod parser;
4mod path_range;
5
6use base64::Engine as _;
7use futures::FutureExt as _;
8use gpui::EdgesRefinement;
9use gpui::HitboxBehavior;
10use gpui::UnderlineStyle;
11use language::LanguageName;
12
13use log::Level;
14use mermaid::{
15 MermaidState, ParsedMarkdownMermaidDiagram, extract_mermaid_diagrams, render_mermaid_diagram,
16};
17pub use path_range::{LineCol, PathWithRange};
18use settings::Settings as _;
19use theme_settings::ThemeSettings;
20use ui::Checkbox;
21use ui::CopyButton;
22
23use std::borrow::Cow;
24use std::collections::BTreeMap;
25use std::iter;
26use std::mem;
27use std::ops::Range;
28use std::path::Path;
29use std::rc::Rc;
30use std::sync::Arc;
31use std::time::Duration;
32
33use collections::{HashMap, HashSet};
34use gpui::{
35 AnyElement, App, BorderStyle, Bounds, ClipboardItem, CursorStyle, DispatchPhase, Edges, Entity,
36 FocusHandle, Focusable, FontStyle, FontWeight, GlobalElementId, Hitbox, Hsla, Image,
37 ImageFormat, ImageSource, KeyContext, Length, MouseButton, MouseDownEvent, MouseEvent,
38 MouseMoveEvent, MouseUpEvent, Point, ScrollHandle, Stateful, StrikethroughStyle,
39 StyleRefinement, StyledText, Task, TextAlign, TextLayout, TextRun, TextStyle,
40 TextStyleRefinement, actions, img, point, quad,
41};
42use language::{CharClassifier, Language, LanguageRegistry, Rope};
43use parser::CodeBlockMetadata;
44use parser::{
45 MarkdownEvent, MarkdownTag, MarkdownTagEnd, parse_links_only, parse_markdown_with_options,
46};
47use pulldown_cmark::Alignment;
48use sum_tree::TreeMap;
49use theme::SyntaxTheme;
50use ui::{ScrollAxes, Scrollbars, WithScrollbar, prelude::*};
51use util::ResultExt;
52
53use crate::parser::CodeBlockKind;
54
55/// A callback function that can be used to customize the style of links based on the destination URL.
56/// If the callback returns `None`, the default link style will be used.
57type LinkStyleCallback = Rc<dyn Fn(&str, &App) -> Option<TextStyleRefinement>>;
58type SourceClickCallback = Box<dyn Fn(usize, usize, &mut Window, &mut App) -> bool>;
59type CheckboxToggleCallback = Rc<dyn Fn(Range<usize>, bool, &mut Window, &mut App)>;
60/// Defines custom style refinements for each heading level (H1-H6)
61#[derive(Clone, Default)]
62pub struct HeadingLevelStyles {
63 pub h1: Option<TextStyleRefinement>,
64 pub h2: Option<TextStyleRefinement>,
65 pub h3: Option<TextStyleRefinement>,
66 pub h4: Option<TextStyleRefinement>,
67 pub h5: Option<TextStyleRefinement>,
68 pub h6: Option<TextStyleRefinement>,
69}
70
71#[derive(Clone)]
72pub struct MarkdownStyle {
73 pub base_text_style: TextStyle,
74 pub container_style: StyleRefinement,
75 pub code_block: StyleRefinement,
76 pub code_block_overflow_x_scroll: bool,
77 pub inline_code: TextStyleRefinement,
78 pub block_quote: TextStyleRefinement,
79 pub link: TextStyleRefinement,
80 pub link_callback: Option<LinkStyleCallback>,
81 pub rule_color: Hsla,
82 pub block_quote_border_color: Hsla,
83 pub syntax: Arc<SyntaxTheme>,
84 pub selection_background_color: Hsla,
85 pub heading: StyleRefinement,
86 pub heading_level_styles: Option<HeadingLevelStyles>,
87 pub height_is_multiple_of_line_height: bool,
88 pub prevent_mouse_interaction: bool,
89 pub table_columns_min_size: bool,
90}
91
92impl Default for MarkdownStyle {
93 fn default() -> Self {
94 Self {
95 base_text_style: Default::default(),
96 container_style: Default::default(),
97 code_block: Default::default(),
98 code_block_overflow_x_scroll: false,
99 inline_code: Default::default(),
100 block_quote: Default::default(),
101 link: Default::default(),
102 link_callback: None,
103 rule_color: Default::default(),
104 block_quote_border_color: Default::default(),
105 syntax: Arc::new(SyntaxTheme::default()),
106 selection_background_color: Default::default(),
107 heading: Default::default(),
108 heading_level_styles: None,
109 height_is_multiple_of_line_height: false,
110 prevent_mouse_interaction: false,
111 table_columns_min_size: false,
112 }
113 }
114}
115
116pub enum MarkdownFont {
117 Agent,
118 Editor,
119}
120
121impl MarkdownStyle {
122 pub fn themed(font: MarkdownFont, window: &Window, cx: &App) -> Self {
123 let theme_settings = ThemeSettings::get_global(cx);
124 let colors = cx.theme().colors();
125
126 let buffer_font_weight = theme_settings.buffer_font.weight;
127 let (buffer_font_size, ui_font_size) = match font {
128 MarkdownFont::Agent => (
129 theme_settings.agent_buffer_font_size(cx),
130 theme_settings.agent_ui_font_size(cx),
131 ),
132 MarkdownFont::Editor => (
133 theme_settings.buffer_font_size(cx),
134 theme_settings.ui_font_size(cx),
135 ),
136 };
137
138 let text_color = colors.text;
139
140 let mut text_style = window.text_style();
141 let line_height = buffer_font_size * 1.75;
142
143 text_style.refine(&TextStyleRefinement {
144 font_family: Some(theme_settings.ui_font.family.clone()),
145 font_fallbacks: theme_settings.ui_font.fallbacks.clone(),
146 font_features: Some(theme_settings.ui_font.features.clone()),
147 font_size: Some(ui_font_size.into()),
148 line_height: Some(line_height.into()),
149 color: Some(text_color),
150 ..Default::default()
151 });
152
153 MarkdownStyle {
154 base_text_style: text_style.clone(),
155 syntax: cx.theme().syntax().clone(),
156 selection_background_color: colors.element_selection_background,
157 rule_color: colors.border,
158 block_quote_border_color: colors.border,
159 code_block_overflow_x_scroll: true,
160 heading_level_styles: Some(HeadingLevelStyles {
161 h1: Some(TextStyleRefinement {
162 font_size: Some(rems(1.15).into()),
163 ..Default::default()
164 }),
165 h2: Some(TextStyleRefinement {
166 font_size: Some(rems(1.1).into()),
167 ..Default::default()
168 }),
169 h3: Some(TextStyleRefinement {
170 font_size: Some(rems(1.05).into()),
171 ..Default::default()
172 }),
173 h4: Some(TextStyleRefinement {
174 font_size: Some(rems(1.).into()),
175 ..Default::default()
176 }),
177 h5: Some(TextStyleRefinement {
178 font_size: Some(rems(0.95).into()),
179 ..Default::default()
180 }),
181 h6: Some(TextStyleRefinement {
182 font_size: Some(rems(0.875).into()),
183 ..Default::default()
184 }),
185 }),
186 code_block: StyleRefinement {
187 padding: EdgesRefinement {
188 top: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
189 left: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
190 right: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
191 bottom: Some(DefiniteLength::Absolute(AbsoluteLength::Pixels(px(8.)))),
192 },
193 margin: EdgesRefinement {
194 top: Some(Length::Definite(px(8.).into())),
195 left: Some(Length::Definite(px(0.).into())),
196 right: Some(Length::Definite(px(0.).into())),
197 bottom: Some(Length::Definite(px(12.).into())),
198 },
199 border_style: Some(BorderStyle::Solid),
200 border_widths: EdgesRefinement {
201 top: Some(AbsoluteLength::Pixels(px(1.))),
202 left: Some(AbsoluteLength::Pixels(px(1.))),
203 right: Some(AbsoluteLength::Pixels(px(1.))),
204 bottom: Some(AbsoluteLength::Pixels(px(1.))),
205 },
206 border_color: Some(colors.border_variant),
207 background: Some(colors.editor_background.into()),
208 text: TextStyleRefinement {
209 font_family: Some(theme_settings.buffer_font.family.clone()),
210 font_fallbacks: theme_settings.buffer_font.fallbacks.clone(),
211 font_features: Some(theme_settings.buffer_font.features.clone()),
212 font_size: Some(buffer_font_size.into()),
213 font_weight: Some(buffer_font_weight),
214 ..Default::default()
215 },
216 ..Default::default()
217 },
218 inline_code: TextStyleRefinement {
219 font_family: Some(theme_settings.buffer_font.family.clone()),
220 font_fallbacks: theme_settings.buffer_font.fallbacks.clone(),
221 font_features: Some(theme_settings.buffer_font.features.clone()),
222 font_size: Some(buffer_font_size.into()),
223 font_weight: Some(buffer_font_weight),
224 background_color: Some(colors.editor_foreground.opacity(0.08)),
225 ..Default::default()
226 },
227 link: TextStyleRefinement {
228 background_color: Some(colors.editor_foreground.opacity(0.025)),
229 color: Some(colors.text_accent),
230 underline: Some(UnderlineStyle {
231 color: Some(colors.text_accent.opacity(0.5)),
232 thickness: px(1.),
233 ..Default::default()
234 }),
235 ..Default::default()
236 },
237 ..Default::default()
238 }
239 }
240
241 pub fn with_muted_text(mut self, cx: &App) -> Self {
242 let colors = cx.theme().colors();
243 self.base_text_style.color = colors.text_muted;
244 self
245 }
246}
247
248pub struct Markdown {
249 source: SharedString,
250 selection: Selection,
251 pressed_link: Option<RenderedLink>,
252 autoscroll_request: Option<usize>,
253 active_root_block: Option<usize>,
254 parsed_markdown: ParsedMarkdown,
255 images_by_source_offset: HashMap<usize, Arc<Image>>,
256 should_reparse: bool,
257 pending_parse: Option<Task<()>>,
258 focus_handle: FocusHandle,
259 language_registry: Option<Arc<LanguageRegistry>>,
260 fallback_code_block_language: Option<LanguageName>,
261 options: MarkdownOptions,
262 mermaid_state: MermaidState,
263 copied_code_blocks: HashSet<ElementId>,
264 code_block_scroll_handles: BTreeMap<usize, ScrollHandle>,
265 context_menu_selected_text: Option<String>,
266 search_highlights: Vec<Range<usize>>,
267 active_search_highlight: Option<usize>,
268}
269
270#[derive(Clone, Copy, Default)]
271pub struct MarkdownOptions {
272 pub parse_links_only: bool,
273 pub parse_html: bool,
274 pub render_mermaid_diagrams: bool,
275 pub parse_heading_slugs: bool,
276}
277
278#[derive(Clone, Copy, PartialEq, Eq)]
279pub enum CopyButtonVisibility {
280 Hidden,
281 AlwaysVisible,
282 VisibleOnHover,
283}
284
285pub enum CodeBlockRenderer {
286 Default {
287 copy_button_visibility: CopyButtonVisibility,
288 border: bool,
289 },
290 Custom {
291 render: CodeBlockRenderFn,
292 /// A function that can modify the parent container after the code block
293 /// content has been appended as a child element.
294 transform: Option<CodeBlockTransformFn>,
295 },
296}
297
298pub type CodeBlockRenderFn = Arc<
299 dyn Fn(
300 &CodeBlockKind,
301 &ParsedMarkdown,
302 Range<usize>,
303 CodeBlockMetadata,
304 &mut Window,
305 &App,
306 ) -> Div,
307>;
308
309pub type CodeBlockTransformFn =
310 Arc<dyn Fn(AnyDiv, Range<usize>, CodeBlockMetadata, &mut Window, &App) -> AnyDiv>;
311
312actions!(
313 markdown,
314 [
315 /// Copies the selected text to the clipboard.
316 Copy,
317 /// Copies the selected text as markdown to the clipboard.
318 CopyAsMarkdown
319 ]
320);
321
322enum EscapeAction {
323 PassThrough,
324 Nbsp(usize),
325 DoubleNewline,
326 PrefixBackslash,
327}
328
329impl EscapeAction {
330 fn output_len(&self) -> usize {
331 match self {
332 Self::PassThrough => 1,
333 Self::Nbsp(count) => count * '\u{00A0}'.len_utf8(),
334 Self::DoubleNewline => 2,
335 Self::PrefixBackslash => 2,
336 }
337 }
338
339 fn write_to(&self, c: char, output: &mut String) {
340 match self {
341 Self::PassThrough => output.push(c),
342 Self::Nbsp(count) => {
343 for _ in 0..*count {
344 output.push('\u{00A0}');
345 }
346 }
347 Self::DoubleNewline => {
348 output.push('\n');
349 output.push('\n');
350 }
351 Self::PrefixBackslash => {
352 // '\\' is a single backslash in Rust, e.g. '|' -> '\|'
353 output.push('\\');
354 output.push(c);
355 }
356 }
357 }
358}
359
360// Valid to operate on raw bytes since multi-byte UTF-8
361// sequences never contain ASCII-range bytes.
362struct MarkdownEscaper {
363 in_leading_whitespace: bool,
364}
365
366impl MarkdownEscaper {
367 const TAB_SIZE: usize = 4;
368
369 fn new() -> Self {
370 Self {
371 in_leading_whitespace: true,
372 }
373 }
374
375 fn next(&mut self, byte: u8) -> EscapeAction {
376 let action = if self.in_leading_whitespace && byte == b'\t' {
377 EscapeAction::Nbsp(Self::TAB_SIZE)
378 } else if self.in_leading_whitespace && byte == b' ' {
379 EscapeAction::Nbsp(1)
380 } else if byte == b'\n' {
381 EscapeAction::DoubleNewline
382 } else if byte.is_ascii_punctuation() {
383 EscapeAction::PrefixBackslash
384 } else {
385 EscapeAction::PassThrough
386 };
387
388 self.in_leading_whitespace =
389 byte == b'\n' || (self.in_leading_whitespace && (byte == b' ' || byte == b'\t'));
390 action
391 }
392}
393
394impl Markdown {
395 pub fn new(
396 source: SharedString,
397 language_registry: Option<Arc<LanguageRegistry>>,
398 fallback_code_block_language: Option<LanguageName>,
399 cx: &mut Context<Self>,
400 ) -> Self {
401 Self::new_with_options(
402 source,
403 language_registry,
404 fallback_code_block_language,
405 MarkdownOptions::default(),
406 cx,
407 )
408 }
409
410 pub fn new_with_options(
411 source: SharedString,
412 language_registry: Option<Arc<LanguageRegistry>>,
413 fallback_code_block_language: Option<LanguageName>,
414 options: MarkdownOptions,
415 cx: &mut Context<Self>,
416 ) -> Self {
417 let focus_handle = cx.focus_handle();
418 let mut this = Self {
419 source,
420 selection: Selection::default(),
421 pressed_link: None,
422 autoscroll_request: None,
423 active_root_block: None,
424 should_reparse: false,
425 images_by_source_offset: Default::default(),
426 parsed_markdown: ParsedMarkdown::default(),
427 pending_parse: None,
428 focus_handle,
429 language_registry,
430 fallback_code_block_language,
431 options,
432 mermaid_state: MermaidState::default(),
433 copied_code_blocks: HashSet::default(),
434 code_block_scroll_handles: BTreeMap::default(),
435 context_menu_selected_text: None,
436 search_highlights: Vec::new(),
437 active_search_highlight: None,
438 };
439 this.parse(cx);
440 this
441 }
442
443 pub fn new_text(source: SharedString, cx: &mut Context<Self>) -> Self {
444 Self::new_with_options(
445 source,
446 None,
447 None,
448 MarkdownOptions {
449 parse_links_only: true,
450 ..Default::default()
451 },
452 cx,
453 )
454 }
455
456 fn code_block_scroll_handle(&mut self, id: usize) -> ScrollHandle {
457 self.code_block_scroll_handles
458 .entry(id)
459 .or_insert_with(ScrollHandle::new)
460 .clone()
461 }
462
463 fn retain_code_block_scroll_handles(&mut self, ids: &HashSet<usize>) {
464 self.code_block_scroll_handles
465 .retain(|id, _| ids.contains(id));
466 }
467
468 fn clear_code_block_scroll_handles(&mut self) {
469 self.code_block_scroll_handles.clear();
470 }
471
472 fn autoscroll_code_block(&self, source_index: usize, cursor_position: Point<Pixels>) {
473 let Some((_, scroll_handle)) = self
474 .code_block_scroll_handles
475 .range(..=source_index)
476 .next_back()
477 else {
478 return;
479 };
480
481 let bounds = scroll_handle.bounds();
482 if cursor_position.y < bounds.top() || cursor_position.y > bounds.bottom() {
483 return;
484 }
485
486 let horizontal_delta = if cursor_position.x < bounds.left() {
487 bounds.left() - cursor_position.x
488 } else if cursor_position.x > bounds.right() {
489 bounds.right() - cursor_position.x
490 } else {
491 return;
492 };
493
494 let offset = scroll_handle.offset();
495 scroll_handle.set_offset(point(offset.x + horizontal_delta, offset.y));
496 }
497
498 pub fn is_parsing(&self) -> bool {
499 self.pending_parse.is_some()
500 }
501
502 pub fn scroll_to_heading(&mut self, slug: &str, cx: &mut Context<Self>) -> Option<usize> {
503 if let Some(source_index) = self.parsed_markdown.heading_slugs.get(slug).copied() {
504 self.autoscroll_request = Some(source_index);
505 cx.notify();
506 Some(source_index)
507 } else {
508 None
509 }
510 }
511
512 pub fn source(&self) -> &str {
513 &self.source
514 }
515
516 pub fn append(&mut self, text: &str, cx: &mut Context<Self>) {
517 self.source = SharedString::new(self.source.to_string() + text);
518 self.parse(cx);
519 }
520
521 pub fn replace(&mut self, source: impl Into<SharedString>, cx: &mut Context<Self>) {
522 self.source = source.into();
523 self.parse(cx);
524 }
525
526 pub fn request_autoscroll_to_source_index(
527 &mut self,
528 source_index: usize,
529 cx: &mut Context<Self>,
530 ) {
531 self.autoscroll_request = Some(source_index);
532 cx.refresh_windows();
533 }
534
535 pub fn set_active_root_for_source_index(
536 &mut self,
537 source_index: Option<usize>,
538 cx: &mut Context<Self>,
539 ) {
540 let active_root_block =
541 source_index.and_then(|index| self.parsed_markdown.root_block_for_source_index(index));
542 if self.active_root_block == active_root_block {
543 return;
544 }
545
546 self.active_root_block = active_root_block;
547 cx.notify();
548 }
549
550 pub fn reset(&mut self, source: SharedString, cx: &mut Context<Self>) {
551 if source == self.source() {
552 return;
553 }
554 self.source = source;
555 self.selection = Selection::default();
556 self.autoscroll_request = None;
557 self.pending_parse = None;
558 self.should_reparse = false;
559 self.search_highlights.clear();
560 self.active_search_highlight = None;
561 // Don't clear parsed_markdown here - keep existing content visible until new parse completes
562 self.parse(cx);
563 }
564
565 #[cfg(any(test, feature = "test-support"))]
566 pub fn parsed_markdown(&self) -> &ParsedMarkdown {
567 &self.parsed_markdown
568 }
569
570 pub fn escape(s: &str) -> Cow<'_, str> {
571 let output_len: usize = {
572 let mut escaper = MarkdownEscaper::new();
573 s.bytes().map(|byte| escaper.next(byte).output_len()).sum()
574 };
575
576 if output_len == s.len() {
577 return s.into();
578 }
579
580 let mut escaper = MarkdownEscaper::new();
581 let mut output = String::with_capacity(output_len);
582 for c in s.chars() {
583 escaper.next(c as u8).write_to(c, &mut output);
584 }
585 output.into()
586 }
587
588 pub fn selected_text(&self) -> Option<String> {
589 if self.selection.end <= self.selection.start {
590 None
591 } else {
592 Some(self.source[self.selection.start..self.selection.end].to_string())
593 }
594 }
595
596 pub fn set_search_highlights(
597 &mut self,
598 highlights: Vec<Range<usize>>,
599 active: Option<usize>,
600 cx: &mut Context<Self>,
601 ) {
602 self.search_highlights = highlights;
603 self.active_search_highlight = active;
604 cx.notify();
605 }
606
607 pub fn clear_search_highlights(&mut self, cx: &mut Context<Self>) {
608 if !self.search_highlights.is_empty() || self.active_search_highlight.is_some() {
609 self.search_highlights.clear();
610 self.active_search_highlight = None;
611 cx.notify();
612 }
613 }
614
615 pub fn set_active_search_highlight(&mut self, active: Option<usize>, cx: &mut Context<Self>) {
616 if self.active_search_highlight != active {
617 self.active_search_highlight = active;
618 cx.notify();
619 }
620 }
621
622 pub fn search_highlights(&self) -> &[Range<usize>] {
623 &self.search_highlights
624 }
625
626 pub fn active_search_highlight(&self) -> Option<usize> {
627 self.active_search_highlight
628 }
629
630 fn copy(&self, text: &RenderedText, _: &mut Window, cx: &mut Context<Self>) {
631 if self.selection.end <= self.selection.start {
632 return;
633 }
634 let text = text.text_for_range(self.selection.start..self.selection.end);
635 cx.write_to_clipboard(ClipboardItem::new_string(text));
636 }
637
638 fn copy_as_markdown(&mut self, _: &mut Window, cx: &mut Context<Self>) {
639 if let Some(text) = self.context_menu_selected_text.take() {
640 cx.write_to_clipboard(ClipboardItem::new_string(text));
641 return;
642 }
643 if self.selection.end <= self.selection.start {
644 return;
645 }
646 let text = self.source[self.selection.start..self.selection.end].to_string();
647 cx.write_to_clipboard(ClipboardItem::new_string(text));
648 }
649
650 fn capture_selection_for_context_menu(&mut self) {
651 self.context_menu_selected_text = self.selected_text();
652 }
653
654 fn parse(&mut self, cx: &mut Context<Self>) {
655 if self.source.is_empty() {
656 self.should_reparse = false;
657 self.pending_parse.take();
658 self.parsed_markdown = ParsedMarkdown {
659 source: self.source.clone(),
660 ..Default::default()
661 };
662 self.active_root_block = None;
663 self.images_by_source_offset.clear();
664 self.mermaid_state.clear();
665 cx.notify();
666 cx.refresh_windows();
667 return;
668 }
669
670 if self.pending_parse.is_some() {
671 self.should_reparse = true;
672 return;
673 }
674 self.should_reparse = false;
675 self.pending_parse = Some(self.start_background_parse(cx));
676 }
677
678 fn start_background_parse(&self, cx: &Context<Self>) -> Task<()> {
679 let source = self.source.clone();
680 let should_parse_links_only = self.options.parse_links_only;
681 let should_parse_html = self.options.parse_html;
682 let should_render_mermaid_diagrams = self.options.render_mermaid_diagrams;
683 let should_parse_heading_slugs = self.options.parse_heading_slugs;
684 let language_registry = self.language_registry.clone();
685 let fallback = self.fallback_code_block_language.clone();
686
687 let parsed = cx.background_spawn(async move {
688 if should_parse_links_only {
689 return (
690 ParsedMarkdown {
691 events: Arc::from(parse_links_only(source.as_ref())),
692 source,
693 languages_by_name: TreeMap::default(),
694 languages_by_path: TreeMap::default(),
695 root_block_starts: Arc::default(),
696 html_blocks: BTreeMap::default(),
697 mermaid_diagrams: BTreeMap::default(),
698 heading_slugs: HashMap::default(),
699 },
700 Default::default(),
701 );
702 }
703
704 let parsed =
705 parse_markdown_with_options(&source, should_parse_html, should_parse_heading_slugs);
706 let events = parsed.events;
707 let language_names = parsed.language_names;
708 let paths = parsed.language_paths;
709 let root_block_starts = parsed.root_block_starts;
710 let html_blocks = parsed.html_blocks;
711 let heading_slugs = parsed.heading_slugs;
712 let mermaid_diagrams = if should_render_mermaid_diagrams {
713 extract_mermaid_diagrams(&source, &events)
714 } else {
715 BTreeMap::default()
716 };
717 let mut images_by_source_offset = HashMap::default();
718 let mut languages_by_name = TreeMap::default();
719 let mut languages_by_path = TreeMap::default();
720 if let Some(registry) = language_registry.as_ref() {
721 for name in language_names {
722 let language = if !name.is_empty() {
723 registry.language_for_name_or_extension(&name).left_future()
724 } else if let Some(fallback) = &fallback {
725 registry.language_for_name(fallback.as_ref()).right_future()
726 } else {
727 continue;
728 };
729 if let Ok(language) = language.await {
730 languages_by_name.insert(name, language);
731 }
732 }
733
734 for path in paths {
735 if let Ok(language) = registry
736 .load_language_for_file_path(Path::new(path.as_ref()))
737 .await
738 {
739 languages_by_path.insert(path, language);
740 }
741 }
742 }
743
744 for (range, event) in &events {
745 if let MarkdownEvent::Start(MarkdownTag::Image { dest_url, .. }) = event
746 && let Some(data_url) = dest_url.strip_prefix("data:")
747 {
748 let Some((mime_info, data)) = data_url.split_once(',') else {
749 continue;
750 };
751 let Some((mime_type, encoding)) = mime_info.split_once(';') else {
752 continue;
753 };
754 let Some(format) = ImageFormat::from_mime_type(mime_type) else {
755 continue;
756 };
757 let is_base64 = encoding == "base64";
758 if is_base64
759 && let Some(bytes) = base64::prelude::BASE64_STANDARD
760 .decode(data)
761 .log_with_level(Level::Debug)
762 {
763 let image = Arc::new(Image::from_bytes(format, bytes));
764 images_by_source_offset.insert(range.start, image);
765 }
766 }
767 }
768
769 (
770 ParsedMarkdown {
771 source,
772 events: Arc::from(events),
773 languages_by_name,
774 languages_by_path,
775 root_block_starts: Arc::from(root_block_starts),
776 html_blocks,
777 mermaid_diagrams,
778 heading_slugs,
779 },
780 images_by_source_offset,
781 )
782 });
783
784 cx.spawn(async move |this, cx| {
785 let (parsed, images_by_source_offset) = parsed.await;
786
787 this.update(cx, |this, cx| {
788 this.parsed_markdown = parsed;
789 this.images_by_source_offset = images_by_source_offset;
790 if this.active_root_block.is_some_and(|block_index| {
791 block_index >= this.parsed_markdown.root_block_starts.len()
792 }) {
793 this.active_root_block = None;
794 }
795 if this.options.render_mermaid_diagrams {
796 let parsed_markdown = this.parsed_markdown.clone();
797 this.mermaid_state.update(&parsed_markdown, cx);
798 } else {
799 this.mermaid_state.clear();
800 }
801 this.pending_parse.take();
802 if this.should_reparse {
803 this.parse(cx);
804 }
805 cx.notify();
806 cx.refresh_windows();
807 })
808 .ok();
809 })
810 }
811}
812
813impl Focusable for Markdown {
814 fn focus_handle(&self, _cx: &App) -> FocusHandle {
815 self.focus_handle.clone()
816 }
817}
818
819#[derive(Debug, Default, Clone)]
820enum SelectMode {
821 #[default]
822 Character,
823 Word(Range<usize>),
824 Line(Range<usize>),
825 All,
826}
827
828#[derive(Clone, Default)]
829struct Selection {
830 start: usize,
831 end: usize,
832 reversed: bool,
833 pending: bool,
834 mode: SelectMode,
835}
836
837impl Selection {
838 fn set_head(&mut self, head: usize, rendered_text: &RenderedText) {
839 match &self.mode {
840 SelectMode::Character => {
841 if head < self.tail() {
842 if !self.reversed {
843 self.end = self.start;
844 self.reversed = true;
845 }
846 self.start = head;
847 } else {
848 if self.reversed {
849 self.start = self.end;
850 self.reversed = false;
851 }
852 self.end = head;
853 }
854 }
855 SelectMode::Word(original_range) | SelectMode::Line(original_range) => {
856 let head_range = if matches!(self.mode, SelectMode::Word(_)) {
857 rendered_text.surrounding_word_range(head)
858 } else {
859 rendered_text.surrounding_line_range(head)
860 };
861
862 if head < original_range.start {
863 self.start = head_range.start;
864 self.end = original_range.end;
865 self.reversed = true;
866 } else if head >= original_range.end {
867 self.start = original_range.start;
868 self.end = head_range.end;
869 self.reversed = false;
870 } else {
871 self.start = original_range.start;
872 self.end = original_range.end;
873 self.reversed = false;
874 }
875 }
876 SelectMode::All => {
877 self.start = 0;
878 self.end = rendered_text
879 .lines
880 .last()
881 .map(|line| line.source_end)
882 .unwrap_or(0);
883 self.reversed = false;
884 }
885 }
886 }
887
888 fn tail(&self) -> usize {
889 if self.reversed { self.end } else { self.start }
890 }
891}
892
893#[derive(Debug, Clone, Default)]
894pub struct ParsedMarkdown {
895 pub source: SharedString,
896 pub events: Arc<[(Range<usize>, MarkdownEvent)]>,
897 pub languages_by_name: TreeMap<SharedString, Arc<Language>>,
898 pub languages_by_path: TreeMap<Arc<str>, Arc<Language>>,
899 pub root_block_starts: Arc<[usize]>,
900 pub(crate) html_blocks: BTreeMap<usize, html::html_parser::ParsedHtmlBlock>,
901 pub(crate) mermaid_diagrams: BTreeMap<usize, ParsedMarkdownMermaidDiagram>,
902 pub heading_slugs: HashMap<SharedString, usize>,
903}
904
905impl ParsedMarkdown {
906 pub fn source(&self) -> &SharedString {
907 &self.source
908 }
909
910 pub fn events(&self) -> &Arc<[(Range<usize>, MarkdownEvent)]> {
911 &self.events
912 }
913
914 pub fn root_block_starts(&self) -> &Arc<[usize]> {
915 &self.root_block_starts
916 }
917
918 pub fn root_block_for_source_index(&self, source_index: usize) -> Option<usize> {
919 if self.root_block_starts.is_empty() {
920 return None;
921 }
922
923 let partition = self
924 .root_block_starts
925 .partition_point(|block_start| *block_start <= source_index);
926
927 Some(partition.saturating_sub(1))
928 }
929}
930
931pub enum AutoscrollBehavior {
932 /// Propagate the request up the element tree for the nearest
933 /// scrollable ancestor (e.g. `List`) to handle.
934 Propagate,
935 /// Directly control a specific scroll handle.
936 Controlled(ScrollHandle),
937}
938
939pub struct MarkdownElement {
940 markdown: Entity<Markdown>,
941 style: MarkdownStyle,
942 code_block_renderer: CodeBlockRenderer,
943 on_url_click: Option<Box<dyn Fn(SharedString, &mut Window, &mut App)>>,
944 on_source_click: Option<SourceClickCallback>,
945 on_checkbox_toggle: Option<CheckboxToggleCallback>,
946 image_resolver: Option<Box<dyn Fn(&str) -> Option<ImageSource>>>,
947 show_root_block_markers: bool,
948 autoscroll: AutoscrollBehavior,
949}
950
951impl MarkdownElement {
952 pub fn new(markdown: Entity<Markdown>, style: MarkdownStyle) -> Self {
953 Self {
954 markdown,
955 style,
956 code_block_renderer: CodeBlockRenderer::Default {
957 copy_button_visibility: CopyButtonVisibility::VisibleOnHover,
958 border: false,
959 },
960 on_url_click: None,
961 on_source_click: None,
962 on_checkbox_toggle: None,
963 image_resolver: None,
964 show_root_block_markers: false,
965 autoscroll: AutoscrollBehavior::Propagate,
966 }
967 }
968
969 #[cfg(any(test, feature = "test-support"))]
970 pub fn rendered_text(
971 markdown: Entity<Markdown>,
972 cx: &mut gpui::VisualTestContext,
973 style: impl FnOnce(&Window, &App) -> MarkdownStyle,
974 ) -> String {
975 use gpui::size;
976
977 let (text, _) = cx.draw(
978 Default::default(),
979 size(px(600.0), px(600.0)),
980 |window, cx| Self::new(markdown, style(window, cx)),
981 );
982 text.text
983 .lines
984 .iter()
985 .map(|line| line.layout.wrapped_text())
986 .collect::<Vec<_>>()
987 .join("\n")
988 }
989
990 pub fn code_block_renderer(mut self, variant: CodeBlockRenderer) -> Self {
991 self.code_block_renderer = variant;
992 self
993 }
994
995 pub fn on_url_click(
996 mut self,
997 handler: impl Fn(SharedString, &mut Window, &mut App) + 'static,
998 ) -> Self {
999 self.on_url_click = Some(Box::new(handler));
1000 self
1001 }
1002
1003 pub fn on_source_click(
1004 mut self,
1005 handler: impl Fn(usize, usize, &mut Window, &mut App) -> bool + 'static,
1006 ) -> Self {
1007 self.on_source_click = Some(Box::new(handler));
1008 self
1009 }
1010
1011 pub fn on_checkbox_toggle(
1012 mut self,
1013 handler: impl Fn(Range<usize>, bool, &mut Window, &mut App) + 'static,
1014 ) -> Self {
1015 self.on_checkbox_toggle = Some(Rc::new(handler));
1016 self
1017 }
1018
1019 pub fn image_resolver(
1020 mut self,
1021 resolver: impl Fn(&str) -> Option<ImageSource> + 'static,
1022 ) -> Self {
1023 self.image_resolver = Some(Box::new(resolver));
1024 self
1025 }
1026
1027 pub fn show_root_block_markers(mut self) -> Self {
1028 self.show_root_block_markers = true;
1029 self
1030 }
1031
1032 pub fn scroll_handle(mut self, scroll_handle: ScrollHandle) -> Self {
1033 self.autoscroll = AutoscrollBehavior::Controlled(scroll_handle);
1034 self
1035 }
1036
1037 fn push_markdown_image(
1038 &self,
1039 builder: &mut MarkdownElementBuilder,
1040 range: &Range<usize>,
1041 source: ImageSource,
1042 width: Option<DefiniteLength>,
1043 height: Option<DefiniteLength>,
1044 ) {
1045 let align = builder.text_style().text_align;
1046 builder.modify_current_div(|el| {
1047 let mut image_container = el.flex().flex_row().items_center();
1048
1049 image_container = match align {
1050 TextAlign::Left => image_container.justify_start(),
1051 TextAlign::Center => image_container.justify_center(),
1052 TextAlign::Right => image_container.justify_end(),
1053 };
1054
1055 image_container.child(
1056 img(source)
1057 .max_w_full()
1058 .when_some(height, |this, height| this.h(height))
1059 .when_some(width, |this, width| this.w(width)),
1060 )
1061 });
1062 let _ = range;
1063 }
1064
1065 fn push_markdown_paragraph(
1066 &self,
1067 builder: &mut MarkdownElementBuilder,
1068 range: &Range<usize>,
1069 markdown_end: usize,
1070 text_align_override: Option<TextAlign>,
1071 ) {
1072 let align = text_align_override.unwrap_or(self.style.base_text_style.text_align);
1073 let mut paragraph = div().when(!self.style.height_is_multiple_of_line_height, |el| {
1074 el.mb_2().line_height(rems(1.3))
1075 });
1076
1077 paragraph = match align {
1078 TextAlign::Center => paragraph.text_center(),
1079 TextAlign::Left => paragraph.text_left(),
1080 TextAlign::Right => paragraph.text_right(),
1081 };
1082
1083 builder.push_text_style(TextStyleRefinement {
1084 text_align: Some(align),
1085 ..Default::default()
1086 });
1087 builder.push_div(paragraph, range, markdown_end);
1088 }
1089
1090 fn pop_markdown_paragraph(&self, builder: &mut MarkdownElementBuilder) {
1091 builder.pop_div();
1092 builder.pop_text_style();
1093 }
1094
1095 fn push_markdown_heading(
1096 &self,
1097 builder: &mut MarkdownElementBuilder,
1098 level: pulldown_cmark::HeadingLevel,
1099 range: &Range<usize>,
1100 markdown_end: usize,
1101 text_align_override: Option<TextAlign>,
1102 ) {
1103 let align = text_align_override.unwrap_or(self.style.base_text_style.text_align);
1104 let mut heading = div().mb_2();
1105 heading = apply_heading_style(heading, level, self.style.heading_level_styles.as_ref());
1106
1107 heading = match align {
1108 TextAlign::Center => heading.text_center(),
1109 TextAlign::Left => heading.text_left(),
1110 TextAlign::Right => heading.text_right(),
1111 };
1112
1113 let mut heading_style = self.style.heading.clone();
1114 let heading_text_style = heading_style.text_style().clone();
1115 heading.style().refine(&heading_style);
1116
1117 builder.push_text_style(TextStyleRefinement {
1118 text_align: Some(align),
1119 ..heading_text_style
1120 });
1121 builder.push_div(heading, range, markdown_end);
1122 }
1123
1124 fn pop_markdown_heading(&self, builder: &mut MarkdownElementBuilder) {
1125 builder.pop_div();
1126 builder.pop_text_style();
1127 }
1128
1129 fn push_markdown_block_quote(
1130 &self,
1131 builder: &mut MarkdownElementBuilder,
1132 range: &Range<usize>,
1133 markdown_end: usize,
1134 ) {
1135 builder.push_text_style(self.style.block_quote.clone());
1136 builder.push_div(
1137 div()
1138 .pl_4()
1139 .mb_2()
1140 .border_l_4()
1141 .border_color(self.style.block_quote_border_color),
1142 range,
1143 markdown_end,
1144 );
1145 }
1146
1147 fn pop_markdown_block_quote(&self, builder: &mut MarkdownElementBuilder) {
1148 builder.pop_div();
1149 builder.pop_text_style();
1150 }
1151
1152 fn push_markdown_list_item(
1153 &self,
1154 builder: &mut MarkdownElementBuilder,
1155 bullet: AnyElement,
1156 range: &Range<usize>,
1157 markdown_end: usize,
1158 ) {
1159 builder.push_div(
1160 div()
1161 .when(!self.style.height_is_multiple_of_line_height, |el| {
1162 el.mb_1().gap_1().line_height(rems(1.3))
1163 })
1164 .h_flex()
1165 .items_start()
1166 .child(bullet),
1167 range,
1168 markdown_end,
1169 );
1170 // Without `w_0`, text doesn't wrap to the width of the container.
1171 builder.push_div(div().flex_1().w_0(), range, markdown_end);
1172 }
1173
1174 fn pop_markdown_list_item(&self, builder: &mut MarkdownElementBuilder) {
1175 builder.pop_div();
1176 builder.pop_div();
1177 }
1178
1179 fn paint_highlight_range(
1180 bounds: Bounds<Pixels>,
1181 start: usize,
1182 end: usize,
1183 color: Hsla,
1184 rendered_text: &RenderedText,
1185 window: &mut Window,
1186 ) {
1187 let start_pos = rendered_text.position_for_source_index(start);
1188 let end_pos = rendered_text.position_for_source_index(end);
1189 if let Some(((start_position, start_line_height), (end_position, end_line_height))) =
1190 start_pos.zip(end_pos)
1191 {
1192 if start_position.y == end_position.y {
1193 window.paint_quad(quad(
1194 Bounds::from_corners(
1195 start_position,
1196 point(end_position.x, end_position.y + end_line_height),
1197 ),
1198 Pixels::ZERO,
1199 color,
1200 Edges::default(),
1201 Hsla::transparent_black(),
1202 BorderStyle::default(),
1203 ));
1204 } else {
1205 window.paint_quad(quad(
1206 Bounds::from_corners(
1207 start_position,
1208 point(bounds.right(), start_position.y + start_line_height),
1209 ),
1210 Pixels::ZERO,
1211 color,
1212 Edges::default(),
1213 Hsla::transparent_black(),
1214 BorderStyle::default(),
1215 ));
1216
1217 if end_position.y > start_position.y + start_line_height {
1218 window.paint_quad(quad(
1219 Bounds::from_corners(
1220 point(bounds.left(), start_position.y + start_line_height),
1221 point(bounds.right(), end_position.y),
1222 ),
1223 Pixels::ZERO,
1224 color,
1225 Edges::default(),
1226 Hsla::transparent_black(),
1227 BorderStyle::default(),
1228 ));
1229 }
1230
1231 window.paint_quad(quad(
1232 Bounds::from_corners(
1233 point(bounds.left(), end_position.y),
1234 point(end_position.x, end_position.y + end_line_height),
1235 ),
1236 Pixels::ZERO,
1237 color,
1238 Edges::default(),
1239 Hsla::transparent_black(),
1240 BorderStyle::default(),
1241 ));
1242 }
1243 }
1244 }
1245
1246 fn paint_selection(
1247 &self,
1248 bounds: Bounds<Pixels>,
1249 rendered_text: &RenderedText,
1250 window: &mut Window,
1251 cx: &mut App,
1252 ) {
1253 let selection = self.markdown.read(cx).selection.clone();
1254 Self::paint_highlight_range(
1255 bounds,
1256 selection.start,
1257 selection.end,
1258 self.style.selection_background_color,
1259 rendered_text,
1260 window,
1261 );
1262 }
1263
1264 fn paint_search_highlights(
1265 &self,
1266 bounds: Bounds<Pixels>,
1267 rendered_text: &RenderedText,
1268 window: &mut Window,
1269 cx: &mut App,
1270 ) {
1271 let markdown = self.markdown.read(cx);
1272 let active_index = markdown.active_search_highlight;
1273 let colors = cx.theme().colors();
1274
1275 for (i, highlight_range) in markdown.search_highlights.iter().enumerate() {
1276 let color = if Some(i) == active_index {
1277 colors.search_active_match_background
1278 } else {
1279 colors.search_match_background
1280 };
1281 Self::paint_highlight_range(
1282 bounds,
1283 highlight_range.start,
1284 highlight_range.end,
1285 color,
1286 rendered_text,
1287 window,
1288 );
1289 }
1290 }
1291
1292 fn paint_mouse_listeners(
1293 &mut self,
1294 hitbox: &Hitbox,
1295 rendered_text: &RenderedText,
1296 window: &mut Window,
1297 cx: &mut App,
1298 ) {
1299 if self.style.prevent_mouse_interaction {
1300 return;
1301 }
1302
1303 let is_hovering_link = hitbox.is_hovered(window)
1304 && !self.markdown.read(cx).selection.pending
1305 && rendered_text
1306 .link_for_position(window.mouse_position())
1307 .is_some();
1308
1309 if !self.style.prevent_mouse_interaction {
1310 if is_hovering_link {
1311 window.set_cursor_style(CursorStyle::PointingHand, hitbox);
1312 } else {
1313 window.set_cursor_style(CursorStyle::IBeam, hitbox);
1314 }
1315 }
1316
1317 let on_open_url = self.on_url_click.take();
1318 let on_source_click = self.on_source_click.take();
1319
1320 self.on_mouse_event(window, cx, {
1321 let hitbox = hitbox.clone();
1322 move |markdown, event: &MouseDownEvent, phase, window, _| {
1323 if phase.capture()
1324 && event.button == MouseButton::Right
1325 && hitbox.is_hovered(window)
1326 {
1327 // Capture selected text so it survives until menu item is clicked
1328 markdown.capture_selection_for_context_menu();
1329 }
1330 }
1331 });
1332
1333 self.on_mouse_event(window, cx, {
1334 let rendered_text = rendered_text.clone();
1335 let hitbox = hitbox.clone();
1336 move |markdown, event: &MouseDownEvent, phase, window, cx| {
1337 if hitbox.is_hovered(window) {
1338 if phase.bubble() {
1339 if let Some(link) = rendered_text.link_for_position(event.position) {
1340 markdown.pressed_link = Some(link.clone());
1341 } else {
1342 let source_index =
1343 match rendered_text.source_index_for_position(event.position) {
1344 Ok(ix) | Err(ix) => ix,
1345 };
1346 if let Some(handler) = on_source_click.as_ref() {
1347 let blocked = handler(source_index, event.click_count, window, cx);
1348 if blocked {
1349 markdown.selection = Selection::default();
1350 markdown.pressed_link = None;
1351 window.prevent_default();
1352 cx.notify();
1353 return;
1354 }
1355 }
1356 let (range, mode) = match event.click_count {
1357 1 => {
1358 let range = source_index..source_index;
1359 (range, SelectMode::Character)
1360 }
1361 2 => {
1362 let range = rendered_text.surrounding_word_range(source_index);
1363 (range.clone(), SelectMode::Word(range))
1364 }
1365 3 => {
1366 let range = rendered_text.surrounding_line_range(source_index);
1367 (range.clone(), SelectMode::Line(range))
1368 }
1369 _ => {
1370 let range = 0..rendered_text
1371 .lines
1372 .last()
1373 .map(|line| line.source_end)
1374 .unwrap_or(0);
1375 (range, SelectMode::All)
1376 }
1377 };
1378 markdown.selection = Selection {
1379 start: range.start,
1380 end: range.end,
1381 reversed: false,
1382 pending: true,
1383 mode,
1384 };
1385 window.focus(&markdown.focus_handle, cx);
1386 }
1387
1388 window.prevent_default();
1389 cx.notify();
1390 }
1391 } else if phase.capture() && event.button == MouseButton::Left {
1392 markdown.selection = Selection::default();
1393 markdown.pressed_link = None;
1394 cx.notify();
1395 }
1396 }
1397 });
1398 self.on_mouse_event(window, cx, {
1399 let rendered_text = rendered_text.clone();
1400 let hitbox = hitbox.clone();
1401 let was_hovering_link = is_hovering_link;
1402 move |markdown, event: &MouseMoveEvent, phase, window, cx| {
1403 if phase.capture() {
1404 return;
1405 }
1406
1407 if markdown.selection.pending {
1408 let source_index = match rendered_text.source_index_for_position(event.position)
1409 {
1410 Ok(ix) | Err(ix) => ix,
1411 };
1412 markdown.selection.set_head(source_index, &rendered_text);
1413 markdown.autoscroll_code_block(source_index, event.position);
1414 markdown.autoscroll_request = Some(source_index);
1415 cx.notify();
1416 } else {
1417 let is_hovering_link = hitbox.is_hovered(window)
1418 && rendered_text.link_for_position(event.position).is_some();
1419 if is_hovering_link != was_hovering_link {
1420 cx.notify();
1421 }
1422 }
1423 }
1424 });
1425 self.on_mouse_event(window, cx, {
1426 let rendered_text = rendered_text.clone();
1427 move |markdown, event: &MouseUpEvent, phase, window, cx| {
1428 if phase.bubble() {
1429 if let Some(pressed_link) = markdown.pressed_link.take()
1430 && Some(&pressed_link) == rendered_text.link_for_position(event.position)
1431 {
1432 if let Some(open_url) = on_open_url.as_ref() {
1433 open_url(pressed_link.destination_url, window, cx);
1434 } else {
1435 cx.open_url(&pressed_link.destination_url);
1436 }
1437 }
1438 } else if markdown.selection.pending {
1439 markdown.selection.pending = false;
1440 #[cfg(any(target_os = "linux", target_os = "freebsd"))]
1441 {
1442 let text = rendered_text
1443 .text_for_range(markdown.selection.start..markdown.selection.end);
1444 cx.write_to_primary(ClipboardItem::new_string(text))
1445 }
1446 cx.notify();
1447 }
1448 }
1449 });
1450 }
1451
1452 fn autoscroll(
1453 &self,
1454 rendered_text: &RenderedText,
1455 window: &mut Window,
1456 cx: &mut App,
1457 ) -> Option<()> {
1458 let autoscroll_index = self
1459 .markdown
1460 .update(cx, |markdown, _| markdown.autoscroll_request.take())?;
1461 let (position, line_height) = rendered_text.position_for_source_index(autoscroll_index)?;
1462
1463 match &self.autoscroll {
1464 AutoscrollBehavior::Controlled(scroll_handle) => {
1465 let viewport = scroll_handle.bounds();
1466 let margin = line_height * 3.;
1467 let top_goal = viewport.top() + margin;
1468 let bottom_goal = viewport.bottom() - margin;
1469 let current_offset = scroll_handle.offset();
1470
1471 let new_offset_y = if position.y < top_goal {
1472 current_offset.y + (top_goal - position.y)
1473 } else if position.y + line_height > bottom_goal {
1474 current_offset.y + (bottom_goal - (position.y + line_height))
1475 } else {
1476 current_offset.y
1477 };
1478
1479 scroll_handle.set_offset(point(
1480 current_offset.x,
1481 new_offset_y.clamp(-scroll_handle.max_offset().y, Pixels::ZERO),
1482 ));
1483 }
1484 AutoscrollBehavior::Propagate => {
1485 let text_style = self.style.base_text_style.clone();
1486 let font_id = window.text_system().resolve_font(&text_style.font());
1487 let font_size = text_style.font_size.to_pixels(window.rem_size());
1488 let em_width = window.text_system().em_width(font_id, font_size).unwrap();
1489 window.request_autoscroll(Bounds::from_corners(
1490 point(position.x - 3. * em_width, position.y - 3. * line_height),
1491 point(position.x + 3. * em_width, position.y + 3. * line_height),
1492 ));
1493 }
1494 }
1495 Some(())
1496 }
1497
1498 fn on_mouse_event<T: MouseEvent>(
1499 &self,
1500 window: &mut Window,
1501 _cx: &mut App,
1502 mut f: impl 'static
1503 + FnMut(&mut Markdown, &T, DispatchPhase, &mut Window, &mut Context<Markdown>),
1504 ) {
1505 window.on_mouse_event({
1506 let markdown = self.markdown.downgrade();
1507 move |event, phase, window, cx| {
1508 markdown
1509 .update(cx, |markdown, cx| f(markdown, event, phase, window, cx))
1510 .log_err();
1511 }
1512 });
1513 }
1514}
1515
1516impl Styled for MarkdownElement {
1517 fn style(&mut self) -> &mut StyleRefinement {
1518 &mut self.style.container_style
1519 }
1520}
1521
1522impl Element for MarkdownElement {
1523 type RequestLayoutState = RenderedMarkdown;
1524 type PrepaintState = Hitbox;
1525
1526 fn id(&self) -> Option<ElementId> {
1527 None
1528 }
1529
1530 fn source_location(&self) -> Option<&'static core::panic::Location<'static>> {
1531 None
1532 }
1533
1534 fn request_layout(
1535 &mut self,
1536 _id: Option<&GlobalElementId>,
1537 _inspector_id: Option<&gpui::InspectorElementId>,
1538 window: &mut Window,
1539 cx: &mut App,
1540 ) -> (gpui::LayoutId, Self::RequestLayoutState) {
1541 let mut builder = MarkdownElementBuilder::new(
1542 &self.style.container_style,
1543 self.style.base_text_style.clone(),
1544 self.style.syntax.clone(),
1545 );
1546 let (parsed_markdown, images, active_root_block, render_mermaid_diagrams, mermaid_state) = {
1547 let markdown = self.markdown.read(cx);
1548 (
1549 markdown.parsed_markdown.clone(),
1550 markdown.images_by_source_offset.clone(),
1551 markdown.active_root_block,
1552 markdown.options.render_mermaid_diagrams,
1553 markdown.mermaid_state.clone(),
1554 )
1555 };
1556 let markdown_end = if let Some(last) = parsed_markdown.events.last() {
1557 last.0.end
1558 } else {
1559 0
1560 };
1561 let mut code_block_ids = HashSet::default();
1562
1563 let mut current_img_block_range: Option<Range<usize>> = None;
1564 let mut handled_html_block = false;
1565 let mut rendered_mermaid_block = false;
1566 for (index, (range, event)) in parsed_markdown.events.iter().enumerate() {
1567 // Skip alt text for images that rendered
1568 if let Some(current_img_block_range) = ¤t_img_block_range
1569 && current_img_block_range.end > range.end
1570 {
1571 continue;
1572 }
1573
1574 if handled_html_block {
1575 if let MarkdownEvent::End(MarkdownTagEnd::HtmlBlock) = event {
1576 handled_html_block = false;
1577 } else {
1578 continue;
1579 }
1580 }
1581
1582 if rendered_mermaid_block {
1583 if matches!(event, MarkdownEvent::End(MarkdownTagEnd::CodeBlock)) {
1584 rendered_mermaid_block = false;
1585 }
1586 continue;
1587 }
1588
1589 match event {
1590 MarkdownEvent::RootStart => {
1591 if self.show_root_block_markers {
1592 builder.push_root_block(range, markdown_end);
1593 }
1594 }
1595 MarkdownEvent::RootEnd(root_block_index) => {
1596 if self.show_root_block_markers {
1597 builder.pop_root_block(
1598 active_root_block == Some(*root_block_index),
1599 cx.theme().colors().border,
1600 cx.theme().colors().border_variant,
1601 );
1602 }
1603 }
1604 MarkdownEvent::Start(tag) => {
1605 match tag {
1606 MarkdownTag::Image { dest_url, .. } => {
1607 if let Some(image) = images.get(&range.start) {
1608 current_img_block_range = Some(range.clone());
1609 self.push_markdown_image(
1610 &mut builder,
1611 range,
1612 image.clone().into(),
1613 None,
1614 None,
1615 );
1616 } else if let Some(source) = self
1617 .image_resolver
1618 .as_ref()
1619 .and_then(|resolve| resolve(dest_url.as_ref()))
1620 {
1621 current_img_block_range = Some(range.clone());
1622 self.push_markdown_image(&mut builder, range, source, None, None);
1623 }
1624 }
1625 MarkdownTag::Paragraph => {
1626 self.push_markdown_paragraph(&mut builder, range, markdown_end, None);
1627 }
1628 MarkdownTag::Heading { level, .. } => {
1629 self.push_markdown_heading(
1630 &mut builder,
1631 *level,
1632 range,
1633 markdown_end,
1634 None,
1635 );
1636 }
1637 MarkdownTag::BlockQuote => {
1638 self.push_markdown_block_quote(&mut builder, range, markdown_end);
1639 }
1640 MarkdownTag::CodeBlock { kind, .. } => {
1641 if render_mermaid_diagrams
1642 && let Some(mermaid_diagram) =
1643 parsed_markdown.mermaid_diagrams.get(&range.start)
1644 {
1645 builder.push_sourced_element(
1646 mermaid_diagram.content_range.clone(),
1647 render_mermaid_diagram(
1648 mermaid_diagram,
1649 &mermaid_state,
1650 &self.style,
1651 ),
1652 );
1653 rendered_mermaid_block = true;
1654 continue;
1655 }
1656
1657 let language = match kind {
1658 CodeBlockKind::Fenced => None,
1659 CodeBlockKind::FencedLang(language) => {
1660 parsed_markdown.languages_by_name.get(language).cloned()
1661 }
1662 CodeBlockKind::FencedSrc(path_range) => parsed_markdown
1663 .languages_by_path
1664 .get(&path_range.path)
1665 .cloned(),
1666 _ => None,
1667 };
1668
1669 let is_indented = matches!(kind, CodeBlockKind::Indented);
1670 let scroll_handle = if self.style.code_block_overflow_x_scroll {
1671 code_block_ids.insert(range.start);
1672 Some(self.markdown.update(cx, |markdown, _| {
1673 markdown.code_block_scroll_handle(range.start)
1674 }))
1675 } else {
1676 None
1677 };
1678
1679 match (&self.code_block_renderer, is_indented) {
1680 (CodeBlockRenderer::Default { .. }, _) | (_, true) => {
1681 // This is a parent container that we can position the copy button inside.
1682 let parent_container =
1683 div().group("code_block").relative().w_full();
1684
1685 let mut parent_container: AnyDiv = if let Some(scroll_handle) =
1686 scroll_handle.as_ref()
1687 {
1688 let scrollbars = Scrollbars::new(ScrollAxes::Horizontal)
1689 .id(("markdown-code-block-scrollbar", range.start))
1690 .tracked_scroll_handle(scroll_handle)
1691 .with_track_along(
1692 ScrollAxes::Horizontal,
1693 cx.theme().colors().editor_background,
1694 )
1695 .notify_content();
1696
1697 parent_container
1698 .rounded_lg()
1699 .custom_scrollbars(scrollbars, window, cx)
1700 .into()
1701 } else {
1702 parent_container.into()
1703 };
1704
1705 if let CodeBlockRenderer::Default { border: true, .. } =
1706 &self.code_block_renderer
1707 {
1708 parent_container = parent_container
1709 .rounded_md()
1710 .border_1()
1711 .border_color(cx.theme().colors().border_variant);
1712 }
1713
1714 parent_container.style().refine(&self.style.code_block);
1715 builder.push_div(parent_container, range, markdown_end);
1716
1717 let code_block = div()
1718 .id(("code-block", range.start))
1719 .rounded_lg()
1720 .map(|mut code_block| {
1721 if let Some(scroll_handle) = scroll_handle.as_ref() {
1722 code_block.style().restrict_scroll_to_axis =
1723 Some(true);
1724 code_block
1725 .flex()
1726 .overflow_x_scroll()
1727 .track_scroll(scroll_handle)
1728 } else {
1729 code_block.w_full()
1730 }
1731 });
1732
1733 builder.push_text_style(self.style.code_block.text.to_owned());
1734 builder.push_code_block(language);
1735 builder.push_div(code_block, range, markdown_end);
1736 }
1737 (CodeBlockRenderer::Custom { .. }, _) => {}
1738 }
1739 }
1740 MarkdownTag::HtmlBlock => {
1741 builder.push_div(div(), range, markdown_end);
1742 if let Some(block) = parsed_markdown.html_blocks.get(&range.start) {
1743 self.render_html_block(block, &mut builder, markdown_end, cx);
1744 handled_html_block = true;
1745 }
1746 }
1747 MarkdownTag::List(bullet_index) => {
1748 builder.push_list(*bullet_index);
1749 builder.push_div(div().pl_2p5(), range, markdown_end);
1750 }
1751 MarkdownTag::Item => {
1752 let bullet =
1753 if let Some((task_range, MarkdownEvent::TaskListMarker(checked))) =
1754 parsed_markdown.events.get(index.saturating_add(1))
1755 {
1756 let source = &parsed_markdown.source()[range.clone()];
1757 let checked = *checked;
1758 let toggle_state = if checked {
1759 ToggleState::Selected
1760 } else {
1761 ToggleState::Unselected
1762 };
1763
1764 let checkbox = Checkbox::new(
1765 ElementId::Name(source.to_string().into()),
1766 toggle_state,
1767 )
1768 .fill();
1769
1770 if let Some(on_toggle) = self.on_checkbox_toggle.clone() {
1771 let task_source_range = task_range.clone();
1772 checkbox
1773 .on_click(move |_state, window, cx| {
1774 on_toggle(
1775 task_source_range.clone(),
1776 !checked,
1777 window,
1778 cx,
1779 );
1780 })
1781 .into_any_element()
1782 } else {
1783 checkbox.visualization_only(true).into_any_element()
1784 }
1785 } else if let Some(bullet_index) = builder.next_bullet_index() {
1786 div().child(format!("{}.", bullet_index)).into_any_element()
1787 } else {
1788 div().child("•").into_any_element()
1789 };
1790 self.push_markdown_list_item(&mut builder, bullet, range, markdown_end);
1791 }
1792 MarkdownTag::Emphasis => builder.push_text_style(TextStyleRefinement {
1793 font_style: Some(FontStyle::Italic),
1794 ..Default::default()
1795 }),
1796 MarkdownTag::Strong => builder.push_text_style(TextStyleRefinement {
1797 font_weight: Some(FontWeight::BOLD),
1798 ..Default::default()
1799 }),
1800 MarkdownTag::Strikethrough => {
1801 builder.push_text_style(TextStyleRefinement {
1802 strikethrough: Some(StrikethroughStyle {
1803 thickness: px(1.),
1804 color: None,
1805 }),
1806 ..Default::default()
1807 })
1808 }
1809 MarkdownTag::Link { dest_url, .. } => {
1810 if builder.code_block_stack.is_empty() {
1811 builder.push_link(dest_url.clone(), range.clone());
1812 let style = self
1813 .style
1814 .link_callback
1815 .as_ref()
1816 .and_then(|callback| callback(dest_url, cx))
1817 .unwrap_or_else(|| self.style.link.clone());
1818 builder.push_text_style(style)
1819 }
1820 }
1821 MarkdownTag::MetadataBlock(_) => {}
1822 MarkdownTag::Table(alignments) => {
1823 builder.table.start(alignments.clone());
1824
1825 let column_count = alignments.len();
1826 builder.push_div(
1827 div()
1828 .id(("table", range.start))
1829 .grid()
1830 .grid_cols(column_count as u16)
1831 .when(self.style.table_columns_min_size, |this| {
1832 this.grid_cols_min_content(column_count as u16)
1833 })
1834 .when(!self.style.table_columns_min_size, |this| {
1835 this.grid_cols(column_count as u16)
1836 })
1837 .w_full()
1838 .mb_2()
1839 .border(px(1.5))
1840 .border_color(cx.theme().colors().border)
1841 .rounded_sm()
1842 .overflow_hidden(),
1843 range,
1844 markdown_end,
1845 );
1846 }
1847 MarkdownTag::TableHead => {
1848 builder.table.start_head();
1849 builder.push_text_style(TextStyleRefinement {
1850 font_weight: Some(FontWeight::SEMIBOLD),
1851 ..Default::default()
1852 });
1853 }
1854 MarkdownTag::TableRow => {
1855 builder.table.start_row();
1856 }
1857 MarkdownTag::TableCell => {
1858 let is_header = builder.table.in_head;
1859 let row_index = builder.table.row_index;
1860 let col_index = builder.table.col_index;
1861
1862 builder.push_div(
1863 div()
1864 .when(col_index > 0, |this| this.border_l_1())
1865 .when(row_index > 0, |this| this.border_t_1())
1866 .border_color(cx.theme().colors().border)
1867 .px_1()
1868 .py_0p5()
1869 .when(is_header, |this| {
1870 this.bg(cx.theme().colors().title_bar_background)
1871 })
1872 .when(!is_header && row_index % 2 == 1, |this| {
1873 this.bg(cx.theme().colors().panel_background)
1874 }),
1875 range,
1876 markdown_end,
1877 );
1878 }
1879 _ => log::debug!("unsupported markdown tag {:?}", tag),
1880 }
1881 }
1882 MarkdownEvent::End(tag) => match tag {
1883 MarkdownTagEnd::Image => {
1884 current_img_block_range.take();
1885 }
1886 MarkdownTagEnd::Paragraph => {
1887 self.pop_markdown_paragraph(&mut builder);
1888 }
1889 MarkdownTagEnd::Heading(_) => {
1890 self.pop_markdown_heading(&mut builder);
1891 }
1892 MarkdownTagEnd::BlockQuote(_kind) => {
1893 self.pop_markdown_block_quote(&mut builder);
1894 }
1895 MarkdownTagEnd::CodeBlock => {
1896 builder.trim_trailing_newline();
1897
1898 builder.pop_div();
1899 builder.pop_code_block();
1900 builder.pop_text_style();
1901
1902 if let CodeBlockRenderer::Default {
1903 copy_button_visibility,
1904 ..
1905 } = &self.code_block_renderer
1906 && *copy_button_visibility != CopyButtonVisibility::Hidden
1907 {
1908 builder.modify_current_div(|el| {
1909 let content_range = parser::extract_code_block_content_range(
1910 &parsed_markdown.source()[range.clone()],
1911 );
1912 let content_range = content_range.start + range.start
1913 ..content_range.end + range.start;
1914
1915 let code = parsed_markdown.source()[content_range].to_string();
1916 let codeblock = render_copy_code_block_button(
1917 range.end,
1918 code,
1919 self.markdown.clone(),
1920 );
1921 el.child(
1922 h_flex()
1923 .w_4()
1924 .absolute()
1925 .justify_end()
1926 .when_else(
1927 *copy_button_visibility
1928 == CopyButtonVisibility::VisibleOnHover,
1929 |this| {
1930 this.top_0()
1931 .right_0()
1932 .visible_on_hover("code_block")
1933 },
1934 |this| this.top_1p5().right_1p5(),
1935 )
1936 .child(codeblock),
1937 )
1938 });
1939 }
1940
1941 // Pop the parent container.
1942 builder.pop_div();
1943 }
1944 MarkdownTagEnd::HtmlBlock => builder.pop_div(),
1945 MarkdownTagEnd::List(_) => {
1946 builder.pop_list();
1947 builder.pop_div();
1948 }
1949 MarkdownTagEnd::Item => {
1950 self.pop_markdown_list_item(&mut builder);
1951 }
1952 MarkdownTagEnd::Emphasis => builder.pop_text_style(),
1953 MarkdownTagEnd::Strong => builder.pop_text_style(),
1954 MarkdownTagEnd::Strikethrough => builder.pop_text_style(),
1955 MarkdownTagEnd::Link => {
1956 if builder.code_block_stack.is_empty() {
1957 builder.pop_text_style()
1958 }
1959 }
1960 MarkdownTagEnd::Table => {
1961 builder.pop_div();
1962 builder.table.end();
1963 }
1964 MarkdownTagEnd::TableHead => {
1965 builder.pop_text_style();
1966 builder.table.end_head();
1967 }
1968 MarkdownTagEnd::TableRow => {
1969 builder.table.end_row();
1970 }
1971 MarkdownTagEnd::TableCell => {
1972 builder.replace_pending_checkbox(range);
1973 builder.pop_div();
1974 builder.table.end_cell();
1975 }
1976 _ => log::debug!("unsupported markdown tag end: {:?}", tag),
1977 },
1978 MarkdownEvent::Text => {
1979 builder.push_text(&parsed_markdown.source[range.clone()], range.clone());
1980 }
1981 MarkdownEvent::SubstitutedText(text) => {
1982 builder.push_text(text, range.clone());
1983 }
1984 MarkdownEvent::Code => {
1985 builder.push_text_style(self.style.inline_code.clone());
1986 builder.push_text(&parsed_markdown.source[range.clone()], range.clone());
1987 builder.pop_text_style();
1988 }
1989 MarkdownEvent::Html => {
1990 let html = &parsed_markdown.source[range.clone()];
1991 if html.starts_with("<!--") {
1992 builder.html_comment = true;
1993 }
1994 if html.trim_end().ends_with("-->") {
1995 builder.html_comment = false;
1996 continue;
1997 }
1998 if builder.html_comment {
1999 continue;
2000 }
2001 builder.push_text(html, range.clone());
2002 }
2003 MarkdownEvent::InlineHtml => {
2004 let html = &parsed_markdown.source[range.clone()];
2005 if html.starts_with("<code>") {
2006 builder.push_text_style(self.style.inline_code.clone());
2007 continue;
2008 }
2009 if html.trim_end().starts_with("</code>") {
2010 builder.pop_text_style();
2011 continue;
2012 }
2013 builder.push_text(&parsed_markdown.source[range.clone()], range.clone());
2014 }
2015 MarkdownEvent::Rule => {
2016 builder.push_div(
2017 div()
2018 .border_b_1()
2019 .my_2()
2020 .border_color(self.style.rule_color),
2021 range,
2022 markdown_end,
2023 );
2024 builder.pop_div()
2025 }
2026 MarkdownEvent::SoftBreak => builder.push_text(" ", range.clone()),
2027 MarkdownEvent::HardBreak => builder.push_text("\n", range.clone()),
2028 MarkdownEvent::TaskListMarker(_) => {
2029 // handled inside the `MarkdownTag::Item` case
2030 }
2031 _ => log::debug!("unsupported markdown event {:?}", event),
2032 }
2033 }
2034 if self.style.code_block_overflow_x_scroll {
2035 let code_block_ids = code_block_ids;
2036 self.markdown.update(cx, move |markdown, _| {
2037 markdown.retain_code_block_scroll_handles(&code_block_ids);
2038 });
2039 } else {
2040 self.markdown
2041 .update(cx, |markdown, _| markdown.clear_code_block_scroll_handles());
2042 }
2043 let mut rendered_markdown = builder.build();
2044 let child_layout_id = rendered_markdown.element.request_layout(window, cx);
2045 let layout_id = window.request_layout(gpui::Style::default(), [child_layout_id], cx);
2046 (layout_id, rendered_markdown)
2047 }
2048
2049 fn prepaint(
2050 &mut self,
2051 _id: Option<&GlobalElementId>,
2052 _inspector_id: Option<&gpui::InspectorElementId>,
2053 bounds: Bounds<Pixels>,
2054 rendered_markdown: &mut Self::RequestLayoutState,
2055 window: &mut Window,
2056 cx: &mut App,
2057 ) -> Self::PrepaintState {
2058 let focus_handle = self.markdown.read(cx).focus_handle.clone();
2059 window.set_focus_handle(&focus_handle, cx);
2060 window.set_view_id(self.markdown.entity_id());
2061
2062 let hitbox = window.insert_hitbox(bounds, HitboxBehavior::Normal);
2063 rendered_markdown.element.prepaint(window, cx);
2064 self.autoscroll(&rendered_markdown.text, window, cx);
2065 hitbox
2066 }
2067
2068 fn paint(
2069 &mut self,
2070 _id: Option<&GlobalElementId>,
2071 _inspector_id: Option<&gpui::InspectorElementId>,
2072 bounds: Bounds<Pixels>,
2073 rendered_markdown: &mut Self::RequestLayoutState,
2074 hitbox: &mut Self::PrepaintState,
2075 window: &mut Window,
2076 cx: &mut App,
2077 ) {
2078 let mut context = KeyContext::default();
2079 context.add("Markdown");
2080 window.set_key_context(context);
2081 window.on_action(std::any::TypeId::of::<crate::Copy>(), {
2082 let entity = self.markdown.clone();
2083 let text = rendered_markdown.text.clone();
2084 move |_, phase, window, cx| {
2085 let text = text.clone();
2086 if phase == DispatchPhase::Bubble {
2087 entity.update(cx, move |this, cx| this.copy(&text, window, cx))
2088 }
2089 }
2090 });
2091 window.on_action(std::any::TypeId::of::<crate::CopyAsMarkdown>(), {
2092 let entity = self.markdown.clone();
2093 move |_, phase, window, cx| {
2094 if phase == DispatchPhase::Bubble {
2095 entity.update(cx, move |this, cx| this.copy_as_markdown(window, cx))
2096 }
2097 }
2098 });
2099
2100 self.paint_mouse_listeners(hitbox, &rendered_markdown.text, window, cx);
2101 rendered_markdown.element.paint(window, cx);
2102 self.paint_search_highlights(bounds, &rendered_markdown.text, window, cx);
2103 self.paint_selection(bounds, &rendered_markdown.text, window, cx);
2104 }
2105}
2106
2107fn apply_heading_style(
2108 mut heading: Div,
2109 level: pulldown_cmark::HeadingLevel,
2110 custom_styles: Option<&HeadingLevelStyles>,
2111) -> Div {
2112 heading = match level {
2113 pulldown_cmark::HeadingLevel::H1 => heading.text_3xl(),
2114 pulldown_cmark::HeadingLevel::H2 => heading.text_2xl(),
2115 pulldown_cmark::HeadingLevel::H3 => heading.text_xl(),
2116 pulldown_cmark::HeadingLevel::H4 => heading.text_lg(),
2117 pulldown_cmark::HeadingLevel::H5 => heading.text_base(),
2118 pulldown_cmark::HeadingLevel::H6 => heading.text_sm(),
2119 };
2120
2121 if let Some(styles) = custom_styles {
2122 let style_opt = match level {
2123 pulldown_cmark::HeadingLevel::H1 => &styles.h1,
2124 pulldown_cmark::HeadingLevel::H2 => &styles.h2,
2125 pulldown_cmark::HeadingLevel::H3 => &styles.h3,
2126 pulldown_cmark::HeadingLevel::H4 => &styles.h4,
2127 pulldown_cmark::HeadingLevel::H5 => &styles.h5,
2128 pulldown_cmark::HeadingLevel::H6 => &styles.h6,
2129 };
2130
2131 if let Some(style) = style_opt {
2132 heading.style().text = style.clone();
2133 }
2134 }
2135
2136 heading
2137}
2138
2139fn render_copy_code_block_button(
2140 id: usize,
2141 code: String,
2142 markdown: Entity<Markdown>,
2143) -> impl IntoElement {
2144 let id = ElementId::named_usize("copy-markdown-code", id);
2145
2146 CopyButton::new(id.clone(), code.clone()).custom_on_click({
2147 let markdown = markdown;
2148 move |_window, cx| {
2149 let id = id.clone();
2150 markdown.update(cx, |this, cx| {
2151 this.copied_code_blocks.insert(id.clone());
2152
2153 cx.write_to_clipboard(ClipboardItem::new_string(code.clone()));
2154
2155 cx.spawn(async move |this, cx| {
2156 cx.background_executor().timer(Duration::from_secs(2)).await;
2157
2158 cx.update(|cx| {
2159 this.update(cx, |this, cx| {
2160 this.copied_code_blocks.remove(&id);
2161 cx.notify();
2162 })
2163 })
2164 .ok();
2165 })
2166 .detach();
2167 });
2168 }
2169 })
2170}
2171
2172impl IntoElement for MarkdownElement {
2173 type Element = Self;
2174
2175 fn into_element(self) -> Self::Element {
2176 self
2177 }
2178}
2179
2180pub enum AnyDiv {
2181 Div(Div),
2182 Stateful(Stateful<Div>),
2183}
2184
2185impl AnyDiv {
2186 fn into_any_element(self) -> AnyElement {
2187 match self {
2188 Self::Div(div) => div.into_any_element(),
2189 Self::Stateful(div) => div.into_any_element(),
2190 }
2191 }
2192}
2193
2194impl From<Div> for AnyDiv {
2195 fn from(value: Div) -> Self {
2196 Self::Div(value)
2197 }
2198}
2199
2200impl From<Stateful<Div>> for AnyDiv {
2201 fn from(value: Stateful<Div>) -> Self {
2202 Self::Stateful(value)
2203 }
2204}
2205
2206impl Styled for AnyDiv {
2207 fn style(&mut self) -> &mut StyleRefinement {
2208 match self {
2209 Self::Div(div) => div.style(),
2210 Self::Stateful(div) => div.style(),
2211 }
2212 }
2213}
2214
2215impl ParentElement for AnyDiv {
2216 fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
2217 match self {
2218 Self::Div(div) => div.extend(elements),
2219 Self::Stateful(div) => div.extend(elements),
2220 }
2221 }
2222}
2223
2224#[derive(Default)]
2225struct TableState {
2226 alignments: Vec<Alignment>,
2227 in_head: bool,
2228 row_index: usize,
2229 col_index: usize,
2230}
2231
2232impl TableState {
2233 fn start(&mut self, alignments: Vec<Alignment>) {
2234 self.alignments = alignments;
2235 self.in_head = false;
2236 self.row_index = 0;
2237 self.col_index = 0;
2238 }
2239
2240 fn end(&mut self) {
2241 self.alignments.clear();
2242 self.in_head = false;
2243 self.row_index = 0;
2244 self.col_index = 0;
2245 }
2246
2247 fn start_head(&mut self) {
2248 self.in_head = true;
2249 }
2250
2251 fn end_head(&mut self) {
2252 self.in_head = false;
2253 }
2254
2255 fn start_row(&mut self) {
2256 self.col_index = 0;
2257 }
2258
2259 fn end_row(&mut self) {
2260 self.row_index += 1;
2261 }
2262
2263 fn end_cell(&mut self) {
2264 self.col_index += 1;
2265 }
2266}
2267
2268struct MarkdownElementBuilder {
2269 div_stack: Vec<AnyDiv>,
2270 rendered_lines: Vec<RenderedLine>,
2271 pending_line: PendingLine,
2272 rendered_links: Vec<RenderedLink>,
2273 current_source_index: usize,
2274 html_comment: bool,
2275 base_text_style: TextStyle,
2276 text_style_stack: Vec<TextStyleRefinement>,
2277 code_block_stack: Vec<Option<Arc<Language>>>,
2278 list_stack: Vec<ListStackEntry>,
2279 table: TableState,
2280 syntax_theme: Arc<SyntaxTheme>,
2281}
2282
2283#[derive(Default)]
2284struct PendingLine {
2285 text: String,
2286 runs: Vec<TextRun>,
2287 source_mappings: Vec<SourceMapping>,
2288}
2289
2290struct ListStackEntry {
2291 bullet_index: Option<u64>,
2292}
2293
2294impl MarkdownElementBuilder {
2295 fn new(
2296 container_style: &StyleRefinement,
2297 base_text_style: TextStyle,
2298 syntax_theme: Arc<SyntaxTheme>,
2299 ) -> Self {
2300 Self {
2301 div_stack: vec![{
2302 let mut base_div = div();
2303 base_div.style().refine(container_style);
2304 base_div.debug_selector(|| "inner".into()).into()
2305 }],
2306 rendered_lines: Vec::new(),
2307 pending_line: PendingLine::default(),
2308 rendered_links: Vec::new(),
2309 current_source_index: 0,
2310 html_comment: false,
2311 base_text_style,
2312 text_style_stack: Vec::new(),
2313 code_block_stack: Vec::new(),
2314 list_stack: Vec::new(),
2315 table: TableState::default(),
2316 syntax_theme,
2317 }
2318 }
2319
2320 fn push_text_style(&mut self, style: TextStyleRefinement) {
2321 self.text_style_stack.push(style);
2322 }
2323
2324 fn text_style(&self) -> TextStyle {
2325 let mut style = self.base_text_style.clone();
2326 for refinement in &self.text_style_stack {
2327 style.refine(refinement);
2328 }
2329 style
2330 }
2331
2332 fn pop_text_style(&mut self) {
2333 self.text_style_stack.pop();
2334 }
2335
2336 fn push_div(&mut self, div: impl Into<AnyDiv>, range: &Range<usize>, markdown_end: usize) {
2337 let mut div = div.into();
2338 self.flush_text();
2339
2340 if range.start == 0 {
2341 // Remove the top margin on the first element.
2342 div.style().refine(&StyleRefinement {
2343 margin: gpui::EdgesRefinement {
2344 top: Some(Length::Definite(px(0.).into())),
2345 left: None,
2346 right: None,
2347 bottom: None,
2348 },
2349 ..Default::default()
2350 });
2351 }
2352
2353 if range.end == markdown_end {
2354 div.style().refine(&StyleRefinement {
2355 margin: gpui::EdgesRefinement {
2356 top: None,
2357 left: None,
2358 right: None,
2359 bottom: Some(Length::Definite(rems(0.).into())),
2360 },
2361 ..Default::default()
2362 });
2363 }
2364
2365 self.div_stack.push(div);
2366 }
2367
2368 fn push_root_block(&mut self, range: &Range<usize>, markdown_end: usize) {
2369 self.push_div(
2370 div().group("markdown-root-block").relative(),
2371 range,
2372 markdown_end,
2373 );
2374 self.push_div(div().pl_4(), range, markdown_end);
2375 }
2376
2377 fn modify_current_div(&mut self, f: impl FnOnce(AnyDiv) -> AnyDiv) {
2378 self.flush_text();
2379 if let Some(div) = self.div_stack.pop() {
2380 self.div_stack.push(f(div));
2381 }
2382 }
2383
2384 fn pop_root_block(
2385 &mut self,
2386 is_active: bool,
2387 active_gutter_color: Hsla,
2388 hovered_gutter_color: Hsla,
2389 ) {
2390 self.pop_div();
2391 self.modify_current_div(|el| {
2392 el.child(
2393 div()
2394 .h_full()
2395 .w(px(4.0))
2396 .when(is_active, |this| this.bg(active_gutter_color))
2397 .group_hover("markdown-root-block", |this| {
2398 if is_active {
2399 this
2400 } else {
2401 this.bg(hovered_gutter_color)
2402 }
2403 })
2404 .rounded_xs()
2405 .absolute()
2406 .left_0()
2407 .top_0(),
2408 )
2409 });
2410 self.pop_div();
2411 }
2412
2413 fn pop_div(&mut self) {
2414 self.flush_text();
2415 let div = self.div_stack.pop().unwrap().into_any_element();
2416 self.div_stack.last_mut().unwrap().extend(iter::once(div));
2417 }
2418
2419 fn push_sourced_element(&mut self, source_range: Range<usize>, element: impl Into<AnyElement>) {
2420 self.flush_text();
2421 let anchor = self.render_source_anchor(source_range);
2422 self.div_stack.last_mut().unwrap().extend([{
2423 div()
2424 .relative()
2425 .child(anchor)
2426 .child(element.into())
2427 .into_any_element()
2428 }]);
2429 }
2430
2431 fn push_list(&mut self, bullet_index: Option<u64>) {
2432 self.list_stack.push(ListStackEntry { bullet_index });
2433 }
2434
2435 fn next_bullet_index(&mut self) -> Option<u64> {
2436 self.list_stack.last_mut().and_then(|entry| {
2437 let item_index = entry.bullet_index.as_mut()?;
2438 *item_index += 1;
2439 Some(*item_index - 1)
2440 })
2441 }
2442
2443 fn pop_list(&mut self) {
2444 self.list_stack.pop();
2445 }
2446
2447 fn push_code_block(&mut self, language: Option<Arc<Language>>) {
2448 self.code_block_stack.push(language);
2449 }
2450
2451 fn pop_code_block(&mut self) {
2452 self.code_block_stack.pop();
2453 }
2454
2455 fn push_link(&mut self, destination_url: SharedString, source_range: Range<usize>) {
2456 self.rendered_links.push(RenderedLink {
2457 source_range,
2458 destination_url,
2459 });
2460 }
2461
2462 fn push_text(&mut self, text: &str, source_range: Range<usize>) {
2463 self.pending_line.source_mappings.push(SourceMapping {
2464 rendered_index: self.pending_line.text.len(),
2465 source_index: source_range.start,
2466 });
2467 self.pending_line.text.push_str(text);
2468 self.current_source_index = source_range.end;
2469
2470 if let Some(Some(language)) = self.code_block_stack.last() {
2471 let mut offset = 0;
2472 for (range, highlight_id) in language.highlight_text(&Rope::from(text), 0..text.len()) {
2473 if range.start > offset {
2474 self.pending_line
2475 .runs
2476 .push(self.text_style().to_run(range.start - offset));
2477 }
2478
2479 let mut run_style = self.text_style();
2480 if let Some(highlight) = self.syntax_theme.get(highlight_id).cloned() {
2481 run_style = run_style.highlight(highlight);
2482 }
2483
2484 self.pending_line.runs.push(run_style.to_run(range.len()));
2485 offset = range.end;
2486 }
2487
2488 if offset < text.len() {
2489 self.pending_line
2490 .runs
2491 .push(self.text_style().to_run(text.len() - offset));
2492 }
2493 } else {
2494 self.pending_line
2495 .runs
2496 .push(self.text_style().to_run(text.len()));
2497 }
2498 }
2499
2500 fn trim_trailing_newline(&mut self) {
2501 if self.pending_line.text.ends_with('\n') {
2502 self.pending_line
2503 .text
2504 .truncate(self.pending_line.text.len() - 1);
2505 self.pending_line.runs.last_mut().unwrap().len -= 1;
2506 self.current_source_index -= 1;
2507 }
2508 }
2509
2510 fn replace_pending_checkbox(&mut self, source_range: &Range<usize>) {
2511 let trimmed = self.pending_line.text.trim();
2512 if trimmed == "[x]" || trimmed == "[X]" || trimmed == "[ ]" {
2513 let checked = trimmed != "[ ]";
2514 self.pending_line = PendingLine::default();
2515 let checkbox = Checkbox::new(
2516 ElementId::Name(
2517 format!("table_checkbox_{}_{}", source_range.start, source_range.end).into(),
2518 ),
2519 if checked {
2520 ToggleState::Selected
2521 } else {
2522 ToggleState::Unselected
2523 },
2524 )
2525 .fill()
2526 .visualization_only(true)
2527 .into_any_element();
2528 self.div_stack.last_mut().unwrap().extend([checkbox]);
2529 }
2530 }
2531
2532 fn render_source_anchor(&mut self, source_range: Range<usize>) -> AnyElement {
2533 let mut text_style = self.base_text_style.clone();
2534 text_style.color = Hsla::transparent_black();
2535 let text = "\u{200B}";
2536 let styled_text = StyledText::new(text).with_runs(vec![text_style.to_run(text.len())]);
2537 self.rendered_lines.push(RenderedLine {
2538 layout: styled_text.layout().clone(),
2539 source_mappings: vec![SourceMapping {
2540 rendered_index: 0,
2541 source_index: source_range.start,
2542 }],
2543 source_end: source_range.end,
2544 language: None,
2545 });
2546 div()
2547 .absolute()
2548 .top_0()
2549 .left_0()
2550 .opacity(0.)
2551 .child(styled_text)
2552 .into_any_element()
2553 }
2554
2555 fn flush_text(&mut self) {
2556 let line = mem::take(&mut self.pending_line);
2557 if line.text.is_empty() {
2558 return;
2559 }
2560
2561 let text = StyledText::new(line.text).with_runs(line.runs);
2562 self.rendered_lines.push(RenderedLine {
2563 layout: text.layout().clone(),
2564 source_mappings: line.source_mappings,
2565 source_end: self.current_source_index,
2566 language: self.code_block_stack.last().cloned().flatten(),
2567 });
2568 self.div_stack.last_mut().unwrap().extend([text.into_any()]);
2569 }
2570
2571 fn build(mut self) -> RenderedMarkdown {
2572 debug_assert_eq!(self.div_stack.len(), 1);
2573 self.flush_text();
2574 RenderedMarkdown {
2575 element: self.div_stack.pop().unwrap().into_any_element(),
2576 text: RenderedText {
2577 lines: self.rendered_lines.into(),
2578 links: self.rendered_links.into(),
2579 },
2580 }
2581 }
2582}
2583
2584struct RenderedLine {
2585 layout: TextLayout,
2586 source_mappings: Vec<SourceMapping>,
2587 source_end: usize,
2588 language: Option<Arc<Language>>,
2589}
2590
2591impl RenderedLine {
2592 fn rendered_index_for_source_index(&self, source_index: usize) -> usize {
2593 if source_index >= self.source_end {
2594 return self.layout.len();
2595 }
2596
2597 let mapping = match self
2598 .source_mappings
2599 .binary_search_by_key(&source_index, |probe| probe.source_index)
2600 {
2601 Ok(ix) => &self.source_mappings[ix],
2602 Err(ix) => &self.source_mappings[ix - 1],
2603 };
2604 (mapping.rendered_index + (source_index - mapping.source_index)).min(self.layout.len())
2605 }
2606
2607 fn source_index_for_rendered_index(&self, rendered_index: usize) -> usize {
2608 if rendered_index >= self.layout.len() {
2609 return self.source_end;
2610 }
2611
2612 let mapping = match self
2613 .source_mappings
2614 .binary_search_by_key(&rendered_index, |probe| probe.rendered_index)
2615 {
2616 Ok(ix) => &self.source_mappings[ix],
2617 Err(ix) => &self.source_mappings[ix - 1],
2618 };
2619 mapping.source_index + (rendered_index - mapping.rendered_index)
2620 }
2621
2622 /// Returns the source index for use as an exclusive range end at a word/selection boundary.
2623 /// When the rendered index is exactly at the start of a segment with a gap from the previous
2624 /// segment (e.g., after stripped markdown syntax like backticks), this returns the end of the
2625 /// previous segment rather than the start of the current one.
2626 fn source_index_for_exclusive_rendered_end(&self, rendered_index: usize) -> usize {
2627 if rendered_index >= self.layout.len() {
2628 return self.source_end;
2629 }
2630
2631 let ix = match self
2632 .source_mappings
2633 .binary_search_by_key(&rendered_index, |probe| probe.rendered_index)
2634 {
2635 Ok(ix) => ix,
2636 Err(ix) => {
2637 return self.source_mappings[ix - 1].source_index
2638 + (rendered_index - self.source_mappings[ix - 1].rendered_index);
2639 }
2640 };
2641
2642 // Exact match at the start of a segment. Check if there's a gap from the previous segment.
2643 if ix > 0 {
2644 let prev_mapping = &self.source_mappings[ix - 1];
2645 let mapping = &self.source_mappings[ix];
2646 let prev_segment_len = mapping.rendered_index - prev_mapping.rendered_index;
2647 let prev_source_end = prev_mapping.source_index + prev_segment_len;
2648 if prev_source_end < mapping.source_index {
2649 return prev_source_end;
2650 }
2651 }
2652
2653 self.source_mappings[ix].source_index
2654 }
2655
2656 fn source_index_for_position(&self, position: Point<Pixels>) -> Result<usize, usize> {
2657 let line_rendered_index;
2658 let out_of_bounds;
2659 match self.layout.index_for_position(position) {
2660 Ok(ix) => {
2661 line_rendered_index = ix;
2662 out_of_bounds = false;
2663 }
2664 Err(ix) => {
2665 line_rendered_index = ix;
2666 out_of_bounds = true;
2667 }
2668 };
2669 let source_index = self.source_index_for_rendered_index(line_rendered_index);
2670 if out_of_bounds {
2671 Err(source_index)
2672 } else {
2673 Ok(source_index)
2674 }
2675 }
2676}
2677
2678#[derive(Copy, Clone, Debug, Default)]
2679struct SourceMapping {
2680 rendered_index: usize,
2681 source_index: usize,
2682}
2683
2684pub struct RenderedMarkdown {
2685 element: AnyElement,
2686 text: RenderedText,
2687}
2688
2689#[derive(Clone)]
2690struct RenderedText {
2691 lines: Rc<[RenderedLine]>,
2692 links: Rc<[RenderedLink]>,
2693}
2694
2695#[derive(Debug, Clone, Eq, PartialEq)]
2696struct RenderedLink {
2697 source_range: Range<usize>,
2698 destination_url: SharedString,
2699}
2700
2701impl RenderedText {
2702 fn source_index_for_position(&self, position: Point<Pixels>) -> Result<usize, usize> {
2703 let mut lines = self.lines.iter().peekable();
2704 let mut fallback_line: Option<&RenderedLine> = None;
2705
2706 while let Some(line) = lines.next() {
2707 let line_bounds = line.layout.bounds();
2708
2709 // Exact match: position is within bounds (handles overlapping bounds like table columns)
2710 if line_bounds.contains(&position) {
2711 return line.source_index_for_position(position);
2712 }
2713
2714 // Track fallback for Y-coordinate based matching
2715 if position.y <= line_bounds.bottom() && fallback_line.is_none() {
2716 fallback_line = Some(line);
2717 }
2718
2719 // Handle gap between lines
2720 if position.y > line_bounds.bottom() {
2721 if let Some(next_line) = lines.peek()
2722 && position.y < next_line.layout.bounds().top()
2723 {
2724 return Err(line.source_end);
2725 }
2726 }
2727 }
2728
2729 // Fall back to Y-coordinate matched line
2730 if let Some(line) = fallback_line {
2731 return line.source_index_for_position(position);
2732 }
2733
2734 Err(self.lines.last().map_or(0, |line| line.source_end))
2735 }
2736
2737 fn position_for_source_index(&self, source_index: usize) -> Option<(Point<Pixels>, Pixels)> {
2738 for line in self.lines.iter() {
2739 let line_source_start = line.source_mappings.first().unwrap().source_index;
2740 if source_index < line_source_start {
2741 break;
2742 } else if source_index > line.source_end {
2743 continue;
2744 } else {
2745 let line_height = line.layout.line_height();
2746 let rendered_index_within_line = line.rendered_index_for_source_index(source_index);
2747 let position = line.layout.position_for_index(rendered_index_within_line)?;
2748 return Some((position, line_height));
2749 }
2750 }
2751 None
2752 }
2753
2754 fn surrounding_word_range(&self, source_index: usize) -> Range<usize> {
2755 for line in self.lines.iter() {
2756 if source_index > line.source_end {
2757 continue;
2758 }
2759
2760 let line_rendered_start = line.source_mappings.first().unwrap().rendered_index;
2761 let rendered_index_in_line =
2762 line.rendered_index_for_source_index(source_index) - line_rendered_start;
2763 let text = line.layout.text();
2764
2765 let scope = line.language.as_ref().map(|l| l.default_scope());
2766 let classifier = CharClassifier::new(scope);
2767
2768 let mut prev_chars = text[..rendered_index_in_line].chars().rev().peekable();
2769 let mut next_chars = text[rendered_index_in_line..].chars().peekable();
2770
2771 let word_kind = std::cmp::max(
2772 prev_chars.peek().map(|&c| classifier.kind(c)),
2773 next_chars.peek().map(|&c| classifier.kind(c)),
2774 );
2775
2776 let mut start = rendered_index_in_line;
2777 for c in prev_chars {
2778 if Some(classifier.kind(c)) == word_kind {
2779 start -= c.len_utf8();
2780 } else {
2781 break;
2782 }
2783 }
2784
2785 let mut end = rendered_index_in_line;
2786 for c in next_chars {
2787 if Some(classifier.kind(c)) == word_kind {
2788 end += c.len_utf8();
2789 } else {
2790 break;
2791 }
2792 }
2793
2794 return line.source_index_for_rendered_index(line_rendered_start + start)
2795 ..line.source_index_for_exclusive_rendered_end(line_rendered_start + end);
2796 }
2797
2798 source_index..source_index
2799 }
2800
2801 fn surrounding_line_range(&self, source_index: usize) -> Range<usize> {
2802 for line in self.lines.iter() {
2803 if source_index > line.source_end {
2804 continue;
2805 }
2806 let line_source_start = line.source_mappings.first().unwrap().source_index;
2807 return line_source_start..line.source_end;
2808 }
2809
2810 source_index..source_index
2811 }
2812
2813 fn text_for_range(&self, range: Range<usize>) -> String {
2814 let mut accumulator = String::new();
2815
2816 for line in self.lines.iter() {
2817 if range.start > line.source_end {
2818 continue;
2819 }
2820 let line_source_start = line.source_mappings.first().unwrap().source_index;
2821 if range.end < line_source_start {
2822 break;
2823 }
2824
2825 let text = line.layout.text();
2826
2827 let start = if range.start < line_source_start {
2828 0
2829 } else {
2830 line.rendered_index_for_source_index(range.start)
2831 };
2832 let end = if range.end > line.source_end {
2833 line.rendered_index_for_source_index(line.source_end)
2834 } else {
2835 line.rendered_index_for_source_index(range.end)
2836 }
2837 .min(text.len());
2838
2839 accumulator.push_str(&text[start..end]);
2840 accumulator.push('\n');
2841 }
2842 // Remove trailing newline
2843 accumulator.pop();
2844 accumulator
2845 }
2846
2847 fn link_for_position(&self, position: Point<Pixels>) -> Option<&RenderedLink> {
2848 let source_index = self.source_index_for_position(position).ok()?;
2849 self.links
2850 .iter()
2851 .find(|link| link.source_range.contains(&source_index))
2852 }
2853}
2854
2855#[cfg(test)]
2856mod tests {
2857 use super::*;
2858 use gpui::{TestAppContext, size};
2859 use language::{Language, LanguageConfig, LanguageMatcher};
2860 use std::sync::Arc;
2861
2862 fn ensure_theme_initialized(cx: &mut TestAppContext) {
2863 cx.update(|cx| {
2864 if !cx.has_global::<settings::SettingsStore>() {
2865 settings::init(cx);
2866 }
2867 if !cx.has_global::<theme::GlobalTheme>() {
2868 theme_settings::init(theme::LoadThemes::JustBase, cx);
2869 }
2870 });
2871 }
2872
2873 #[gpui::test]
2874 fn test_mappings(cx: &mut TestAppContext) {
2875 // Formatting.
2876 assert_mappings(
2877 &render_markdown("He*l*lo", cx),
2878 vec![vec![(0, 0), (1, 1), (2, 3), (3, 5), (4, 6), (5, 7)]],
2879 );
2880
2881 // Multiple lines.
2882 assert_mappings(
2883 &render_markdown("Hello\n\nWorld", cx),
2884 vec![
2885 vec![(0, 0), (1, 1), (2, 2), (3, 3), (4, 4), (5, 5)],
2886 vec![(0, 7), (1, 8), (2, 9), (3, 10), (4, 11), (5, 12)],
2887 ],
2888 );
2889
2890 // Multi-byte characters.
2891 assert_mappings(
2892 &render_markdown("αβγ\n\nδεζ", cx),
2893 vec![
2894 vec![(0, 0), (2, 2), (4, 4), (6, 6)],
2895 vec![(0, 8), (2, 10), (4, 12), (6, 14)],
2896 ],
2897 );
2898
2899 // Smart quotes.
2900 assert_mappings(&render_markdown("\"", cx), vec![vec![(0, 0), (3, 1)]]);
2901 assert_mappings(
2902 &render_markdown("\"hey\"", cx),
2903 vec![vec![(0, 0), (3, 1), (4, 2), (5, 3), (6, 4), (9, 5)]],
2904 );
2905
2906 // HTML Comments are ignored
2907 assert_mappings(
2908 &render_markdown(
2909 "<!--\nrdoc-file=string.c\n- str.intern -> symbol\n- str.to_sym -> symbol\n-->\nReturns",
2910 cx,
2911 ),
2912 vec![vec![
2913 (0, 78),
2914 (1, 79),
2915 (2, 80),
2916 (3, 81),
2917 (4, 82),
2918 (5, 83),
2919 (6, 84),
2920 ]],
2921 );
2922 }
2923
2924 fn render_markdown(markdown: &str, cx: &mut TestAppContext) -> RenderedText {
2925 render_markdown_with_language_registry(markdown, None, cx)
2926 }
2927
2928 fn render_markdown_with_language_registry(
2929 markdown: &str,
2930 language_registry: Option<Arc<LanguageRegistry>>,
2931 cx: &mut TestAppContext,
2932 ) -> RenderedText {
2933 render_markdown_with_options(markdown, language_registry, MarkdownOptions::default(), cx)
2934 }
2935
2936 fn render_markdown_with_options(
2937 markdown: &str,
2938 language_registry: Option<Arc<LanguageRegistry>>,
2939 options: MarkdownOptions,
2940 cx: &mut TestAppContext,
2941 ) -> RenderedText {
2942 struct TestWindow;
2943
2944 impl Render for TestWindow {
2945 fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
2946 div()
2947 }
2948 }
2949
2950 ensure_theme_initialized(cx);
2951
2952 let (_, cx) = cx.add_window_view(|_, _| TestWindow);
2953 let markdown = cx.new(|cx| {
2954 Markdown::new_with_options(
2955 markdown.to_string().into(),
2956 language_registry,
2957 None,
2958 options,
2959 cx,
2960 )
2961 });
2962 cx.run_until_parked();
2963 let (rendered, _) = cx.draw(
2964 Default::default(),
2965 size(px(600.0), px(600.0)),
2966 |_window, _cx| {
2967 MarkdownElement::new(markdown, MarkdownStyle::default()).code_block_renderer(
2968 CodeBlockRenderer::Default {
2969 copy_button_visibility: CopyButtonVisibility::Hidden,
2970 border: false,
2971 },
2972 )
2973 },
2974 );
2975 rendered.text
2976 }
2977
2978 #[gpui::test]
2979 fn test_surrounding_word_range(cx: &mut TestAppContext) {
2980 let rendered = render_markdown("Hello world tesεζ", cx);
2981
2982 // Test word selection for "Hello"
2983 let word_range = rendered.surrounding_word_range(2); // Simulate click on 'l' in "Hello"
2984 let selected_text = rendered.text_for_range(word_range);
2985 assert_eq!(selected_text, "Hello");
2986
2987 // Test word selection for "world"
2988 let word_range = rendered.surrounding_word_range(7); // Simulate click on 'o' in "world"
2989 let selected_text = rendered.text_for_range(word_range);
2990 assert_eq!(selected_text, "world");
2991
2992 // Test word selection for "tesεζ"
2993 let word_range = rendered.surrounding_word_range(14); // Simulate click on 's' in "tesεζ"
2994 let selected_text = rendered.text_for_range(word_range);
2995 assert_eq!(selected_text, "tesεζ");
2996
2997 // Test word selection at word boundary (space)
2998 let word_range = rendered.surrounding_word_range(5); // Simulate click on space between "Hello" and "world", expect highlighting word to the left
2999 let selected_text = rendered.text_for_range(word_range);
3000 assert_eq!(selected_text, "Hello");
3001 }
3002
3003 #[gpui::test]
3004 fn test_surrounding_line_range(cx: &mut TestAppContext) {
3005 let rendered = render_markdown("First line\n\nSecond line\n\nThird lineεζ", cx);
3006
3007 // Test getting line range for first line
3008 let line_range = rendered.surrounding_line_range(5); // Simulate click somewhere in first line
3009 let selected_text = rendered.text_for_range(line_range);
3010 assert_eq!(selected_text, "First line");
3011
3012 // Test getting line range for second line
3013 let line_range = rendered.surrounding_line_range(13); // Simulate click at beginning in second line
3014 let selected_text = rendered.text_for_range(line_range);
3015 assert_eq!(selected_text, "Second line");
3016
3017 // Test getting line range for third line
3018 let line_range = rendered.surrounding_line_range(37); // Simulate click at end of third line with multi-byte chars
3019 let selected_text = rendered.text_for_range(line_range);
3020 assert_eq!(selected_text, "Third lineεζ");
3021 }
3022
3023 #[gpui::test]
3024 fn test_selection_head_movement(cx: &mut TestAppContext) {
3025 let rendered = render_markdown("Hello world test", cx);
3026
3027 let mut selection = Selection {
3028 start: 5,
3029 end: 5,
3030 reversed: false,
3031 pending: false,
3032 mode: SelectMode::Character,
3033 };
3034
3035 // Test forward selection
3036 selection.set_head(10, &rendered);
3037 assert_eq!(selection.start, 5);
3038 assert_eq!(selection.end, 10);
3039 assert!(!selection.reversed);
3040 assert_eq!(selection.tail(), 5);
3041
3042 // Test backward selection
3043 selection.set_head(2, &rendered);
3044 assert_eq!(selection.start, 2);
3045 assert_eq!(selection.end, 5);
3046 assert!(selection.reversed);
3047 assert_eq!(selection.tail(), 5);
3048
3049 // Test forward selection again from reversed state
3050 selection.set_head(15, &rendered);
3051 assert_eq!(selection.start, 5);
3052 assert_eq!(selection.end, 15);
3053 assert!(!selection.reversed);
3054 assert_eq!(selection.tail(), 5);
3055 }
3056
3057 #[gpui::test]
3058 fn test_word_selection_drag(cx: &mut TestAppContext) {
3059 let rendered = render_markdown("Hello world test", cx);
3060
3061 // Start with a simulated double-click on "world" (index 6-10)
3062 let word_range = rendered.surrounding_word_range(7); // Click on 'o' in "world"
3063 let mut selection = Selection {
3064 start: word_range.start,
3065 end: word_range.end,
3066 reversed: false,
3067 pending: true,
3068 mode: SelectMode::Word(word_range),
3069 };
3070
3071 // Drag forward to "test" - should expand selection to include "test"
3072 selection.set_head(13, &rendered); // Index in "test"
3073 assert_eq!(selection.start, 6); // Start of "world"
3074 assert_eq!(selection.end, 16); // End of "test"
3075 assert!(!selection.reversed);
3076 let selected_text = rendered.text_for_range(selection.start..selection.end);
3077 assert_eq!(selected_text, "world test");
3078
3079 // Drag backward to "Hello" - should expand selection to include "Hello"
3080 selection.set_head(2, &rendered); // Index in "Hello"
3081 assert_eq!(selection.start, 0); // Start of "Hello"
3082 assert_eq!(selection.end, 11); // End of "world" (original selection)
3083 assert!(selection.reversed);
3084 let selected_text = rendered.text_for_range(selection.start..selection.end);
3085 assert_eq!(selected_text, "Hello world");
3086
3087 // Drag back within original word - should revert to original selection
3088 selection.set_head(8, &rendered); // Back within "world"
3089 assert_eq!(selection.start, 6); // Start of "world"
3090 assert_eq!(selection.end, 11); // End of "world"
3091 assert!(!selection.reversed);
3092 let selected_text = rendered.text_for_range(selection.start..selection.end);
3093 assert_eq!(selected_text, "world");
3094 }
3095
3096 #[gpui::test]
3097 fn test_selection_with_markdown_formatting(cx: &mut TestAppContext) {
3098 let rendered = render_markdown(
3099 "This is **bold** text, this is *italic* text, use `code` here",
3100 cx,
3101 );
3102 let word_range = rendered.surrounding_word_range(10); // Inside "bold"
3103 let selected_text = rendered.text_for_range(word_range);
3104 assert_eq!(selected_text, "bold");
3105
3106 let word_range = rendered.surrounding_word_range(32); // Inside "italic"
3107 let selected_text = rendered.text_for_range(word_range);
3108 assert_eq!(selected_text, "italic");
3109
3110 let word_range = rendered.surrounding_word_range(51); // Inside "code"
3111 let selected_text = rendered.text_for_range(word_range);
3112 assert_eq!(selected_text, "code");
3113 }
3114
3115 #[gpui::test]
3116 fn test_table_column_selection(cx: &mut TestAppContext) {
3117 let rendered = render_markdown("| a | b |\n|---|---|\n| c | d |", cx);
3118
3119 assert!(rendered.lines.len() >= 2);
3120 let first_bounds = rendered.lines[0].layout.bounds();
3121 let second_bounds = rendered.lines[1].layout.bounds();
3122
3123 let first_index = match rendered.source_index_for_position(first_bounds.center()) {
3124 Ok(index) | Err(index) => index,
3125 };
3126 let second_index = match rendered.source_index_for_position(second_bounds.center()) {
3127 Ok(index) | Err(index) => index,
3128 };
3129
3130 let first_word = rendered.text_for_range(rendered.surrounding_word_range(first_index));
3131 let second_word = rendered.text_for_range(rendered.surrounding_word_range(second_index));
3132
3133 assert_eq!(first_word, "a");
3134 assert_eq!(second_word, "b");
3135 }
3136
3137 #[test]
3138 fn test_table_checkbox_detection() {
3139 let md = "| Done |\n|------|\n| [x] |\n| [ ] |";
3140 let events = crate::parser::parse_markdown_with_options(md, false, false).events;
3141
3142 let mut in_table = false;
3143 let mut cell_texts: Vec<String> = Vec::new();
3144 let mut current_cell = String::new();
3145
3146 for (range, event) in &events {
3147 match event {
3148 MarkdownEvent::Start(MarkdownTag::Table(_)) => in_table = true,
3149 MarkdownEvent::End(MarkdownTagEnd::Table) => in_table = false,
3150 MarkdownEvent::Start(MarkdownTag::TableCell) => current_cell.clear(),
3151 MarkdownEvent::End(MarkdownTagEnd::TableCell) => {
3152 if in_table {
3153 cell_texts.push(current_cell.clone());
3154 }
3155 }
3156 MarkdownEvent::Text if in_table => {
3157 current_cell.push_str(&md[range.clone()]);
3158 }
3159 _ => {}
3160 }
3161 }
3162
3163 let checkbox_cells: Vec<&String> = cell_texts
3164 .iter()
3165 .filter(|t| {
3166 let trimmed = t.trim();
3167 trimmed == "[x]" || trimmed == "[X]" || trimmed == "[ ]"
3168 })
3169 .collect();
3170 assert_eq!(
3171 checkbox_cells.len(),
3172 2,
3173 "Expected 2 checkbox cells, got: {cell_texts:?}"
3174 );
3175 assert_eq!(checkbox_cells[0].trim(), "[x]");
3176 assert_eq!(checkbox_cells[1].trim(), "[ ]");
3177 }
3178
3179 #[gpui::test]
3180 fn test_inline_code_word_selection_excludes_backticks(cx: &mut TestAppContext) {
3181 // Test that double-clicking on inline code selects just the code content,
3182 // not the backticks. This verifies the fix for the bug where selecting
3183 // inline code would include the trailing backtick.
3184 let rendered = render_markdown("use `blah` here", cx);
3185
3186 // Source layout: "use `blah` here"
3187 // 0123456789...
3188 // The inline code "blah" is at source positions 5-8 (content range 5..9)
3189
3190 // Click inside "blah" - should select just "blah", not "blah`"
3191 let word_range = rendered.surrounding_word_range(6); // 'l' in "blah"
3192
3193 // text_for_range extracts from the rendered text (without backticks), so it
3194 // would return "blah" even with a wrong source range. We check it anyway.
3195 let selected_text = rendered.text_for_range(word_range.clone());
3196 assert_eq!(selected_text, "blah");
3197
3198 // The source range is what matters for copy_as_markdown and selected_text,
3199 // which extract directly from the source. With the bug, this would be 5..10
3200 // which includes the closing backtick at position 9.
3201 assert_eq!(word_range, 5..9);
3202 }
3203
3204 #[gpui::test]
3205 fn test_surrounding_word_range_respects_word_characters(cx: &mut TestAppContext) {
3206 let rendered = render_markdown("foo.bar() baz", cx);
3207
3208 // Double clicking on 'f' in "foo" - should select just "foo"
3209 let word_range = rendered.surrounding_word_range(0);
3210 let selected_text = rendered.text_for_range(word_range);
3211 assert_eq!(selected_text, "foo");
3212
3213 // Double clicking on 'b' in "bar" - should select just "bar"
3214 let word_range = rendered.surrounding_word_range(4);
3215 let selected_text = rendered.text_for_range(word_range);
3216 assert_eq!(selected_text, "bar");
3217
3218 // Double clicking on 'b' in "baz" - should select "baz"
3219 let word_range = rendered.surrounding_word_range(10);
3220 let selected_text = rendered.text_for_range(word_range);
3221 assert_eq!(selected_text, "baz");
3222
3223 // Double clicking selects word characters in code blocks
3224 let javascript_language = Arc::new(Language::new(
3225 LanguageConfig {
3226 name: "JavaScript".into(),
3227 matcher: LanguageMatcher {
3228 path_suffixes: vec!["js".to_string()],
3229 ..Default::default()
3230 },
3231 word_characters: ['$', '#'].into_iter().collect(),
3232 ..Default::default()
3233 },
3234 None,
3235 ));
3236
3237 let language_registry = Arc::new(LanguageRegistry::test(cx.executor()));
3238 language_registry.add(javascript_language);
3239
3240 let rendered = render_markdown_with_language_registry(
3241 "```javascript\n$foo #bar\n```",
3242 Some(language_registry),
3243 cx,
3244 );
3245
3246 let word_range = rendered.surrounding_word_range(14);
3247 let selected_text = rendered.text_for_range(word_range);
3248 assert_eq!(selected_text, "$foo");
3249
3250 let word_range = rendered.surrounding_word_range(19);
3251 let selected_text = rendered.text_for_range(word_range);
3252 assert_eq!(selected_text, "#bar");
3253 }
3254
3255 #[gpui::test]
3256 fn test_all_selection(cx: &mut TestAppContext) {
3257 let rendered = render_markdown("Hello world\n\nThis is a test\n\nwith multiple lines", cx);
3258
3259 let total_length = rendered
3260 .lines
3261 .last()
3262 .map(|line| line.source_end)
3263 .unwrap_or(0);
3264
3265 let mut selection = Selection {
3266 start: 0,
3267 end: total_length,
3268 reversed: false,
3269 pending: true,
3270 mode: SelectMode::All,
3271 };
3272
3273 selection.set_head(5, &rendered); // Try to set head in middle
3274 assert_eq!(selection.start, 0);
3275 assert_eq!(selection.end, total_length);
3276 assert!(!selection.reversed);
3277
3278 selection.set_head(25, &rendered); // Try to set head near end
3279 assert_eq!(selection.start, 0);
3280 assert_eq!(selection.end, total_length);
3281 assert!(!selection.reversed);
3282
3283 let selected_text = rendered.text_for_range(selection.start..selection.end);
3284 assert_eq!(
3285 selected_text,
3286 "Hello world\nThis is a test\nwith multiple lines"
3287 );
3288 }
3289
3290 fn nbsp(n: usize) -> String {
3291 "\u{00A0}".repeat(n)
3292 }
3293
3294 #[test]
3295 fn test_escape_plain_text() {
3296 assert_eq!(Markdown::escape("hello world"), "hello world");
3297 assert_eq!(Markdown::escape(""), "");
3298 assert_eq!(Markdown::escape("café ☕ naïve"), "café ☕ naïve");
3299 }
3300
3301 #[test]
3302 fn test_escape_punctuation() {
3303 assert_eq!(Markdown::escape("hello `world`"), r"hello \`world\`");
3304 assert_eq!(Markdown::escape("a|b"), r"a\|b");
3305 }
3306
3307 #[test]
3308 fn test_escape_leading_spaces() {
3309 assert_eq!(Markdown::escape(" hello"), [ (4), "hello"].concat());
3310 assert_eq!(
3311 Markdown::escape(" | { a: string }"),
3312 [ (4), r"\| \{ a\: string \}"].concat()
3313 );
3314 assert_eq!(
3315 Markdown::escape(" first\n second"),
3316 [ (2), "first\n\n",  (2), "second"].concat()
3317 );
3318 assert_eq!(Markdown::escape("hello world"), "hello world");
3319 }
3320
3321 #[test]
3322 fn test_escape_leading_tabs() {
3323 assert_eq!(Markdown::escape("\thello"), [ (4), "hello"].concat());
3324 assert_eq!(
3325 Markdown::escape("hello\n\t\tindented"),
3326 ["hello\n\n",  (8), "indented"].concat()
3327 );
3328 assert_eq!(
3329 Markdown::escape(" \t hello"),
3330 [ (1 + 4 + 1), "hello"].concat()
3331 );
3332 assert_eq!(Markdown::escape("hello\tworld"), "hello\tworld");
3333 }
3334
3335 #[test]
3336 fn test_escape_newlines() {
3337 assert_eq!(Markdown::escape("a\nb"), "a\n\nb");
3338 assert_eq!(Markdown::escape("a\n\nb"), "a\n\n\n\nb");
3339 assert_eq!(Markdown::escape("\nhello"), "\n\nhello");
3340 }
3341
3342 #[test]
3343 fn test_escape_multiline_diagnostic() {
3344 assert_eq!(
3345 Markdown::escape(" | { a: string }\n | { b: number }"),
3346 [
3347  (4),
3348 r"\| \{ a\: string \}",
3349 "\n\n",
3350  (4),
3351 r"\| \{ b\: number \}",
3352 ]
3353 .concat()
3354 );
3355 }
3356
3357 fn has_code_block(markdown: &str) -> bool {
3358 let parsed_data = parse_markdown_with_options(markdown, false, false);
3359 parsed_data
3360 .events
3361 .iter()
3362 .any(|(_, event)| matches!(event, MarkdownEvent::Start(MarkdownTag::CodeBlock { .. })))
3363 }
3364
3365 #[test]
3366 fn test_escape_output_len_matches_precomputed() {
3367 let cases = [
3368 "",
3369 "hello world",
3370 "hello `world`",
3371 " hello",
3372 " | { a: string }",
3373 "\thello",
3374 "hello\n\t\tindented",
3375 " \t hello",
3376 "hello\tworld",
3377 "a\nb",
3378 "a\n\nb",
3379 "\nhello",
3380 " | { a: string }\n | { b: number }",
3381 "café ☕ naïve",
3382 ];
3383 for input in cases {
3384 let mut escaper = MarkdownEscaper::new();
3385 let precomputed: usize = input.bytes().map(|b| escaper.next(b).output_len()).sum();
3386
3387 let mut escaper = MarkdownEscaper::new();
3388 let mut output = String::new();
3389 for c in input.chars() {
3390 escaper.next(c as u8).write_to(c, &mut output);
3391 }
3392
3393 assert_eq!(precomputed, output.len(), "length mismatch for {:?}", input);
3394 }
3395 }
3396
3397 #[test]
3398 fn test_escape_prevents_code_block() {
3399 let diagnostic = " | { a: string }";
3400 assert!(has_code_block(diagnostic));
3401 assert!(!has_code_block(&Markdown::escape(diagnostic)));
3402 }
3403
3404 #[track_caller]
3405 fn assert_mappings(rendered: &RenderedText, expected: Vec<Vec<(usize, usize)>>) {
3406 assert_eq!(rendered.lines.len(), expected.len(), "line count mismatch");
3407 for (line_ix, line_mappings) in expected.into_iter().enumerate() {
3408 let line = &rendered.lines[line_ix];
3409
3410 assert!(
3411 line.source_mappings.windows(2).all(|mappings| {
3412 mappings[0].source_index < mappings[1].source_index
3413 && mappings[0].rendered_index < mappings[1].rendered_index
3414 }),
3415 "line {} has duplicate mappings: {:?}",
3416 line_ix,
3417 line.source_mappings
3418 );
3419
3420 for (rendered_ix, source_ix) in line_mappings {
3421 assert_eq!(
3422 line.source_index_for_rendered_index(rendered_ix),
3423 source_ix,
3424 "line {}, rendered_ix {}",
3425 line_ix,
3426 rendered_ix
3427 );
3428
3429 assert_eq!(
3430 line.rendered_index_for_source_index(source_ix),
3431 rendered_ix,
3432 "line {}, source_ix {}",
3433 line_ix,
3434 source_ix
3435 );
3436 }
3437 }
3438 }
3439}