Merge remote-tracking branch 'origin/master' into cefode

Conflicts: native/v8_extensions/native.mm spec/app/config-spec.coffee spec/app/window-spec.coffee spec/spec-helper.coffee spec/stdlib/fs-utils-spec.coffee src/app/atom-package.coffee src/app/config.coffee src/app/window.coffee src/packages/fuzzy-finder/lib/load-paths-handler.coffee src/packages/markdown-preview/lib/markdown-preview-view.coffee src/packages/tree-view/spec/tree-view-spec.coffee src/stdlib/require.coffee
2026-04-28 03:01:47 -04:00 · 2013-03-20 10:46:50 -06:00
parent aae705e82c 9c6978e913
commit 501dc9b76c
104 changed files with 6970 additions and 1164 deletions
--- a/src/packages/autocomplete/stylesheets/autocomplete.less
+++ b/src/packages/autocomplete/stylesheets/autocomplete.less
--- a/src/packages/bracket-matcher/stylesheets/bracket-matcher.less
+++ b/src/packages/bracket-matcher/stylesheets/bracket-matcher.less
--- a/src/packages/command-logger/spec/command-logger-spec.coffee
+++ b/src/packages/command-logger/spec/command-logger-spec.coffee
@@ -7,7 +7,7 @@ describe "CommandLogger", ->
  beforeEach ->
    window.rootView = new RootView
    rootView.open('sample.js')
-    commandLogger = window.loadPackage('command-logger').packageMain
+    commandLogger = window.loadPackage('command-logger').mainModule
    commandLogger.eventLog = {}
    editor = rootView.getActiveView()

--- a/src/packages/command-logger/stylesheets/command-logger.less
+++ b/src/packages/command-logger/stylesheets/command-logger.less
--- a/src/packages/command-panel/lib/command-panel-view.coffee
+++ b/src/packages/command-panel/lib/command-panel-view.coffee
@@ -115,7 +115,7 @@ class CommandPanelView extends View
  escapedCommand: ->
    @miniEditor.getText()

-  execute: (command=@escapedCommand())->
+  execute: (command=@escapedCommand()) ->
    @loadingMessage.show()
    @errorMessages.empty()

--- a/src/packages/command-panel/lib/commands/select-all-matches-in-project.coffee
+++ b/src/packages/command-panel/lib/commands/select-all-matches-in-project.coffee
@@ -16,7 +16,7 @@ class SelectAllMatchesInProject extends Command
    promise = project.scan @regex, ({path, range}) ->
      operations.push(new Operation(
        project: project
-        buffer: project.bufferForPath(path)
+        path: path
        bufferRange: range
      ))

--- a/src/packages/command-panel/lib/operation-view.coffee
+++ b/src/packages/command-panel/lib/operation-view.coffee
@@ -4,7 +4,7 @@ module.exports =
 class OperationView extends View
  @content: ({operation} = {}) ->
    {prefix, suffix, match, range} = operation.preview()
-    @li 'data-index': operation.index, class: 'operation', =>
+    @li class: 'operation', =>
      @span range.start.row + 1, class: 'line-number'
      @span class: 'preview', =>
        @span prefix
--- a/src/packages/command-panel/lib/operation.coffee
+++ b/src/packages/command-panel/lib/operation.coffee
@@ -1,22 +1,30 @@
 module.exports =
 class Operation
-  constructor: ({@project, @buffer, bufferRange, @newText, @preserveSelection, @errorMessage}) ->
-    @buffer.retain()
-    @marker = @buffer.markRange(bufferRange)
+  constructor: ({@project, @path, @buffer, @bufferRange, @newText, @preserveSelection, @errorMessage}) ->
+    if @buffer?
+      @buffer.retain()
+      @getMarker()
+
+  getMarker: ->
+    @marker ?= @getBuffer().markRange(@bufferRange)
+
+  getBuffer: ->
+    @buffer ?= @project.bufferForPath(@path).retain()

  getPath: ->
-    @project.relativize(@buffer.getPath())
+    path = @path ? @getBuffer().getPath()
+    @project.relativize(path)

  getBufferRange: ->
-    @buffer.getMarkerRange(@marker)
+    @getBuffer().getMarkerRange(@getMarker())

  execute: (editSession) ->
-    @buffer.change(@getBufferRange(), @newText) if @newText
+    @getBuffer().change(@getBufferRange(), @newText) if @newText
    @getBufferRange() unless @preserveSelection

  preview: ->
-    range = @buffer.getMarkerRange(@marker)
-    line = @buffer.lineForRow(range.start.row)
+    range = @getBuffer().getMarkerRange(@getMarker())
+    line = @getBuffer().lineForRow(range.start.row)
    prefix = line[0...range.start.column]
    match = line[range.start.column...range.end.column]
    suffix = line[range.end.column..]
@@ -24,5 +32,5 @@ class Operation
    {prefix, suffix, match, range}

  destroy: ->
-    @buffer.destroyMarker(@marker)
-    @buffer.release()
+    @buffer?.destroyMarker(@marker) if @marker?
+    @buffer?.release()
--- a/src/packages/command-panel/lib/path-view.coffee
+++ b/src/packages/command-panel/lib/path-view.coffee
@@ -5,16 +5,14 @@ $ = require 'jquery'

 module.exports =
 class PathView extends View
-  @content: ({path, operations, previewList} = {}) ->
+  @content: ({path, previewList} = {}) ->
    classes = ['path']
    classes.push('readme') if fs.isReadmePath(path)
    @li class: classes.join(' '), =>
      @div outlet: 'pathDetails', class: 'path-details', =>
        @span class: 'path-name', path
-        @span "(#{operations.length})", class: 'path-match-number'
+        @span outlet: 'description', class: 'path-match-number'
      @ul outlet: 'matches', class: 'matches', =>
-        for operation in operations
-          @subview "operation#{operation.index}", new OperationView({operation, previewList})

  initialize: ({@previewList}) ->
    @pathDetails.on 'mousedown', => @toggle(true)
@@ -27,6 +25,10 @@ class PathView extends View
        @toggle(true)
        false

+  addOperation: (operation) ->
+    @matches.append new OperationView({operation, @previewList})
+    @description.text("(#{@matches.find('li').length})")
+
  isSelected: ->
    @hasClass('selected') or @find('.selected').length

--- a/src/packages/command-panel/lib/preview-list.coffee
+++ b/src/packages/command-panel/lib/preview-list.coffee
@@ -11,12 +11,17 @@ class PreviewList extends ScrollView
    @ol class: 'preview-list', tabindex: -1

  operations: null
+  viewsForPath: null
+  pixelOverdraw: 100
+  lastRenderedOperationIndex: null

  initialize: ->
    super

    @on 'core:move-down', => @selectNextOperation(); false
    @on 'core:move-up', => @selectPreviousOperation(); false
+    @on 'scroll', =>
+      @renderOperations() if @scrollBottom() >= (@prop('scrollHeight'))

    @command 'command-panel:collapse-all', => @collapseAllPaths()
    @command 'command-panel:expand-all', => @expandAllPaths()
@@ -25,6 +30,7 @@ class PreviewList extends ScrollView
    @children().each (index, element) -> $(element).view().expand()

  collapseAllPaths: ->
+    @renderOperations(renderAll: true)
    @children().each (index, element) -> $(element).view().collapse()

  destroy: ->
@@ -35,23 +41,31 @@ class PreviewList extends ScrollView
  populate: (operations) ->
    @destroyOperations() if @operations
    @operations = operations
+    @lastRenderedOperationIndex = 0
    @empty()
-
-    operation.index = index for operation, index in operations
-    operationsByPath = _.groupBy(operations, (operation) -> operation.getPath())
-    for path, operations of operationsByPath
-      @append new PathView({path, operations, previewList: this})
+    @viewsForPath = {}

    @show()
-    @find('.operation:first').addClass('selected')
-    @setLineNumberWidth()
+    @renderOperations()

-  setLineNumberWidth: ->
-    lineNumbers = @find('.line-number')
-    maxWidth = 0
-    lineNumbers.each (index, element) ->
-      maxWidth = Math.max($(element).outerWidth(), maxWidth)
-    lineNumbers.width(maxWidth)
+    @find('.operation:first').addClass('selected')
+
+  renderOperations: ({renderAll}={}) ->
+    renderAll ?= false
+    startingScrollHeight = @prop('scrollHeight')
+    for operation in @operations[@lastRenderedOperationIndex..]
+      pathView = @pathViewForPath(operation.getPath())
+      pathView.addOperation(operation)
+      @lastRenderedOperationIndex++
+      break if not renderAll and @prop('scrollHeight') >= startingScrollHeight + @pixelOverdraw and @prop('scrollHeight') > @height() + @pixelOverdraw
+
+  pathViewForPath: (path) ->
+    pathView = @viewsForPath[path]
+    if not pathView
+      pathView = new PathView({path: path, previewList: this})
+      @viewsForPath[path] = pathView
+      @append(pathView)
+    pathView

  selectNextOperation: ->
    selectedView = @find('.selected').view()
--- a/src/packages/command-panel/spec/command-panel-spec.coffee
+++ b/src/packages/command-panel/spec/command-panel-spec.coffee
@@ -11,7 +11,7 @@ describe "CommandPanel", ->
    rootView.enableKeymap()
    editSession = rootView.getActivePaneItem()
    buffer = editSession.buffer
-    commandPanelMain = window.loadPackage('command-panel', activateImmediately: true).packageMain
+    commandPanelMain = window.loadPackage('command-panel', activateImmediately: true).mainModule
    commandPanel = commandPanelMain.commandPanelView
    commandPanel.history = []
    commandPanel.historyIndex = 0
--- a/src/packages/command-panel/spec/preview-list-spec.coffee
+++ b/src/packages/command-panel/spec/preview-list-spec.coffee
@@ -0,0 +1,45 @@
+RootView = require 'root-view'
+CommandPanelView = require 'command-panel/lib/command-panel-view'
+_ = require 'underscore'
+
+describe "Preview List", ->
+  [previewList, commandPanelMain, commandPanelView] = []
+
+  beforeEach ->
+    window.rootView = new RootView()
+    rootView.attachToDom()
+    commandPanelMain = window.loadPackage('command-panel', activateImmediately: true).mainModule
+    commandPanelView = commandPanelMain.commandPanelView
+    previewList = commandPanelView.previewList
+    rootView.trigger 'command-panel:toggle'
+
+  describe "when the list is scrollable", ->
+    it "adds more operations to the DOM when `scrollBottom` nears the `pixelOverdraw`", ->
+      waitsForPromise ->
+        commandPanelView.execute('X x/so/')
+
+      runs ->
+        expect(previewList.prop('scrollHeight')).toBeGreaterThan previewList.height()
+        previousScrollHeight = previewList.prop('scrollHeight')
+        previousOperationCount = previewList.find("li").length
+
+        previewList.scrollTop(previewList.pixelOverdraw / 2)
+        previewList.trigger('scroll') # Not sure why scroll event isn't being triggered on it's own
+        expect(previewList.prop('scrollHeight')).toBe previousScrollHeight
+        expect(previewList.find("li").length).toBe previousOperationCount
+
+        previewList.scrollToBottom()
+        previewList.trigger('scroll') # Not sure why scroll event isn't being triggered on it's own
+        expect(previewList.prop('scrollHeight')).toBeGreaterThan previousScrollHeight
+        expect(previewList.find("li").length).toBeGreaterThan previousOperationCount
+
+    it "renders all operations if the preview items are collapsed", ->
+      waitsForPromise ->
+        commandPanelView.execute('X x/so/')
+
+      runs ->
+        expect(previewList.prop('scrollHeight')).toBeGreaterThan previewList.height()
+        previousScrollHeight = previewList.prop('scrollHeight')
+        previousOperationCount = previewList.find("li").length
+        previewList.collapseAllPaths()
+        expect(previewList.find("li").length).toBeGreaterThan previousOperationCount
--- a/src/packages/editor-stats/spec/editor-stats-spec.coffee
+++ b/src/packages/editor-stats/spec/editor-stats-spec.coffee
@@ -17,7 +17,7 @@ describe "EditorStats", ->
  beforeEach ->
    window.rootView = new RootView
    rootView.open('sample.js')
-    editorStats = window.loadPackage('editor-stats').packageMain.stats
+    editorStats = window.loadPackage('editor-stats').mainModule.stats

  describe "when a keyup event is triggered", ->
    beforeEach ->
--- a/src/packages/editor-stats/stylesheets/editor-stats.css
+++ b/src/packages/editor-stats/stylesheets/editor-stats.css
@@ -1,45 +0,0 @@
-.editor-stats-wrapper {
-  padding: 5px;
-  box-sizing: border-box;
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-  z-index: 9999;
-}
-
-.editor-stats {
-  height: 50px;
-  width: 100%;
-  background: #1d1f21;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-  border-right: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.editor-stats rect.bar {
-  fill: rgba(255, 255, 255, 0.2);
-  shape-rendering: crispedges;
-}
-
-.editor-stats rect.bar.max {
-  fill: rgba(0, 163, 255, 1);
-}
-
-.editor-stats text {
-  font-size: 10px;
-  fill: rgba(255, 255, 255, 0.2);
-  font-family: Courier;
-}
-
-.editor-stats .minor text {
-  display: none;
-}
-
-.editor-stats line {
-  stroke: #ccc;
-  stroke-opacity: 0.05;
-  stroke-width: 1px;
-  shape-rendering: crispedges;
-}
-
-.editor-stats path.domain {
-  fill: none;
-}
--- a/src/packages/editor-stats/stylesheets/editor-stats.less
+++ b/src/packages/editor-stats/stylesheets/editor-stats.less
@@ -0,0 +1,45 @@
+.editor-stats-wrapper {
+  padding: 5px;
+  box-sizing: border-box;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+  z-index: 9999;
+}
+
+.editor-stats {
+  height: 50px;
+  width: 100%;
+  background: #1d1f21;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+
+  .bar {
+    fill: rgba(255, 255, 255, 0.2);
+    shape-rendering: crispedges;
+
+    &.max {
+      fill: rgba(0, 163, 255, 1);
+    }
+  }
+
+  text {
+    font-size: 10px;
+    fill: rgba(255, 255, 255, 0.2);
+    font-family: Courier;
+  }
+
+  .minor text {
+    display: none;
+  }
+
+  line {
+    stroke: #ccc;
+    stroke-opacity: 0.05;
+    stroke-width: 1px;
+    shape-rendering: crispedges;
+  }
+
+  path.domain {
+    display: none;
+  }
+}
--- a/src/packages/fuzzy-finder/lib/fuzzy-finder.coffee
+++ b/src/packages/fuzzy-finder/lib/fuzzy-finder.coffee
@@ -35,9 +35,10 @@ module.exports =

  createView:  ->
    unless @fuzzyFinderView
+      @loadPathsTask?.abort()
      FuzzyFinderView  = require 'fuzzy-finder/lib/fuzzy-finder-view'
      @fuzzyFinderView = new FuzzyFinderView()
-      if @projectPaths? and not @fuzzyFinderView.projectPaths?
+      if @projectPaths?.length > 0 and not @fuzzyFinderView.projectPaths?
        @fuzzyFinderView.projectPaths = @projectPaths
        @fuzzyFinderView.reloadProjectPaths = false
    @fuzzyFinderView
--- a/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee
+++ b/src/packages/fuzzy-finder/spec/fuzzy-finder-spec.coffee
@@ -13,7 +13,7 @@ describe 'FuzzyFinder', ->
    window.rootView = new RootView
    rootView.open('sample.js')
    rootView.enableKeymap()
-    finderView = window.loadPackage("fuzzy-finder").packageMain.createView()
+    finderView = window.loadPackage("fuzzy-finder").mainModule.createView()

  describe "file-finder behavior", ->
    describe "toggling", ->
--- a/src/packages/markdown-preview/keymaps/markdown-preview.cson
+++ b/src/packages/markdown-preview/keymaps/markdown-preview.cson
@@ -1,5 +1,2 @@
 '.editor':
-  'ctrl-m': 'markdown-preview:toggle'
-
-'.markdown-preview':
-  'ctrl-m': 'markdown-preview:toggle'
+  'ctrl-m': 'markdown-preview:show'
--- a/src/packages/markdown-preview/lib/markdown-preview-view.coffee
+++ b/src/packages/markdown-preview/lib/markdown-preview-view.coffee
@@ -1,49 +1,36 @@
-ScrollView = require 'scroll-view'
 fs = require 'fs-utils'
 $ = require 'jquery'
+ScrollView = require 'scroll-view'
 {$$$} = require 'space-pen'

 module.exports =
 class MarkdownPreviewView extends ScrollView
-  @activate: ->
-    @instance = new MarkdownPreviewView
+  registerDeserializer(this)
+
+  @deserialize: ({path}) ->
+    new MarkdownPreviewView(project.bufferForPath(path))

  @content: ->
-    @div class: 'markdown-preview', tabindex: -1, =>
-      @div class: 'markdown-body', outlet: 'markdownBody'
+    @div class: 'markdown-preview', tabindex: -1

-  initialize: ->
+  initialize: (@buffer) ->
    super
+    @fetchRenderedMarkdown()
+    @on 'core:move-up', => @scrollUp()
+    @on 'core:move-down', => @scrollDown()

-    rootView.command 'markdown-preview:toggle', => @toggle()
-    @on 'blur', => @detach() unless document.activeElement is this[0]
-    @command 'core:cancel', => @detach()
+  serialize: ->
+    deserializer: 'MarkdownPreviewView'
+    path: @buffer.getPath()

-  toggle: ->
-    if @hasParent()
-      @detach()
-    else
-      @attach()
+  getTitle: ->
+    "Markdown Preview – #{@buffer.getBaseName()}"

-  attach: ->
-    return unless @isMarkdownEditor()
-    rootView.append(this)
-    @markdownBody.html(@getLoadingHtml())
-    @loadHtml()
-    @focus()
+  getUri: ->
+    "markdown-preview:#{@buffer.getPath()}"

-  detach: ->
-    return if @detaching
-    @detaching = true
-    super
-    rootView.focus()
-    @detaching = false
-
-  getActiveText: ->
-    rootView.getActiveView()?.getText()
-
-  getErrorHtml: (error) ->
-    $$$ ->
+  setErrorHtml: ->
+    @html $$$ ->
      @h2 'Previewing Markdown Failed'
      @h3 'Possible Reasons'
      @ul =>
@@ -52,29 +39,18 @@ class MarkdownPreviewView extends ScrollView
          @a 'github.com', href: 'https://github.com'
          @span '.'

-   getLoadingHtml: ->
-     $$$ ->
-       @div class: 'markdown-spinner', 'Loading Markdown...'
+  setLoading: ->
+    @html($$$ -> @div class: 'markdown-spinner', 'Loading Markdown...')

-  loadHtml: (text) ->
-    payload =
-       mode: 'markdown'
-       text: @getActiveText()
-    request =
+  fetchRenderedMarkdown: (text) ->
+    @setLoading()
+    $.ajax
      url: 'https://api.github.com/markdown'
      type: 'POST'
      dataType: 'html'
      contentType: 'application/json; charset=UTF-8'
-      data: JSON.stringify(payload)
-      success: (html) => @setHtml(html)
-      error: (jqXhr, error) => @setHtml(@getErrorHtml(error))
-    $.ajax(request)
-
-  setHtml: (html) ->
-    @markdownBody.html(html) if @hasParent()
-
-  isMarkdownEditor: (path) ->
-    editor = rootView.getActiveView()
-    return unless editor?
-    return true if editor.getGrammar().scopeName is 'source.gfm'
-    path and fs.isMarkdownExtension(fs.extension(path))
+      data: JSON.stringify
+        mode: 'markdown'
+        text: @buffer.getText()
+      success: (html) => @html(html)
+      error: => @setErrorHtml()
--- a/src/packages/markdown-preview/lib/markdown-preview.coffee
+++ b/src/packages/markdown-preview/lib/markdown-preview.coffee
@@ -0,0 +1,25 @@
+EditSession = require 'edit-session'
+MarkdownPreviewView = require 'markdown-preview/lib/markdown-preview-view'
+
+module.exports =
+  activate: ->
+    rootView.command 'markdown-preview:show', '.editor', => @show()
+
+  show: ->
+    activePane = rootView.getActivePane()
+    item = activePane.activeItem
+
+    if not item instanceof EditSession
+      console.warn("Can not render markdown for #{item.getUri()}")
+      return
+
+    editSession = item
+    if nextPane = activePane.getNextPane()
+      if preview = nextPane.itemForUri("markdown-preview:#{editSession.getPath()}")
+        nextPane.showItem(preview)
+        preview.fetchRenderedMarkdown()
+      else
+        nextPane.showItem(new MarkdownPreviewView(editSession.buffer))
+    else
+      activePane.splitRight(new MarkdownPreviewView(editSession.buffer))
+    activePane.focus()
--- a/src/packages/markdown-preview/package.cson
+++ b/src/packages/markdown-preview/package.cson
@@ -1,3 +1,4 @@
-'main': 'lib/markdown-preview-view'
+'main': 'lib/markdown-preview'
 'activationEvents':
-  'markdown-preview:toggle': '.editor'
+  'markdown-preview:show': '.editor'
+'deferredDeserializers': ['MarkdownPreviewView']
--- a/src/packages/markdown-preview/spec/markdown-preview-spec.coffee
+++ b/src/packages/markdown-preview/spec/markdown-preview-spec.coffee
@@ -1,84 +1,67 @@
-$ = require 'jquery'
 RootView = require 'root-view'
-MarkdownPreview = require 'markdown-preview/lib/markdown-preview-view'
-_ = require 'underscore'
+MarkdownPreviewView = require 'markdown-preview/lib/markdown-preview-view'
+{$$} = require 'space-pen'

-describe "MarkdownPreview", ->
+describe "MarkdownPreview package", ->
  beforeEach ->
    project.setPath(project.resolve('markdown'))
    window.rootView = new RootView
-    window.loadPackage("markdown-preview")
-    spyOn(MarkdownPreview.prototype, 'loadHtml')
+    window.loadPackage("markdown-preview", activateImmediately: true)
+    spyOn(MarkdownPreviewView.prototype, 'fetchRenderedMarkdown')

-  describe "markdown-preview:toggle event", ->
-    it "toggles on/off a preview for a .md file", ->
-      rootView.open('file.md')
-      editor = rootView.getActiveView()
-      expect(rootView.find('.markdown-preview')).not.toExist()
-      editor.trigger('markdown-preview:toggle')
+  describe "markdown-preview:show", ->
+    beforeEach ->
+      rootView.open("file.markdown")

-      markdownPreviewView = rootView.find('.markdown-preview')?.view()
-      expect(rootView.find('.markdown-preview')).toExist()
-      expect(markdownPreviewView.loadHtml).toHaveBeenCalled()
-      markdownPreviewView.trigger('markdown-preview:toggle')
-      expect(rootView.find('.markdown-preview')).not.toExist()
+    describe "when the active item is an edit session", ->
+      beforeEach ->
+        rootView.attachToDom()

-    it "displays a preview for a .markdown file", ->
-      rootView.open('file.markdown')
-      editor = rootView.getActiveView()
-      expect(rootView.find('.markdown-preview')).not.toExist()
-      editor.trigger('markdown-preview:toggle')
-      expect(rootView.find('.markdown-preview')).toExist()
-      markdownPreviewView = rootView.find('.markdown-preview')?.view()
-      expect(markdownPreviewView.loadHtml).toHaveBeenCalled()
+      describe "when a preview item has not been created for the edit session's uri", ->
+        describe "when there is more than one pane", ->
+          it "shows a markdown preview for the current buffer on the next pane", ->
+            rootView.getActivePane().splitRight()
+            [pane1, pane2] = rootView.getPanes()
+            pane1.focus()

-    it "displays a preview for a file with the source.gfm grammar scope", ->
-      gfmGrammar = _.find syntax.grammars, (grammar) -> grammar.scopeName is 'source.gfm'
-      rootView.open('file.js')
-      editor = rootView.getActiveView()
-      project.addGrammarOverrideForPath(editor.getPath(), gfmGrammar)
-      editor.reloadGrammar()
-      expect(rootView.find('.markdown-preview')).not.toExist()
-      editor.trigger('markdown-preview:toggle')
-      expect(rootView.find('.markdown-preview')).toExist()
-      markdownPreviewView = rootView.find('.markdown-preview')?.view()
-      expect(markdownPreviewView.loadHtml).toHaveBeenCalled()
+            rootView.getActiveView().trigger 'markdown-preview:show'

-    it "does not display a preview for non-markdown file", ->
-      rootView.open('file.js')
-      editor = rootView.getActiveView()
-      expect(rootView.find('.markdown-preview')).not.toExist()
-      editor.trigger('markdown-preview:toggle')
-      expect(rootView.find('.markdown-preview')).not.toExist()
-      expect(MarkdownPreview.prototype.loadHtml).not.toHaveBeenCalled()
+            preview = pane2.activeItem
+            expect(preview).toBeInstanceOf(MarkdownPreviewView)
+            expect(preview.buffer).toBe rootView.getActivePaneItem().buffer
+            expect(pane1).toMatchSelector(':has(:focus)')

-  describe "core:cancel event", ->
-   it "removes markdown preview", ->
-     rootView.open('file.md')
-     editor = rootView.getActiveView()
-     expect(rootView.find('.markdown-preview')).not.toExist()
-     editor.trigger('markdown-preview:toggle')
+        describe "when there is only one pane", ->
+          it "splits the current pane to the right with a markdown preview for the current buffer", ->
+            expect(rootView.getPanes()).toHaveLength 1

-     markdownPreviewView = rootView.find('.markdown-preview')?.view()
-     expect(markdownPreviewView).toExist()
-     markdownPreviewView.trigger('core:cancel')
-     expect(rootView.find('.markdown-preview')).not.toExist()
+            rootView.getActiveView().trigger 'markdown-preview:show'

-  describe "when the editor receives focus", ->
-   it "removes the markdown preview view", ->
-     rootView.attachToDom()
-     rootView.open('file.md')
-     editor = rootView.getActiveView()
-     expect(rootView.find('.markdown-preview')).not.toExist()
-     editor.trigger('markdown-preview:toggle')
+            expect(rootView.getPanes()).toHaveLength 2
+            [pane1, pane2] = rootView.getPanes()

-     markdownPreviewView = rootView.find('.markdown-preview')
-     editor.focus()
-     expect(markdownPreviewView).toExist()
-     expect(rootView.find('.markdown-preview')).not.toExist()
+            expect(pane2.items).toHaveLength 1
+            preview = pane2.activeItem
+            expect(preview).toBeInstanceOf(MarkdownPreviewView)
+            expect(preview.buffer).toBe rootView.getActivePaneItem().buffer
+            expect(pane1).toMatchSelector(':has(:focus)')

-  describe "when no editor is open", ->
-   it "does not attach", ->
-     expect(rootView.getActiveView()).toBeFalsy()
-     rootView.trigger('markdown-preview:toggle')
-     expect(rootView.find('.markdown-preview')).not.toExist()
+      describe "when a preview item has already been created for the edit session's uri", ->
+        it "updates and shows the existing preview item if it isn't displayed", ->
+          rootView.getActiveView().trigger 'markdown-preview:show'
+          [pane1, pane2] = rootView.getPanes()
+          pane2.focus()
+          expect(rootView.getActivePane()).toBe pane2
+          preview = pane2.activeItem
+          expect(preview).toBeInstanceOf(MarkdownPreviewView)
+          rootView.open()
+          expect(pane2.activeItem).not.toBe preview
+          pane1.focus()
+
+          preview.fetchRenderedMarkdown.reset()
+          rootView.getActiveView().trigger 'markdown-preview:show'
+          expect(preview.fetchRenderedMarkdown).toHaveBeenCalled()
+          expect(rootView.getPanes()).toHaveLength 2
+          expect(pane2.getItems()).toHaveLength 2
+          expect(pane2.activeItem).toBe preview
+          expect(pane1).toMatchSelector(':has(:focus)')
--- a/src/packages/markdown-preview/spec/markdown-preview-view-spec.coffee
+++ b/src/packages/markdown-preview/spec/markdown-preview-view-spec.coffee
@@ -0,0 +1,39 @@
+MarkdownPreviewView = require 'markdown-preview/lib/markdown-preview-view'
+$ = require 'jquery'
+{$$$} = require 'space-pen'
+
+describe "MarkdownPreviewView", ->
+  [buffer, preview] = []
+
+  beforeEach ->
+    spyOn($, 'ajax')
+    project.setPath(project.resolve('markdown'))
+    buffer = project.bufferForPath('file.markdown')
+    preview = new MarkdownPreviewView(buffer)
+
+  afterEach ->
+    buffer.release()
+
+  describe "on construction", ->
+    ajaxArgs = null
+
+    beforeEach ->
+      ajaxArgs = $.ajax.argsForCall[0][0]
+
+    it "shows a loading spinner and fetches the rendered markdown", ->
+      expect(preview.find('.markdown-spinner')).toExist()
+      expect($.ajax).toHaveBeenCalled()
+
+      expect(JSON.parse(ajaxArgs.data).text).toBe buffer.getText()
+
+      ajaxArgs.success($$$ -> @div "WWII", class: 'private-ryan')
+      expect(preview.find(".private-ryan")).toExist()
+
+    it "shows an error message on error", ->
+      ajaxArgs.error()
+      expect(preview.text()).toContain "Failed"
+
+  describe "serialization", ->
+    it "reassociates with the same buffer when deserialized", ->
+      newPreview = deserialize(preview.serialize())
+      expect(newPreview.buffer).toBe buffer
--- a/src/packages/markdown-preview/stylesheets/markdown-preview.css
+++ b/src/packages/markdown-preview/stylesheets/markdown-preview.css
@@ -1,438 +0,0 @@
-.markdown-preview {
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
-  font-size: 14px;
-  line-height: 1.6;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  background-color: #fff;
-  overflow: auto;
-  z-index: 3;
-  box-sizing: border-box;
-  padding: 20px;
-}
-
-.markdown-body {
-  min-width: 680px;
-}
-
-.markdown-body pre,
-.markdown-body code,
-.markdown-body tt {
-  font-size: 12px;
-  font-family: Consolas, "Liberation Mono", Courier, monospace;
-}
-
-.markdown-body a {
-  color: #4183c4;
-}
-
-.markdown-body ol > li {
-  list-style-type: decimal;
-}
-
-.markdown-body ul > li {
-  list-style-type: disc;
-}
-
-.markdown-spinner {
-  margin: auto;
-  background-image: url(images/octocat-spinner-128.gif);
-  background-repeat: no-repeat;
-  background-size: 64px;
-  background-position: top center;
-  padding-top: 70px;
-  text-align: center;
-}
-
-
-/* this code below was copied from https://github.com/assets/stylesheets/primer/components/markdown.css */
-/* we really need to get primer in here somehow. */
-.markdown-body {
-  font-size: 14px;
-  line-height: 1.6;
-  overflow: hidden; }
-  .markdown-body > *:first-child {
-    margin-top: 0 !important; }
-  .markdown-body > *:last-child {
-    margin-bottom: 0 !important; }
-  .markdown-body a.absent {
-    color: #c00; }
-  .markdown-body a.anchor {
-    display: block;
-    padding-left: 30px;
-    margin-left: -30px;
-    cursor: pointer;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0; }
-  .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
-    margin: 20px 0 10px;
-    padding: 0;
-    font-weight: bold;
-    -webkit-font-smoothing: antialiased;
-    cursor: text;
-    position: relative; }
-    .markdown-body h1 .mini-icon-link, .markdown-body h2 .mini-icon-link, .markdown-body h3 .mini-icon-link, .markdown-body h4 .mini-icon-link, .markdown-body h5 .mini-icon-link, .markdown-body h6 .mini-icon-link {
-      display: none;
-      color: #000; }
-    .markdown-body h1:hover a.anchor, .markdown-body h2:hover a.anchor, .markdown-body h3:hover a.anchor, .markdown-body h4:hover a.anchor, .markdown-body h5:hover a.anchor, .markdown-body h6:hover a.anchor {
-      text-decoration: none;
-      line-height: 1;
-      padding-left: 0;
-      margin-left: -22px;
-      top: 15%; }
-      .markdown-body h1:hover a.anchor .mini-icon-link, .markdown-body h2:hover a.anchor .mini-icon-link, .markdown-body h3:hover a.anchor .mini-icon-link, .markdown-body h4:hover a.anchor .mini-icon-link, .markdown-body h5:hover a.anchor .mini-icon-link, .markdown-body h6:hover a.anchor .mini-icon-link {
-        display: inline-block; }
-    .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
-      font-size: inherit; }
-  .markdown-body h1 {
-    font-size: 28px;
-    color: #000; }
-  .markdown-body h2 {
-    font-size: 24px;
-    border-bottom: 1px solid #ccc;
-    color: #000; }
-  .markdown-body h3 {
-    font-size: 18px; }
-  .markdown-body h4 {
-    font-size: 16px; }
-  .markdown-body h5 {
-    font-size: 14px; }
-  .markdown-body h6 {
-    color: #777;
-    font-size: 14px; }
-  .markdown-body p,
-  .markdown-body blockquote,
-  .markdown-body ul, .markdown-body ol, .markdown-body dl,
-  .markdown-body table,
-  .markdown-body pre {
-    margin: 15px 0; }
-  .markdown-body hr {
-    background: transparent url("https://a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-0e7d81b119cc9beae17b0c98093d121fa0050a74.png") repeat-x 0 0;
-    border: 0 none;
-    color: #ccc;
-    height: 4px;
-    padding: 0; }
-  .markdown-body > h2:first-child, .markdown-body > h1:first-child, .markdown-body > h1:first-child + h2, .markdown-body > h3:first-child, .markdown-body > h4:first-child, .markdown-body > h5:first-child, .markdown-body > h6:first-child {
-    margin-top: 0;
-    padding-top: 0; }
-  .markdown-body a:first-child h1, .markdown-body a:first-child h2, .markdown-body a:first-child h3, .markdown-body a:first-child h4, .markdown-body a:first-child h5, .markdown-body a:first-child h6 {
-    margin-top: 0;
-    padding-top: 0; }
-  .markdown-body h1 + p,
-  .markdown-body h2 + p,
-  .markdown-body h3 + p,
-  .markdown-body h4 + p,
-  .markdown-body h5 + p,
-  .markdown-body h6 + p {
-    margin-top: 0; }
-  .markdown-body li p.first {
-    display: inline-block; }
-  .markdown-body ul, .markdown-body ol {
-    padding-left: 30px; }
-    .markdown-body ul.no-list, .markdown-body ol.no-list {
-      list-style-type: none;
-      padding: 0; }
-    .markdown-body ul li > :first-child,
-    .markdown-body ul li ul:first-of-type, .markdown-body ol li > :first-child,
-    .markdown-body ol li ul:first-of-type {
-      margin-top: 0px; }
-  .markdown-body ul ul,
-  .markdown-body ul ol,
-  .markdown-body ol ol,
-  .markdown-body ol ul {
-    margin-bottom: 0; }
-  .markdown-body dl {
-    padding: 0; }
-  .markdown-body dl dt {
-    font-size: 14px;
-    font-weight: bold;
-    font-style: italic;
-    padding: 0;
-    margin: 15px 0 5px; }
-    .markdown-body dl dt:first-child {
-      padding: 0; }
-    .markdown-body dl dt > :first-child {
-      margin-top: 0px; }
-    .markdown-body dl dt > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body dl dd {
-    margin: 0 0 15px;
-    padding: 0 15px; }
-    .markdown-body dl dd > :first-child {
-      margin-top: 0px; }
-    .markdown-body dl dd > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body blockquote {
-    border-left: 4px solid #DDD;
-    padding: 0 15px;
-    color: #777; }
-    .markdown-body blockquote > :first-child {
-      margin-top: 0px; }
-    .markdown-body blockquote > :last-child {
-      margin-bottom: 0px; }
-  .markdown-body table th {
-    font-weight: bold; }
-  .markdown-body table th, .markdown-body table td {
-    border: 1px solid #ccc;
-    padding: 6px 13px; }
-  .markdown-body table tr {
-    border-top: 1px solid #ccc;
-    background-color: #fff; }
-    .markdown-body table tr:nth-child(2n) {
-      background-color: #f8f8f8; }
-  .markdown-body img {
-    max-width: 100%;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box; }
-  .markdown-body span.frame {
-    display: block;
-    overflow: hidden; }
-    .markdown-body span.frame > span {
-      border: 1px solid #ddd;
-      display: block;
-      float: left;
-      overflow: hidden;
-      margin: 13px 0 0;
-      padding: 7px;
-      width: auto; }
-    .markdown-body span.frame span img {
-      display: block;
-      float: left; }
-    .markdown-body span.frame span span {
-      clear: both;
-      color: #333;
-      display: block;
-      padding: 5px 0 0; }
-  .markdown-body span.align-center {
-    display: block;
-    overflow: hidden;
-    clear: both; }
-    .markdown-body span.align-center > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: center; }
-    .markdown-body span.align-center span img {
-      margin: 0 auto;
-      text-align: center; }
-  .markdown-body span.align-right {
-    display: block;
-    overflow: hidden;
-    clear: both; }
-    .markdown-body span.align-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px 0 0;
-      text-align: right; }
-    .markdown-body span.align-right span img {
-      margin: 0;
-      text-align: right; }
-  .markdown-body span.float-left {
-    display: block;
-    margin-right: 13px;
-    overflow: hidden;
-    float: left; }
-    .markdown-body span.float-left span {
-      margin: 13px 0 0; }
-  .markdown-body span.float-right {
-    display: block;
-    margin-left: 13px;
-    overflow: hidden;
-    float: right; }
-    .markdown-body span.float-right > span {
-      display: block;
-      overflow: hidden;
-      margin: 13px auto 0;
-      text-align: right; }
-  .markdown-body code, .markdown-body tt {
-    margin: 0 2px;
-    padding: 0px 5px;
-    border: 1px solid #eaeaea;
-    background-color: #f8f8f8;
-    border-radius: 3px; }
-  .markdown-body code {
-    white-space: nowrap; }
-  .markdown-body pre > code {
-    margin: 0;
-    padding: 0;
-    white-space: pre;
-    border: none;
-    background: transparent; }
-  .markdown-body .highlight pre, .markdown-body pre {
-    background-color: #f8f8f8;
-    border: 1px solid #ccc;
-    font-size: 13px;
-    line-height: 19px;
-    overflow: auto;
-    padding: 6px 10px;
-    border-radius: 3px; }
-  .markdown-body pre code, .markdown-body pre tt {
-    margin: 0;
-    padding: 0;
-    background-color: transparent;
-    border: none; }
-
-/* this code was copied from https://github.com/assets/stylesheets/primer/components/pygments.css */
-/* the .markdown-body class was then added to all rules */
-.markdown-body .highlight {
-  background: #ffffff; }
-  .markdown-body .highlight .c {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .err {
-    color: #a61717;
-    background-color: #e3d2d2; }
-  .markdown-body .highlight .k {
-    font-weight: bold; }
-  .markdown-body .highlight .o {
-    font-weight: bold; }
-  .markdown-body .highlight .cm {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .cp {
-    color: #999999;
-    font-weight: bold; }
-  .markdown-body .highlight .c1 {
-    color: #999988;
-    font-style: italic; }
-  .markdown-body .highlight .cs {
-    color: #999999;
-    font-weight: bold;
-    font-style: italic; }
-  .markdown-body .highlight .gd {
-    color: #000000;
-    background-color: #ffdddd; }
-  .markdown-body .highlight .gd .x {
-    color: #000000;
-    background-color: #ffaaaa; }
-  .markdown-body .highlight .ge {
-    font-style: italic; }
-  .markdown-body .highlight .gr {
-    color: #aa0000; }
-  .markdown-body .highlight .gh {
-    color: #999999; }
-  .markdown-body .highlight .gi {
-    color: #000000;
-    background-color: #ddffdd; }
-  .markdown-body .highlight .gi .x {
-    color: #000000;
-    background-color: #aaffaa; }
-  .markdown-body .highlight .go {
-    color: #888888; }
-  .markdown-body .highlight .gp {
-    color: #555555; }
-  .markdown-body .highlight .gs {
-    font-weight: bold; }
-  .markdown-body .highlight .gu {
-    color: #800080;
-    font-weight: bold; }
-  .markdown-body .highlight .gt {
-    color: #aa0000; }
-  .markdown-body .highlight .kc {
-    font-weight: bold; }
-  .markdown-body .highlight .kd {
-    font-weight: bold; }
-  .markdown-body .highlight .kn {
-    font-weight: bold; }
-  .markdown-body .highlight .kp {
-    font-weight: bold; }
-  .markdown-body .highlight .kr {
-    font-weight: bold; }
-  .markdown-body .highlight .kt {
-    color: #445588;
-    font-weight: bold; }
-  .markdown-body .highlight .m {
-    color: #009999; }
-  .markdown-body .highlight .s {
-    color: #d14; }
-  .markdown-body .highlight .na {
-    color: #008080; }
-  .markdown-body .highlight .nb {
-    color: #0086B3; }
-  .markdown-body .highlight .nc {
-    color: #445588;
-    font-weight: bold; }
-  .markdown-body .highlight .no {
-    color: #008080; }
-  .markdown-body .highlight .ni {
-    color: #800080; }
-  .markdown-body .highlight .ne {
-    color: #990000;
-    font-weight: bold; }
-  .markdown-body .highlight .nf {
-    color: #990000;
-    font-weight: bold; }
-  .markdown-body .highlight .nn {
-    color: #555555; }
-  .markdown-body .highlight .nt {
-    color: #000080; }
-  .markdown-body .highlight .nv {
-    color: #008080; }
-  .markdown-body .highlight .ow {
-    font-weight: bold; }
-  .markdown-body .highlight .w {
-    color: #bbbbbb; }
-  .markdown-body .highlight .mf {
-    color: #009999; }
-  .markdown-body .highlight .mh {
-    color: #009999; }
-  .markdown-body .highlight .mi {
-    color: #009999; }
-  .markdown-body .highlight .mo {
-    color: #009999; }
-  .markdown-body .highlight .sb {
-    color: #d14; }
-  .markdown-body .highlight .sc {
-    color: #d14; }
-  .markdown-body .highlight .sd {
-    color: #d14; }
-  .markdown-body .highlight .s2 {
-    color: #d14; }
-  .markdown-body .highlight .se {
-    color: #d14; }
-  .markdown-body .highlight .sh {
-    color: #d14; }
-  .markdown-body .highlight .si {
-    color: #d14; }
-  .markdown-body .highlight .sx {
-    color: #d14; }
-  .markdown-body .highlight .sr {
-    color: #009926; }
-  .markdown-body .highlight .s1 {
-    color: #d14; }
-  .markdown-body .highlight .ss {
-    color: #990073; }
-  .markdown-body .highlight .bp {
-    color: #999999; }
-  .markdown-body .highlight .vc {
-    color: #008080; }
-  .markdown-body .highlight .vg {
-    color: #008080; }
-  .markdown-body .highlight .vi {
-    color: #008080; }
-  .markdown-body .highlight .il {
-    color: #009999; }
-  .markdown-body .highlight .gc {
-    color: #999;
-    background-color: #EAF2F5; }
-
-.type-csharp .markdown-body .highlight .k {
-  color: #0000FF; }
-.type-csharp .markdown-body .highlight .kt {
-  color: #0000FF; }
-.type-csharp .markdown-body .highlight .nf {
-  color: #000000;
-  font-weight: normal; }
-.type-csharp .markdown-body .highlight .nc {
-  color: #2B91AF; }
-.type-csharp .markdown-body .highlight .nn {
-  color: #000000; }
-.type-csharp .markdown-body .highlight .s {
-  color: #A31515; }
-.type-csharp .markdown-body .highlight .sc {
-  color: #A31515; }
--- a/src/packages/markdown-preview/stylesheets/markdown-preview.less
+++ b/src/packages/markdown-preview/stylesheets/markdown-preview.less
@@ -0,0 +1,403 @@
+.markdown-preview {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  background-color: #fff;
+  overflow: scroll;
+  box-sizing: border-box;
+  padding: 20px;
+}
+
+.markdown-spinner {
+  margin: auto;
+  background-image: url(images/octocat-spinner-128.gif);
+  background-repeat: no-repeat;
+  background-size: 64px;
+  background-position: top center;
+  padding-top: 70px;
+  text-align: center;
+}
+
+// This is styling for generic markdownized text. Anything you put in a
+// container with .markdown-preview on it should render generally well. It also
+// includes some GitHub Flavored Markdown specific styling (like @mentions)
+.markdown-preview {
+  pre,
+  code,
+  tt {
+    font-size: 12px;
+    font-family: Consolas, "Liberation Mono", Courier, monospace;
+  }
+
+  a {
+    color: #4183c4;
+  }
+
+  ol > li {
+    list-style-type: decimal;
+  }
+
+  ul > li {
+    list-style-type: disc;
+  }
+
+  & > *:first-child {
+    margin-top: 0 !important;
+  }
+
+  & > *:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  // Link Colors
+  a.absent {
+    color: #c00;
+  }
+
+  a.anchor {
+    display: block;
+    padding-left: 30px;
+    margin-left: -30px;
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+  }
+
+  // Headings
+  h1, h2, h3, h4, h5, h6 {
+    margin: 20px 0 10px;
+    padding: 0;
+    font-weight: bold;
+    -webkit-font-smoothing: antialiased;
+    cursor: text;
+    position: relative;
+
+    .mini-icon-link {
+      display: none;
+      color: #000;
+    }
+
+    &:hover a.anchor {
+      text-decoration: none;
+      line-height: 1;
+      padding-left: 0;
+      margin-left: -22px;
+      top: 15%;
+
+      .mini-icon-link {
+        display: inline-block;
+      }
+    }
+    tt, code {
+      font-size: inherit;
+    }
+  }
+
+  h1 {
+    font-size: 28px;
+    color: #000;
+  }
+
+  h2 {
+    font-size: 24px;
+    border-bottom: 1px solid #ccc;
+    color: #000;
+  }
+
+  h3 {
+    font-size: 18px;
+  }
+
+  h4 {
+    font-size: 16px;
+  }
+
+  h5 {
+    font-size: 14px;
+  }
+
+  h6 {
+    color: #777;
+    font-size: 14px;
+  }
+
+  p,
+  blockquote,
+  ul, ol, dl,
+  table,
+  pre {
+    margin: 15px 0;
+  }
+
+  hr {
+    background: transparent;
+    border: 0 none;
+    color: #ccc;
+    height: 4px;
+    padding: 0;
+  }
+
+  & > h2:first-child,
+  & > h1:first-child,
+  & > h1:first-child + h2,
+  & > h3:first-child,
+  & > h4:first-child,
+  & > h5:first-child,
+  & > h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+
+  // fixes margin on shit like:
+  // <a name='the-heading'>
+  // <h1>The Heading</h1></a>
+  a:first-child {
+    h1, h2, h3, h4, h5, h6 {
+      margin-top: 0;
+      padding-top: 0;
+    }
+  }
+
+  h1 + p,
+  h2 + p,
+  h3 + p,
+  h4 + p,
+  h5 + p,
+  h6 + p {
+    margin-top: 0;
+  }
+
+  // ReST first graf in nested list
+  li p.first {
+    display: inline-block;
+  }
+
+  // Lists, Blockquotes & Such
+  ul, ol {
+    padding-left: 30px;
+
+    &.no-list {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    li > :first-child,
+    li ul:first-of-type {
+      margin-top: 0px;
+    }
+  }
+
+  ul ul,
+  ul ol,
+  ol ol,
+  ol ul {
+    margin-bottom: 0;
+  }
+
+  dl {
+    padding: 0;
+  }
+
+  dl dt {
+    font-size: 14px;
+    font-weight: bold;
+    font-style: italic;
+    padding: 0;
+    margin: 15px 0 5px;
+
+    &:first-child {
+      padding: 0;
+    }
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  dl dd {
+    margin: 0 0 15px;
+    padding: 0 15px;
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  blockquote {
+    border-left: 4px solid #DDD;
+    padding: 0 15px;
+    color: #777;
+
+    & > :first-child {
+      margin-top: 0px;
+    }
+
+    & > :last-child {
+      margin-bottom: 0px;
+    }
+  }
+
+  // Tables
+  table {
+
+    th {
+      font-weight: bold;
+    }
+
+    th, td {
+      border: 1px solid #ccc;
+      padding: 6px 13px;
+    }
+
+    tr {
+      border-top: 1px solid #ccc;
+      background-color: #fff;
+
+      &:nth-child(2n) {
+        background-color: #f8f8f8;
+      }
+    }
+  }
+
+  // Images & Stuff
+  img {
+    max-width: 100%;
+    @include box-sizing();
+  }
+
+  // Gollum Image Tags
+
+  // Framed
+  span.frame {
+    display: block;
+    overflow: hidden;
+
+    & > span {
+      border: 1px solid #ddd;
+      display: block;
+      float: left;
+      overflow: hidden;
+      margin: 13px 0 0;
+      padding: 7px;
+      width: auto;
+    }
+
+    span img {
+      display: block;
+      float: left;
+    }
+
+    span span {
+      clear: both;
+      color: #333;
+      display: block;
+      padding: 5px 0 0;
+    }
+  }
+
+  span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px auto 0;
+      text-align: center;
+    }
+
+    span img {
+      margin: 0 auto;
+      text-align: center;
+    }
+  }
+
+  span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px 0 0;
+      text-align: right;
+    }
+
+    span img {
+      margin: 0;
+      text-align: right;
+    }
+  }
+
+  span.float-left {
+    display: block;
+    margin-right: 13px;
+    overflow: hidden;
+    float: left;
+
+    span {
+      margin: 13px 0 0;
+    }
+  }
+
+  span.float-right {
+    display: block;
+    margin-left: 13px;
+    overflow: hidden;
+    float: right;
+
+    & > span {
+      display: block;
+      overflow: hidden;
+      margin: 13px auto 0;
+      text-align: right;
+    }
+  }
+
+  // Inline code snippets
+  code, tt {
+    margin: 0 2px;
+    padding: 0px 5px;
+    border: 1px solid #eaeaea;
+    background-color: #f8f8f8;
+    border-radius:3px;
+  }
+
+  code { white-space: nowrap; }
+
+  // Code tags within code blocks (<pre>s)
+  pre > code {
+    margin: 0;
+    padding: 0;
+    white-space: pre;
+    border: none;
+    background: transparent;
+  }
+
+  .highlight pre, pre {
+    background-color: #f8f8f8;
+    border: 1px solid #ccc;
+    font-size: 13px;
+    line-height: 19px;
+    overflow: auto;
+    padding: 6px 10px;
+    border-radius:3px;
+  }
+
+  pre code, pre tt {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+  }
+}
--- a/src/packages/markdown-preview/stylesheets/pygments.less
+++ b/src/packages/markdown-preview/stylesheets/pygments.less
@@ -0,0 +1,201 @@
+.highlight  {
+  background: #ffffff;
+
+  // Comment
+  .c { color: #999988; font-style: italic }
+
+  // Error
+  .err { color: #a61717; background-color: #e3d2d2 }
+
+  // Keyword
+  .k { font-weight: bold }
+
+  // Operator
+  .o { font-weight: bold }
+
+  // Comment.Multiline
+  .cm { color: #999988; font-style: italic }
+
+  // Comment.Preproc
+  .cp { color: #999999; font-weight: bold }
+
+  // Comment.Single
+  .c1 { color: #999988; font-style: italic }
+
+  // Comment.Special
+  .cs { color: #999999; font-weight: bold; font-style: italic }
+
+  // Generic.Deleted
+  .gd { color: #000000; background-color: #ffdddd }
+
+  // Generic.Deleted.Specific
+  .gd .x { color: #000000; background-color: #ffaaaa }
+
+  // Generic.Emph
+  .ge { font-style: italic }
+
+  // Generic.Error
+  .gr { color: #aa0000 }
+
+  // Generic.Heading
+  .gh { color: #999999 }
+
+  // Generic.Inserted
+  .gi { color: #000000; background-color: #ddffdd }
+
+  // Generic.Inserted.Specific
+  .gi .x { color: #000000; background-color: #aaffaa }
+
+  // Generic.Output
+  .go { color: #888888 }
+
+  // Generic.Prompt
+  .gp { color: #555555 }
+
+  // Generic.Strong
+  .gs { font-weight: bold }
+
+  // Generic.Subheading
+  .gu { color: #800080; font-weight: bold; }
+
+  // Generic.Traceback
+  .gt { color: #aa0000 }
+
+  // Keyword.Constant
+  .kc { font-weight: bold }
+
+  // Keyword.Declaration
+  .kd { font-weight: bold }
+
+  // Keyword.Namespace
+  .kn { font-weight: bold }
+
+  // Keyword.Pseudo
+  .kp { font-weight: bold }
+
+  // Keyword.Reserved
+  .kr { font-weight: bold }
+
+  // Keyword.Type
+  .kt { color: #445588; font-weight: bold }
+
+  // Literal.Number
+  .m { color: #009999 }
+
+  // Literal.String
+  .s { color: #d14 }
+
+  // Name
+  .n { color: #333333 }
+
+  // Name.Attribute
+  .na { color: #008080 }
+
+  // Name.Builtin
+  .nb { color: #0086B3 }
+
+  // Name.Class
+  .nc { color: #445588; font-weight: bold }
+
+  // Name.Constant
+  .no { color: #008080 }
+
+  // Name.Entity
+  .ni { color: #800080 }
+
+  // Name.Exception
+  .ne { color: #990000; font-weight: bold }
+
+  // Name.Function
+  .nf { color: #990000; font-weight: bold }
+
+  // Name.Namespace
+  .nn { color: #555555 }
+
+  // Name.Tag
+  .nt { color: #000080 }
+
+  // Name.Variable
+  .nv { color: #008080 }
+
+  // Operator.Word
+  .ow { font-weight: bold }
+
+  // Text.Whitespace
+  .w { color: #bbbbbb }
+
+  // Literal.Number.Float
+  .mf { color: #009999 }
+
+  // Literal.Number.Hex
+  .mh { color: #009999 }
+
+  // Literal.Number.Integer
+  .mi { color: #009999 }
+
+  // Literal.Number.Oct
+  .mo { color: #009999 }
+
+  // Literal.String.Backtick
+  .sb { color: #d14 }
+
+  // Literal.String.Char
+  .sc { color: #d14 }
+
+  // Literal.String.Doc
+  .sd { color: #d14 }
+
+  // Literal.String.Double
+  .s2 { color: #d14 }
+
+  // Literal.String.Escape
+  .se { color: #d14 }
+
+  // Literal.String.Heredoc
+  .sh { color: #d14 }
+
+  // Literal.String.Interpol
+  .si { color: #d14 }
+
+  // Literal.String.Other
+  .sx { color: #d14 }
+
+  // Literal.String.Regex
+  .sr { color: #009926 }
+
+  // Literal.String.Single
+  .s1 { color: #d14 }
+
+  // Literal.String.Symbol
+  .ss { color: #990073 }
+
+  // Name.Builtin.Pseudo
+  .bp { color: #999999 }
+
+  // Name.Variable.Class
+  .vc { color: #008080 }
+
+  // Name.Variable.Global
+  .vg { color: #008080 }
+
+  // Name.Variable.Instance
+  .vi { color: #008080 }
+
+  // Literal.Number.Integer.Long
+  .il { color: #009999 }
+
+  .gc {
+    color: #999;
+    background-color: #EAF2F5;
+  }
+}
+
+.type-csharp .highlight {
+  .k { color: #0000FF }
+  .kt { color: #0000FF }
+  .nf { color: #000000; font-weight: normal }
+  .nc { color: #2B91AF }
+  .nn { color: #000000 }
+  .s { color: #A31515 }
+  .sc { color: #A31515 }
+}
--- a/src/packages/package-generator/lib/package-generator-view.coffee
+++ b/src/packages/package-generator/lib/package-generator-view.coffee
@@ -62,6 +62,7 @@ class PackageGeneratorView extends View
    for path in fs.listTree(templatePath)
      relativePath = path.replace(templatePath, "")
      relativePath = relativePath.replace(/^\//, '')
+      relativePath = relativePath.replace(/\.template$/, '')
      relativePath = @replacePackageNamePlaceholders(relativePath, packageName)

      sourcePath = fs.join(@getPackagePath(), relativePath)
--- a/src/packages/package-generator/spec/package-generator-spec.coffee
+++ b/src/packages/package-generator/spec/package-generator-spec.coffee
@@ -37,12 +37,6 @@ describe 'Package Generator', ->
      packagePath = "/tmp/atom-packages/#{packageName}"
      fs.remove(packagePath) if fs.exists(packagePath)

-      @addMatchers
-        toExistOnDisk: (expected) ->
-          notText = this.isNot and " not" or ""
-          @message = -> return "Expected path '" + @actual + "'" + notText + " to exist."
-          fs.exists(@actual)
-
    afterEach ->
      fs.remove(packagePath) if fs.exists(packagePath)

--- a/src/packages/package-generator/stylesheets/package-generator.less
+++ b/src/packages/package-generator/stylesheets/package-generator.less
--- a/src/packages/package-generator/template/keymaps/package-name.cson.template
+++ b/src/packages/package-generator/template/keymaps/package-name.cson.template
--- a/src/packages/package-generator/template/lib/package-name-view.coffee.template
+++ b/src/packages/package-generator/template/lib/package-name-view.coffee.template
--- a/src/packages/package-generator/template/lib/package-name.coffee.template
+++ b/src/packages/package-generator/template/lib/package-name.coffee.template
--- a/src/packages/package-generator/template/spec/package-name-spec.coffee.template
+++ b/src/packages/package-generator/template/spec/package-name-spec.coffee.template
--- a/src/packages/package-generator/template/spec/package-name-view-spec.coffee.template
+++ b/src/packages/package-generator/template/spec/package-name-view-spec.coffee.template
--- a/src/packages/package-generator/template/stylesheets/package-name.css.template
+++ b/src/packages/package-generator/template/stylesheets/package-name.css.template
--- a/src/packages/spell-check/spec/spell-check-spec.coffee
+++ b/src/packages/spell-check/spec/spell-check-spec.coffee
@@ -7,7 +7,7 @@ describe "Spell check", ->
    window.rootView = new RootView
    rootView.open('sample.js')
    config.set('spell-check.grammars', [])
-    window.loadPackage('spell-check')
+    window.loadPackage('spell-check', activateImmediately: true)
    rootView.attachToDom()
    editor = rootView.getActiveView()

--- a/src/packages/spell-check/stylesheets/spell-check.less
+++ b/src/packages/spell-check/stylesheets/spell-check.less
--- a/src/packages/tree-view/lib/tree-view.coffee
+++ b/src/packages/tree-view/lib/tree-view.coffee
@@ -127,8 +127,10 @@ class TreeView extends ScrollView
      @root = null

  selectActiveFile: ->
-    activeFilePath = rootView.getActiveView()?.getPath()
-    @selectEntryForPath(activeFilePath) if activeFilePath
+    if activeFilePath = rootView.getActiveView()?.getPath?()
+      @selectEntryForPath(activeFilePath)
+    else
+      @deselect()

  revealActiveFile: ->
    @attach()
@@ -298,9 +300,12 @@ class TreeView extends ScrollView
    return false unless entry.get(0)
    entry = entry.view() unless entry instanceof View
    @selectedPath = entry.getPath()
-    @treeViewList.find('.selected').removeClass('selected')
+    @deselect()
    entry.addClass('selected')

+  deselect: ->
+    @treeViewList.find('.selected').removeClass('selected')
+
  scrollTop: (top) ->
    if top
      @treeViewList.scrollTop(top)
--- a/src/packages/tree-view/spec/tree-view-spec.coffee
+++ b/src/packages/tree-view/spec/tree-view-spec.coffee
@@ -1,4 +1,5 @@
 $ = require 'jquery'
+{$$} = require 'space-pen'
 _ = require 'underscore'
 TreeView = require 'tree-view/lib/tree-view'
 RootView = require 'root-view'
@@ -49,7 +50,7 @@ describe "TreeView", ->
        rootView.deactivate()
        window.rootView = new RootView()
        rootView.open()
-        treeView = window.loadPackage("tree-view").packageMain.createView()
+        treeView = window.loadPackage("tree-view").mainModule.createView()

      it "does not attach to the root view or create a root node when initialized", ->
        expect(treeView.hasParent()).toBeFalsy()
@@ -75,13 +76,13 @@ describe "TreeView", ->
        rootView.deactivate()
        window.rootView = new RootView
        rootView.open('tree-view.js')
-        treeView = window.loadPackage("tree-view").packageMain.createView()
+        treeView = window.loadPackage("tree-view").mainModule.createView()
        expect(treeView.hasParent()).toBeFalsy()
        expect(treeView.root).toExist()

    describe "when the root view is opened to a directory", ->
      it "attaches to the root view", ->
-        treeView = window.loadPackage("tree-view").packageMain.createView()
+        treeView = window.loadPackage("tree-view").mainModule.createView()
        expect(treeView.hasParent()).toBeTruthy()
        expect(treeView.root).toExist()

@@ -301,18 +302,25 @@ describe "TreeView", ->
      expect(subdir).toHaveClass 'expanded'
      expect(rootView.getActiveView().isFocused).toBeFalsy()

-  describe "when a new file is opened in the active editor", ->
-    it "selects the file in the tree view if the file's entry visible", ->
-      sampleJs.click()
-      rootView.open(fs.resolveOnLoadPath('fixtures/tree-view/tree-view.txt'))
+  describe "when the active item changes on the active pane", ->
+    describe "when the item has a path", ->
+      it "selects the entry with that path in the tree view if it is visible", ->
+        sampleJs.click()
+        rootView.open(require.resolve('fixtures/tree-view/tree-view.txt'))

-      expect(sampleTxt).toHaveClass 'selected'
-      expect(treeView.find('.selected').length).toBe 1
+        expect(sampleTxt).toHaveClass 'selected'
+        expect(treeView.find('.selected').length).toBe 1

-    it "selects the file's parent dir if the file's entry is not visible", ->
-      rootView.open('dir1/sub-dir1/sub-file1')
-      dirView = treeView.root.find('.directory:contains(dir1)').view()
-      expect(dirView).toHaveClass 'selected'
+      it "selects the path's parent dir if its entry is not visible", ->
+        rootView.open('dir1/sub-dir1/sub-file1')
+        dirView = treeView.root.find('.directory:contains(dir1)').view()
+        expect(dirView).toHaveClass 'selected'
+
+    describe "when the item has no path", ->
+      it "deselects the previously selected entry", ->
+        sampleJs.click()
+        rootView.getActivePane().showItem($$ -> @div('hello'))
+        expect(rootView.find('.selected')).not.toExist()

  describe "when a different editor becomes active", ->
    it "selects the file in that is open in that editor", ->
--- a/src/packages/tree-view/stylesheets/tree-view.css
+++ b/src/packages/tree-view/stylesheets/tree-view.css
@@ -1,57 +0,0 @@
-.tree-view-wrapper {
-  position: relative;
-  height: 100%;
-  cursor: default;
-  -webkit-user-select: none;
-  min-width: 50px;
-  z-index: 2;
-}
-
-.tree-view {
-  position: relative;
-  cursor: default;
-  -webkit-user-select: none;
-  overflow: auto;
-  height: 100%;
-}
-
-.tree-view-wrapper .tree-view-resizer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 10px;
-  cursor: col-resize;
-  z-index: 3;
-}
-
-.tree-view .entry {
-  text-wrap: none;
-  white-space: nowrap;
-}
-
-.tree-view .entry > .header,
-.tree-view .entry > .name {
-  z-index: 1;
-  position: relative;
-  display: inline-block;
-}
-
-.tree-view .selected > .highlight {
-  position: absolute;
-  left: 0;
-  right: 0;
-  height: 24px;
-}
-
-.tree-view .disclosure-arrow {
-  display: inline-block;
-}
-
-.tree-view-dialog {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 99;
-}
--- a/src/packages/tree-view/stylesheets/tree-view.less
+++ b/src/packages/tree-view/stylesheets/tree-view.less
@@ -0,0 +1,57 @@
+.tree-view-wrapper {
+  position: relative;
+  height: 100%;
+  cursor: default;
+  -webkit-user-select: none;
+  min-width: 50px;
+  z-index: 2;
+
+  .tree-view-resizer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 10px;
+    cursor: col-resize;
+    z-index: 3;
+  }
+}
+
+.tree-view {
+  position: relative;
+  cursor: default;
+  -webkit-user-select: none;
+  overflow: auto;
+  height: 100%;
+
+  .entry {
+    text-wrap: none;
+    white-space: nowrap;
+
+    & > .header,
+    > .name {
+      z-index: 1;
+      position: relative;
+      display: inline-block;
+    }
+  }
+
+  .selected > .highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 24px;
+  }
+
+  .disclosure-arrow {
+    display: inline-block;
+  }
+}
+
+.tree-view-dialog {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+}
--- a/src/packages/wrap-guide/stylesheets/wrap-guide.less
+++ b/src/packages/wrap-guide/stylesheets/wrap-guide.less