diff --git a/spec/editor-component-spec.coffee b/spec/editor-component-spec.coffee index 2c2f8ed16..d81d114d7 100644 --- a/spec/editor-component-spec.coffee +++ b/spec/editor-component-spec.coffee @@ -61,8 +61,6 @@ describe "EditorComponent", -> verticalScrollbarNode = componentNode.querySelector('.vertical-scrollbar') horizontalScrollbarNode = componentNode.querySelector('.horizontal-scrollbar') - wrapperNode.style.height = editor.getLineCount() * lineHeightInPixels + 'px' - wrapperNode.style.width = '1000px' component.measureScrollView() runSetImmediateCallbacks() @@ -1920,7 +1918,7 @@ describe "EditorComponent", -> it "updates the wrap location when the editor is resized", -> newHeight = 4 * editor.getLineHeightInPixels() + "px" - expect(newHeight).toBeLessThan wrapperNode.style.height + expect(parseInt(newHeight)).toBeLessThan wrapperNode.offsetHeight wrapperNode.style.height = newHeight advanceClock(component.scrollViewMeasurementInterval) @@ -1991,6 +1989,18 @@ describe "EditorComponent", -> runSetImmediateCallbacks() expect(lineNumberHasClass(4, 'cursor-line-no-selection')).toBe false + describe "height", -> + describe "when the wrapper view has an explicit height", -> + it "does not assign a height on the component node", -> + wrapperNode.style.height = '200px' + component.measureScrollView() + expect(componentNode.style.height).toBe '' + + describe "when the wrapper view does not have an explicit height", -> + it "assigns a height on the component node based on the editor's content", -> + expect(wrapperNode.style.height).toBe '' + expect(componentNode.style.height).toBe editor.getScreenLineCount() * lineHeightInPixels + 'px' + describe "when the 'mini' property is true", -> beforeEach -> component.setProps(mini: true) diff --git a/src/editor-component.coffee b/src/editor-component.coffee index 59d969c3a..1a15e553a 100644 --- a/src/editor-component.coffee +++ b/src/editor-component.coffee @@ -47,6 +47,7 @@ EditorComponent = React.createClass scrollViewMeasurementInterval: 100 scopedCharacterWidthsChangeCount: null scrollViewMeasurementPaused: false + autoHeight: false render: -> {focused, fontSize, lineHeight, fontFamily, showIndentGuide, showInvisibles, showLineNumbers, visible} = @state @@ -54,6 +55,7 @@ EditorComponent = React.createClass maxLineNumberDigits = editor.getLineCount().toString().length invisibles = if showInvisibles then @state.invisibles else {} hasSelection = editor.getSelection()? and !editor.getSelection().isEmpty() + style = {fontSize, lineHeight, fontFamily} if @isMounted() renderedRowRange = @getRenderedRowRange() @@ -80,12 +82,13 @@ EditorComponent = React.createClass hiddenInputStyle.WebkitTransform = 'translateZ(0)' if @useHardwareAcceleration if @mouseWheelScreenRow? and not (renderedStartRow <= @mouseWheelScreenRow < renderedEndRow) mouseWheelScreenRow = @mouseWheelScreenRow + style.height = scrollViewHeight if @autoHeight className = 'editor-contents editor-colors' className += ' is-focused' if focused className += ' has-selection' if hasSelection - div className: className, style: {fontSize, lineHeight, fontFamily}, tabIndex: -1, + div {className, style, tabIndex: -1}, if not mini and showLineNumbers GutterComponent { ref: 'gutter', onMouseDown: @onGutterMouseDown, onWidthChanged: @onGutterWidthChanged, @@ -766,10 +769,15 @@ EditorComponent = React.createClass {height} = parentNode.style if position is 'absolute' or height + if @autoHeight + @autoHeight = false + @forceUpdate() + clientHeight = scrollViewNode.clientHeight editor.setHeight(clientHeight) if clientHeight > 0 else editor.setHeight(null) + @autoHeight = true clientWidth = scrollViewNode.clientWidth paddingLeft = parseInt(getComputedStyle(scrollViewNode).paddingLeft)