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

markdown: Ensure code block copy button stays in the right spot (#26074)

Browse source 
This PR makes it so the copy button on Markdown code blocks stays
absolutely positioned even when scrolled:

<img width="1297" alt="Screenshot 2025-03-04 at 5 28 48 PM"
src="https://github.com/user-attachments/assets/b0d0fae9-ccd6-43c1-bef3-44d8d3c3e669"
/>

We achieve this by inserting a new parent element around both the copy
button and the code block itself so we can position the copy button
absolutely within that element.

Release Notes:

- N/A
This commit is contained in:
Marshall Bowers 2025-03-04 17:44:29 -05:00 • committed by GitHub
parent ebc5c213a2
commit 886d8c1cab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

14
crates/markdown/src/markdown.rs
View file

@ -611,6 +611,9 @@ impl Element for MarkdownElement {
None
};
// This is a parent container that we can position the copy button inside.
builder.push_div(div().relative().w_full(), range, markdown_end);
let mut code_block = div()
.id(("code-block", range.start))
.rounded_lg()
@ -750,6 +753,12 @@ impl Element for MarkdownElement {
MarkdownTagEnd::CodeBlock => {
builder.trim_trailing_newline();
builder.pop_div();
builder.pop_code_block();
if self.style.code_block.text.is_some() {
builder.pop_text_style();
}
if self.markdown.read(cx).options.copy_code_block_buttons {
builder.flush_text();
builder.modify_current_div(|el| {
@ -792,11 +801,8 @@ impl Element for MarkdownElement {
});
}
// Pop the parent container.
builder.pop_div();
builder.pop_code_block();
if self.style.code_block.text.is_some() {
builder.pop_text_style();
}
}
MarkdownTagEnd::HtmlBlock => builder.pop_div(),
MarkdownTagEnd::List(_) => {