Fusion
69 lines
2.2 KiB
Markdown
69 lines
2.2 KiB
Markdown
# File Editor - Syntax Highlighting and Editing
|
|
|
|
## Problem
|
|
|
|
The current file viewer in the repository workspace only displays raw text without syntax highlighting or editing capabilities. Users cannot view code with proper formatting or make quick edits to files.
|
|
|
|
## Solution
|
|
|
|
Create a comprehensive file editor that provides:
|
|
|
|
1. **Syntax highlighting** for all text-based file types
|
|
2. **View/Edit mode toggle** - switch between read-only and edit mode
|
|
3. **Rich text editing** with syntax highlighting while editing
|
|
4. **Commit dialog** - save changes with custom commit message
|
|
5. **Line numbers** in both view and edit modes
|
|
6. **File type detection** from extension
|
|
|
|
## Key Features
|
|
|
|
### Syntax Highlighting
|
|
- Support for all common programming languages
|
|
- Automatic language detection from file extension
|
|
- Consistent color scheme matching the app theme
|
|
|
|
### Edit Mode
|
|
- Toggle between view (read-only) and edit mode
|
|
- Syntax highlighted editing using textarea overlay
|
|
- Line numbers visible during editing
|
|
- Keyboard shortcuts (Ctrl+S to save)
|
|
|
|
### Commit Flow
|
|
- Click "Edit" → make changes → click "Save"
|
|
- Commit dialog appears with message input
|
|
- Shows diff preview of changes
|
|
- Commit with author info (from user profile)
|
|
- Returns to view mode after successful commit
|
|
|
|
### File Support
|
|
- All text-based files (source code, config, markdown, etc.)
|
|
- Binary files show "cannot edit" message
|
|
- Large files (>1MB) show warning
|
|
|
|
## Benefits
|
|
|
|
- **Better code reading** - syntax highlighting makes code easier to understand
|
|
- **Quick fixes** - edit files without leaving the browser
|
|
- **Git integration** - changes are committed directly
|
|
- **Familiar interface** - similar to GitHub/GitLab file editor
|
|
|
|
## Scope
|
|
|
|
### New Components
|
|
- FileEditor (enhanced file viewer with edit capability)
|
|
- CommitDialog (commit message + diff preview)
|
|
- SyntaxHighlighter (Prism.js wrapper)
|
|
|
|
### Modified Components
|
|
- RepoWorkspace (integrate new editor)
|
|
- FileViewer (replaced by FileEditor)
|
|
|
|
### Backend Changes
|
|
- None (existing endpoints already support file update)
|
|
|
|
## Technology
|
|
|
|
- **react-simple-code-editor** - lightweight code editing with syntax highlighting
|
|
- **Prism.js** - syntax highlighting for 289+ languages
|
|
- **Existing API** - PUT /files/content endpoint already exists
|