feat(editor): implement multi-pane split layout#2416
Conversation
- added vertical pane creation too - vscode style keybinds - resizing of pane - few bug fixes
Greptile SummaryThis PR implements a full multi-pane split layout for the Acode editor, adding recursive pane tree management, per-pane CodeMirror instances, tab drag-and-drop across panes, and per-file autosave timers to prevent cross-pane timer collisions.
Confidence Score: 4/5Safe to merge with two minor P2 observations; all previously identified P1 bugs have been addressed in this PR. All eight previously raised P1 issues (cross-pane timer races, pane-blind file-loaded handler, wrong-editor setTheme, touchSelectionController leak, openFileList contract, contentEditable drop, safety-net race, OS keybinding conflict) are correctly resolved. Two P2 observations remain: the implicit synchronous-only contract on withPaneEditorContext and the unit-less duration constant names. src/lib/editorManager.js (withPaneEditorContext async risk) and src/handlers/editorFileTab.js (duration constant naming) Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User Action: Open File / Split Pane] --> B{Target pane specified?}
B -- Yes --> C[insertPaneIntoLayout]
B -- No --> D[Use active pane]
C --> E[createPaneShell + createPaneNode]
E --> F[new EditorView per pane]
F --> G[createEditorCompatibilityDescriptors]
G --> H[Per-editor setTheme / insert / session closures]
D --> I[openFile in pane]
I --> J[EditorFile.makeActive]
J --> K{pane-tab layout?}
K -- Yes --> L[$paneAwareOpenFileList Proxy]
K -- No --> M[Global openFileList]
L --> N[Aggregate per-pane tab lists]
J --> O[getDocSyncTimers per file WeakMap]
O --> P[checkTimeout + autosaveTimeout isolated per file]
P --> Q[No cross-pane timer collision]
R[Tab Drag] --> S[dragSessionId guard]
S --> T{Same pane?}
T -- Yes --> U[Reorder via motion FLIP]
T -- No --> V[commitPaneTransfer]
V --> W[moveDragToParent + rebuildFileListFromPanes]
W --> X[syncGlobalOpenFileListMirror]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[User Action: Open File / Split Pane] --> B{Target pane specified?}
B -- Yes --> C[insertPaneIntoLayout]
B -- No --> D[Use active pane]
C --> E[createPaneShell + createPaneNode]
E --> F[new EditorView per pane]
F --> G[createEditorCompatibilityDescriptors]
G --> H[Per-editor setTheme / insert / session closures]
D --> I[openFile in pane]
I --> J[EditorFile.makeActive]
J --> K{pane-tab layout?}
K -- Yes --> L[$paneAwareOpenFileList Proxy]
K -- No --> M[Global openFileList]
L --> N[Aggregate per-pane tab lists]
J --> O[getDocSyncTimers per file WeakMap]
O --> P[checkTimeout + autosaveTimeout isolated per file]
P --> Q[No cross-pane timer collision]
R[Tab Drag] --> S[dragSessionId guard]
S --> T{Same pane?}
T -- Yes --> U[Reorder via motion FLIP]
T -- No --> V[commitPaneTransfer]
V --> W[moveDragToParent + rebuildFileListFromPanes]
W --> X[syncGlobalOpenFileListMirror]
Reviews (17): Last reviewed commit: "cleanup" | Re-trigger Greptile |
This PR introduces support for a Multi-Pane (Split-Screen) Editor Layout, allowing users to open multiple editor panes and view files/tabs side-by-side (similar to desktop code editors). Each pane acts as a self-contained editor workspace with its own tab bar, and tabs things. And it is not limited to editor tabs, it can work with any editor tabs such as terminal, custom, editor, media etc.
It adds few commands for this multi pane, which you can search in command palette with
panekeyword.And some keybinds: