From 2ab5fa405cac569109fdf1e6f8562873a04eae57 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 15 Oct 2014 14:46:52 -0600
Subject: [PATCH] Apply mini and is-focused class to both editor host element
 and root

This preserves existing theming behavior
---
 src/text-editor-component.coffee | 28 +++++++++++++++-------------
 src/text-editor-element.coffee   | 11 ++++++-----
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/src/text-editor-component.coffee b/src/text-editor-component.coffee
index fdda54f03..d43e499b3 100644
--- a/src/text-editor-component.coffee
+++ b/src/text-editor-component.coffee
@@ -193,9 +193,9 @@ TextEditorComponent = React.createClass
     @checkForVisibilityChange()
 
   componentWillUnmount: ->
-    {editor, parentView} = @props
+    {editor, hostElement} = @props
 
-    parentView.__spacePenView.trigger 'editor:will-be-removed', [parentView.__spacePenView]
+    hostElement.__spacePenView.trigger 'editor:will-be-removed', [hostElement.__spacePenView]
     @unsubscribe()
     @scopedConfigSubscriptions.dispose()
     window.removeEventListener 'resize', @requestHeightAndWidthMeasurement
@@ -215,9 +215,9 @@ TextEditorComponent = React.createClass
     if @props.editor.isAlive()
       @updateParentViewFocusedClassIfNeeded(prevState)
       @updateParentViewMiniClassIfNeeded(prevState)
-      @props.parentView.__spacePenView.trigger 'cursor:moved' if cursorMoved
-      @props.parentView.__spacePenView.trigger 'selection:changed' if selectionChanged
-      @props.parentView.__spacePenView.trigger 'editor:display-updated'
+      @props.hostElement.__spacePenView.trigger 'cursor:moved' if cursorMoved
+      @props.hostElement.__spacePenView.trigger 'selection:changed' if selectionChanged
+      @props.hostElement.__spacePenView.trigger 'editor:display-updated'
 
   becameVisible: ->
     @updatesPaused = true
@@ -261,7 +261,7 @@ TextEditorComponent = React.createClass
         @forceUpdate()
 
   getTopmostDOMNode: ->
-    @props.parentView
+    @props.hostElement
 
   getRenderedRowRange: ->
     {editor, lineOverdrawMargin} = @props
@@ -772,10 +772,10 @@ TextEditorComponent = React.createClass
   measureHeightAndWidth: ->
     return unless @isMounted()
 
-    {editor, parentView} = @props
+    {editor, hostElement} = @props
     scrollViewNode = @refs.scrollView.getDOMNode()
-    {position} = getComputedStyle(parentView)
-    {height} = parentView.style
+    {position} = getComputedStyle(hostElement)
+    {height} = hostElement.style
 
     if position is 'absolute' or height
       if @autoHeight
@@ -807,9 +807,9 @@ TextEditorComponent = React.createClass
       @remeasureCharacterWidths()
 
   sampleBackgroundColors: (suppressUpdate) ->
-    {parentView} = @props
+    {hostElement} = @props
     {showLineNumbers} = @state
-    {backgroundColor} = getComputedStyle(parentView)
+    {backgroundColor} = getComputedStyle(hostElement)
 
     if backgroundColor isnt @backgroundColor
       @backgroundColor = backgroundColor
@@ -978,11 +978,13 @@ TextEditorComponent = React.createClass
 
   updateParentViewFocusedClassIfNeeded: (prevState) ->
     if prevState.focused isnt @state.focused
-      @props.parentView.classList.toggle('is-focused', @state.focused)
+      @props.hostElement.classList.toggle('is-focused', @state.focused)
+      @props.rootElement.classList.toggle('is-focused', @state.focused)
 
   updateParentViewMiniClassIfNeeded: (prevProps) ->
     if prevProps.mini isnt @props.mini
-      @props.parentView.classList.toggle('mini', @props.mini)
+      @props.hostElement.classList.toggle('mini', @props.mini)
+      @props.rootElement.classList.toggle('mini', @props.mini)
 
   runScrollBenchmark: ->
     unless process.env.NODE_ENV is 'production'
diff --git a/src/text-editor-element.coffee b/src/text-editor-element.coffee
index b31084693..d91345eee 100644
--- a/src/text-editor-element.coffee
+++ b/src/text-editor-element.coffee
@@ -31,9 +31,9 @@ class TextEditorElement extends HTMLElement
     stylesElement.initialize()
     @shadowRoot.appendChild(stylesElement)
 
-    @root = document.createElement('div')
-    @root.classList.add('editor', 'editor-colors')
-    @shadowRoot.appendChild(@root)
+    @rootElement = document.createElement('div')
+    @rootElement.classList.add('editor', 'editor-colors')
+    @shadowRoot.appendChild(@rootElement)
 
   createSpacePenShim: ->
     TextEditorView ?= require './text-editor-view'
@@ -74,12 +74,13 @@ class TextEditorElement extends HTMLElement
 
   mountComponent: ->
     @componentDescriptor ?= TextEditorComponent(
-      parentView: this
+      hostElement: this
+      rootElement: @rootElement
       editor: @model
       mini: @model.mini
       lineOverdrawMargin: @lineOverdrawMargin
     )
-    @component = React.renderComponent(@componentDescriptor, @root)
+    @component = React.renderComponent(@componentDescriptor, @rootElement)
 
   unmountComponent: ->
     return unless @component?.isMounted()