Problem
Issue #52 (Undo/Redo) was closed in #58 with the backend logic done (JSONL stacks, /api/workspace/design-history POST endpoint, pushEntry in design-edit handler). But the keyboard shortcuts (⌘Z / ⌘⇧Z) in the Design Mode preview iframe are not wired.
Goal
When the user is in Design Mode and focused on the preview iframe, pressing:
⌘Z (macOS) / Ctrl+Z (Linux/Windows) → triggers POST /api/workspace/design-history { action: 'undo' }
⌘⇧Z (macOS) / Ctrl+Shift+Z (Linux/Windows) → triggers POST /api/workspace/design-history { action: 'redo' }
Acceptance Criteria
Files to modify
public/design-mode-agent.js — add keydown listener in iframe
components/workspace/preview-panel.tsx — add listener on the wrapper
components/workspace/workspace-header.tsx — add hint icon in toolbar
Technical Notes
- The shortcut should NOT trigger when an
<input> or <textarea> has focus (so it doesn't break form editing)
- Use
e.metaKey (macOS) or e.ctrlKey (others) to detect the modifier
- The handler should call
parent.postMessage({ type: 'design-undo' | 'design-redo' }, '*') from inside the iframe
- The parent (preview-panel.tsx) listens for the message and calls the API
Related
Problem
Issue #52 (Undo/Redo) was closed in #58 with the backend logic done (JSONL stacks,
/api/workspace/design-historyPOST endpoint,pushEntryindesign-edithandler). But the keyboard shortcuts (⌘Z / ⌘⇧Z) in the Design Mode preview iframe are not wired.Goal
When the user is in Design Mode and focused on the preview iframe, pressing:
⌘Z(macOS) /Ctrl+Z(Linux/Windows) → triggersPOST /api/workspace/design-history { action: 'undo' }⌘⇧Z(macOS) /Ctrl+Shift+Z(Linux/Windows) → triggersPOST /api/workspace/design-history { action: 'redo' }Acceptance Criteria
Files to modify
public/design-mode-agent.js— add keydown listener in iframecomponents/workspace/preview-panel.tsx— add listener on the wrappercomponents/workspace/workspace-header.tsx— add hint icon in toolbarTechnical Notes
<input>or<textarea>has focus (so it doesn't break form editing)e.metaKey(macOS) ore.ctrlKey(others) to detect the modifierparent.postMessage({ type: 'design-undo' | 'design-redo' }, '*')from inside the iframeRelated
lib/workspace/design-history.ts(already implemented)app/api/workspace/design-history/route.ts(already implemented)