Base font styling on the computed style of the editor element

Previously, font styling was always explicitly assigned via the config.
This commit is the first step in basing the font styling of the editor
on the styles assigned via CSS. This will allow the editor's
font-family, font-size, and line-height to be assigned via CSS just like
they are for any other element, which will make it easier to style mini
editors.

We still need to switch the font settings to adjust a global stylesheet
rather than updating inline styles on each editor individually.

src/editor-component.coffee

@@ -40,7 +40,7 @@ EditorComponent = React.createClass
   scrollSensitivity: 0.4
   heightAndWidthMeasurementRequested: false
   measureLineHeightAndDefaultCharWidthWhenShown: false
-  remeasureCharacterWidthsIfVisibleAfterNextUpdate: false
+  remeasureCharacterWidthsWhenShown: false
   inputEnabled: true
   scopedCharacterWidthsChangeCount: null
   domPollingInterval: 100
@@ -48,13 +48,12 @@ EditorComponent = React.createClass
   domPollingPaused: false
 
   render: ->
-    {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles, showLineNumbers, visible} = @state
+    {focused, showIndentGuide, showInvisibles, showLineNumbers, visible} = @state
     {editor, mini, cursorBlinkPeriod, cursorBlinkResumeDelay} = @props
     maxLineNumberDigits = editor.getLineCount().toString().length
     invisibles = if showInvisibles and not mini then @state.invisibles else {}
     hasSelection = editor.getSelection()? and !editor.getSelection().isEmpty()
-    style = {fontSize, fontFamily}
-    style.lineHeight = lineHeight unless mini
+    style = {}
 
     if @performedInitialMeasurement
       renderedRowRange = @getRenderedRowRange()
@@ -212,15 +211,15 @@ EditorComponent = React.createClass
 
     if @performedInitialMeasurement
       @measureScrollbars() if @measuringScrollbars
-      @measureLineHeightAndDefaultCharWidthIfNeeded(prevState)
-      @remeasureCharacterWidthsIfNeeded(prevState)
 
   performInitialMeasurement: ->
     @updatesPaused = true
-    @measureLineHeightAndDefaultCharWidth()
     @measureHeightAndWidth()
+    @sampleFontStyling()
     @sampleBackgroundColors()
     @measureScrollbars()
+    @measureLineHeightAndDefaultCharWidth() if @measureLineHeightAndDefaultCharWidthWhenShown
+    @remeasureCharacterWidths() if @remeasureCharacterWidthsWhenShown
     @props.editor.setVisible(true)
     @updatesPaused = false
     @performedInitialMeasurement = true
@@ -250,6 +249,9 @@ EditorComponent = React.createClass
         @updateRequestedWhilePaused = false
         @forceUpdate()
 
+  getTopmostDOMNode: ->
+    @props.parentView.element
+
   getRenderedRowRange: ->
     {editor, lineOverdrawMargin} = @props
     [visibleStartRow, visibleEndRow] = editor.getVisibleRowRange()
@@ -669,9 +671,9 @@ EditorComponent = React.createClass
 
   onStylesheetsChanged: (stylesheet) ->
     @refreshScrollbars() if @containsScrollbarSelector(stylesheet)
+    @sampleFontStyling()
     @sampleBackgroundColors()
-    @remeasureCharacterWidthsIfVisibleAfterNextUpdate = true
-    @requestUpdate() if @visible
+    @remeasureCharacterWidths()
 
   onScreenLinesChanged: (change) ->
     {editor} = @props
@@ -769,6 +771,7 @@ EditorComponent = React.createClass
     if @visible = @isVisible()
       if wasVisible
         @measureHeightAndWidth()
+        @sampleFontStyling()
         @sampleBackgroundColors()
       else
         @performInitialMeasurement()
@@ -811,6 +814,19 @@ EditorComponent = React.createClass
     clientWidth -= paddingLeft
     editor.setWidth(clientWidth) if clientWidth > 0
 
+  sampleFontStyling: ->
+    oldFontSize = @fontSize
+    oldFontFamily = @fontFamily
+    oldLineHeight = @lineHeight
+
+    {@fontSize, @fontFamily, @lineHeight} = getComputedStyle(@getTopmostDOMNode())
+
+    if @fontSize isnt oldFontSize or @fontFamily isnt oldFontFamily or @lineHeight isnt oldLineHeight
+      @measureLineHeightAndDefaultCharWidth()
+
+    if (@fontSize isnt oldFontSize or @fontFamily isnt oldFontFamily) and @performedInitialMeasurement
+      @remeasureCharacterWidths()
+
   sampleBackgroundColors: (suppressUpdate) ->
     {parentView} = @props
     {showLineNumbers} = @state
@@ -826,31 +842,19 @@ EditorComponent = React.createClass
         @gutterBackgroundColor = gutterBackgroundColor
         @requestUpdate() unless suppressUpdate
 
-  measureLineHeightAndDefaultCharWidthIfNeeded: (prevState) ->
-    if not isEqualForProperties(prevState, @state, 'lineHeight', 'fontSize', 'fontFamily')
-      if @visible
-        @measureLineHeightAndDefaultCharWidth()
-      else
-        @measureLineHeightAndDefaultCharWidthWhenShown = true
-    else if @measureLineHeightAndDefaultCharWidthWhenShown and @visible
-      @measureLineHeightAndDefaultCharWidthWhenShown = false
-      @measureLineHeightAndDefaultCharWidth()
-
   measureLineHeightAndDefaultCharWidth: ->
-    @refs.lines.measureLineHeightAndDefaultCharWidth()
-
-  remeasureCharacterWidthsIfNeeded: (prevState) ->
-    if not isEqualForProperties(prevState, @state, 'fontSize', 'fontFamily')
-      if @visible
-        @remeasureCharacterWidths()
-      else
-        @remeasureCharacterWidthsIfVisibleAfterNextUpdate = true
-    else if @remeasureCharacterWidthsIfVisibleAfterNextUpdate and @visible
-      @remeasureCharacterWidthsIfVisibleAfterNextUpdate = false
-      @remeasureCharacterWidths()
+    if @visible
+      @measureLineHeightAndDefaultCharWidthWhenShown = false
+      @refs.lines.measureLineHeightAndDefaultCharWidth()
+    else
+      @measureLineHeightAndDefaultCharWidthWhenShown = true
 
   remeasureCharacterWidths: ->
-    @refs.lines.remeasureCharacterWidths()
+    if @visible
+      @remeasureCharacterWidthsWhenShown = false
+      @refs.lines.remeasureCharacterWidths()
+    else
+      @remeasureCharacterWidthsWhenShown = true
 
   measureScrollbars: ->
     return unless @visible
@@ -911,19 +915,22 @@ EditorComponent = React.createClass
     null
 
   getFontSize: ->
-    @state.fontSize
+    parseInt(getComputedStyle(@getTopmostDOMNode()).fontSize)
 
   setFontSize: (fontSize) ->
-    @setState({fontSize})
+    @getTopmostDOMNode().style.fontSize = fontSize + 'px'
+    @sampleFontStyling()
 
   getFontFamily: ->
-    @state.fontFamily
+    getComputedStyle(@getTopmostDOMNode()).fontFamily
 
   setFontFamily: (fontFamily) ->
-    @setState({fontFamily})
+    @getTopmostDOMNode().style.fontFamily = fontFamily
+    @sampleFontStyling()
 
   setLineHeight: (lineHeight) ->
-    @setState({lineHeight})
+    @getTopmostDOMNode().style.lineHeight = lineHeight
+    @sampleFontStyling()
 
   setShowIndentGuide: (showIndentGuide) ->
     @setState({showIndentGuide})