From 927648d318b17d6aa0e163be289d59968805df73 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Fri, 17 Mar 2017 21:31:34 -0600
Subject: [PATCH] Use marker id as highlight key

This keeps highlight elements in stable positions on the DOM, which
ensures that CSS transitions don't appear in the wrong spot.
---
 src/text-editor-component.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/text-editor-component.js b/src/text-editor-component.js
index 52688ab46..5e75a09ee 100644
--- a/src/text-editor-component.js
+++ b/src/text-editor-component.js
@@ -528,7 +528,7 @@ class TextEditorComponent {
           this.addLineDecorationToRender(type, decoration, screenRange, reversed)
           break
         case 'highlight':
-          this.addHighlightDecorationToMeasure(decoration, screenRange)
+          this.addHighlightDecorationToMeasure(decoration, screenRange, marker.id)
           break
         case 'cursor':
           this.addCursorDecorationToMeasure(marker, screenRange, reversed)
@@ -572,7 +572,7 @@ class TextEditorComponent {
     }
   }
 
-  addHighlightDecorationToMeasure(decoration, screenRange) {
+  addHighlightDecorationToMeasure(decoration, screenRange, key) {
     screenRange = constrainRangeToRows(screenRange, this.getRenderedStartRow(), this.getRenderedEndRow())
     if (screenRange.isEmpty()) return
 
@@ -594,7 +594,7 @@ class TextEditorComponent {
 
       tileHighlights.push({
         screenRange: screenRangeInTile,
-        className, flashRequested, flashClass, flashDuration
+        key, className, flashRequested, flashClass, flashDuration
       })
 
       this.requestHorizontalMeasurement(screenRangeInTile.start.row, screenRangeInTile.start.column)
@@ -1800,7 +1800,7 @@ class LinesTileComponent {
           height: height + 'px',
           width: width + 'px'
         },
-      },  children
+      }, children
     )
   }