Skip to content

Add built-in CodeSnap code screenshot feature#692

Closed
Johnson-f wants to merge 4 commits into
athasdev:masterfrom
Johnson-f:feat/codesnap
Closed

Add built-in CodeSnap code screenshot feature#692
Johnson-f wants to merge 4 commits into
athasdev:masterfrom
Johnson-f:feat/codesnap

Conversation

@Johnson-f
Copy link
Copy Markdown

Summary

Adds a built-in CodeSnap-style feature for capturing styled code screenshots — opens as a split-right pane next to the source so the preview live-tracks the active selection, with copy-to-clipboard and save-to-PNG via the existing Tauri plugins. Zero Rust runtime changes; one additive function on the tree-sitter worker plus a new feature module under src/features/codesnap/.

  • New editor tab type "codeSnap" rendered through the existing pane system.
  • Live snapshot tracking — selection/buffer changes in the source pane re-render the preview; focusing the CodeSnap pane preserves the last snapshot.
  • Settings popover from the gear button (context-menu styled) for toggling line numbers, window controls, transparent bg, real line numbers, default shutter action, pixel ratio.
  • Triggers: command palette (CodeSnap: From Selection / Whole File), default keybinding Cmd+K Cmd+P, editor right-click menu entry (disabled when no selection).
  • 19 unit tests covering the three pure helpers (buildTokenSpans, buildDefaultFilename, buildSnapshotFromSelection).

One new npm dep: html-to-image (~30 KB). One Tauri cargo feature added: image-png. Clipboard write goes through Image.fromBytes to a direct plugin:clipboard-manager|write_image invoke (bypassing the plugin wrapper's broken instanceof Image check caused by a duplicate nested @tauri-apps/api copy).

Test plan

  • Open a source file → right-click → "CodeSnap Selection" → split-right pane opens with the styled preview.
  • Cmd+K Cmd+P with editor focus + selection → opens the same pane.
  • Command palette: CodeSnap: From Selection and CodeSnap: Whole File both work.
  • Change selection in the source pane → CodeSnap preview live-updates.
  • Drag the right-edge handle → preview resizes; canvas scrolls horizontally when the preview exceeds the pane.
  • Click the gear → settings popover; toggle line numbers / window controls / transparent bg / pixel ratio and see the preview update live.
  • Shutter → Copy → toast "Copied to clipboard" → paste into Preview.app / Slack / Discord → image lands at retina density.
  • Shutter → Save → file dialog with {basename}-L{a}-L{b}.png default → PNG opens with correct fonts and syntax colors.
  • Open a CodeSnap pane, then switch the source pane to a different file → preview follows the new file.
  • Unsupported language → preview renders plain (uncolored) text without crashing.

Notes

  • Spec / plan checked in under docs/superpowers/specs/ and docs/superpowers/plans/ for review trail.
  • Default keybinding swapped from the spec's Cmd+K Cmd+S to Cmd+K Cmd+P because the former was already bound to workbench.openKeyboardShortcuts.
  • Tests are co-located (*.test.ts next to the source), matching the codebase convention rather than the __tests__/ pattern the spec originally suggested.

Johnson-f added 4 commits May 12, 2026 15:24
Spell out toggle persistence (ephemeral), readout height source
(content-derived), Esc close semantics (no prompt), and useEditorTheme
precedence (foreground colors only, not background or chrome).
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.

2 participants