Skip to content

markdown: Add ability to wrap/unwrap codeblock content #57312

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
danilo-leal merged 3 commits into from
May 20, 2026
Merged

markdown: Add ability to wrap/unwrap codeblock content #57312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ad9727
Add new icons for wrap and unwrap
danilo-leal May 20, 2026
cb076f6
Add new field and button in the markdown struct
danilo-leal May 20, 2026
da66576
Propagate it everywhere else
danilo-leal May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/icons/text_unwrap.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions assets/icons/text_wrap.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions crates/acp_tools/src/acp_tools.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,6 +508,7 @@ impl AcpTools {
} else {
CopyButtonVisibility::Hidden
},
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
},
),
Expand Down
5 changes: 5 additions & 0 deletions crates/agent_ui/src/conversation_view.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3133,6 +3133,11 @@ fn render_agent_markdown(
})
.unwrap_or_default();
MarkdownElement::new(markdown, style)
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: markdown::CopyButtonVisibility::VisibleOnHover,
wrap_button_visibility: markdown::WrapButtonVisibility::VisibleOnHover,
border: false,
})
.image_resolver(move |dest_url| resolve_agent_image(dest_url, &worktree_roots))
.on_url_click(move |text, window, cx| {
thread_view::open_link(text, &workspace, window, cx);
Expand Down
1 change: 1 addition & 0 deletions crates/agent_ui/src/conversation_view/thread_view.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5991,6 +5991,7 @@ impl ThreadView {
.render_markdown(command, style, cx)
.code_block_renderer(CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
});
let copy_button = CopyButton::new("copy-command", command_text)
Expand Down
1 change: 1 addition & 0 deletions crates/diagnostics/src/diagnostic_renderer.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ impl DiagnosticBlock {
)
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click({
Expand Down
1 change: 1 addition & 0 deletions crates/editor/src/code_context_menus.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1260,6 +1260,7 @@ impl CompletionsMenu {
MarkdownElement::new(markdown, hover_markdown_style(window, cx))
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(open_markdown_url),
Expand Down
2 changes: 2 additions & 0 deletions crates/editor/src/hover_popover.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1043,6 +1043,7 @@ impl InfoPopover {
MarkdownElement::new(markdown, hover_markdown_style(window, cx))
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(open_markdown_url)
Expand Down Expand Up @@ -1157,6 +1158,7 @@ impl DiagnosticPopover {
)
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(
Expand Down
4 changes: 4 additions & 0 deletions crates/editor/src/signature_help.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,8 @@ impl SignatureHelpPopover {
)
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility:
markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(open_markdown_url),
Expand All @@ -421,6 +423,8 @@ impl SignatureHelpPopover {
MarkdownElement::new(description, hover_markdown_style(window, cx))
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility:
markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(open_markdown_url),
Expand Down
2 changes: 2 additions & 0 deletions crates/icons/src/icons.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,8 @@ pub enum IconName {
Terminal,
TerminalAlt,
TextSnippet,
TextWrap,
TextUnwrap,
ThinkingMode,
ThinkingModeOff,
Thread,
Expand Down
4 changes: 4 additions & 0 deletions crates/markdown/src/html/html_rendering.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -561,6 +561,8 @@ mod tests {
});
}

use crate::WrapButtonVisibility;

fn render_markdown_text(markdown: &str, cx: &mut TestAppContext) -> crate::RenderedText {
struct TestWindow;

Expand All @@ -582,6 +584,7 @@ mod tests {
MarkdownElement::new(markdown, MarkdownStyle::default()).code_block_renderer(
CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
},
)
Expand Down Expand Up @@ -642,6 +645,7 @@ mod tests {
MarkdownElement::new(markdown, MarkdownStyle::default()).code_block_renderer(
CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
},
)
Expand Down
124 changes: 100 additions & 24 deletions crates/markdown/src/markdown.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,6 +334,7 @@ pub struct Markdown {
mermaid_state: MermaidState,
mermaid_showing_code: HashSet<usize>,
copied_code_blocks: HashSet<ElementId>,
wrapped_code_blocks: HashSet<usize>,
code_block_scroll_handles: BTreeMap<usize, ScrollHandle>,
context_menu_link: Option<SharedString>,
context_menu_selected_text: Option<String>,
Expand All @@ -356,9 +357,17 @@ pub enum CopyButtonVisibility {
VisibleOnHover,
}

#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub enum WrapButtonVisibility {
Hidden,
AlwaysVisible,
VisibleOnHover,
}

pub enum CodeBlockRenderer {
Default {
copy_button_visibility: CopyButtonVisibility,
wrap_button_visibility: WrapButtonVisibility,
border: bool,
},
Custom {
Expand Down Expand Up @@ -505,6 +514,7 @@ impl Markdown {
mermaid_state: MermaidState::default(),
mermaid_showing_code: HashSet::default(),
copied_code_blocks: HashSet::default(),
wrapped_code_blocks: HashSet::default(),
code_block_scroll_handles: BTreeMap::default(),
context_menu_link: None,
context_menu_selected_text: None,
Expand All @@ -528,6 +538,16 @@ impl Markdown {
)
}

fn is_code_block_wrapped(&self, id: usize) -> bool {
self.wrapped_code_blocks.contains(&id)
}

fn toggle_code_block_wrap(&mut self, id: usize) {
if !self.wrapped_code_blocks.remove(&id) {
self.wrapped_code_blocks.insert(id);
}
}

fn code_block_scroll_handle(&mut self, id: usize) -> ScrollHandle {
self.code_block_scroll_handles
.entry(id)
Expand Down Expand Up @@ -1073,6 +1093,7 @@ impl MarkdownElement {
style,
code_block_renderer: CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::VisibleOnHover,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
},
on_url_click: None,
Expand Down Expand Up @@ -1891,11 +1912,18 @@ impl Element for MarkdownElement {
parent_container.style().refine(&self.style.code_block);
builder.push_div(parent_container, range, markdown_end);

let is_wrapped =
self.markdown.read(cx).is_code_block_wrapped(range.start);

let code_block = div()
.id(("code-block", range.start))
.rounded_lg()
.map(|mut code_block| {
if let Some(scroll_handle) = scroll_handle.as_ref() {
if is_wrapped {
code_block.w_full()
} else if let Some(scroll_handle) =
scroll_handle.as_ref()
{
code_block.style().restrict_scroll_to_axis =
Some(true);
code_block
Expand Down Expand Up @@ -2134,10 +2162,14 @@ impl Element for MarkdownElement {

if let CodeBlockRenderer::Default {
copy_button_visibility,
wrap_button_visibility,
..
} = &self.code_block_renderer
&& *copy_button_visibility != CopyButtonVisibility::Hidden
&& (*copy_button_visibility != CopyButtonVisibility::Hidden
|| *wrap_button_visibility != WrapButtonVisibility::Hidden)
{
let copy_button_visibility = *copy_button_visibility;
let wrap_button_visibility = *wrap_button_visibility;
builder.modify_current_div(|el| {
let content_range = parser::extract_code_block_content_range(
&parsed_markdown.source()[range.clone()],
Expand All @@ -2146,28 +2178,48 @@ impl Element for MarkdownElement {
..content_range.end + range.start;

let code = parsed_markdown.source()[content_range].to_string();
let codeblock = render_copy_code_block_button(
range.end,
code,
self.markdown.clone(),
);
el.child(
h_flex()
.w_4()
.absolute()
.justify_end()
.when_else(
*copy_button_visibility
== CopyButtonVisibility::VisibleOnHover,
|this| {
this.top_0()
.right_0()
.visible_on_hover("code_block")
},
|this| this.top_1p5().right_1p5(),
)
.child(codeblock),
)

let any_hover = copy_button_visibility
== CopyButtonVisibility::VisibleOnHover
|| wrap_button_visibility
== WrapButtonVisibility::VisibleOnHover;
let any_always = copy_button_visibility
== CopyButtonVisibility::AlwaysVisible
|| wrap_button_visibility
== WrapButtonVisibility::AlwaysVisible;
let use_hover = any_hover && !any_always;

let mut button_row = h_flex()
.gap_0p5()
.absolute()
.bg(cx.theme().colors().editor_background)
.when_else(
use_hover,
|this| {
this.top_1().right_1().visible_on_hover("code_block")
},
|this| this.top_1p5().right_1p5(),
);

if wrap_button_visibility != WrapButtonVisibility::Hidden {
let is_wrapped =
self.markdown.read(cx).is_code_block_wrapped(range.start);
button_row = button_row.child(render_wrap_code_block_button(
range.start,
is_wrapped,
self.markdown.clone(),
));
}

if copy_button_visibility != CopyButtonVisibility::Hidden {
button_row = button_row.child(render_copy_code_block_button(
range.end,
code,
self.markdown.clone(),
));
}

el.child(button_row)
});
}

Expand Down Expand Up @@ -2418,6 +2470,29 @@ fn apply_heading_style(
heading
}

fn render_wrap_code_block_button(
id: usize,
is_wrapped: bool,
markdown: Entity<Markdown>,
) -> impl IntoElement {
let (icon, tooltip) = if is_wrapped {
(IconName::TextUnwrap, "Unwrap Content")
} else {
(IconName::TextWrap, "Wrap Content")
};

IconButton::new(("wrap-code-block", id), icon)
.icon_size(IconSize::Small)
.icon_color(Color::Muted)
.tooltip(Tooltip::text(tooltip))
.on_click(move |_event, _window, cx| {
markdown.update(cx, |markdown, cx| {
markdown.toggle_code_block_wrap(id);
cx.notify();
});
})
}

fn render_copy_code_block_button(
id: usize,
code: String,
Expand Down Expand Up @@ -3434,6 +3509,7 @@ mod tests {
MarkdownElement::new(markdown, MarkdownStyle::default()).code_block_renderer(
CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
},
)
Expand Down
4 changes: 3 additions & 1 deletion crates/markdown/src/mermaid.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -585,7 +585,7 @@ mod tests {
};
use crate::{
CodeBlockRenderer, CopyButtonVisibility, Markdown, MarkdownElement, MarkdownOptions,
MarkdownStyle,
MarkdownStyle, WrapButtonVisibility,
};
use collections::HashMap;
use gpui::{Context, Hsla, IntoElement, Render, RenderImage, TestAppContext, Window, size};
Expand Down Expand Up @@ -644,6 +644,7 @@ mod tests {
MarkdownElement::new(markdown, MarkdownStyle::default()).code_block_renderer(
CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
},
)
Expand Down Expand Up @@ -924,6 +925,7 @@ mod tests {
MarkdownElement::new(markdown.clone(), MarkdownStyle::default())
.code_block_renderer(CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
})
},
Expand Down
1 change: 1 addition & 0 deletions crates/markdown_preview/src/markdown_preview_view.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -623,6 +623,7 @@ impl MarkdownPreviewView {
let mut markdown_element = MarkdownElement::new(self.markdown.clone(), markdown_style)
.code_block_renderer(CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::VisibleOnHover,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.scroll_handle(self.scroll_handle.clone())
Expand Down
1 change: 1 addition & 0 deletions crates/workspace/src/notifications.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -402,6 +402,7 @@ impl Render for LanguageServerPrompt {
.text_size(TextSize::Small.rems(cx))
.code_block_renderer(markdown::CodeBlockRenderer::Default {
copy_button_visibility: CopyButtonVisibility::Hidden,
wrap_button_visibility: markdown::WrapButtonVisibility::Hidden,
border: false,
})
.on_url_click(|link, _, cx| cx.open_url(&link)),
Expand Down
6 changes: 5 additions & 1 deletion crates/zed/src/zed/telemetry_log.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ use gpui::{
StyleRefinement, Task, TextStyleRefinement, Window, list, prelude::*,
};
use language::LanguageRegistry;
use markdown::{CodeBlockRenderer, CopyButtonVisibility, Markdown, MarkdownElement, MarkdownStyle};
use markdown::{
CodeBlockRenderer, CopyButtonVisibility, Markdown, MarkdownElement, MarkdownStyle,
WrapButtonVisibility,
};
use project::Project;
use settings::Settings;
use telemetry_events::{Event, EventWrapper};
Expand Down Expand Up @@ -429,6 +432,7 @@ impl TelemetryLogView {
} else {
CopyButtonVisibility::Hidden
},
wrap_button_visibility: WrapButtonVisibility::Hidden,
border: false,
}),
),
Expand Down
Loading