Skip to content

Editor: GpuEditor.tsx is 2,600+ lines and needs to be split up #80

Description

@KrisPowers

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions