component written with in the Resizable is not getting displayed until I change the size

Question

AceEditor is not getting displayed unless and until I don't change the size of the component(Resizable)

If I add any other HTML element like

Is there any way to make Ace editor resizable without any library.

<Resizable
    defaultSize={{
        width: 'auto',
        height: 'auto',
    }}
    className="resizable-component"
>
    <AceEditor
        width="auto"
        height="100%"
        mode="html"
        theme="monokai"
        readOnly={false}
        focus={autofocus}
        onBlur={onBlur && (event => onBlur(id, event.target.value))}
        onFocus={onFocus && (event => onFocus(id, event.target.value))}
        onChange={this._onChange}
        wrapEnabled={true}
        showPrintMargin={true}
        maxLines={40}
        minLines={8}
        highlightActiveLine={true}
        setOptions={{
            enableBasicAutocompletion: true,
            enableLiveAutocompletion: true,
            enableSnippets: false,
            showLineNumbers: true,
            tabSize: 2,
        }}
    />
</Resizable>

Extra Question: How can I get the max line to depend on the window size.

Version:

"re-resizable": "6.2.0" "react-ace": "8.0.0"

score 0 · Accepted Answer · answered Feb 26 '20 at 09:04

You need to call editor.resize when the size of editor is changed https://codesandbox.io/s/festive-wildflower-8trs0

import React from "react";
import { render } from "react-dom";
import { Resizable } from "re-resizable";

import "ace-builds";

import AceEditor from "react-ace";
//import "ace-builds/webpack-resolver"

const style = {
  border: "solid 1px #ddd",
  background: "#f0f0f0"
};

const App = () => {
  var editorComponent;
  return (
    <Resizable
      style={style}
      defaultSize={{
        width: "auto",
        height: 200
      }}
      onResizeStop={() => {
        if (editorComponent) editorComponent.editor.resize();
      }}
    >
      <AceEditor
        ref={el => (editorComponent = el)}
        width="100%"
        height="100%"
        readOnly={false}
        wrapEnabled={true}
        showPrintMargin={true}
        highlightActiveLine={true}
        setOptions={{
          enableBasicAutocompletion: true,
          enableLiveAutocompletion: true,
          enableSnippets: false,
          showLineNumbers: true,
          tabSize: 2
        }}
      />
    </Resizable>
  );
};

render(<App />, document.getElementById("root"));

the point of max line option is to set size based on text inside the editor, if you want editor size to depend on the window size, set use height

component written with in the Resizable is not getting displayed until I change the size

1 Answers1