Start implementing BlockDecorationsComponent

src/block-decorations-component.coffee

@@ -0,0 +1,45 @@
+cloneObject = (object) ->
+  clone = {}
+  clone[key] = value for key, value of object
+  clone
+
+module.exports =
+class BlockDecorationsComponent
+  constructor: (@views, @domElementPool) ->
+    @domNode = @domElementPool.buildElement("div")
+    @newState = null
+    @oldState = null
+    @blockDecorationNodesById = {}
+
+  getDomNode: ->
+    @domNode
+
+  updateSync: (state) ->
+    @newState = state.content
+    @oldState ?= {blockDecorations: {}}
+
+    for id, blockDecorationState of @newState.blockDecorations
+      if @oldState.blockDecorations.hasOwnProperty(id)
+        @updateBlockDecorationNode(id)
+      else
+        @createAndAppendBlockDecorationNode(id)
+
+      @oldState.blockDecorations[id] = cloneObject(blockDecorationState)
+
+  createAndAppendBlockDecorationNode: (id) ->
+    blockDecorationState = @newState.blockDecorations[id]
+    blockDecorationNode = @views.getView(blockDecorationState.decoration.getProperties().item)
+    blockDecorationNode.classList.add("block-decoration-row-#{blockDecorationState.screenRow}")
+
+    @domNode.appendChild(blockDecorationNode)
+
+    @blockDecorationNodesById[id] = blockDecorationNode
+
+  updateBlockDecorationNode: (id) ->
+    newBlockDecorationState = @newState.blockDecorations[id]
+    oldBlockDecorationState = @oldState.blockDecorations[id]
+    blockDecorationNode = @blockDecorationNodesById[id]
+
+    if newBlockDecorationState.screenRow isnt oldBlockDecorationState.screenRow
+      blockDecorationNode.classList.remove("block-decoration-row-#{oldBlockDecorationState.screenRow}")
+      blockDecorationNode.classList.add("block-decoration-row-#{newBlockDecorationState.screenRow}")

src/text-editor-component.coffee

@@ -13,6 +13,7 @@ ScrollbarCornerComponent = require './scrollbar-corner-component'
 OverlayManager = require './overlay-manager'
 DOMElementPool = require './dom-element-pool'
 LinesYardstick = require './lines-yardstick'
+BlockDecorationsComponent = require './block-decorations-component'
 
 module.exports =
 class TextEditorComponent
@@ -59,6 +60,7 @@ class TextEditorComponent
     @presenter.onDidUpdateState(@requestUpdate)
 
     @domElementPool = new DOMElementPool
+    @blockDecorationsComponent = new BlockDecorationsComponent(@views, @domElementPool)
 
     @domNode = document.createElement('div')
     if @useShadowDOM
@@ -68,9 +70,11 @@ class TextEditorComponent
       insertionPoint.setAttribute('select', 'atom-overlay')
       @domNode.appendChild(insertionPoint)
       @overlayManager = new OverlayManager(@presenter, @hostElement, @views)
+      @hostElement.appendChild(@blockDecorationsComponent.getDomNode())
     else
       @domNode.classList.add('editor-contents')
       @overlayManager = new OverlayManager(@presenter, @domNode, @views)
+      @domNode.appendChild(@blockDecorationsComponent.getDomNode())
 
     @scrollViewNode = document.createElement('div')
     @scrollViewNode.classList.add('scroll-view')
@@ -156,6 +160,7 @@ class TextEditorComponent
 
     @hiddenInputComponent.updateSync(@newState)
     @linesComponent.updateSync(@newState)
+    @blockDecorationsComponent.updateSync(@newState)
     @horizontalScrollbarComponent.updateSync(@newState)
     @verticalScrollbarComponent.updateSync(@newState)
     @scrollbarCornerComponent.updateSync(@newState)

src/text-editor.coffee

@@ -1398,11 +1398,11 @@ class TextEditor extends Model
   Section: Decorations
   ###
 
-  addBlockDecorationForScreenRow: (screenRow, element) ->
+  addBlockDecorationForScreenRow: (screenRow, item) ->
     @decorateMarker(
       @markScreenPosition([screenRow, 0], invalidate: "never"),
       type: "block",
-      element: element
+      item: item
     )
 
   # Essential: Add a decoration that tracks a {TextEditorMarker}. When the