Merge pull request #2852 from atom/ns-react-remeasure-characters-on-stylesheet-change

Re-measure character widths when stylesheets change

spec/editor-component-spec.coffee

@@ -587,6 +587,31 @@ describe "EditorComponent", ->
       expect(cursorRect.left).toBe rangeRect.left
       expect(cursorRect.width).toBe rangeRect.width
 
+    it "positions cursors correctly after character widths are changed via a stylesheet change", ->
+      atom.config.set('editor.fontFamily', 'sans-serif')
+      editor.setCursorScreenPosition([0, 16])
+      runSetImmediateCallbacks()
+
+      atom.themes.applyStylesheet 'test', """
+        .function.js {
+          font-weight: bold;
+        }
+      """
+      runSetImmediateCallbacks() # re-measure characters once for a synchronous set of stylesheet changes
+      runSetImmediateCallbacks() # update based on new measurements
+
+      cursor = node.querySelector('.cursor')
+      cursorRect = cursor.getBoundingClientRect()
+
+      cursorLocationTextNode = component.lineNodeForScreenRow(0).querySelector('.storage.type.function.js').firstChild
+      range = document.createRange()
+      range.setStart(cursorLocationTextNode, 0)
+      range.setEnd(cursorLocationTextNode, 1)
+      rangeRect = range.getBoundingClientRect()
+
+      expect(cursorRect.left).toBe rangeRect.left
+      expect(cursorRect.width).toBe rangeRect.width
+
     it "sets the cursor to the default character width at the end of a line", ->
       editor.setCursorScreenPosition([0, Infinity])
       runSetImmediateCallbacks()

src/editor-component.coffee

@@ -28,6 +28,7 @@ EditorComponent = React.createClass
   updateRequested: false
   updatesPaused: false
   updateRequestedWhilePaused: false
+  characterWidthRemeasurementRequested: false
   cursorsMoved: false
   selectionChanged: false
   selectionAdded: false
@@ -653,6 +654,7 @@ EditorComponent = React.createClass
 
   onStylesheetsChanged: (stylesheet) ->
     @refreshScrollbars() if @containsScrollbarSelector(stylesheet)
+    @requestCharacterWidthRemeasurement()
 
   onScreenLinesChanged: (change) ->
     {editor} = @props
@@ -793,6 +795,13 @@ EditorComponent = React.createClass
     else if @remeasureCharacterWidthsWhenShown and @state.visible and not prevState.visible
       @remeasureCharacterWidths()
 
+  requestCharacterWidthRemeasurement: ->
+    unless @characterWidthRemeasurementRequested
+      @characterWidthRemeasurementRequested = true
+      setImmediate =>
+        @characterWidthRemeasurementRequested = false
+        @remeasureCharacterWidths()
+
   remeasureCharacterWidths: ->
     @remeasureCharacterWidthsWhenShown = false
     @refs.lines.remeasureCharacterWidths()