Project

General

Profile

Actions

Feature #29214

closed

Button to copy `pre` code block content to the clipboard

Added by Fernando Hartmann almost 7 years ago. Updated 1 day ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Start date:
Due date:
% Done:

0%

Estimated time:
Resolution:
Fixed

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

Related to Redmine - Feature #5953: Copy RSS/REST API keys to clipboard with javascriptNew2010-07-24

Actions
Actions #1

Updated by Go MAEDA almost 7 years ago

  • Related to Feature #5953: Copy RSS/REST API keys to clipboard with javascript added
Actions #2

Updated by Mizuki ISHIKAWA about 5 years ago

This patch adds a copy button next to the pre tag.

Actions #3

Updated by Aleksandar Pavic over 3 years ago

+1 for this to be core feature!

Actions #4

Updated by Nicolas Houdelot over 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

Actions #5

Updated by Mizuki ISHIKAWA about 2 months ago

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.

Actions #6

Updated by Mizuki ISHIKAWA about 2 months 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.

Actions #7

Updated by Katsuya HIDAKA about 1 month ago

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.

Actions #8

Updated by Mizuki ISHIKAWA about 1 month 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.

Actions #9

Updated by Go MAEDA about 1 month ago

  • Target version set to Candidate for next major release
Actions #10

Updated by Mizuki ISHIKAWA 4 days ago

Since the navigator.clipboard API is only available in secure contexts such as HTTPS, we added a fallback to use execCommand('copy') when the API is not available.
- https://developer.mozilla.org/ja/docs/Web/API/Clipboard
- https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard

The existing link copy feature has also been updated to use the same implementation that falls back to execCommand('copy') when navigator.clipboard is unavailable.
The previous patches (0001, 0002, 0003) conflict with the latest code, so we’ve included a new patch that combines the changes from 0001–0003 along with the fallback implementation.

Actions #11

Updated by Go MAEDA 3 days ago

  • Target version changed from Candidate for next major release to 6.1.0

Setting the target version to 6.1.0.

Actions #12

Updated by Mizuki ISHIKAWA 1 day ago

Fixed a system test that was failing.

Actions #13

Updated by Go MAEDA 1 day ago

  • Subject changed from Button to copy PRE block content to clipboard to Button to copy `pre` code block content to the clipboard
  • Status changed from New to Closed
  • Assignee set to Go MAEDA
  • Resolution set to Fixed

Committed the patch in r23663. Thank you for your contribution.

pre blocks in formatted text now have a copy button that lets you copy their contents to the clipboard, as shown in the screenshot below. The icon appears when you hover over a code block.

Actions

Also available in: Atom PDF