Only pass invisibles through to the line component if needed

src/editor-component.coffee

@@ -31,9 +31,10 @@ EditorComponent = React.createClass
   mouseWheelScreenRow: null
 
   render: ->
-    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, invisibles} = @state
+    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles} = @state
     {editor, cursorBlinkResumeDelay} = @props
     maxLineNumberDigits = editor.getScreenLineCount().toString().length
+    invisibles = if showInvisibles then @state.invisibles else {}
 
     if @isMounted()
       renderedRowRange = @getRenderedRowRange()
@@ -269,6 +270,7 @@ EditorComponent = React.createClass
     @subscribe atom.config.observe 'editor.fontSize', @setFontSize
     @subscribe atom.config.observe 'editor.showIndentGuide', @setShowIndentGuide
     @subscribe atom.config.observe 'editor.invisibles', @setInvisibles
+    @subscribe atom.config.observe 'editor.showInvisibles', @setShowInvisibles
 
   measureScrollbars: ->
     @measuringScrollbars = false
@@ -308,6 +310,9 @@ EditorComponent = React.createClass
 
     @setState({invisibles})
 
+  setShowInvisibles: (showInvisibles) ->
+    @setState({showInvisibles})
+
   onFocus: ->
     @refs.scrollView.focus()
 

src/lines-component.coffee

@@ -147,7 +147,7 @@ LinesComponent = React.createClass
       hasIndentGuide = not mini and showIndentGuide and token.hasLeadingWhitespace or (token.hasTrailingWhitespace and lineIsWhitespaceOnly)
       innerHTML += token.getValueAsHtml({invisibles, hasIndentGuide})
     innerHTML += @popScope(scopeStack) while scopeStack.length > 0
-    innerHTML += invisibles.eol
+    innerHTML += invisibles.eol if invisibles.eol?
     innerHTML
 
   updateScopeStack: (scopeStack, desiredScopes) ->