Skip to content

feat: copy button on preview code blocks, and long lines wrap - #48

Open
productengineered wants to merge 1 commit into
seamoss:mainfrom
productengineered:feat/code-block-copy
Open

productengineered wants to merge 1 commit into
seamoss:mainfrom
productengineered:feat/code-block-copy

Conversation

@productengineered

Copy link
Copy Markdown
Contributor

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

  • The button. Every code block in preview gets a copy button in its top-right corner, always shown. A click puts the block's code on the clipboard exactly (navigator.clipboard.writeText) and shows a check for --dur-copied, then the icon returns. The icons are inline SVG drawn with currentColor, so they follow every theme. New tokens: --code-copy-size, --code-copy-inset, --dur-copied.
  • The button never covers text. The block's right padding reserves the button's column, and preview code wraps (white-space: pre-wrap; overflow-wrap: anywhere), so text stops before the button. export.css is unchanged, so HTML and PDF exports keep their current code styling.
  • The <pre> stays untouched. The button sits in a .code-block wrapper 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.
  • Interaction details. Clicking the button keeps focus on the preview pane (its mousedown is prevented), so Space and the arrow keys still scroll. A double-click on the button copies instead of dropping into the editor.
  • Help: one sentence in the preview paragraph of help.md.

Tests

  • Layer: end-to-end (ui/preview.ts).
  • Case / test added or extended: scripts/e2e/cases/code-copy.mjs. It checks:
    • the button is shown without hovering,
    • no block scrolls horizontally, and the long prompt wraps,
    • every text rect ends left of the button,
    • the button adds no text to the block,
    • each block copies verbatim (the clipboard is stubbed so a run never overwrites the developer's own),
    • focus stays on the pane,
    • a double-click on the button stays in preview,
    • the check reverts.
  • pnpm typecheck && pnpm test pass, pnpm e2e passes (7/7), and pnpm test:coverage stays above the floors.
  • I also tested it with a real clipboard on a local build: clicking copied the prompt exactly, checked with pbpaste.

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

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant