From a58af721f1a93a03712e727915d69f0a7608205b Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Tue, 11 Nov 2014 12:06:34 -0700 Subject: [PATCH 1/2] Assign highlight decoration React keys based on decoration id instead of class MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @benogle: I think this should be fine now that we assign id’s, right? Signed-off-by: Max Brunsfeld --- src/highlight-component.coffee | 2 +- src/highlights-component.coffee | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/highlight-component.coffee b/src/highlight-component.coffee index b33a41974..8035752dc 100644 --- a/src/highlight-component.coffee +++ b/src/highlight-component.coffee @@ -88,4 +88,4 @@ HighlightComponent = React.createClass regions shouldComponentUpdate: (newProps) -> - not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels') + not isEqualForProperties(newProps, @props, 'startPixelPosition', 'endPixelPosition', 'lineHeightInPixels', 'decoration') diff --git a/src/highlights-component.coffee b/src/highlights-component.coffee index 7020a93e4..8820830bd 100644 --- a/src/highlights-component.coffee +++ b/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 From 2de8046f995c6710bc43dfc331c99903bd209ad5 Mon Sep 17 00:00:00 2001 From: Nathan Sobo Date: Tue, 11 Nov 2014 12:11:12 -0700 Subject: [PATCH 2/2] Add deprecatedRegionClass option to highlight decorations This adds a class to each of the contained regions so we can make existing bundled packages backward-compatible with themes. Signed-off-by: Max Brunsfeld --- spec/text-editor-component-spec.coffee | 7 +++++++ src/highlight-component.coffee | 23 +++++++++++++++-------- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/spec/text-editor-component-spec.coffee b/spec/text-editor-component-spec.coffee index 030bba37d..f6cc8947c 100644 --- a/spec/text-editor-component-spec.coffee +++ b/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 -> diff --git a/src/highlight-component.coffee b/src/highlight-component.coffee index 8035752dc..ec8aebf7e 100644 --- a/src/highlight-component.coffee +++ b/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