Add buttons to copy code block contents#345
Add buttons to copy code block contents#345adityatelange merged 6 commits intoadityatelange:masterfrom
Conversation
Adds a clickable "copy" link in the top-right corner of each code block.
If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.
|
@kdkasad Code looks good to me, works as expected ! |
Maintainer edits are now enabled. Also I decided to add translation keys to support other languages. |
0a8e401 to
5d7d100
Compare
- change i18n ids to `code_copy` and `code_copied` - refactor
|
Kudos, SonarCloud Quality Gate passed!
|
|
@kdkasad I just noticed this doesn't work with markup:
highlight:
lineNos: trueand code blocks not having a parent class |
It works fine with line numbers enabled for me. However you're right about it not working for non- Edit: it also doesn't work for code blocks created using backticks with no syntax/language specified. |
Yes you are correct, it works fine with |
* add buttons to copy code block contents
Adds a clickable "copy" link in the top-right corner of each code block.
If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.
* hides copy button unless mouse is hovering over code block
* change text of copy button when text is copied
* add translation keys for copy button text `code_copy` and `code_copied`
* To disable use `Params.disableCodeCopy: true` in site config
Adds a clickable "copy" link in the top-right corner of each code block.
If available, uses the navigator.clipboard API. Falls back to selecting
the text and calling document.execCommand('copy') to copy text.
I mainly focused on functionality, not style, so let me know if you want it to look different.
I tested on both Chrome and Firefox on Linux, and it works using both the
navigator.clipboardAPI and the fallback method in both browsers.Closes #344