Feature #29214
open
Button to copy PRE block content to clipboard
0%
Description
It would be very nice if we have a little button near PRE block, so user can copy the entire content to clipboard.
This can be very useful when there are in the block informations that user wants to use other place.
This should work on issues and wikis.
Files
Related issues
Updated by Go MAEDA over 6 years ago
- Related to Feature #5953: Copy RSS/REST API keys to clipboard with javascript added
Updated by Mizuki ISHIKAWA about 5 years ago
- File feature-29214-1.patch feature-29214-1.patch added
- File ScreenShot.png ScreenShot.png added
This patch adds a copy button next to the pre tag.
Updated by 
Updated by Nicolas Houdelot about 1 year ago
+1
that would be great if this could be included in the next major release (6.0), as a patch already exist
Updated by Mizuki ISHIKAWA 29 days ago
- File patch_demo.gif patch_demo.gif added
- File screenshot 2025-02-28 15.12.34.png screenshot 2025-02-28 15.12.34.png added
- File 0001-Add-copy-button-to-pre-elements.patch 0001-Add-copy-button-to-pre-elements.patch added
I have attached a patch modified to work with the latest version of Redmine.
This patch updates the structure of the
tag using JavaScript, transforming it into the following HTML structure: <pre><code class="html"> <notextile> <div class="pre-wrapper"> <a title="Copy" class="copy-pre-content-link icon-only">(copy icon)</a> <pre><code>text</code></pre> </div> </notextile>
With this change, clicking the "Copy" link will copy the contents of the pre tag to the clipboard.
Updated by Mizuki ISHIKAWA 26 days ago
#note-5 html conversion is broken, so I'll write it again.
I have attached a patch modified to work with the latest version of Redmine.
This patch updates the structure of the pre tag using JavaScript, transforming it into the following HTML structure:
<div class="pre-wrapper">
<a title="Copy" class="copy-pre-content-link icon-only">(copy icon)</a>
<pre><code>text</code></pre>
</div>
With this change, clicking the "Copy" link will copy the contents of the pre tag to the clipboard.
Updated by Katsuya HIDAKA 22 days ago
- File copy_button_inside_codeblock_demo.gif copy_button_inside_codeblock_demo.gif added
- File copy_button_inside_codeblock_screenshot.png copy_button_inside_codeblock_screenshot.png added
- File 0002-Place-the-copy-button-inside-the-code-block.patch 0002-Place-the-copy-button-inside-the-code-block.patch added
- File 0003-Remove-the-unused-button_copied-definition.patch 0003-Remove-the-unused-button_copied-definition.patch added
I have confirmed that the patch posted in #note-5 works on Chrome, Firefox, and Safari. I think it is very good, but I have a suggestion regarding the position of the copy button.
How about placing the copy button inside the code block? This improves the patch in #note-5 in the following two ways:
- A UI where the copy button is inside the code block is more common, as seen in GitHub and Jira, making it more intuitive to use.
- It avoids the need to reduce the code block's area. In #note-5, additional right margin was added to accommodate the copy button.
See also copy_button_inside_codeblock_demo.gif
Additionally, it seems that the button_copied definition added to locales/en.yml in #note-5 is not being used.
I have attached two additional patches (0002, 0003) to address these improvements.
Updated by Mizuki ISHIKAWA 22 days ago
Katsuya HIDAKA wrote in #note-7:
I have attached two additional patches (0002, 0003) to address these improvements.
Thanks for the patch! Looks good.