Skip to content

[Repo Assist] Add copy-to-clipboard button to code blocks#998

Merged
nojaf merged 7 commits intomainfrom
repo-assist/fix-issue-72-copy-code-to-clipboard-e89f0c91d528a99a
Feb 26, 2026
Merged

[Repo Assist] Add copy-to-clipboard button to code blocks#998
nojaf merged 7 commits intomainfrom
repo-assist/fix-issue-72-copy-code-to-clipboard-e89f0c91d528a99a

Conversation

@github-actions
Copy link
Contributor

🤖 This is an automated PR from Repo Assist, created in response to a maintainer request on #72.

Closes #72.

What this does

Adds a "Copy" button that appears on hover in the top-right corner of every code block in pages generated by fsdocs. This makes it easy to copy F# snippets (including those with inline FSI output) directly into a .fsx file.

Root cause / context

Since 2013 (#72), there was no easy way to copy code samples from generated docs — especially F# highlighted blocks with inline output markers that make manual selection difficult.

Implementation

File Change
docs/content/fsdocs-copy-button.js New ES module — injects a (button class="copy-code-button") into every table.pre (F# highlighted) and pre > code (Markdown fenced) block. Uses the modern navigator.clipboard API with an execCommand fallback for non-HTTPS environments.
docs/content/fsdocs-default.css CSS for .copy-code-button (absolute-positioned, visible on hover) and .code-block-wrapper (a (div) wrapper used for table.pre blocks to provide a positioning context without breaking existing selectors).
docs/_template.html Load the new script as a type="module".
RELEASE_NOTES.md Document the addition.

Design decisions

  • No new dependencies — pure JS + CSS, ~60 lines total.
  • Button is hidden by default, shown on hover — unobtrusive.
  • For table.pre F# blocks: copies text from the .snippet pre column, omitting line numbers.
  • For standard pre > code blocks: copies innerText of the <code> element.
  • Graceful fallback via document.execCommand('copy') for pages served over plain HTTP.

Test Status

Build: ✅ dotnet build FSharp.Formatting.sln --configuration Release succeeded (0 errors, 4 pre-existing warnings about System.Drawing.Common vulnerability unrelated to this change).

Note: The copy button is a pure front-end feature in template/CSS/JS files; there are no unit tests to run for it. Visual verification would require running dotnet fsi build.fsx to generate docs.

Generated by Repo Assist for issue #72

To install this workflow, run gh aw add githubnext/agentics/workflows/repo-assist.md@828ac109efb43990f59475cbfce90ede5546586c. View source at https://github.com/githubnext/agentics/tree/828ac109efb43990f59475cbfce90ede5546586c/workflows/repo-assist.md.

Fixes #72. Adds a 'Copy' button that appears on hover in the top-right
corner of every code block (both standard Markdown fenced blocks and
F# syntax-highlighted table.pre blocks).

- docs/content/fsdocs-copy-button.js: new module that injects copy
  buttons via the Clipboard API (with execCommand fallback for non-HTTPS)
- docs/content/fsdocs-default.css: styles for .copy-code-button and
  .code-block-wrapper (used to wrap table.pre for positioning)
- docs/_template.html: load the new script
- RELEASE_NOTES.md: document the addition

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
Copy link
Contributor Author

✅ Pull request created: #998

@dsyme dsyme closed this Feb 24, 2026
@dsyme dsyme reopened this Feb 24, 2026
@dsyme dsyme marked this pull request as ready for review February 24, 2026 01:14
function attachCopyHandler(button, getText) {
button.addEventListener('click', function () {
const text = getText()
if (navigator.clipboard && navigator.clipboard.writeText) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/repo-assist while on topic, please update docs/content/fsdocs-tips.js as well to use navigator.clipboard.

@dsyme
Copy link
Contributor

dsyme commented Feb 24, 2026

@nojaf Looks like push-to-pull-request-branch safe output is having some troubles in GitHub Agentic Workflows, so "/" commands may not work in PRs until I get that fixed

@dsyme
Copy link
Contributor

dsyme commented Feb 26, 2026

/repo-assist while on topic, please update docs/content/fsdocs-tips.js as well to use navigator.clipboard.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
@github-actions
Copy link
Contributor Author

Commit pushed: 63efe20

Generated by Repo Assist

@nojaf nojaf merged commit 2a71e97 into main Feb 26, 2026
4 checks passed
@nojaf nojaf deleted the repo-assist/fix-issue-72-copy-code-to-clipboard-e89f0c91d528a99a branch February 26, 2026 07:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Make it super easy to copy code samples to the clipboard

2 participants