From bef043a8ad7a9d87581f8b99d480df3f9b0001ac Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Fri, 17 Mar 2017 16:44:17 -0600
Subject: [PATCH] Refactor highlight flashing

---
 src/text-editor-component.js | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 7f8a97597..52688ab46 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -1956,26 +1956,22 @@ class HighlightComponent {
 
   performFlash () {
     const {flashClass, flashDuration} = this.props
+    if (!this.timeoutsByClassName) this.timeoutsByClassName = new Map()
 
-    const addAndRemoveFlashClass = () => {
+    // If a flash of this class is already in progress, clear it early and
+    // flash again on the next frame to ensure CSS transitions apply to the
+    // second flash.
+    if (this.timeoutsByClassName.has(flashClass)) {
+      window.clearTimeout(this.timeoutsByClassName.get(flashClass))
+      this.timeoutsByClassName.delete(flashClass)
+      this.element.classList.remove(flashClass)
+      requestAnimationFrame(() => this.performFlash())
+    } else {
       this.element.classList.add(flashClass)
-
-      if (!this.timeoutsByClassName) {
-        this.timeoutsByClassName = new Map()
-      } else if (this.timeoutsByClassName.has(flashClass)) {
-        window.clearTimeout(this.timeoutsByClassName.get(flashClass))
-      }
       this.timeoutsByClassName.set(flashClass, window.setTimeout(() => {
         this.element.classList.remove(flashClass)
       }, flashDuration))
     }
-
-    if (this.element.classList.contains(flashClass)) {
-      this.element.classList.remove(flashClass)
-      window.requestAnimationFrame(addAndRemoveFlashClass)
-    } else {
-      addAndRemoveFlashClass()
-    }
   }
 
   render () {