Implement a fast path for cursor blink to minimize battery impact

src/text-editor-component.js

@@ -60,6 +60,8 @@ class TextEditorComponent {
     this.updateScheduled = false
     this.measurements = null
     this.visible = false
+    this.cursorsBlinking = false
+    this.nextUpdateOnlyBlinksCursors = null
     this.horizontalPositionsToMeasure = new Map() // Keys are rows with positions we want to measure, values are arrays of columns to measure
     this.horizontalPixelPositionsByScreenLineId = new Map() // Values are maps from column to horiontal pixel positions
     this.lineNodesByScreenLineId = new Map()
@@ -119,9 +121,12 @@ class TextEditorComponent {
     this.scheduleUpdate()
   }
 
-  scheduleUpdate () {
+  scheduleUpdate (nextUpdateOnlyBlinksCursors = false) {
     if (!this.visible) return
 
+    this.nextUpdateOnlyBlinksCursors =
+      this.nextUpdateOnlyBlinksCursors !== false && nextUpdateOnlyBlinksCursors
+
     if (this.updatedSynchronously) {
       this.updateSync()
     } else if (!this.updateScheduled) {
@@ -136,6 +141,13 @@ class TextEditorComponent {
     this.updateScheduled = false
     if (this.resolveNextUpdatePromise) this.resolveNextUpdatePromise()
 
+    const onlyBlinkingCursors = this.nextUpdateOnlyBlinksCursors
+    this.nextUpdateOnlyBlinksCursors = null
+    if (onlyBlinkingCursors) {
+      this.updateCursorBlinkSync()
+      return
+    }
+
     this.measuredContent = false
     this.updateSyncBeforeMeasuringContent()
     if (useScheduler === true) {
@@ -200,6 +212,12 @@ class TextEditorComponent {
     }
   }
 
+  updateCursorBlinkSync () {
+    const className = this.getCursorsClassName()
+    this.refs.cursors.className = className
+    this.cursorsVnode.props.className = className
+  }
+
   render () {
     const {model} = this.props
     const style = {}
@@ -460,7 +478,7 @@ class TextEditorComponent {
 
   renderCursorsAndInput () {
     if (this.measuredContent) {
-      const className = this.cursorsVisible ? 'cursors' : 'cursors blink-off'
+      const className = this.getCursorsClassName()
       const cursorHeight = this.getLineHeight() + 'px'
 
       const children = [this.renderHiddenInput()]
@@ -493,6 +511,10 @@ class TextEditorComponent {
     return this.cursorsVnode
   }
 
+  getCursorsClassName () {
+    return this.cursorsVisible ? 'cursors' : 'cursors blink-off'
+  }
+
   renderPlaceholderText () {
     if (!this.measuredContent) {
       this.placeholderTextVnode = null
@@ -1424,10 +1446,10 @@ class TextEditorComponent {
     if (!this.cursorsBlinking) {
       this.cursorBlinkIntervalHandle = window.setInterval(() => {
         this.cursorsVisible = !this.cursorsVisible
-        this.scheduleUpdate()
+        this.scheduleUpdate(true)
       }, CURSOR_BLINK_PERIOD / 2)
       this.cursorsBlinking = true
-      this.scheduleUpdate()
+      this.scheduleUpdate(true)
     }
   }