Skip to content

Add Online Code Editor with Monaco Editor - #19

Merged
GhDj merged 3 commits into
developfrom
feature/code-editor
Dec 14, 2025
Merged

Add Online Code Editor with Monaco Editor#19
GhDj merged 3 commits into
developfrom
feature/code-editor

Conversation

@GhDj

@GhDj GhDj commented Dec 14, 2025

Copy link
Copy Markdown
Owner

Summary

  • Add full-featured online code editor powered by Monaco Editor (VS Code's engine)
  • Tab-based interface with HTML, CSS, and JavaScript files
  • Live preview panel with sandboxed iframe for real-time code execution
  • Dynamic tab management: add new files, close tabs, rename files
  • Console output panel capturing log/info/warn/error from preview
  • Keyboard shortcuts modal with common editor shortcuts reference
  • Word wrap & minimap toggle controls
  • Download individual files or all files as ZIP (JSZip)
  • Theme sync with site's dark/light mode
  • Standalone layout to avoid Alpine.js conflicts

Features

  • Monaco Editor: Full VS Code editing experience with IntelliSense, multiple cursors, find/replace
  • Live Preview: Real-time preview updates (debounced 500ms) with sandboxed iframe
  • File Types: Support for .html, .css, .js, .json, .php, .sql
  • Console Capture: View console output from preview in dedicated panel
  • Download Options: Single file download, Download All as ZIP, Ctrl+S shortcut
  • Responsive: Automatic layout adjustment with resizable panels

Test plan

  • Verify code editor page loads at /code-editor
  • Test tab switching between HTML, CSS, JS files
  • Verify live preview updates when editing code
  • Test adding new files with + button
  • Test closing tabs with x button
  • Verify console output captures logs from preview
  • Test Download and Download All as ZIP functionality
  • Verify dark/light theme switching works
  • Test keyboard shortcuts modal opens/closes
  • Verify word wrap and minimap toggles work

GhDj added 3 commits December 3, 2025 00:29
- Add new Code Editor tool with Ace Editor integration
- Support for HTML, CSS, and JavaScript with syntax highlighting
- Live preview panel with sandboxed iframe
- Tab-based interface for switching between files
- Auto-refresh preview on code changes (debounced)
- Dark/light theme sync with site theme
- Copy, download, and clear functionality
- Responsive layout with optional preview toggle
- Add route, controller method, and home page entry
- Add tests for code editor page
- Create standalone layout template without Alpine.js dependency
- Use pure vanilla JavaScript for Monaco Editor integration
- Fix Alpine.js conflict that caused page freeze in Chrome
- Update tests for new standalone structure
- Add keyboard shortcuts help modal with common Monaco shortcuts
- Add word wrap and minimap toggle controls in toolbar
- Add console output panel that captures log/info/warn/error from preview
- Add dynamic tabs: create new files (+) and close tabs (x)
- Add Download All as ZIP feature using JSZip
- Add Ctrl+S keybinding to download current file
- Support additional file types: .html, .css, .js, .json, .php, .sql
@GhDj
GhDj merged commit 3eeda61 into develop Dec 14, 2025
3 checks passed
@GhDj
GhDj deleted the feature/code-editor branch December 14, 2025 14:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant