react-ace in resizable container

I am trying to use react-ace inside a div that can be resized by the user at runtime (to be precise, the size of the div is controlled by a flexbox). By default, the ACE editor requires fixed with and height values in pixels.

By using react-measure and some div nesting, I was able to get the ACE Editor to resize its bounds correctly, at least visually. However, the controls inside the editor (e.g. the width of the line wrapping, the scroll bar, …) behave weirdly, because they did not get properly notified about the change in editor dimensions.

The “vanilla” ACE editor has a resize() method to fix just that problem (see this fiddle).

My request is: please either forward resize() in react-ace, or call resize() internally on componentWillReceiveProps in case that width and/or height has changed.

EDIT: I had a quick look at the source code. You actually do this:

if(nextProps.height !== this.props.height){
  this.editor.resize();
}

… but what about changes in width? Shouldn’t it be this:

if(nextProps.height !== this.props.height || nextProps.width !== this.props.width){
  this.editor.resize();
}

[milahu]

here is a pure css solution, using CSS resize: both on the editor div

<AceEditor
  onLoad={editorInstance => {
    editorInstance.container.style.resize = "both";
    // mouseup = css resize end
    document.addEventListener("mouseup", e => (
      editorInstance.resize()
    ));
  }}
/>

downside: on resize-larger the editor content is hidden

here is a demo fiddle with vanilla js

[xgaia]

Anyone figure out how to automatically resize the container based on user-control?

I succeed by using react-resize-detector

import AceEditor from 'react-ace'
import ReactResizeDetector from 'react-resize-detector'

export default class myComponent extends Component {

  constructor (props) {
    super(props)
    this.state = {
      editorHeight: 400,
      editorWidth: "auto"
    }
    this.onResize = this.onResize.bind(this)
  }


  onResize (w, h) {
    this.setState({
      editorHeight: h,
      editorWidth: w
    })
  }

  render () {
    <div className="resizable">
     <ReactResizeDetector handleWidth handleHeight onResize={this.onResize} />
     <AceEditor
       height={this.state.editorHeight}
       width={this.state.editorWidth}
     />
    </div>
  }
}

CSS of resizable class

.resizable {
    overflow: auto;
    resize: both;
    height: 400px;
    width: auto;
}