Merge pull request #4152 from atom/ns-highlight-region-classes

Add private API for adding classes to highlight regions for backward compatibility

spec/text-editor-component-spec.coffee

@@ -1131,6 +1131,13 @@ describe "TextEditorComponent", ->
       regions = componentNode.querySelectorAll('.test-highlight .region')
       expect(regions.length).toBe 2
 
+    it "renders classes on the regions directly if 'deprecatedRegionClass' option is defined", ->
+      decoration = editor.decorateMarker(marker, type: 'highlight', class: 'test-highlight', deprecatedRegionClass: 'test-highlight-region')
+      nextAnimationFrame()
+
+      regions = componentNode.querySelectorAll('.test-highlight .region.test-highlight-region')
+      expect(regions.length).toBe 2
+
     describe "when flashing a decoration via Decoration::flash()", ->
       highlightNode = null
       beforeEach ->

src/highlight-component.coffee

@@ -14,9 +14,9 @@ HighlightComponent = React.createClass
 
     div {className},
       if endPixelPosition.top is startPixelPosition.top
-        @renderSingleLineRegions()
+        @renderSingleLineRegions(decoration.deprecatedRegionClass)
       else
-        @renderMultiLineRegions()
+        @renderMultiLineRegions(decoration.deprecatedRegionClass)
 
   componentDidMount: ->
     {editor, decoration} = @props
@@ -41,25 +41,32 @@ HighlightComponent = React.createClass
       removeFlashClass = -> node.classList.remove(flash.class)
       @flashTimeoutId = setTimeout(removeFlashClass, flash.duration)
 
-  renderSingleLineRegions: ->
+  renderSingleLineRegions: (regionClass) ->
     {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
 
+    className = 'region'
+    className += " #{regionClass}" if regionClass?
+
     [
-      div className: 'region', key: 0, style:
+      div className: className, key: 0, style:
         top: startPixelPosition.top
         height: lineHeightInPixels
         left: startPixelPosition.left
         width: endPixelPosition.left - startPixelPosition.left
     ]
 
-  renderMultiLineRegions: ->
+  renderMultiLineRegions: (regionClass) ->
     {startPixelPosition, endPixelPosition, lineHeightInPixels} = @props
+
+    className = 'region'
+    className += " #{regionClass}" if regionClass?
+
     regions = []
     index = 0
 
     # First row, extending from selection start to the right side of screen
     regions.push(
-      div className: 'region', key: index++, style:
+      div className: className, key: index++, style:
         top: startPixelPosition.top
         left: startPixelPosition.left
         height: lineHeightInPixels
@@ -69,7 +76,7 @@ HighlightComponent = React.createClass
     # Middle rows, extending from left side to right side of screen
     if endPixelPosition.top - startPixelPosition.top > lineHeightInPixels
       regions.push(
-        div className: 'region', key: index++, style:
+        div className: className, key: index++, style:
           top: startPixelPosition.top + lineHeightInPixels
           height: endPixelPosition.top - startPixelPosition.top - lineHeightInPixels
           left: 0
@@ -78,7 +85,7 @@ HighlightComponent = React.createClass
 
     # Last row, extending from left side of screen to selection end
     regions.push(
-      div className: 'region', key: index, style:
+      div className: className, key: index, style:
         top: endPixelPosition.top
         height: lineHeightInPixels
         left: 0
@@ -88,4 +95,4 @@ HighlightComponent = React.createClass
     regions
 
   shouldComponentUpdate: (newProps) ->
-    not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels')
+    not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels', 'decoration')

src/highlights-component.coffee

@@ -17,7 +17,7 @@ HighlightsComponent = React.createClass
     highlightComponents = []
     for markerId, {startPixelPosition, endPixelPosition, decorations} of highlightDecorations
       for decoration in decorations
-        highlightComponents.push(HighlightComponent({editor, key: "#{markerId}-#{decoration.class}", startPixelPosition, endPixelPosition, decoration, lineHeightInPixels}))
+        highlightComponents.push(HighlightComponent({editor, key: "#{markerId}-#{decoration.id}", startPixelPosition, endPixelPosition, decoration, lineHeightInPixels}))
 
     highlightComponents