WIP: alt-meta-right splits editor pane to the right

spec/atom/root-view-spec.coffee

@@ -32,6 +32,28 @@ describe "RootView", ->
         rootView = new RootView
         expect(rootView.editor.buffer.url).toBeUndefined()
 
+  describe "split editor panes", ->
+    describe "when split-right is triggered on the editor", ->
+      it "places the a new editor to the right of the current editor in a .horizontal div, and focuses the new editor", ->
+        rootView.attachToDom()
+
+        expect(rootView.find('.horizontal')).not.toExist()
+
+        editor1 = rootView.find('.editor').view()
+        editor1.trigger 'split-right'
+
+        expect(rootView.find('.horizontal')).toExist()
+        expect(rootView.find('.horizontal .editor').length).toBe 2
+        expect(rootView.find('.horizontal .editor:eq(0)').view()).toBe editor1
+        editor2 = rootView.find('.horizontal .editor:eq(1)').view()
+        expect(editor2.buffer).toBe editor1.buffer
+
+        # insertion reflected in both buffers
+        editor1.buffer.insert([0, 0], 'ABC')
+        expect(editor1.lines.find('.line:first').text()).toContain 'ABC'
+        expect(editor2.lines.find('.line:first').text()).toContain 'ABC'
+
+
   describe ".addPane(view)", ->
     it "adds the given view to the rootView (at the bottom by default)", ->
       expect(rootView.children().length).toBe 1

src/atom/editor.coffee

@@ -70,6 +70,7 @@ class Editor extends View
       'meta-Z': 'redo'
       'alt-meta-w': 'toggle-soft-wrap'
       'alt-meta-f': 'fold-selection'
+      'alt-meta-right': 'split-right'
 
     @on 'save', => @save()
     @on 'move-right', => @moveCursorRight()
@@ -90,6 +91,7 @@ class Editor extends View
     @on 'redo', => @redo()
     @on 'toggle-soft-wrap', => @toggleSoftWrap()
     @on 'fold-selection', => @foldSelection()
+    @on 'split-right', => @splitRight()
 
   buildCursorAndSelection: ->
     @cursor = new Cursor(this)
@@ -397,8 +399,19 @@ class Editor extends View
   logLines: ->
     @renderer.logLines()
 
-  remove: ->
-    @unsubscribeFromBuffer()
+  splitRight: ->
+    unless @parent().is('.horizontal')
+      horizontal = $$ -> @div class: 'horizontal'
+      horizontal.insertBefore(this).append(this.detach())
+
+    editor = new Editor
+    editor.setBuffer(@buffer)
+    @after(editor)
+    @addClass 'split'
+    editor.addClass('split')
+
+  remove: (selector, keepData) ->
+    @unsubscribeFromBuffer() unless keepData
     super
 
   unsubscribeFromBuffer: ->

static/atom.css

@@ -16,3 +16,14 @@ body {
   background-image: url(static/images/linen.png);
 }
 
+.vertical {
+  display: -webkit-flexbox;
+  -webkit-flex-flow: column;
+  overflow-y: visible;
+}
+
+.horizontal {
+  display: -webkit-flexbox;
+  -webkit-flex-flow: row;
+  overflow-x: visible;
+}

static/editor.css

@@ -8,6 +8,14 @@
   -webkit-user-select: none;
 }
 
+.editor.split {
+  width: -webkit-flex(1);
+}
+
+.editor.split + .editor {
+  border-left: 5px solid rgba(255, 255, 255, .15);
+}
+
 .editor .scrollable-content {
   display: -webkit-flexbox;
 }