✨ Split Editors

[austincondiff]

Is your feature request related to a problem? Please describe.

Users might want to see more than one editor at once.

Describe the solution you'd like

We need the ability to open editors in a split side-by-side layout, vertically and horizontally.

Mockups

Step 1: User mouses over to editor tab that they would like to go in a new split editor

Step 2: User drags tab out of the tab bar

To the bottom half of the editor to split down

Or to the right half of the editor to split right

Step 3: User releases mouse and new split editor view is added to the right

Step 4: User drags addition tab to right split editor view

To add it to the existing split view, the user can drag the tab into the tab bar of the right split or over the center of the split view like so...

To split the right split view again to the right...

Note: This will create three columns equal in width. Dragging to the right side of the left split and the left side of the right split will do the same thing, create a new split view in the middle of the two existing split views.

Or to the bottom to create a bottom split within the existing right split...

Describe alternatives you've considered
n/a

Additional context

See Workspace Windowing & Layout Strategy.

Notice the close editor button on the left and split icon on the right. When right clicking this split icon you might see an option to split vertically as well. We might have an icon that puts that pane in fullscreen like Xcode

We may also consider a setting that closes the editor pane on close of the last tab in that pane.

VSCode Split Editors

Complex layouts are possible

Related Issues

• #479

[austincondiff]

Please note, this issue is blocked and is dependent on the completion of the following issue:

• #513

[Matejkob]

I can try to do it. 🚀

[Matejkob]

I noticed that on the mockups when a user drags the tab out and puts it in the editor, it splits the editor and placeholder into two independent views. We can handle it in a bit different way - in the same way, as VS code handles this. Instead of creating two independent views embedded into VStack or HStack, we can create an overlay above the editor. Moreover, we can go a bit further behind VS code idea and let a user option to put a new editor in one of the following positions: leading, trailing, top, bottom or center. Position center probably isn't required when a user drags the tab out of the tab bar, but if we add dragging a file out directly from the navigator, it would be necessary. Thanks to this solution interface would be a bit more user-friendly and a bit more smooth during choosing positions for the new editor. I'm attaching the recording with POC.

Screen.Recording.2022-07-03.at.7.14.47.PM.mov

[andyPark]

I'm actively working on this, could you assign it to me? @austincondiff

[austincondiff]

@andyPark Are you still working on this? Just wanted to make sure.

If so, you might check out the documentation around this that we have just written.

[andyPark]

@austincondiff Hey I got dragged into another project, sorry but I can't finish this task at the moment!

[austincondiff]

No worries. Anybody else care to take this on?

[austincondiff]

I just updated the mockups in main issue description. Per @Matejkob's comment:

I noticed that on the mockups when a user drags the tab out and puts it in the editor, it splits the editor and placeholder into two independent views. We can handle it in a bit different way - in the same way, as VS code handles this. Instead of creating two independent views embedded into VStack or HStack, we can create an overlay above the editor.

These updated mockups reflect this by floating the placeholders on top of the editor view instead of splitting the view as the user is dragging as this could lead to a frustrating UX.

[austincondiff]

I am assigning this to @bombardier200. @Matejkob could you brief him on the work you started?