Make CursorsComponent a plain object instead of using React

src/cursors-component.coffee

@@ -1,37 +1,23 @@
-React = require 'react-atom-fork'
-{div} = require 'reactionary-atom-fork'
-{debounce, toArray, isEqualForProperties, isEqual} = require 'underscore-plus'
-SubscriberMixin = require './subscriber-mixin'
-
 module.exports =
-CursorsComponent = React.createClass
-  displayName: 'CursorsComponent'
+class CursorsComponent
   oldState: null
-  cursorNodesById: null
 
-  render: ->
-    div className: 'cursors'
-
-  componentWillMount: ->
+  constructor: (@presenter) ->
     @cursorNodesById = {}
-
-  componentDidMount: ->
-    @updateSync()
-
-  componentDidUpdate: ->
+    @domNode = document.createElement('div')
+    @domNode.classList.add('cursors')
     @updateSync()
 
   updateSync: ->
-    node = @getDOMNode()
-    newState = @props.presenter.state.content
+    newState = @presenter.state.content
     @oldState ?= {cursors: {}}
 
     # update blink class
     if newState.blinkCursorsOff isnt @oldState.blinkCursorsOff
       if newState.blinkCursorsOff
-        node.classList.add 'blink-off'
+        @domNode.classList.add 'blink-off'
       else
-        node.classList.remove 'blink-off'
+        @domNode.classList.remove 'blink-off'
       @oldState.blinkCursorsOff = newState.blinkCursorsOff
 
     # remove cursors
@@ -47,7 +33,7 @@ CursorsComponent = React.createClass
         cursorNode = document.createElement('div')
         cursorNode.classList.add('cursor')
         @cursorNodesById[id] = cursorNode
-        node.appendChild(cursorNode)
+        @domNode.appendChild(cursorNode)
       @updateCursorNode(id, cursorState)
 
   updateCursorNode: (id, newCursorState) ->

src/lines-component.coffee

@@ -31,7 +31,6 @@ LinesComponent = React.createClass
 
     div {className: 'lines', style},
       div className: 'placeholder-text', placeholderText if placeholderText?
-      CursorsComponent {presenter}
       HighlightsComponent {presenter}
 
   getTransform: ->
@@ -51,17 +50,22 @@ LinesComponent = React.createClass
     @renderedDecorationsByLineId = {}
 
   componentDidMount: ->
+    node = @getDOMNode()
+
+    @cursorsComponent = new CursorsComponent(@props.presenter)
+    node.appendChild(@cursorsComponent.domNode)
+
     if @props.useShadowDOM
       insertionPoint = document.createElement('content')
       insertionPoint.setAttribute('select', '.overlayer')
-      @getDOMNode().appendChild(insertionPoint)
+      node.appendChild(insertionPoint)
 
       insertionPoint = document.createElement('content')
       insertionPoint.setAttribute('select', 'atom-overlay')
       @overlayManager = new OverlayManager(@props.hostElement)
-      @getDOMNode().appendChild(insertionPoint)
+      node.appendChild(insertionPoint)
     else
-      @overlayManager = new OverlayManager(@getDOMNode())
+      @overlayManager = new OverlayManager(node)
 
   componentDidUpdate: ->
     {visible, presenter} = @props
@@ -70,6 +74,8 @@ LinesComponent = React.createClass
     @updateLineNodes()
     @measureCharactersInNewLines() if visible and not @newState.scrollingVertically
 
+    @cursorsComponent.updateSync()
+
     @overlayManager?.render(@props)
 
     @oldState.indentGuidesVisible = @newState.indentGuidesVisible