iliya 0cb85d463c feat: enhance project editor with new error boundary and file handling improvements

- Introduced `EditorErrorBoundary` component to catch runtime errors in CodeMirror, providing a fallback UI to prevent crashes.
- Updated file handling logic to utilize `isbinaryfile` for more reliable binary detection, replacing manual null-byte scans.
- Enhanced `openFile` method to prevent duplicate tabs for already opened files.
- Improved documentation for new components and updated file lists to reflect recent changes.
- Optimized file watcher and path validation processes for better performance and reliability.

2026-02-28 17:55:21 +02:00

4.6 KiB

Raw Blame History

In-App Code Editor — План реализации

Обзор

На странице TeamDetailView рядом с путём проекта (data.config.projectPath) добавляется кнопка "Open in Editor", открывающая полноэкранный редактор кода прямо внутри приложения. Редактор позволяет просматривать файловое дерево проекта, открывать файлы во вкладках с подсветкой синтаксиса, редактировать и сохранять их, создавать/удалять файлы, искать по содержимому, и отображать git-статусы.

Tech Stack

Editor engine: CodeMirror 6 (20+ пакетов @codemirror/* уже в package.json, 16 языковых пакетов)
Не ProseMirror: ProseMirror -- rich-text WYSIWYG, CodeMirror -- код-редактор. Один автор (Marijn Haverbeke), CM6 уже глубоко интегрирован
UI: React 18, Tailwind CSS, lucide-react иконки, Radix UI (контекстное меню, confirm dialog)
State: Zustand slice (editorSlice.ts)
Виртуализация: @tanstack/react-virtual (уже в проекте)
Fuzzy search: cmdk v1.0.4 (уже в зависимостях)
Новые npm-зависимости: @codemirror/search (итерация 1), isbinaryfile v5 (итерация 1, binary detection), @radix-ui/react-context-menu (итерация 3), simple-git v3.32+ (итерация 5, git status), chokidar v4 (итерация 5, file watcher). Остальное уже установлено

Ключевые архитектурные решения

Решение	Обоснование
`ProjectFileService` (не `FileEditorService`)	Лучше отражает scope; аналог `TeamDataService`
Stateless сервис (без `rootPath` в конструкторе)	Каждый метод принимает `projectRoot`; не привязан к одному проекту
EditorState pooling (не CSS show/hide)	Один EditorView + `Map<tabId, EditorState>` в useRef; экономия RAM ~8-12x
`editorModifiedFiles: Set<string>` (не `Record<string, string>`)	Контент живёт только в CM6 EditorState; 0 re-render при наборе текста
`validateFilePath()` из `pathValidation.ts` (не свой `assertInsideRoot`)	Уже проверяет traversal, symlinks, sensitive patterns, cross-platform
`projectRoot` в module-level state (не от renderer)	Фиксируется при `editor:open`; IPC handlers берут из state
Overlay вместо Radix Dialog	Radix Dialog ограничивает фокус, конфликтует с CM6

Навигация по плану

#	Файл	Содержимое
—	architecture.md	Архитектура, безопасность, state, IPC API, сервисы, компоненты, CM6, shortcuts, CSS
0	iter-0-refactoring.md	PR 0: Обязательные рефакторинги R1-R4 (отдельный PR)
1	iter-1-walking-skeleton.md	Итерация 1: Read-only файловый браузер
2	iter-2-editable-save.md	Итерация 2: Editable CodeMirror + сохранение
3	iter-3-multi-tab-crud.md	Итерация 3: Multi-tab + создание/удаление файлов
4	iter-4-search-shortcuts.md	Итерация 4: Горячие клавиши, поиск, UX polish
5	iter-5-git-watching.md	Итерация 5: Git status, file watching, conflict detection
—	file-list.md	Риски, бенчмарки, полный список файлов
—	research-tasks.md	5 исследовательских задач (все COMPLETED)
—	wireframes-draft.md	ASCII wireframes (DRAFT, пересмотр позже)

Общая статистика

Новые файлы: ~36
Модификации: ~18 существующих файлов
Тесты: ~15 новых тестовых файлов
Итерации: 6 (PR 0 + 5 итераций)
Ресёрч: 5/5 завершён (R1-R5, см. research-tasks.md)

4.6 KiB Raw Blame History Unescape Escape