Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

markdown renderer: Add copy icon button for code block (#19312)

Browse source 
Closes #19061

I don't know should i add tooltip or not

Before

![image](https://github.com/user-attachments/assets/0729806b-9b0d-442a-8f71-92c0443f34ef)

After

![image](https://github.com/user-attachments/assets/08eb5178-4139-44e7-a23f-50133233911d)

Release Notes:

- Markdown Preview: Added button to copy code blocks.

---------

Co-authored-by: Bennet Bo Fenner <bennet@zed.dev>
This commit is contained in:
Lilith Iris 2024-11-04 16:40:46 +07:00 • committed by GitHub
parent c41a8e33a0
commit 070e5914c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 23 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
crates/markdown_preview/src/markdown_renderer.rs
View file

@ -5,8 +5,8 @@ use crate::markdown_elements::{
ParsedMarkdownTableRow, ParsedMarkdownText,
};
use gpui::{
div, px, rems, AbsoluteLength, AnyElement, DefiniteLength, Div, Element, ElementId,
HighlightStyle, Hsla, InteractiveText, IntoElement, Keystroke, Length, Modifiers,
div, px, rems, AbsoluteLength, AnyElement, ClipboardItem, DefiniteLength, Div, Element,
ElementId, HighlightStyle, Hsla, InteractiveText, IntoElement, Keystroke, Length, Modifiers,
ParentElement, SharedString, Styled, StyledText, TextStyle, WeakView, WindowContext,
};
use settings::Settings;
@ -16,8 +16,9 @@ use std::{
};
use theme::{ActiveTheme, SyntaxTheme, ThemeSettings};
use ui::{
h_flex, relative, v_flex, Checkbox, FluentBuilder, InteractiveElement, LinkPreview, Selection,
StatefulInteractiveElement, Tooltip,
h_flex, relative, v_flex, Checkbox, Clickable, FluentBuilder, IconButton, IconName, IconSize,
InteractiveElement, LinkPreview, Selection, StatefulInteractiveElement, StyledExt, Tooltip,
VisibleOnHover,
};
use workspace::Workspace;
@ -369,6 +370,16 @@ fn render_markdown_code_block(
StyledText::new(parsed.contents.clone())
};
let copy_block_button = IconButton::new("copy-code", IconName::Copy)
.icon_size(IconSize::Small)
.on_click({
let contents = parsed.contents.clone();
move |_, cx| {
cx.write_to_clipboard(ClipboardItem::new_string(contents.to_string()));
}
})
.visible_on_hover("markdown-block");
cx.with_common_p(div())
.font_family(cx.buffer_font_family.clone())
.px_3()
@ -376,6 +387,14 @@ fn render_markdown_code_block(
.bg(cx.code_block_background_color)
.rounded_md()
.child(body)
.child(
div()
.h_flex()
.absolute()
.right_1()
.top_1()
.child(copy_block_button),
)
.into_any()
}