Render indent guide for react editors on non-empty lines

spec/editor-component-spec.coffee

@@ -1,5 +1,5 @@
 React = require 'react'
-{extend} = require 'underscore-plus'
+{extend, flatten, toArray} = require 'underscore-plus'
 EditorComponent = require '../src/editor-component'
 
 describe "EditorComponent", ->
@@ -50,6 +50,29 @@ describe "EditorComponent", ->
       expect(spacers[0].offsetHeight).toBe 2 * lineHeightInPixels
       expect(spacers[1].offsetHeight).toBe (editor.getScreenLineCount() - 8) * lineHeightInPixels
 
+    describe "when indent guides are enabled", ->
+      it "adds an 'indent-guide' class to spans comprising the leading whitespace", ->
+        component.setShowIndentGuide(true)
+
+        lines = node.querySelectorAll('.line')
+        line1LeafNodes = getLeafNodes(lines[1])
+        expect(line1LeafNodes[0].textContent).toBe '  '
+        expect(line1LeafNodes[0].classList.contains('indent-guide')).toBe true
+        expect(line1LeafNodes[1].classList.contains('indent-guide')).toBe false
+
+        line2LeafNodes = getLeafNodes(lines[2])
+        expect(line2LeafNodes[0].textContent).toBe '  '
+        expect(line2LeafNodes[0].classList.contains('indent-guide')).toBe true
+        expect(line2LeafNodes[1].textContent).toBe '  '
+        expect(line2LeafNodes[1].classList.contains('indent-guide')).toBe true
+        expect(line2LeafNodes[2].classList.contains('indent-guide')).toBe false
+
+      getLeafNodes = (node) ->
+        if node.children.length > 0
+          flatten(toArray(node.children).map(getLeafNodes))
+        else
+          [node]
+
   describe "gutter rendering", ->
     nbsp = String.fromCharCode(160)
 

src/editor-component.coffee

@@ -82,6 +82,7 @@ EditorCompont = React.createClass
 
   renderVisibleLines: ->
     {editor} = @props
+    {showIndentGuide} = @state
     [startRow, endRow] = @getVisibleRowRange()
     lineHeightInPixels = editor.getLineHeight()
     precedingHeight = startRow * lineHeightInPixels
@@ -90,7 +91,7 @@ EditorCompont = React.createClass
     div className: 'lines', ref: 'lines', [
       div className: 'spacer', key: 'top-spacer', style: {height: precedingHeight}
       (for tokenizedLine in @props.editor.linesForScreenRows(startRow, endRow - 1)
-        LineComponent({tokenizedLine, key: tokenizedLine.id}))...
+        LineComponent({tokenizedLine, showIndentGuide, key: tokenizedLine.id}))...
       div className: 'spacer', key: 'bottom-spacer', style: {height: followingHeight}
     ]
 
@@ -297,6 +298,9 @@ EditorCompont = React.createClass
     @setState({fontFamily})
     @updateLineDimensions()
 
+  setShowIndentGuide: (showIndentGuide) ->
+    @setState({showIndentGuide})
+
   onFocus: ->
     @refs.input.focus()
 
@@ -538,9 +542,10 @@ LineComponent = React.createClass
       html += "</span>"
       html
     else
-      "<span>#{scopeTree.getValueAsHtml({})}</span>"
+      "<span>#{scopeTree.getValueAsHtml({hasIndentGuide: @props.showIndentGuide})}</span>"
 
-  shouldComponentUpdate: -> false
+  shouldComponentUpdate: (newProps, newState) ->
+    newProps.showIndentGuide isnt @props.showIndentGuide
 
 LineNumberComponent = React.createClass
   render: ->