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