Add copy-to-clipboard support to code blocks #1273
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds support for a
copy
option in code blocks. When this option is enabled, a copy-to-clipboard button is rendered in the top-right corner of the code block, allowing users to easily copy its contents.User Experience
If a code block includes the
copy
keyword in the language line, a copy button will appear when the user hovers over the block. Clicking the button copies the full contents of the code block to the clipboard and displays a checkmark to confirm success.Implementation Overview
swift-docc
, this change parses thecopy
option from the language line in triple-backtick code blocks.copyToClipboard
property was added toRenderBlockContent.codeListing
passed to the renderer.swift-docc-render
. The accompanying branch/PR is here: Add copy-to-clipboard support to code blocks swift-docc-render#961Dependencies
This PR depends on associated changes in
swift-docc-render
to actually render and handle the copy button.Testing
Setup
swift-docc
andswift-docc-render
with the copy-to-clipboard changes.swift-docc
and serve it using a local build ofswift-docc-render
.How to Test
```
or by adding a code listing, add the copy option like this:
or like this:
2. Hover over the code block. A copy icon should appear in the top-right corner.
3. Click the copy icon. The code should be copied to your clipboard and the icon should update to a checkmark briefly. Paste to verify the copy functionality works.
Checklist
Make sure you check off the following items. If they cannot be completed, provide a reason.
testCopyToClipboard()
inRenderContentCompilerTests.swift
./bin/test
script and it succeededcopyToClipboard
as a property ofCodeListing
inRenderNode.spec.json
. I also added a subsection to Formatting Your Documentation Content. Please let me know if there’s any other documentation I should update.