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