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