Handle invisible character rendering when building HTML for lines.

Not during creation of tokens.

src/app/token.coffee

@@ -5,6 +5,7 @@ class Token
   value: null
   scopes: null
   isAtomic: null
+  isTab: null
 
   constructor: ({@value, @scopes, @isAtomic, @bufferDelta, @fold, @isTab}) ->
     @screenDelta = @value.length
@@ -21,29 +22,41 @@ class Token
     value2 = @value.substring(splitIndex)
     [new Token(value: value1, scopes: @scopes), new Token(value: value2, scopes: @scopes)]
 
-  breakOutWhitespaceCharacters: (tabLength, showInvisibles) ->
-    return [this] unless /\t| /.test(@value)
-
-    for substring in @value.match(/([^\t ]+|(\t| +))/g)
-      scopesForInvisibles = if showInvisibles then @scopes.concat("invisible") else @scopes
+  breakOutTabCharacters: (tabLength, showInvisibles) ->
+    return [this] unless /\t/.test(@value)
 
+    for substring in @value.match(/[^\t]+|\t/g)
       if substring == "\t"
-        value = new Array(tabLength + 1).join(" ")
-        value = "▸" + value[1..] if showInvisibles
-        new Token(value: value, scopes: scopesForInvisibles, bufferDelta: 1, isAtomic: true)
-      else if /^ +$/.test(substring)
-        value = if showInvisibles then substring.replace(/[ ]/g, "•") else substring
-        new Token(value: value, scopes: scopesForInvisibles)
+        @buildTabToken(tabLength)
       else
         new Token(value: substring, scopes: @scopes)
 
   buildTabToken: (tabLength) ->
-    tabText = new Array(tabLength + 1).join(" ")
+    new Token(
+      value: new Array(tabLength + 1).join(" ")
+      scopes: @scopes
+      bufferDelta: 1
+      isAtomic: true
+      isTab: true
+    )
 
-  escapeValue: (showInvisibles)->
-    @value
+  getValueAsHtml: ({showInvisibles, hasLeadingWhitespace, hasTrailingWhitespace})->
+    html = @value
       .replace(/&/g, '&')
       .replace(/"/g, '"')
       .replace(/'/g, ''')
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')
+
+    if showInvisibles
+      if @isTab
+        html = html.replace(/^./, "<span class='invisible'>▸</span>")
+      else
+        if hasLeadingWhitespace
+          html = html.replace /^[ ]+/, (match) ->
+            "<span class='invisible'>#{match.replace(/./g, '•')}</span>"
+        if hasTrailingWhitespace
+          html = html.replace /[ ]+$/, (match) ->
+            "<span class='invisible'>#{match.replace(/./g, '•')}</span>"
+
+    html