feat: add undo/redo/reset editor tools with keyboard shortcuts

- Add history extension to CodeMirror for undo/redo support
- Ctrl+Z for undo, Ctrl+Shift+Z for redo now work
- Add toolbar buttons: ↶ Undo, ↷ Redo, ⟲ Reset
- Reset button restores editor to initial lesson code
- Add .btn-icon and .editor-tools CSS styles
This commit is contained in:
2025-12-23 23:14:32 +01:00
parent c98d8326b5
commit 1328d7c004
4 changed files with 75 additions and 2 deletions

View File

@@ -42,6 +42,11 @@
<div class="editor-header">
<label for="code-input" class="editor-label">CSS Editor</label>
<div class="editor-actions">
<div class="editor-tools">
<button id="undo-btn" class="btn btn-icon" title="Undo (Ctrl+Z)"></button>
<button id="redo-btn" class="btn btn-icon" title="Redo (Ctrl+Shift+Z)"></button>
<button id="reset-code-btn" class="btn btn-icon" title="Reset to initial code"></button>
</div>
<div class="validation-indicators-container"></div>
<button id="run-btn" class="btn btn-run">
<img src="./gear.svg" alt="" />Run