Add wrap guide extension

Initially places a vertical line in each editor
at 80 characters.

spec/extensions/wrap-guide-spec.coffee

@@ -0,0 +1,36 @@
+$ = require 'jquery'
+RootView = require 'root-view'
+
+describe "WrapGuide", ->
+  [rootView, editor, wrapGuide] = []
+
+  beforeEach ->
+    rootView = new RootView(require.resolve('fixtures/sample.js'))
+    requireExtension('wrap-guide')
+    rootView.attachToDom()
+    editor = rootView.getActiveEditor()
+    wrapGuide = rootView.find('.wrap-guide').view()
+
+  afterEach ->
+    rootView.deactivate()
+
+  describe "@initialize", ->
+    it "appends a wrap guide to all existing and new editors", ->
+      expect(rootView.panes.find('.pane').length).toBe 1
+      expect(rootView.panes.find('.lines > .wrap-guide').length).toBe 1
+      editor.splitRight()
+      expect(rootView.find('.pane').length).toBe 2
+      expect(rootView.panes.find('.lines > .wrap-guide').length).toBe 2
+
+  describe "@updateGuide", ->
+    it "positions the guide at 80 characters", ->
+      width = editor.charWidth * 80
+      expect(width).toBeGreaterThan(0)
+      expect(wrapGuide.position().left).toBe(width)
+
+  describe "font-size-change", ->
+    it "updates the wrap guide position", ->
+      initial = wrapGuide.position().left
+      expect(initial).toBeGreaterThan(0)
+      rootView.trigger('increase-font-size')
+      expect(wrapGuide.position().left).toBeGreaterThan(initial)

src/extensions/wrap-guide/index.coffee

@@ -0,0 +1 @@
+module.exports = require 'wrap-guide/wrap-guide'

src/extensions/wrap-guide/wrap-guide.coffee

@@ -0,0 +1,28 @@
+{View} = require 'space-pen'
+
+module.exports =
+class WrapGuide extends View
+  @activate: (rootView) ->
+    requireStylesheet 'wrap-guide.css'
+
+    for editor in rootView.getEditors()
+      @appendToEditorPane(rootView, editor) if rootView.parents('html').length
+
+    rootView.on 'editor-open', (e, editor) =>
+      @appendToEditorPane(rootView, editor)
+
+  @appendToEditorPane: (rootView, editor) ->
+    if lines = editor.pane()?.find('.lines')
+      lines.append(new WrapGuide(rootView, editor))
+
+  @content: ->
+    @div class: 'wrap-guide'
+
+  initialize: (@rootView, @editor) =>
+    @updateGuide(@editor)
+    @editor.on 'editor-path-change', => @updateGuide(@editor)
+    @rootView.on 'font-size-change', => @updateGuide(@editor)
+
+  updateGuide: (editor) ->
+    width = editor.charWidth * 80
+    @css("left", width + "px")

static/wrap-guide.css

@@ -0,0 +1,8 @@
+.wrap-guide {
+  height: 100%;
+  width: 1px;
+  background: rgba(150, 150, 150, .33);
+  z-index: 100;
+  position: absolute;
+  top: 0px;
+}