Sync cursor animations when cursors are added

src/cursors-component.coffee

@@ -1,6 +1,6 @@
 React = require 'react'
 {div} = require 'reactionary'
-{debounce} = require 'underscore-plus'
+{debounce, toArray} = require 'underscore-plus'
 SubscriberMixin = require './subscriber-mixin'
 CursorComponent = require './cursor-component'
 
@@ -37,6 +37,9 @@ CursorsComponent = React.createClass
   componentWillUpdate: ({cursorsMoved}) ->
     @pauseCursorBlinking() if cursorsMoved
 
+  componentDidUpdate: ->
+    @syncCursorAnimations() if @props.selectionAdded
+
   startBlinkingCursors: ->
     @setState(blinking: true) if @isMounted()
 
@@ -46,3 +49,9 @@ CursorsComponent = React.createClass
     @state.blinking = false
     @startBlinkingCursorsAfterDelay ?= debounce(@startBlinkingCursors, @props.cursorBlinkResumeDelay)
     @startBlinkingCursorsAfterDelay()
+
+  syncCursorAnimations: ->
+    node = @getDOMNode()
+    cursorNodes = toArray(node.children)
+    node.removeChild(cursorNode) for cursorNode in cursorNodes
+    node.appendChild(cursorNode) for cursorNode in cursorNodes

src/editor-component.coffee

@@ -21,6 +21,7 @@ EditorComponent = React.createClass
   updateRequested: false
   cursorsMoved: false
   selectionChanged: false
+  selectionAdded: false
   scrollingVertically: false
   gutterWidth: 0
   refreshingScrollbars: false
@@ -59,7 +60,7 @@ EditorComponent = React.createClass
         ref: 'scrollView', editor, fontSize, fontFamily, showIndentGuide,
         lineHeight: lineHeightInPixels, visibleRowRange, @pendingChanges,
         scrollTop, scrollLeft, @scrollingVertically, @cursorsMoved, @selectionChanged,
-        cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred
+        @selectionAdded, cursorBlinkResumeDelay, @onInputFocused, @onInputBlurred
       }
 
       ScrollbarComponent
@@ -125,6 +126,7 @@ EditorComponent = React.createClass
     @pendingChanges.length = 0
     @cursorsMoved = false
     @selectionChanged = false
+    @selectionAdded = false
     @refreshingScrollbars = false
     @measureScrollbars() if @measuringScrollbars
     @props.parentView.trigger 'editor:display-updated'
@@ -135,7 +137,8 @@ EditorComponent = React.createClass
     @subscribe editor, 'batched-updates-ended', @onBatchedUpdatesEnded
     @subscribe editor, 'screen-lines-changed', @onScreenLinesChanged
     @subscribe editor, 'cursors-moved', @onCursorsMoved
-    @subscribe editor, 'selection-added selection-removed selection-screen-range-changed', @onSelectionChanged
+    @subscribe editor, 'selection-removed selection-screen-range-changed', @onSelectionChanged
+    @subscribe editor, 'selection-added', @onSelectionAdded
     @subscribe editor.$scrollTop.changes, @onScrollTopChanged
     @subscribe editor.$scrollLeft.changes, @requestUpdate
     @subscribe editor.$height.changes, @requestUpdate
@@ -381,6 +384,13 @@ EditorComponent = React.createClass
       @selectionChanged = true
       @requestUpdate()
 
+  onSelectionAdded: (selection) ->
+    {editor} = @props
+    if editor.selectionIntersectsVisibleRowRange(selection)
+      @selectionChanged = true
+      @selectionAdded = true
+      @requestUpdate()
+
   onScrollTopChanged: ->
     @scrollingVertically = true
     @requestUpdate()

src/editor-scroll-view-component.coffee

@@ -17,7 +17,7 @@ EditorScrollViewComponent = React.createClass
 
   render: ->
     {editor, fontSize, fontFamily, lineHeight, showIndentGuide} = @props
-    {visibleRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically, selectionChanged} = @props
+    {visibleRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically, selectionChanged, selectionAdded} = @props
     {cursorBlinkResumeDelay, cursorsMoved, onInputFocused, onInputBlurred} = @props
 
     if @isMounted()
@@ -33,7 +33,7 @@ EditorScrollViewComponent = React.createClass
         onFocus: onInputFocused
         onBlur: onInputBlurred
 
-      CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, cursorBlinkResumeDelay})
+      CursorsComponent({editor, scrollTop, scrollLeft, cursorsMoved, selectionAdded, cursorBlinkResumeDelay})
       LinesComponent {
         ref: 'lines', editor, fontSize, fontFamily, lineHeight, showIndentGuide,
         visibleRowRange, pendingChanges, scrollTop, scrollLeft, scrollingVertically,