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

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-23 23:14:32 +01:00
parent 28dd033fca
commit 4cdffdfa21
4 changed files with 75 additions and 2 deletions

View File

@@ -23,6 +23,9 @@ const elements = {
taskInstruction: document.getElementById("task-instruction"),
codeInput: document.getElementById("code-input"),
runBtn: document.getElementById("run-btn"),
undoBtn: document.getElementById("undo-btn"),
redoBtn: document.getElementById("redo-btn"),
resetCodeBtn: document.getElementById("reset-code-btn"),
hintArea: document.getElementById("hint-area"),
validationIndicators: document.querySelector(".validation-indicators-container"),
editorContent: document.querySelector(".editor-content"),
@@ -376,6 +379,19 @@ function prevLesson() {
// ================= CODE EXECUTION =================
function resetCode() {
// Reset editor to initial code for current lesson
lessonEngine.reset();
const engineState = lessonEngine.getCurrentState();
if (codeEditor && engineState.lesson) {
codeEditor.setValue(engineState.lesson.initialCode || "");
}
// Clear hints and success indicators
clearHint();
resetSuccessIndicators();
elements.validationIndicators.innerHTML = "";
}
function runCode() {
const userCode = codeEditor ? codeEditor.getValue() : "";
@@ -561,6 +577,15 @@ function init() {
elements.nextBtn.addEventListener("click", nextLesson);
elements.runBtn.addEventListener("click", runCode);
// Editor tools
elements.undoBtn.addEventListener("click", () => {
if (codeEditor) codeEditor.undo();
});
elements.redoBtn.addEventListener("click", () => {
if (codeEditor) codeEditor.redo();
});
elements.resetCodeBtn.addEventListener("click", resetCode);
// Modals
elements.helpBtn.addEventListener("click", showHelp);
elements.modalClose.addEventListener("click", closeModal);