Commit Graph

13 Commits

Author SHA1 Message Date
4cdffdfa21 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>
2025-12-23 23:14:32 +01:00
c6ab97b67e fix: resolve initialization bugs breaking level indicator and expected preview
- Fix renderLesson to handle null inputEl (CodeMirror replaces textarea)
- Fix renderExpectedPreview to use 'solution' property instead of 'solutionCode'
- These fixes restore level indicator, expected preview, and auto-run functionality

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-22 10:04:41 +01:00
d1289ff456 fix: use One Dark theme for CodeMirror syntax highlighting
- Replace custom highlight styles with @codemirror/theme-one-dark
- Cleaner implementation with official CodeMirror theme
- Keep custom font and padding overrides
2025-12-22 01:17:10 +01:00
e427349749 feat: add CodeMirror 6 editor with Emmet support
- Replace textarea with CodeMirror 6 for syntax highlighting
- Add Emmet abbreviation expansion (Tab to expand)
- Support HTML and CSS language modes with autocomplete
- Add dark theme matching app design
- Tab indentation with Shift-Tab for outdent
- Update help modal with Emmet shortcuts
2025-12-21 23:37:14 +01:00
862d29aa19 feat: add HTML lessons mode and side-by-side comparison UI
- Add HTML mode support with new validation types (element_exists,
  element_count, attribute_value, element_text, parent_child, sibling)
- Create 3 HTML lesson modules: Elements, Forms Basic, Forms Validation
- Implement side-by-side preview comparison (Your Output vs Expected)
- Add merge animation with "Perfect Match!" overlay on validation success
- Render expected output from solutionCode field in lesson JSON
- Update schema to support HTML mode and solutionCode
- Reorder modules: HTML first, then CSS, then Tailwind
- Update tests for new functionality

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-21 22:12:00 +01:00
Michael Czechowski
4664bc7fdb refactor: clean up unused lesson imports and improve code consistency 2025-06-10 23:45:46 +02:00
Michael Czechowski
5da62807a2 feat: enhance LessonEngine to manage user progress and code storage 2025-06-05 23:31:13 +02:00
9e28534562 feat: implement tailwind validations and basic example 2025-06-01 22:34:55 +02:00
Michael Czechowski
6c7ef3ff0b feat: enhance lesson preview functionality and improve run button interaction; change lesson indicator to percentage; split preview css for better isolation 2025-05-19 23:30:22 +02:00
Michael Czechowski
4f5154b795 feat: update localStorage keys for user progress and last module ID, enhance editor layout with validation indicator 2025-05-18 23:22:17 +02:00
Michael Czechowski
c6f1179568 WIP: enhance code editor layout and implement live preview functionality 2025-05-18 21:55:49 +02:00
Michael Czechowski
0f2308a132 style: run format first time 2025-05-13 21:08:18 +02:00
Michael Czechowski
ab4279f9ca refactor: reorganize project structure and update import paths 2025-05-13 20:29:59 +02:00