Merge pull request #2867 from atom/ns-react-empty-line-invisibles

Render empty line invisibles in React editor

spec/editor-component-spec.coffee

@@ -232,6 +232,28 @@ describe "EditorComponent", ->
         runSetImmediateCallbacks()
         expect(component.lineNodeForScreenRow(0).textContent).toBe "a line that ends with a carriage return#{invisibles.cr}#{invisibles.eol}"
 
+      it "renders invisible line-ending characters on empty lines", ->
+        expect(component.lineNodeForScreenRow(10).textContent).toBe invisibles.eol
+
+      it "interleaves invisible line-ending characters with indent guides on empty lines", ->
+        component.setShowIndentGuide(true)
+        editor.setTextInBufferRange([[10, 0], [11, 0]], "\r\n", false)
+        runSetImmediateCallbacks()
+        expect(component.lineNodeForScreenRow(10).innerHTML).toBe '<span class="indent-guide"><span class="invisible-character">C</span><span class="invisible-character">E</span></span>'
+
+        editor.setTabLength(3)
+        runSetImmediateCallbacks()
+        expect(component.lineNodeForScreenRow(10).innerHTML).toBe '<span class="indent-guide"><span class="invisible-character">C</span><span class="invisible-character">E</span> </span>'
+
+        editor.setTabLength(1)
+        runSetImmediateCallbacks()
+        expect(component.lineNodeForScreenRow(10).innerHTML).toBe '<span class="indent-guide"><span class="invisible-character">C</span></span><span class="indent-guide"><span class="invisible-character">E</span></span>'
+
+        editor.setTextInBufferRange([[9, 0], [9, Infinity]], ' ')
+        editor.setTextInBufferRange([[11, 0], [11, Infinity]], ' ')
+        runSetImmediateCallbacks()
+        expect(component.lineNodeForScreenRow(10).innerHTML).toBe '<span class="indent-guide"><span class="invisible-character">C</span></span><span class="invisible-character">E</span>'
+
       describe "when soft wrapping is enabled", ->
         beforeEach ->
           editor.setText "a line that wraps "

src/editor.coffee

@@ -1472,7 +1472,7 @@ class Editor extends Model
   # text - A {String}
   #
   # Returns the {Range} of the newly-inserted text.
-  setTextInBufferRange: (range, text) -> @getBuffer().setTextInRange(range, text)
+  setTextInBufferRange: (range, text, normalizeLineEndings) -> @getBuffer().setTextInRange(range, text, normalizeLineEndings)
 
   # Public: Get the {Range} of the paragraph surrounding the most recently added
   # cursor.

src/lines-component.coffee

@@ -153,14 +153,33 @@ LinesComponent = React.createClass
     lineHTML
 
   buildEmptyLineInnerHTML: (line) ->
-    {showIndentGuide} = @props
+    {showIndentGuide, invisibles} = @props
+    {cr, eol} = invisibles
     {indentLevel, tabLength} = line
 
     if showIndentGuide and indentLevel > 0
-      indentSpan = "<span class='indent-guide'>#{multiplyString(' ', tabLength)}</span>"
-      multiplyString(indentSpan, indentLevel)
+      invisiblesToRender = []
+      invisiblesToRender.push(cr) if cr? and line.lineEnding is '\r\n'
+      invisiblesToRender.push(eol) if eol?
+
+      console.log line.lineEnding is '\r\n', invisibles, invisiblesToRender.slice()
+
+      lineHTML = ''
+      for i in [0...indentLevel]
+        lineHTML += "<span class='indent-guide'>"
+        for j in [0...tabLength]
+          if invisible = invisiblesToRender.shift()
+            lineHTML += "<span class='invisible-character'>#{invisible}</span>"
+          else
+            lineHTML += ' '
+        lineHTML += "</span>"
+
+      while invisiblesToRender.length
+        lineHTML += "<span class='invisible-character'>#{invisiblesToRender.shift()}</span>"
+
+      lineHTML
     else
-      "&nbsp;"
+      @buildEndOfLineHTML(line, @props.invisibles)
 
   buildLineInnerHTML: (line) ->
     {invisibles, mini, showIndentGuide, invisibles} = @props