GpuEditor.tsx is a single React component file that has grown to over 2,600 lines. It handles rendering, input handling, keybindings, autocomplete, search/replace, folding, minimap, selection, multi-cursor, scrolling, and more, all in one place.
This is making the file very hard to navigate and modify. Adding new features requires reading thousands of lines to understand where to hook in. There is also no way to unit test individual pieces of the editor logic in isolation.
What needs to happen
Break the file into focused modules. Some natural split points:
useEditorInput.ts -- keyboard and mouse event handlers
useEditorSearch.ts -- search/replace state and logic
useEditorAutocomplete.ts -- completion request, debounce, popup state
useEditorFolding.ts -- fold state management and rendering
useEditorCursors.ts -- cursor and selection state, multi-cursor logic
useEditorScroll.ts -- scroll position, smooth scrolling, wheel handling
GpuEditorRenderer.tsx -- the canvas/WebGL layer, kept minimal
GpuEditor.tsx -- thin orchestrator that wires the hooks together and renders the canvas + overlays
The goal is not to change any behavior, just to move code into appropriate files so each concern can be read and changed independently.
Files involved
app/frontend/src/components/GpuEditor.tsx -- the main file to split
app/frontend/src/lib/gpuTextRenderer.ts -- already separate, can remain as-is
app/frontend/src/lib/minimapRenderer.ts -- already separate, can remain as-is
Acceptance criteria
- All existing editor behavior is preserved exactly
- Each new hook/module file is under ~400 lines
- No new abstractions are introduced beyond the split itself
- The app compiles and behaves identically after the refactor
GpuEditor.tsx is a single React component file that has grown to over 2,600 lines. It handles rendering, input handling, keybindings, autocomplete, search/replace, folding, minimap, selection, multi-cursor, scrolling, and more, all in one place.
This is making the file very hard to navigate and modify. Adding new features requires reading thousands of lines to understand where to hook in. There is also no way to unit test individual pieces of the editor logic in isolation.
What needs to happen
Break the file into focused modules. Some natural split points:
useEditorInput.ts-- keyboard and mouse event handlersuseEditorSearch.ts-- search/replace state and logicuseEditorAutocomplete.ts-- completion request, debounce, popup stateuseEditorFolding.ts-- fold state management and renderinguseEditorCursors.ts-- cursor and selection state, multi-cursor logicuseEditorScroll.ts-- scroll position, smooth scrolling, wheel handlingGpuEditorRenderer.tsx-- the canvas/WebGL layer, kept minimalGpuEditor.tsx-- thin orchestrator that wires the hooks together and renders the canvas + overlaysThe goal is not to change any behavior, just to move code into appropriate files so each concern can be read and changed independently.
Files involved
app/frontend/src/components/GpuEditor.tsx-- the main file to splitapp/frontend/src/lib/gpuTextRenderer.ts-- already separate, can remain as-isapp/frontend/src/lib/minimapRenderer.ts-- already separate, can remain as-isAcceptance criteria