Fusion
103 lines
2.3 KiB
Markdown
103 lines
2.3 KiB
Markdown
# File Editor - Tasks
|
|
|
|
## Phase 1: Dependencies and Setup
|
|
|
|
- [x] **Task 1.1**: Install dependencies
|
|
- `react-simple-code-editor`
|
|
- `prismjs`
|
|
- `@types/prismjs`
|
|
- Add Prism CSS theme
|
|
|
|
- [x] **Task 1.2**: Create language detection utility
|
|
- Map file extensions to Prism.js language names
|
|
- Handle common extensions (.js, .ts, .py, .md, etc.)
|
|
- Default to plaintext for unknown extensions
|
|
|
|
## Phase 2: Syntax Highlighting
|
|
|
|
- [x] **Task 2.1**: Create SyntaxHighlighter component
|
|
- Use Prism.js to tokenize code
|
|
- Render highlighted HTML
|
|
- Add line numbers
|
|
- Copy-to-clipboard button
|
|
|
|
- [x] **Task 2.2**: Add Prism.js themes
|
|
- Light theme (matches app)
|
|
- Dark theme support
|
|
- CSS custom properties integration
|
|
|
|
- [x] **Task 2.3**: Lazy load language support
|
|
- Only load language grammar when needed
|
|
- Dynamic imports for language files
|
|
|
|
## Phase 3: Edit Mode
|
|
|
|
- [x] **Task 3.1**: Create CodeEditor component
|
|
- Use react-simple-code-editor
|
|
- Prism.js highlighting overlay
|
|
- Line numbers
|
|
- Tab key support
|
|
|
|
- [x] **Task 3.2**: Add keyboard shortcuts
|
|
- Ctrl/Cmd + E: Toggle edit
|
|
- Ctrl/Cmd + S: Save
|
|
- Escape: Cancel
|
|
- Tab: Insert spaces
|
|
|
|
## Phase 4: Commit Dialog
|
|
|
|
- [x] **Task 4.1**: Create CommitDialog component
|
|
- Diff preview (simple comparison)
|
|
- Commit message input (required)
|
|
- Author info display
|
|
- Cancel and Commit buttons
|
|
|
|
- [x] **Task 4.2**: Add diff generation
|
|
- Simple line-by-line diff
|
|
- Show added/removed lines
|
|
- Highlight changes
|
|
|
|
## Phase 5: FileEditor Integration
|
|
|
|
- [x] **Task 5.1**: Create FileEditor component
|
|
- Manage view/edit state
|
|
- Load file content
|
|
- Toggle modes
|
|
- Handle save flow
|
|
|
|
- [x] **Task 5.2**: Replace FileViewer in RepoWorkspace
|
|
- Update imports
|
|
- Pass required props
|
|
- Handle file selection
|
|
|
|
## Phase 6: Styling
|
|
|
|
- [x] **Task 6.1**: Add editor CSS
|
|
- Toolbar styling
|
|
- Editor container
|
|
- Line numbers
|
|
- Syntax colors
|
|
- Commit dialog styles
|
|
|
|
- [x] **Task 6.2**: Add responsive styles
|
|
- Mobile layout
|
|
- Touch-friendly buttons
|
|
- Collapsible toolbar
|
|
|
|
## Phase 7: Quality Gates
|
|
|
|
- [x] **Task 7.1**: Run backend checks
|
|
- ruff
|
|
- mypy
|
|
|
|
- [x] **Task 7.2**: Run frontend checks
|
|
- TypeScript typecheck
|
|
- ESLint
|
|
- Build
|
|
|
|
- [x] **Task 7.3**: Manual testing
|
|
- Test various file types
|
|
- Test commit flow
|
|
- Test error handling
|
|
- Test responsive design
|