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:
25
src/app.js
25
src/app.js
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user