Use TokenizedBuffer as a text decoration layer and render tags

src/display-buffer.coffee

@@ -52,6 +52,7 @@ class DisplayBuffer extends Model
     })
     @buffer = @tokenizedBuffer.buffer
     @displayLayer = @buffer.addDisplayLayer({tabLength: @getTabLength()})
+    @displayLayer.setTextDecorationLayer(@tokenizedBuffer)
     @charWidthsByScope = {}
     @defaultMarkerLayer = @displayLayer.addMarkerLayer()
     @decorationsById = {}

src/lines-tile-component.coffee

@@ -125,7 +125,7 @@ class LinesTileComponent
   screenRowForNode: (node) -> parseInt(node.dataset.screenRow)
 
   buildLineNode: (id) ->
-    {screenRow, words, decorationClasses} = @newTileState.lines[id]
+    {screenRow, decorationClasses} = @newTileState.lines[id]
 
     lineNode = @domElementPool.buildElement("div", "line")
     lineNode.dataset.screenRow = screenRow
@@ -183,12 +183,23 @@ class LinesTileComponent
         @currentLineTextNodes.push(textNode)
 
   setLineInnerNodes: (id, lineNode) ->
-    {words} = @newTileState.lines[id]
+    {tokens} = @newTileState.lines[id]
     lineLength = 0
-    for word in words when word.length > 0
-      lineLength += word.length
-      textNode = @domElementPool.buildText(word.replace(/\s/g, NBSPCharacter))
-      lineNode.appendChild(textNode)
+    openScopeNode = lineNode
+    for token in tokens when token.text.length > 0
+      {closeTags, openTags, text} = token
+
+      for scope in closeTags
+        openScopeNode = openScopeNode.parentElement
+
+      for scope in openTags
+        newScopeNode = @domElementPool.buildElement("span", scope.replace(/\.+/g, ' '))
+        openScopeNode.appendChild(newScopeNode)
+        openScopeNode = newScopeNode
+
+      lineLength += text.length
+      textNode = @domElementPool.buildText(text.replace(/\s/g, NBSPCharacter))
+      openScopeNode.appendChild(textNode)
       @currentLineTextNodes.push(textNode)
 
     if lineLength is 0

src/text-editor-presenter.coffee

@@ -133,8 +133,9 @@ class TextEditorPresenter
     @shouldUpdateDecorations = true
 
   observeModel: ->
-    @disposables.add @model.displayLayer.onDidChangeTextSync (change) =>
-      @invalidateLines(change)
+    @disposables.add @model.displayLayer.onDidChangeSync (changes) =>
+      for change in changes
+        @invalidateLines(change)
       @shouldUpdateDecorations = true
       @emitDidUpdateState()
 
@@ -395,7 +396,7 @@ class TextEditorPresenter
       else
         tileState.lines[line.id] =
           screenRow: screenRow
-          words: line.words
+          tokens: line.tokens
           decorationClasses: @lineDecorationClassesForRow(screenRow)
 
     for id, line of tileState.lines
@@ -1028,10 +1029,14 @@ class TextEditorPresenter
         @linesById.delete(lineId)
 
   buildLine: (screenRow) ->
-    line = {id: @lineIdCounter++, words: []}
+    line = {id: @lineIdCounter++, tokens: []}
     @tokenIterator.seekToScreenRow(screenRow)
     loop
-      line.words.push(@tokenIterator.getText())
+      line.tokens.push({
+        text: @tokenIterator.getText(),
+        closeTags: @tokenIterator.getCloseTags(),
+        openTags: @tokenIterator.getOpenTags()
+      })
       break unless @tokenIterator.moveToSuccessor()
       break unless @tokenIterator.getStartScreenPosition().row is screenRow
     line