Repository navigation
feat: copy button on preview code blocks, and long lines wrap - #48
Open
productengineered wants to merge 1 commit into
Open
productengineered wants to merge 1 commit into
productengineered wants to merge 1 commit into
Conversation
Code blocks in preview often hold something to paste somewhere else: a prompt, a command, a snippet. Each one now has a copy button in its top-right corner, always shown. It puts the block's code on the clipboard exactly and shows a check for a moment (--dur-copied). - The button sits beside the <pre> in a .code-block wrapper, not inside it. The block's text stays exactly the code (the double-click mapping reads it), and the button holds its corner. Preview only: exports and Copy as Rich Text render without it. - The block's right padding reserves the button's column (--code-copy-size + 2 x --code-copy-inset), and preview code now wraps (pre-wrap, overflow-wrap: anywhere). Text never runs under the button, and a long prompt reads whole instead of hiding behind a horizontal scrollbar. export.css is untouched. - Clicking keeps focus on the pane (mousedown is prevented), so keyboard scrolling still works. A double-click on the button copies; it does not drop into the editor. e2e case code-copy: the button shows without hovering, nothing scrolls horizontally, every text rect ends left of the button, each block copies verbatim (clipboard stubbed so a run never clobbers yours), focus stays on the pane, a double-click on the button stays in preview, and the check reverts.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Code blocks in preview often hold something to paste somewhere else: a prompt, a shell command, a snippet. This adds a copy button to every code block in preview. Long lines now wrap, so a long prompt reads in full instead of sitting behind a horizontal scrollbar.
I know CONTRIBUTING says feature PRs get closed. This one is small and preview-only, and I use it every day for workshop handouts. Happy to adjust it or drop it.
What
navigator.clipboard.writeText) and shows a check for--dur-copied, then the icon returns. The icons are inline SVG drawn withcurrentColor, so they follow every theme. New tokens:--code-copy-size,--code-copy-inset,--dur-copied.white-space: pre-wrap; overflow-wrap: anywhere), so text stops before the button.export.cssis unchanged, so HTML and PDF exports keep their current code styling.<pre>stays untouched. The button sits in a.code-blockwrapper beside the<pre>, not inside it. The block's text stays exactly the code (the double-click mapping reads it), and the button doesn't scroll with the content. Exports and Copy as Rich Text never include it.mousedownis prevented), so Space and the arrow keys still scroll. A double-click on the button copies instead of dropping into the editor.help.md.Tests
ui/preview.ts).scripts/e2e/cases/code-copy.mjs. It checks:pnpm typecheck && pnpm testpass,pnpm e2epasses (7/7), andpnpm test:coveragestays above the floors.pbpaste.