markdown_renderer.rs

   1use crate::{
   2    markdown_elements::{
   3        HeadingLevel, Image, Link, MarkdownParagraph, MarkdownParagraphChunk, ParsedMarkdown,
   4        ParsedMarkdownBlockQuote, ParsedMarkdownCodeBlock, ParsedMarkdownElement,
   5        ParsedMarkdownHeading, ParsedMarkdownListItem, ParsedMarkdownListItemType,
   6        ParsedMarkdownMermaidDiagram, ParsedMarkdownMermaidDiagramContents, ParsedMarkdownTable,
   7        ParsedMarkdownTableAlignment, ParsedMarkdownTableRow,
   8    },
   9    markdown_preview_view::MarkdownPreviewView,
  10};
  11use collections::HashMap;
  12use fs::normalize_path;
  13use gpui::{
  14    AbsoluteLength, Animation, AnimationExt, AnyElement, App, AppContext as _, Context, Div,
  15    Element, ElementId, Entity, HighlightStyle, Hsla, ImageSource, InteractiveText, IntoElement,
  16    Keystroke, Modifiers, ParentElement, Render, RenderImage, Resource, SharedString, Styled,
  17    StyledText, Task, TextStyle, WeakEntity, Window, div, img, pulsating_between, rems,
  18};
  19use settings::Settings;
  20use std::{
  21    ops::{Mul, Range},
  22    sync::{Arc, OnceLock},
  23    time::Duration,
  24    vec,
  25};
  26use theme::{ActiveTheme, SyntaxTheme, ThemeSettings};
  27use ui::{CopyButton, LinkPreview, ToggleState, prelude::*, tooltip_container};
  28use workspace::{OpenOptions, OpenVisible, Workspace};
  29
  30pub struct CheckboxClickedEvent {
  31    pub checked: bool,
  32    pub source_range: Range<usize>,
  33}
  34
  35impl CheckboxClickedEvent {
  36    pub fn source_range(&self) -> Range<usize> {
  37        self.source_range.clone()
  38    }
  39
  40    pub fn checked(&self) -> bool {
  41        self.checked
  42    }
  43}
  44
  45type CheckboxClickedCallback = Arc<Box<dyn Fn(&CheckboxClickedEvent, &mut Window, &mut App)>>;
  46
  47type MermaidDiagramCache = HashMap<ParsedMarkdownMermaidDiagramContents, CachedMermaidDiagram>;
  48
  49#[derive(Default)]
  50pub(crate) struct MermaidState {
  51    cache: MermaidDiagramCache,
  52    order: Vec<ParsedMarkdownMermaidDiagramContents>,
  53}
  54
  55impl MermaidState {
  56    fn get_fallback_image(
  57        idx: usize,
  58        old_order: &[ParsedMarkdownMermaidDiagramContents],
  59        new_order_len: usize,
  60        cache: &MermaidDiagramCache,
  61    ) -> Option<Arc<RenderImage>> {
  62        // When the diagram count changes e.g. addition or removal, positional matching
  63        // is unreliable since a new diagram at index i likely doesn't correspond to the
  64        // old diagram at index i. We only allow fallbacks when counts match, which covers
  65        // the common case of editing a diagram in-place.
  66        //
  67        // Swapping two diagrams would briefly show the stale fallback, but that's an edge
  68        // case we don't handle.
  69        if old_order.len() != new_order_len {
  70            return None;
  71        }
  72        old_order.get(idx).and_then(|old_content| {
  73            cache.get(old_content).and_then(|old_cached| {
  74                old_cached
  75                    .render_image
  76                    .get()
  77                    .and_then(|result| result.as_ref().ok().cloned())
  78                    // Chain fallbacks for rapid edits.
  79                    .or_else(|| old_cached.fallback_image.clone())
  80            })
  81        })
  82    }
  83
  84    pub(crate) fn update(
  85        &mut self,
  86        parsed: &ParsedMarkdown,
  87        cx: &mut Context<MarkdownPreviewView>,
  88    ) {
  89        use crate::markdown_elements::ParsedMarkdownElement;
  90        use std::collections::HashSet;
  91
  92        let mut new_order = Vec::new();
  93        for element in parsed.children.iter() {
  94            if let ParsedMarkdownElement::MermaidDiagram(mermaid_diagram) = element {
  95                new_order.push(mermaid_diagram.contents.clone());
  96            }
  97        }
  98
  99        for (idx, new_content) in new_order.iter().enumerate() {
 100            if !self.cache.contains_key(new_content) {
 101                let fallback =
 102                    Self::get_fallback_image(idx, &self.order, new_order.len(), &self.cache);
 103                self.cache.insert(
 104                    new_content.clone(),
 105                    CachedMermaidDiagram::new(new_content.clone(), fallback, cx),
 106                );
 107            }
 108        }
 109
 110        let new_order_set: HashSet<_> = new_order.iter().cloned().collect();
 111        self.cache
 112            .retain(|content, _| new_order_set.contains(content));
 113        self.order = new_order;
 114    }
 115}
 116
 117pub(crate) struct CachedMermaidDiagram {
 118    pub(crate) render_image: Arc<OnceLock<anyhow::Result<Arc<RenderImage>>>>,
 119    pub(crate) fallback_image: Option<Arc<RenderImage>>,
 120    _task: Task<()>,
 121}
 122
 123impl CachedMermaidDiagram {
 124    pub(crate) fn new(
 125        contents: ParsedMarkdownMermaidDiagramContents,
 126        fallback_image: Option<Arc<RenderImage>>,
 127        cx: &mut Context<MarkdownPreviewView>,
 128    ) -> Self {
 129        let result = Arc::new(OnceLock::<anyhow::Result<Arc<RenderImage>>>::new());
 130        let result_clone = result.clone();
 131        let svg_renderer = cx.svg_renderer();
 132
 133        let _task = cx.spawn(async move |this, cx| {
 134            let value = cx
 135                .background_spawn(async move {
 136                    let svg_string = crashes::recoverable_panic(|| {
 137                        mermaid_rs_renderer::render(&contents.contents)
 138                    })??;
 139                    let scale = contents.scale as f32 / 100.0;
 140                    svg_renderer
 141                        .render_single_frame(svg_string.as_bytes(), scale, true)
 142                        .map_err(|e| anyhow::anyhow!("{}", e))
 143                })
 144                .await;
 145            let _ = result_clone.set(value);
 146            this.update(cx, |_, cx| {
 147                cx.notify();
 148            })
 149            .ok();
 150        });
 151
 152        Self {
 153            render_image: result,
 154            fallback_image,
 155            _task,
 156        }
 157    }
 158
 159    #[cfg(test)]
 160    fn new_for_test(
 161        render_image: Option<Arc<RenderImage>>,
 162        fallback_image: Option<Arc<RenderImage>>,
 163    ) -> Self {
 164        let result = Arc::new(OnceLock::new());
 165        if let Some(img) = render_image {
 166            let _ = result.set(Ok(img));
 167        }
 168        Self {
 169            render_image: result,
 170            fallback_image,
 171            _task: Task::ready(()),
 172        }
 173    }
 174}
 175#[derive(Clone)]
 176pub struct RenderContext<'a> {
 177    workspace: Option<WeakEntity<Workspace>>,
 178    next_id: usize,
 179    buffer_font_family: SharedString,
 180    buffer_text_style: TextStyle,
 181    text_style: TextStyle,
 182    border_color: Hsla,
 183    title_bar_background_color: Hsla,
 184    panel_background_color: Hsla,
 185    text_color: Hsla,
 186    link_color: Hsla,
 187    window_rem_size: Pixels,
 188    text_muted_color: Hsla,
 189    code_block_background_color: Hsla,
 190    code_span_background_color: Hsla,
 191    syntax_theme: Arc<SyntaxTheme>,
 192    indent: usize,
 193    checkbox_clicked_callback: Option<CheckboxClickedCallback>,
 194    is_last_child: bool,
 195    mermaid_state: &'a MermaidState,
 196}
 197
 198impl<'a> RenderContext<'a> {
 199    pub(crate) fn new(
 200        workspace: Option<WeakEntity<Workspace>>,
 201        mermaid_state: &'a MermaidState,
 202        window: &mut Window,
 203        cx: &mut App,
 204    ) -> Self {
 205        let theme = cx.theme().clone();
 206
 207        let settings = ThemeSettings::get_global(cx);
 208        let buffer_font_family = settings.buffer_font.family.clone();
 209        let buffer_font_features = settings.buffer_font.features.clone();
 210        let mut buffer_text_style = window.text_style();
 211        buffer_text_style.font_family = buffer_font_family.clone();
 212        buffer_text_style.font_features = buffer_font_features;
 213        buffer_text_style.font_size = AbsoluteLength::from(settings.buffer_font_size(cx));
 214
 215        RenderContext {
 216            workspace,
 217            next_id: 0,
 218            indent: 0,
 219            buffer_font_family,
 220            buffer_text_style,
 221            text_style: window.text_style(),
 222            syntax_theme: theme.syntax().clone(),
 223            border_color: theme.colors().border,
 224            title_bar_background_color: theme.colors().title_bar_background,
 225            panel_background_color: theme.colors().panel_background,
 226            text_color: theme.colors().text,
 227            link_color: theme.colors().text_accent,
 228            window_rem_size: window.rem_size(),
 229            text_muted_color: theme.colors().text_muted,
 230            code_block_background_color: theme.colors().surface_background,
 231            code_span_background_color: theme.colors().editor_document_highlight_read_background,
 232            checkbox_clicked_callback: None,
 233            is_last_child: false,
 234            mermaid_state,
 235        }
 236    }
 237
 238    pub fn with_checkbox_clicked_callback(
 239        mut self,
 240        callback: impl Fn(&CheckboxClickedEvent, &mut Window, &mut App) + 'static,
 241    ) -> Self {
 242        self.checkbox_clicked_callback = Some(Arc::new(Box::new(callback)));
 243        self
 244    }
 245
 246    fn next_id(&mut self, span: &Range<usize>) -> ElementId {
 247        let id = format!("markdown-{}-{}-{}", self.next_id, span.start, span.end);
 248        self.next_id += 1;
 249        ElementId::from(SharedString::from(id))
 250    }
 251
 252    /// HACK: used to have rems relative to buffer font size, so that things scale appropriately as
 253    /// buffer font size changes. The callees of this function should be reimplemented to use real
 254    /// relative sizing once that is implemented in GPUI
 255    pub fn scaled_rems(&self, rems: f32) -> Rems {
 256        self.buffer_text_style
 257            .font_size
 258            .to_rems(self.window_rem_size)
 259            .mul(rems)
 260    }
 261
 262    /// This ensures that children inside of block quotes
 263    /// have padding between them.
 264    ///
 265    /// For example, for this markdown:
 266    ///
 267    /// ```markdown
 268    /// > This is a block quote.
 269    /// >
 270    /// > And this is the next paragraph.
 271    /// ```
 272    ///
 273    /// We give padding between "This is a block quote."
 274    /// and "And this is the next paragraph."
 275    fn with_common_p(&self, element: Div) -> Div {
 276        if self.indent > 0 && !self.is_last_child {
 277            element.pb(self.scaled_rems(0.75))
 278        } else {
 279            element
 280        }
 281    }
 282
 283    /// The is used to indicate that the current element is the last child or not of its parent.
 284    ///
 285    /// Then we can avoid adding padding to the bottom of the last child.
 286    fn with_last_child<R>(&mut self, is_last: bool, render: R) -> AnyElement
 287    where
 288        R: FnOnce(&mut Self) -> AnyElement,
 289    {
 290        self.is_last_child = is_last;
 291        let element = render(self);
 292        self.is_last_child = false;
 293        element
 294    }
 295}
 296
 297pub fn render_parsed_markdown(
 298    parsed: &ParsedMarkdown,
 299    workspace: Option<WeakEntity<Workspace>>,
 300    window: &mut Window,
 301    cx: &mut App,
 302) -> Div {
 303    let cache = Default::default();
 304    let mut cx = RenderContext::new(workspace, &cache, window, cx);
 305
 306    v_flex().gap_3().children(
 307        parsed
 308            .children
 309            .iter()
 310            .map(|block| render_markdown_block(block, &mut cx)),
 311    )
 312}
 313pub fn render_markdown_block(block: &ParsedMarkdownElement, cx: &mut RenderContext) -> AnyElement {
 314    use ParsedMarkdownElement::*;
 315    match block {
 316        Paragraph(text) => render_markdown_paragraph(text, cx),
 317        Heading(heading) => render_markdown_heading(heading, cx),
 318        ListItem(list_item) => render_markdown_list_item(list_item, cx),
 319        Table(table) => render_markdown_table(table, cx),
 320        BlockQuote(block_quote) => render_markdown_block_quote(block_quote, cx),
 321        CodeBlock(code_block) => render_markdown_code_block(code_block, cx),
 322        MermaidDiagram(mermaid) => render_mermaid_diagram(mermaid, cx),
 323        HorizontalRule(_) => render_markdown_rule(cx),
 324        Image(image) => render_markdown_image(image, cx),
 325    }
 326}
 327
 328fn render_markdown_heading(parsed: &ParsedMarkdownHeading, cx: &mut RenderContext) -> AnyElement {
 329    let size = match parsed.level {
 330        HeadingLevel::H1 => 2.,
 331        HeadingLevel::H2 => 1.5,
 332        HeadingLevel::H3 => 1.25,
 333        HeadingLevel::H4 => 1.,
 334        HeadingLevel::H5 => 0.875,
 335        HeadingLevel::H6 => 0.85,
 336    };
 337
 338    let text_size = cx.scaled_rems(size);
 339
 340    // was `DefiniteLength::from(text_size.mul(1.25))`
 341    // let line_height = DefiniteLength::from(text_size.mul(1.25));
 342    let line_height = text_size * 1.25;
 343
 344    // was `rems(0.15)`
 345    // let padding_top = cx.scaled_rems(0.15);
 346    let padding_top = rems(0.15);
 347
 348    // was `.pb_1()` = `rems(0.25)`
 349    // let padding_bottom = cx.scaled_rems(0.25);
 350    let padding_bottom = rems(0.25);
 351
 352    let color = match parsed.level {
 353        HeadingLevel::H6 => cx.text_muted_color,
 354        _ => cx.text_color,
 355    };
 356    div()
 357        .line_height(line_height)
 358        .text_size(text_size)
 359        .text_color(color)
 360        .pt(padding_top)
 361        .pb(padding_bottom)
 362        .children(render_markdown_text(&parsed.contents, cx))
 363        .whitespace_normal()
 364        .into_any()
 365}
 366
 367fn render_markdown_list_item(
 368    parsed: &ParsedMarkdownListItem,
 369    cx: &mut RenderContext,
 370) -> AnyElement {
 371    use ParsedMarkdownListItemType::*;
 372    let depth = parsed.depth.saturating_sub(1) as usize;
 373
 374    let bullet = match &parsed.item_type {
 375        Ordered(order) => list_item_prefix(*order as usize, true, depth).into_any_element(),
 376        Unordered => list_item_prefix(1, false, depth).into_any_element(),
 377        Task(checked, range) => div()
 378            .id(cx.next_id(range))
 379            .mt(cx.scaled_rems(3.0 / 16.0))
 380            .child(
 381                MarkdownCheckbox::new(
 382                    "checkbox",
 383                    if *checked {
 384                        ToggleState::Selected
 385                    } else {
 386                        ToggleState::Unselected
 387                    },
 388                    cx.clone(),
 389                )
 390                .when_some(
 391                    cx.checkbox_clicked_callback.clone(),
 392                    |this, callback| {
 393                        this.on_click({
 394                            let range = range.clone();
 395                            move |selection, window, cx| {
 396                                let checked = match selection {
 397                                    ToggleState::Selected => true,
 398                                    ToggleState::Unselected => false,
 399                                    _ => return,
 400                                };
 401
 402                                if window.modifiers().secondary() {
 403                                    callback(
 404                                        &CheckboxClickedEvent {
 405                                            checked,
 406                                            source_range: range.clone(),
 407                                        },
 408                                        window,
 409                                        cx,
 410                                    );
 411                                }
 412                            }
 413                        })
 414                    },
 415                ),
 416            )
 417            .hover(|s| s.cursor_pointer())
 418            .tooltip(|_, cx| {
 419                InteractiveMarkdownElementTooltip::new(None, "toggle checkbox", cx).into()
 420            })
 421            .into_any_element(),
 422    };
 423    let bullet = div().mr(cx.scaled_rems(0.5)).child(bullet);
 424
 425    let contents: Vec<AnyElement> = parsed
 426        .content
 427        .iter()
 428        .map(|c| render_markdown_block(c, cx))
 429        .collect();
 430
 431    let item = h_flex()
 432        .when(!parsed.nested, |this| this.pl(cx.scaled_rems(depth as f32)))
 433        .when(parsed.nested && depth > 0, |this| this.ml_neg_1p5())
 434        .items_start()
 435        .children(vec![
 436            bullet,
 437            v_flex()
 438                .children(contents)
 439                .when(!parsed.nested, |this| this.gap(cx.scaled_rems(1.0)))
 440                .pr(cx.scaled_rems(1.0))
 441                .w_full(),
 442        ]);
 443
 444    cx.with_common_p(item).into_any()
 445}
 446
 447/// # MarkdownCheckbox ///
 448/// HACK: Copied from `ui/src/components/toggle.rs` to deal with scaling issues in markdown preview
 449/// changes should be integrated into `Checkbox` in `toggle.rs` while making sure checkboxes elsewhere in the
 450/// app are not visually affected
 451#[derive(gpui::IntoElement)]
 452struct MarkdownCheckbox {
 453    id: ElementId,
 454    toggle_state: ToggleState,
 455    disabled: bool,
 456    placeholder: bool,
 457    on_click: Option<Box<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
 458    filled: bool,
 459    style: ui::ToggleStyle,
 460    tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> gpui::AnyView>>,
 461    label: Option<SharedString>,
 462    base_rem: Rems,
 463}
 464
 465impl MarkdownCheckbox {
 466    /// Creates a new [`Checkbox`].
 467    fn new(id: impl Into<ElementId>, checked: ToggleState, render_cx: RenderContext) -> Self {
 468        Self {
 469            id: id.into(),
 470            toggle_state: checked,
 471            disabled: false,
 472            on_click: None,
 473            filled: false,
 474            style: ui::ToggleStyle::default(),
 475            tooltip: None,
 476            label: None,
 477            placeholder: false,
 478            base_rem: render_cx.scaled_rems(1.0),
 479        }
 480    }
 481
 482    /// Binds a handler to the [`Checkbox`] that will be called when clicked.
 483    fn on_click(mut self, handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static) -> Self {
 484        self.on_click = Some(Box::new(handler));
 485        self
 486    }
 487
 488    fn bg_color(&self, cx: &App) -> Hsla {
 489        let style = self.style.clone();
 490        match (style, self.filled) {
 491            (ui::ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background,
 492            (ui::ToggleStyle::Ghost, true) => cx.theme().colors().element_background,
 493            (ui::ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(),
 494            (ui::ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx),
 495            (ui::ToggleStyle::Custom(_), false) => gpui::transparent_black(),
 496            (ui::ToggleStyle::Custom(color), true) => color.opacity(0.2),
 497        }
 498    }
 499
 500    fn border_color(&self, cx: &App) -> Hsla {
 501        if self.disabled {
 502            return cx.theme().colors().border_variant;
 503        }
 504
 505        match self.style.clone() {
 506            ui::ToggleStyle::Ghost => cx.theme().colors().border,
 507            ui::ToggleStyle::ElevationBased(_) => cx.theme().colors().border,
 508            ui::ToggleStyle::Custom(color) => color.opacity(0.3),
 509        }
 510    }
 511}
 512
 513impl gpui::RenderOnce for MarkdownCheckbox {
 514    fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
 515        let group_id = format!("checkbox_group_{:?}", self.id);
 516        let color = if self.disabled {
 517            Color::Disabled
 518        } else {
 519            Color::Selected
 520        };
 521        let icon_size_small = IconSize::Custom(self.base_rem.mul(14. / 16.)); // was IconSize::Small
 522        let icon = match self.toggle_state {
 523            ToggleState::Selected => {
 524                if self.placeholder {
 525                    None
 526                } else {
 527                    Some(
 528                        ui::Icon::new(IconName::Check)
 529                            .size(icon_size_small)
 530                            .color(color),
 531                    )
 532                }
 533            }
 534            ToggleState::Indeterminate => Some(
 535                ui::Icon::new(IconName::Dash)
 536                    .size(icon_size_small)
 537                    .color(color),
 538            ),
 539            ToggleState::Unselected => None,
 540        };
 541
 542        let bg_color = self.bg_color(cx);
 543        let border_color = self.border_color(cx);
 544        let hover_border_color = border_color.alpha(0.7);
 545
 546        let size = self.base_rem.mul(1.25); // was Self::container_size(); (20px)
 547
 548        let checkbox = h_flex()
 549            .id(self.id.clone())
 550            .justify_center()
 551            .items_center()
 552            .size(size)
 553            .group(group_id.clone())
 554            .child(
 555                div()
 556                    .flex()
 557                    .flex_none()
 558                    .justify_center()
 559                    .items_center()
 560                    .m(self.base_rem.mul(0.25)) // was .m_1
 561                    .size(self.base_rem.mul(1.0)) // was .size_4
 562                    .rounded(self.base_rem.mul(0.125)) // was .rounded_xs
 563                    .border_1()
 564                    .bg(bg_color)
 565                    .border_color(border_color)
 566                    .when(self.disabled, |this| this.cursor_not_allowed())
 567                    .when(self.disabled, |this| {
 568                        this.bg(cx.theme().colors().element_disabled.opacity(0.6))
 569                    })
 570                    .when(!self.disabled, |this| {
 571                        this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
 572                    })
 573                    .when(self.placeholder, |this| {
 574                        this.child(
 575                            div()
 576                                .flex_none()
 577                                .rounded_full()
 578                                .bg(color.color(cx).alpha(0.5))
 579                                .size(self.base_rem.mul(0.25)), // was .size_1
 580                        )
 581                    })
 582                    .children(icon),
 583            );
 584
 585        h_flex()
 586            .id(self.id)
 587            .gap(ui::DynamicSpacing::Base06.rems(cx))
 588            .child(checkbox)
 589            .when_some(
 590                self.on_click.filter(|_| !self.disabled),
 591                |this, on_click| {
 592                    this.on_click(move |_, window, cx| {
 593                        on_click(&self.toggle_state.inverse(), window, cx)
 594                    })
 595                },
 596            )
 597            // TODO: Allow label size to be different from default.
 598            // TODO: Allow label color to be different from muted.
 599            .when_some(self.label, |this, label| {
 600                this.child(Label::new(label).color(Color::Muted))
 601            })
 602            .when_some(self.tooltip, |this, tooltip| {
 603                this.tooltip(move |window, cx| tooltip(window, cx))
 604            })
 605    }
 606}
 607
 608fn calculate_table_columns_count(rows: &Vec<ParsedMarkdownTableRow>) -> usize {
 609    let mut actual_column_count = 0;
 610    for row in rows {
 611        actual_column_count = actual_column_count.max(
 612            row.columns
 613                .iter()
 614                .map(|column| column.col_span)
 615                .sum::<usize>(),
 616        );
 617    }
 618    actual_column_count
 619}
 620
 621fn render_markdown_table(parsed: &ParsedMarkdownTable, cx: &mut RenderContext) -> AnyElement {
 622    let actual_header_column_count = calculate_table_columns_count(&parsed.header);
 623    let actual_body_column_count = calculate_table_columns_count(&parsed.body);
 624    let max_column_count = std::cmp::max(actual_header_column_count, actual_body_column_count);
 625
 626    let total_rows = parsed.header.len() + parsed.body.len();
 627
 628    // Track which grid cells are occupied by spanning cells
 629    let mut grid_occupied = vec![vec![false; max_column_count]; total_rows];
 630
 631    let mut cells = Vec::with_capacity(total_rows * max_column_count);
 632
 633    for (row_idx, row) in parsed.header.iter().chain(parsed.body.iter()).enumerate() {
 634        let mut col_idx = 0;
 635
 636        for cell in row.columns.iter() {
 637            // Skip columns occupied by row-spanning cells from previous rows
 638            while col_idx < max_column_count && grid_occupied[row_idx][col_idx] {
 639                col_idx += 1;
 640            }
 641
 642            if col_idx >= max_column_count {
 643                break;
 644            }
 645
 646            let container = match cell.alignment {
 647                ParsedMarkdownTableAlignment::Left | ParsedMarkdownTableAlignment::None => div(),
 648                ParsedMarkdownTableAlignment::Center => v_flex().items_center(),
 649                ParsedMarkdownTableAlignment::Right => v_flex().items_end(),
 650            };
 651
 652            let cell_element = container
 653                .col_span(cell.col_span.min(max_column_count - col_idx) as u16)
 654                .row_span(cell.row_span.min(total_rows - row_idx) as u16)
 655                .children(render_markdown_text(&cell.children, cx))
 656                .px_2()
 657                .py_1()
 658                .when(col_idx > 0, |this| this.border_l_1())
 659                .when(row_idx > 0, |this| this.border_t_1())
 660                .border_color(cx.border_color)
 661                .when(cell.is_header, |this| {
 662                    this.bg(cx.title_bar_background_color)
 663                })
 664                .when(cell.row_span > 1, |this| this.justify_center())
 665                .when(row_idx % 2 == 1, |this| this.bg(cx.panel_background_color));
 666
 667            cells.push(cell_element);
 668
 669            // Mark grid positions as occupied for row-spanning cells
 670            for r in 0..cell.row_span {
 671                for c in 0..cell.col_span {
 672                    if row_idx + r < total_rows && col_idx + c < max_column_count {
 673                        grid_occupied[row_idx + r][col_idx + c] = true;
 674                    }
 675                }
 676            }
 677
 678            col_idx += cell.col_span;
 679        }
 680
 681        // Fill remaining columns with empty cells if needed
 682        while col_idx < max_column_count {
 683            if grid_occupied[row_idx][col_idx] {
 684                col_idx += 1;
 685                continue;
 686            }
 687
 688            let empty_cell = div()
 689                .when(col_idx > 0, |this| this.border_l_1())
 690                .when(row_idx > 0, |this| this.border_t_1())
 691                .border_color(cx.border_color)
 692                .when(row_idx % 2 == 1, |this| this.bg(cx.panel_background_color));
 693
 694            cells.push(empty_cell);
 695            col_idx += 1;
 696        }
 697    }
 698
 699    cx.with_common_p(v_flex().items_start())
 700        .when_some(parsed.caption.as_ref(), |this, caption| {
 701            this.children(render_markdown_text(caption, cx))
 702        })
 703        .border_1()
 704        .border_color(cx.border_color)
 705        .rounded_sm()
 706        .overflow_hidden()
 707        .child(
 708            div()
 709                .min_w_0()
 710                .w_full()
 711                .grid()
 712                .grid_cols(max_column_count as u16)
 713                .children(cells),
 714        )
 715        .into_any()
 716}
 717
 718fn render_markdown_block_quote(
 719    parsed: &ParsedMarkdownBlockQuote,
 720    cx: &mut RenderContext,
 721) -> AnyElement {
 722    cx.indent += 1;
 723
 724    let children: Vec<AnyElement> = parsed
 725        .children
 726        .iter()
 727        .enumerate()
 728        .map(|(ix, child)| {
 729            cx.with_last_child(ix + 1 == parsed.children.len(), |cx| {
 730                render_markdown_block(child, cx)
 731            })
 732        })
 733        .collect();
 734
 735    cx.indent -= 1;
 736
 737    cx.with_common_p(div())
 738        .child(
 739            div()
 740                .border_l_4()
 741                .border_color(cx.border_color)
 742                .pl_3()
 743                .children(children),
 744        )
 745        .into_any()
 746}
 747
 748fn render_markdown_code_block(
 749    parsed: &ParsedMarkdownCodeBlock,
 750    cx: &mut RenderContext,
 751) -> AnyElement {
 752    let body = if let Some(highlights) = parsed.highlights.as_ref() {
 753        StyledText::new(parsed.contents.clone()).with_default_highlights(
 754            &cx.buffer_text_style,
 755            highlights.iter().filter_map(|(range, highlight_id)| {
 756                highlight_id
 757                    .style(cx.syntax_theme.as_ref())
 758                    .map(|style| (range.clone(), style))
 759            }),
 760        )
 761    } else {
 762        StyledText::new(parsed.contents.clone())
 763    };
 764
 765    let copy_block_button = CopyButton::new("copy-codeblock", parsed.contents.clone())
 766        .tooltip_label("Copy Codeblock")
 767        .visible_on_hover("markdown-block");
 768
 769    let font = gpui::Font {
 770        family: cx.buffer_font_family.clone(),
 771        features: cx.buffer_text_style.font_features.clone(),
 772        ..Default::default()
 773    };
 774
 775    cx.with_common_p(div())
 776        .font(font)
 777        .px_3()
 778        .py_3()
 779        .bg(cx.code_block_background_color)
 780        .rounded_sm()
 781        .child(body)
 782        .child(
 783            div()
 784                .h_flex()
 785                .absolute()
 786                .right_1()
 787                .top_1()
 788                .child(copy_block_button),
 789        )
 790        .into_any()
 791}
 792
 793fn render_mermaid_diagram(
 794    parsed: &ParsedMarkdownMermaidDiagram,
 795    cx: &mut RenderContext,
 796) -> AnyElement {
 797    let cached = cx.mermaid_state.cache.get(&parsed.contents);
 798
 799    if let Some(result) = cached.and_then(|c| c.render_image.get()) {
 800        match result {
 801            Ok(render_image) => cx
 802                .with_common_p(div())
 803                .px_3()
 804                .py_3()
 805                .bg(cx.code_block_background_color)
 806                .rounded_sm()
 807                .child(
 808                    div().w_full().child(
 809                        img(ImageSource::Render(render_image.clone()))
 810                            .max_w_full()
 811                            .with_fallback(|| {
 812                                div()
 813                                    .child(Label::new("Failed to load mermaid diagram"))
 814                                    .into_any_element()
 815                            }),
 816                    ),
 817                )
 818                .into_any(),
 819            Err(_) => cx
 820                .with_common_p(div())
 821                .px_3()
 822                .py_3()
 823                .bg(cx.code_block_background_color)
 824                .rounded_sm()
 825                .child(StyledText::new(parsed.contents.contents.clone()))
 826                .into_any(),
 827        }
 828    } else if let Some(fallback) = cached.and_then(|c| c.fallback_image.as_ref()) {
 829        cx.with_common_p(div())
 830            .px_3()
 831            .py_3()
 832            .bg(cx.code_block_background_color)
 833            .rounded_sm()
 834            .child(
 835                div()
 836                    .w_full()
 837                    .child(
 838                        img(ImageSource::Render(fallback.clone()))
 839                            .max_w_full()
 840                            .with_fallback(|| {
 841                                div()
 842                                    .child(Label::new("Failed to load mermaid diagram"))
 843                                    .into_any_element()
 844                            }),
 845                    )
 846                    .with_animation(
 847                        "mermaid-fallback-pulse",
 848                        Animation::new(Duration::from_secs(2))
 849                            .repeat()
 850                            .with_easing(pulsating_between(0.6, 1.0)),
 851                        |el, delta| el.opacity(delta),
 852                    ),
 853            )
 854            .into_any()
 855    } else {
 856        cx.with_common_p(div())
 857            .px_3()
 858            .py_3()
 859            .bg(cx.code_block_background_color)
 860            .rounded_sm()
 861            .child(
 862                Label::new("Rendering mermaid diagram...")
 863                    .color(Color::Muted)
 864                    .with_animation(
 865                        "mermaid-loading-pulse",
 866                        Animation::new(Duration::from_secs(2))
 867                            .repeat()
 868                            .with_easing(pulsating_between(0.4, 0.8)),
 869                        |label, delta| label.alpha(delta),
 870                    ),
 871            )
 872            .into_any()
 873    }
 874}
 875
 876fn render_markdown_paragraph(parsed: &MarkdownParagraph, cx: &mut RenderContext) -> AnyElement {
 877    cx.with_common_p(div())
 878        .children(render_markdown_text(parsed, cx))
 879        .flex()
 880        .flex_col()
 881        .into_any_element()
 882}
 883
 884fn render_markdown_text(parsed_new: &MarkdownParagraph, cx: &mut RenderContext) -> Vec<AnyElement> {
 885    let mut any_element = Vec::with_capacity(parsed_new.len());
 886    // these values are cloned in-order satisfy borrow checker
 887    let syntax_theme = cx.syntax_theme.clone();
 888    let workspace_clone = cx.workspace.clone();
 889    let code_span_bg_color = cx.code_span_background_color;
 890    let text_style = cx.text_style.clone();
 891    let link_color = cx.link_color;
 892
 893    for parsed_region in parsed_new {
 894        match parsed_region {
 895            MarkdownParagraphChunk::Text(parsed) => {
 896                let element_id = cx.next_id(&parsed.source_range);
 897
 898                let highlights = gpui::combine_highlights(
 899                    parsed.highlights.iter().filter_map(|(range, highlight)| {
 900                        highlight
 901                            .to_highlight_style(&syntax_theme)
 902                            .map(|style| (range.clone(), style))
 903                    }),
 904                    parsed.regions.iter().filter_map(|(range, region)| {
 905                        if region.code {
 906                            Some((
 907                                range.clone(),
 908                                HighlightStyle {
 909                                    background_color: Some(code_span_bg_color),
 910                                    ..Default::default()
 911                                },
 912                            ))
 913                        } else if region.link.is_some() {
 914                            Some((
 915                                range.clone(),
 916                                HighlightStyle {
 917                                    color: Some(link_color),
 918                                    ..Default::default()
 919                                },
 920                            ))
 921                        } else {
 922                            None
 923                        }
 924                    }),
 925                );
 926                let mut links = Vec::new();
 927                let mut link_ranges = Vec::new();
 928                for (range, region) in parsed.regions.iter() {
 929                    if let Some(link) = region.link.clone() {
 930                        links.push(link);
 931                        link_ranges.push(range.clone());
 932                    }
 933                }
 934                let workspace = workspace_clone.clone();
 935                let element = div()
 936                    .child(
 937                        InteractiveText::new(
 938                            element_id,
 939                            StyledText::new(parsed.contents.clone())
 940                                .with_default_highlights(&text_style, highlights),
 941                        )
 942                        .tooltip({
 943                            let links = links.clone();
 944                            let link_ranges = link_ranges.clone();
 945                            move |idx, _, cx| {
 946                                for (ix, range) in link_ranges.iter().enumerate() {
 947                                    if range.contains(&idx) {
 948                                        return Some(LinkPreview::new(&links[ix].to_string(), cx));
 949                                    }
 950                                }
 951                                None
 952                            }
 953                        })
 954                        .on_click(
 955                            link_ranges,
 956                            move |clicked_range_ix, window, cx| match &links[clicked_range_ix] {
 957                                Link::Web { url } => cx.open_url(url),
 958                                Link::Path { path, .. } => {
 959                                    if let Some(workspace) = &workspace {
 960                                        _ = workspace.update(cx, |workspace, cx| {
 961                                            workspace
 962                                                .open_abs_path(
 963                                                    normalize_path(path.clone().as_path()),
 964                                                    OpenOptions {
 965                                                        visible: Some(OpenVisible::None),
 966                                                        ..Default::default()
 967                                                    },
 968                                                    window,
 969                                                    cx,
 970                                                )
 971                                                .detach();
 972                                        });
 973                                    }
 974                                }
 975                            },
 976                        ),
 977                    )
 978                    .into_any();
 979                any_element.push(element);
 980            }
 981
 982            MarkdownParagraphChunk::Image(image) => {
 983                any_element.push(render_markdown_image(image, cx));
 984            }
 985        }
 986    }
 987
 988    any_element
 989}
 990
 991fn render_markdown_rule(cx: &mut RenderContext) -> AnyElement {
 992    let rule = div().w_full().h(cx.scaled_rems(0.125)).bg(cx.border_color);
 993    div().py(cx.scaled_rems(0.5)).child(rule).into_any()
 994}
 995
 996fn render_markdown_image(image: &Image, cx: &mut RenderContext) -> AnyElement {
 997    let image_resource = match image.link.clone() {
 998        Link::Web { url } => Resource::Uri(url.into()),
 999        Link::Path { path, .. } => Resource::Path(Arc::from(path)),
1000    };
1001
1002    let element_id = cx.next_id(&image.source_range);
1003    let workspace = cx.workspace.clone();
1004
1005    div()
1006        .id(element_id)
1007        .cursor_pointer()
1008        .child(
1009            img(ImageSource::Resource(image_resource))
1010                .max_w_full()
1011                .with_fallback({
1012                    let alt_text = image.alt_text.clone();
1013                    move || div().children(alt_text.clone()).into_any_element()
1014                })
1015                .when_some(image.height, |this, height| this.h(height))
1016                .when_some(image.width, |this, width| this.w(width)),
1017        )
1018        .tooltip({
1019            let link = image.link.clone();
1020            let alt_text = image.alt_text.clone();
1021            move |_, cx| {
1022                InteractiveMarkdownElementTooltip::new(
1023                    Some(alt_text.clone().unwrap_or(link.to_string().into())),
1024                    "open image",
1025                    cx,
1026                )
1027                .into()
1028            }
1029        })
1030        .on_click({
1031            let link = image.link.clone();
1032            move |_, window, cx| {
1033                if window.modifiers().secondary() {
1034                    match &link {
1035                        Link::Web { url } => cx.open_url(url),
1036                        Link::Path { path, .. } => {
1037                            if let Some(workspace) = &workspace {
1038                                _ = workspace.update(cx, |workspace, cx| {
1039                                    workspace
1040                                        .open_abs_path(
1041                                            path.clone(),
1042                                            OpenOptions {
1043                                                visible: Some(OpenVisible::None),
1044                                                ..Default::default()
1045                                            },
1046                                            window,
1047                                            cx,
1048                                        )
1049                                        .detach();
1050                                });
1051                            }
1052                        }
1053                    }
1054                }
1055            }
1056        })
1057        .into_any()
1058}
1059
1060struct InteractiveMarkdownElementTooltip {
1061    tooltip_text: Option<SharedString>,
1062    action_text: SharedString,
1063}
1064
1065impl InteractiveMarkdownElementTooltip {
1066    pub fn new(
1067        tooltip_text: Option<SharedString>,
1068        action_text: impl Into<SharedString>,
1069        cx: &mut App,
1070    ) -> Entity<Self> {
1071        let tooltip_text = tooltip_text.map(|t| util::truncate_and_trailoff(&t, 50).into());
1072
1073        cx.new(|_cx| Self {
1074            tooltip_text,
1075            action_text: action_text.into(),
1076        })
1077    }
1078}
1079
1080impl Render for InteractiveMarkdownElementTooltip {
1081    fn render(&mut self, _: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
1082        tooltip_container(cx, |el, _| {
1083            let secondary_modifier = Keystroke {
1084                modifiers: Modifiers::secondary_key(),
1085                ..Default::default()
1086            };
1087
1088            el.child(
1089                v_flex()
1090                    .gap_1()
1091                    .when_some(self.tooltip_text.clone(), |this, text| {
1092                        this.child(Label::new(text).size(LabelSize::Small))
1093                    })
1094                    .child(
1095                        Label::new(format!(
1096                            "{}-click to {}",
1097                            secondary_modifier, self.action_text
1098                        ))
1099                        .size(LabelSize::Small)
1100                        .color(Color::Muted),
1101                    ),
1102            )
1103        })
1104    }
1105}
1106
1107/// Returns the prefix for a list item.
1108fn list_item_prefix(order: usize, ordered: bool, depth: usize) -> String {
1109    let ix = order.saturating_sub(1);
1110    const NUMBERED_PREFIXES_1: &str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
1111    const NUMBERED_PREFIXES_2: &str = "abcdefghijklmnopqrstuvwxyz";
1112    const BULLETS: [&str; 5] = ["", "", "", "", ""];
1113
1114    if ordered {
1115        match depth {
1116            0 => format!("{}. ", order),
1117            1 => format!(
1118                "{}. ",
1119                NUMBERED_PREFIXES_1
1120                    .chars()
1121                    .nth(ix % NUMBERED_PREFIXES_1.len())
1122                    .unwrap()
1123            ),
1124            _ => format!(
1125                "{}. ",
1126                NUMBERED_PREFIXES_2
1127                    .chars()
1128                    .nth(ix % NUMBERED_PREFIXES_2.len())
1129                    .unwrap()
1130            ),
1131        }
1132    } else {
1133        let depth = depth.min(BULLETS.len() - 1);
1134        let bullet = BULLETS[depth];
1135        return format!("{} ", bullet);
1136    }
1137}
1138
1139#[cfg(test)]
1140mod tests {
1141    use super::*;
1142    use crate::markdown_elements::ParsedMarkdownMermaidDiagramContents;
1143    use crate::markdown_elements::ParsedMarkdownTableColumn;
1144    use crate::markdown_elements::ParsedMarkdownText;
1145
1146    fn text(text: &str) -> MarkdownParagraphChunk {
1147        MarkdownParagraphChunk::Text(ParsedMarkdownText {
1148            source_range: 0..text.len(),
1149            contents: SharedString::new(text),
1150            highlights: Default::default(),
1151            regions: Default::default(),
1152        })
1153    }
1154
1155    fn column(
1156        col_span: usize,
1157        row_span: usize,
1158        children: Vec<MarkdownParagraphChunk>,
1159    ) -> ParsedMarkdownTableColumn {
1160        ParsedMarkdownTableColumn {
1161            col_span,
1162            row_span,
1163            is_header: false,
1164            children,
1165            alignment: ParsedMarkdownTableAlignment::None,
1166        }
1167    }
1168
1169    fn column_with_row_span(
1170        col_span: usize,
1171        row_span: usize,
1172        children: Vec<MarkdownParagraphChunk>,
1173    ) -> ParsedMarkdownTableColumn {
1174        ParsedMarkdownTableColumn {
1175            col_span,
1176            row_span,
1177            is_header: false,
1178            children,
1179            alignment: ParsedMarkdownTableAlignment::None,
1180        }
1181    }
1182
1183    #[test]
1184    fn test_calculate_table_columns_count() {
1185        assert_eq!(0, calculate_table_columns_count(&vec![]));
1186
1187        assert_eq!(
1188            1,
1189            calculate_table_columns_count(&vec![ParsedMarkdownTableRow::with_columns(vec![
1190                column(1, 1, vec![text("column1")])
1191            ])])
1192        );
1193
1194        assert_eq!(
1195            2,
1196            calculate_table_columns_count(&vec![ParsedMarkdownTableRow::with_columns(vec![
1197                column(1, 1, vec![text("column1")]),
1198                column(1, 1, vec![text("column2")]),
1199            ])])
1200        );
1201
1202        assert_eq!(
1203            2,
1204            calculate_table_columns_count(&vec![ParsedMarkdownTableRow::with_columns(vec![
1205                column(2, 1, vec![text("column1")])
1206            ])])
1207        );
1208
1209        assert_eq!(
1210            3,
1211            calculate_table_columns_count(&vec![ParsedMarkdownTableRow::with_columns(vec![
1212                column(1, 1, vec![text("column1")]),
1213                column(2, 1, vec![text("column2")]),
1214            ])])
1215        );
1216
1217        assert_eq!(
1218            2,
1219            calculate_table_columns_count(&vec![
1220                ParsedMarkdownTableRow::with_columns(vec![
1221                    column(1, 1, vec![text("column1")]),
1222                    column(1, 1, vec![text("column2")]),
1223                ]),
1224                ParsedMarkdownTableRow::with_columns(vec![column(1, 1, vec![text("column1")]),])
1225            ])
1226        );
1227
1228        assert_eq!(
1229            3,
1230            calculate_table_columns_count(&vec![
1231                ParsedMarkdownTableRow::with_columns(vec![
1232                    column(1, 1, vec![text("column1")]),
1233                    column(1, 1, vec![text("column2")]),
1234                ]),
1235                ParsedMarkdownTableRow::with_columns(vec![column(3, 3, vec![text("column1")]),])
1236            ])
1237        );
1238    }
1239
1240    #[test]
1241    fn test_row_span_support() {
1242        assert_eq!(
1243            3,
1244            calculate_table_columns_count(&vec![
1245                ParsedMarkdownTableRow::with_columns(vec![
1246                    column_with_row_span(1, 2, vec![text("spans 2 rows")]),
1247                    column(1, 1, vec![text("column2")]),
1248                    column(1, 1, vec![text("column3")]),
1249                ]),
1250                ParsedMarkdownTableRow::with_columns(vec![
1251                    // First column is covered by row span from above
1252                    column(1, 1, vec![text("column2 row2")]),
1253                    column(1, 1, vec![text("column3 row2")]),
1254                ])
1255            ])
1256        );
1257
1258        assert_eq!(
1259            4,
1260            calculate_table_columns_count(&vec![
1261                ParsedMarkdownTableRow::with_columns(vec![
1262                    column_with_row_span(1, 3, vec![text("spans 3 rows")]),
1263                    column_with_row_span(2, 1, vec![text("spans 2 cols")]),
1264                    column(1, 1, vec![text("column4")]),
1265                ]),
1266                ParsedMarkdownTableRow::with_columns(vec![
1267                    // First column covered by row span
1268                    column(1, 1, vec![text("column2")]),
1269                    column(1, 1, vec![text("column3")]),
1270                    column(1, 1, vec![text("column4")]),
1271                ]),
1272                ParsedMarkdownTableRow::with_columns(vec![
1273                    // First column still covered by row span
1274                    column(3, 1, vec![text("spans 3 cols")]),
1275                ])
1276            ])
1277        );
1278    }
1279
1280    #[test]
1281    fn test_list_item_prefix() {
1282        assert_eq!(list_item_prefix(1, true, 0), "1. ");
1283        assert_eq!(list_item_prefix(2, true, 0), "2. ");
1284        assert_eq!(list_item_prefix(3, true, 0), "3. ");
1285        assert_eq!(list_item_prefix(11, true, 0), "11. ");
1286        assert_eq!(list_item_prefix(1, true, 1), "A. ");
1287        assert_eq!(list_item_prefix(2, true, 1), "B. ");
1288        assert_eq!(list_item_prefix(3, true, 1), "C. ");
1289        assert_eq!(list_item_prefix(1, true, 2), "a. ");
1290        assert_eq!(list_item_prefix(2, true, 2), "b. ");
1291        assert_eq!(list_item_prefix(7, true, 2), "g. ");
1292        assert_eq!(list_item_prefix(1, true, 1), "A. ");
1293        assert_eq!(list_item_prefix(1, true, 2), "a. ");
1294        assert_eq!(list_item_prefix(1, false, 0), "");
1295        assert_eq!(list_item_prefix(1, false, 1), "");
1296        assert_eq!(list_item_prefix(1, false, 2), "");
1297        assert_eq!(list_item_prefix(1, false, 3), "");
1298        assert_eq!(list_item_prefix(1, false, 4), "");
1299    }
1300
1301    fn mermaid_contents(s: &str) -> ParsedMarkdownMermaidDiagramContents {
1302        ParsedMarkdownMermaidDiagramContents {
1303            contents: SharedString::from(s.to_string()),
1304            scale: 1,
1305        }
1306    }
1307
1308    fn mermaid_sequence(diagrams: &[&str]) -> Vec<ParsedMarkdownMermaidDiagramContents> {
1309        diagrams
1310            .iter()
1311            .map(|diagram| mermaid_contents(diagram))
1312            .collect()
1313    }
1314
1315    fn mermaid_fallback(
1316        new_diagram: &str,
1317        new_full_order: &[ParsedMarkdownMermaidDiagramContents],
1318        old_full_order: &[ParsedMarkdownMermaidDiagramContents],
1319        cache: &MermaidDiagramCache,
1320    ) -> Option<Arc<RenderImage>> {
1321        let new_content = mermaid_contents(new_diagram);
1322        let idx = new_full_order
1323            .iter()
1324            .position(|content| content == &new_content)?;
1325        MermaidState::get_fallback_image(idx, old_full_order, new_full_order.len(), cache)
1326    }
1327
1328    fn mock_render_image() -> Arc<RenderImage> {
1329        Arc::new(RenderImage::new(Vec::new()))
1330    }
1331
1332    #[test]
1333    fn test_mermaid_fallback_on_edit() {
1334        let old_full_order = mermaid_sequence(&["graph A", "graph B", "graph C"]);
1335        let new_full_order = mermaid_sequence(&["graph A", "graph B modified", "graph C"]);
1336
1337        let svg_b = mock_render_image();
1338        let mut cache: MermaidDiagramCache = HashMap::default();
1339        cache.insert(
1340            mermaid_contents("graph A"),
1341            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1342        );
1343        cache.insert(
1344            mermaid_contents("graph B"),
1345            CachedMermaidDiagram::new_for_test(Some(svg_b.clone()), None),
1346        );
1347        cache.insert(
1348            mermaid_contents("graph C"),
1349            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1350        );
1351
1352        let fallback =
1353            mermaid_fallback("graph B modified", &new_full_order, &old_full_order, &cache);
1354
1355        assert!(
1356            fallback.is_some(),
1357            "Should use old diagram as fallback when editing"
1358        );
1359        assert!(
1360            Arc::ptr_eq(&fallback.unwrap(), &svg_b),
1361            "Fallback should be the old diagram's SVG"
1362        );
1363    }
1364
1365    #[test]
1366    fn test_mermaid_no_fallback_on_add_in_middle() {
1367        let old_full_order = mermaid_sequence(&["graph A", "graph C"]);
1368        let new_full_order = mermaid_sequence(&["graph A", "graph NEW", "graph C"]);
1369
1370        let mut cache: MermaidDiagramCache = HashMap::default();
1371        cache.insert(
1372            mermaid_contents("graph A"),
1373            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1374        );
1375        cache.insert(
1376            mermaid_contents("graph C"),
1377            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1378        );
1379
1380        let fallback = mermaid_fallback("graph NEW", &new_full_order, &old_full_order, &cache);
1381
1382        assert!(
1383            fallback.is_none(),
1384            "Should NOT use fallback when adding new diagram"
1385        );
1386    }
1387
1388    #[test]
1389    fn test_mermaid_fallback_chains_on_rapid_edits() {
1390        let old_full_order = mermaid_sequence(&["graph A", "graph B modified", "graph C"]);
1391        let new_full_order = mermaid_sequence(&["graph A", "graph B modified again", "graph C"]);
1392
1393        let original_svg = mock_render_image();
1394        let mut cache: MermaidDiagramCache = HashMap::default();
1395        cache.insert(
1396            mermaid_contents("graph A"),
1397            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1398        );
1399        cache.insert(
1400            mermaid_contents("graph B modified"),
1401            // Still rendering, but has fallback from original "graph B"
1402            CachedMermaidDiagram::new_for_test(None, Some(original_svg.clone())),
1403        );
1404        cache.insert(
1405            mermaid_contents("graph C"),
1406            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1407        );
1408
1409        let fallback = mermaid_fallback(
1410            "graph B modified again",
1411            &new_full_order,
1412            &old_full_order,
1413            &cache,
1414        );
1415
1416        assert!(
1417            fallback.is_some(),
1418            "Should chain fallback when previous render not complete"
1419        );
1420        assert!(
1421            Arc::ptr_eq(&fallback.unwrap(), &original_svg),
1422            "Fallback should chain through to the original SVG"
1423        );
1424    }
1425
1426    #[test]
1427    fn test_mermaid_no_fallback_when_no_old_diagram_at_index() {
1428        let old_full_order = mermaid_sequence(&["graph A"]);
1429        let new_full_order = mermaid_sequence(&["graph A", "graph B"]);
1430
1431        let mut cache: MermaidDiagramCache = HashMap::default();
1432        cache.insert(
1433            mermaid_contents("graph A"),
1434            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1435        );
1436
1437        let fallback = mermaid_fallback("graph B", &new_full_order, &old_full_order, &cache);
1438
1439        assert!(
1440            fallback.is_none(),
1441            "Should NOT have fallback when adding diagram at end"
1442        );
1443    }
1444
1445    #[test]
1446    fn test_mermaid_fallback_with_duplicate_blocks_edit_first() {
1447        let old_full_order = mermaid_sequence(&["graph A", "graph A", "graph B"]);
1448        let new_full_order = mermaid_sequence(&["graph A edited", "graph A", "graph B"]);
1449
1450        let svg_a = mock_render_image();
1451        let mut cache: MermaidDiagramCache = HashMap::default();
1452        cache.insert(
1453            mermaid_contents("graph A"),
1454            CachedMermaidDiagram::new_for_test(Some(svg_a.clone()), None),
1455        );
1456        cache.insert(
1457            mermaid_contents("graph B"),
1458            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1459        );
1460
1461        let fallback = mermaid_fallback("graph A edited", &new_full_order, &old_full_order, &cache);
1462
1463        assert!(
1464            fallback.is_some(),
1465            "Should use old diagram as fallback when editing one of duplicate blocks"
1466        );
1467        assert!(
1468            Arc::ptr_eq(&fallback.unwrap(), &svg_a),
1469            "Fallback should be the old duplicate diagram's image"
1470        );
1471    }
1472
1473    #[test]
1474    fn test_mermaid_fallback_with_duplicate_blocks_edit_second() {
1475        let old_full_order = mermaid_sequence(&["graph A", "graph A", "graph B"]);
1476        let new_full_order = mermaid_sequence(&["graph A", "graph A edited", "graph B"]);
1477
1478        let svg_a = mock_render_image();
1479        let mut cache: MermaidDiagramCache = HashMap::default();
1480        cache.insert(
1481            mermaid_contents("graph A"),
1482            CachedMermaidDiagram::new_for_test(Some(svg_a.clone()), None),
1483        );
1484        cache.insert(
1485            mermaid_contents("graph B"),
1486            CachedMermaidDiagram::new_for_test(Some(mock_render_image()), None),
1487        );
1488
1489        let fallback = mermaid_fallback("graph A edited", &new_full_order, &old_full_order, &cache);
1490
1491        assert!(
1492            fallback.is_some(),
1493            "Should use old diagram as fallback when editing the second duplicate block"
1494        );
1495        assert!(
1496            Arc::ptr_eq(&fallback.unwrap(), &svg_a),
1497            "Fallback should be the old duplicate diagram's image"
1498        );
1499    }
1500}