How to make editor autoresizable

[utenma]

In the IEditorConstructionOptions has a property called automaticLayout, that enables autoresize as commented here https://stackoverflow.com/questions/49923334/how-to-make-monaco-editor-auto-fit-content-like-codemirror-auto-resize-mode

how can i pass this boolean property in react component? and will this override the default sizes passed in the monaco-react component?

[suren-atoyan]

It's already true. Check it here. But in any case, you can pass options property to the component with certain options. Check it here.

[utenma]

I see, thanks for your answer, i'll check what wrong with my code that the editor doesn't autoresize to fit code height

[suren-atoyan]

@saulpalv please let me know if you'll find something that we can close the issue. Thank you!

[KalebMatthews]

The editor will not resize after its initialization because the child elements are setting a static width based on the init.

Component:

<ControlledEditor
            width={"100%"}
            height={height}
            language={language}
            theme="dark"
            value={code}
            options={{
                automaticLayout: true,
            }}
            onChange={onChange}
        />

Rendered Html of monaco-react parent sections:

Cut off monaco editor display:

Please let me know if more information is needed.

[utenma]

@KalebMatthews thank you for your response, it makes sense now, i'll close the issue as found no solution on monaco, i changed to codemirror wich provides this feature out of the box

[KalebMatthews]

@saulpalv Can we keep this open for a chance that it might be resolved in this repo?

[suren-atoyan]

@saulpalv @KalebMatthews guys it is completely autosizeble. Please, create a reproducible snippet, so I can understand your particular case. For example, check here; move splitter to see how it's autosizeble.

Plus, we already support className and wrapperClassName props, so, you can modify styles.

[utenma]

@suren-atoyan hello suren, in your provided example the editor does indeed auto resize, but only the code view, not the monaco container, in other words it's resizing internally/virtually, that's why it has a vertical slider, i seek for autoresize for both the code view and the editor container so all the code is visible and without the slider, this behaviour option is built-in (or default) in editors like codemirror editor -> example and ace editor ->xample, try to add new lines on those examples, you'll get what i mean. Maybe monaco does not have an built in option to enable this behaviour, the container will retain it's fixed size once provided as @KalebMatthews commented .

[suren-atoyan]

@KalebMatthews, @saulpalv now I understand what you meant and also found the problem. Look at this example. We did such kind of thing manually while ago. But what is interesting is that it works only in old versions on monaco. In the 16th line, you can see that I use the previous version of monaco, you can change 0.19.0 to 0.20.0 (please update the page after that) to see how auto-resize is broken. I found some issues in the original library. So, they have some problems with automaticLayout option in the 0.20.0 version.

Now, I suggest keeping it open until the 0.21.0 release. After, I'll update the default version of monaco in this library, and if everything is okay, we will close it.

Thank you for your support guys.

[utenma]

@suren-atoyan i get the idea with your example and yes it's broken on monaco 0.20.0 as issued : Auto width editor Not Working in v0.20.0 #1878 automaticLayout strange behavior #1954 automaticLayout broken on master? #1855

shure a solution will come in 0.21.0

[suren-atoyan]

okay, we are on the same line. So, let's leave it open for a while, at least until the 0.21.0 version arrives, after that, I'll update the package and we will see what we have.

[MatthewCaseres]

There is a way to do this, This solution comes from an issue in monaco https://github.com/microsoft/monaco-editor/issues/794. https://codesandbox.io/s/empty-dust-h6z4y?file=/src/App.js

[arbel03]

I tried to update the package to use monaco-editor 0.21.2 and the issue still persists It doesn't seem to be the source :\

[Dreamacro]

https://codesandbox.io/s/monaco-editor-react-forked-im1gc

Working at Editor but not at DiffEditor.

[dio]

Sorry probably this is unrelated, but since it is "hardcoded" to true, can we override it to false and use a custom resize detector (https://github.com/microsoft/monaco-editor/issues/28#issuecomment-484445134)? Ref: https://github.com/microsoft/monaco-editor/issues/28#issuecomment-228523529.

[brycefranzen]

@Dreamacro

Working at Editor but not at DiffEditor.

I was able to get it to work on "DiffEditor" like so:

diffEditor.onDidUpdateDiff(() => {
  const originalHeight = originalEditor.getContentHeight();
  const modifiedHeight = modifiedEditor.getContentHeight();
  setHeight(
    Math.max(Math.min(600, Math.max(originalHeight, modifiedHeight)), 200)
  );
  diffEditor.layout();
});

This has a min-height of 200 and a max height of 600. You can play with the values of min/max if you'd like accordingly.

[Dreamacro]

@brycefranzen

In the new version, automaticLayout works well.

<DiffEditor language="json" options={{ automaticLayout: true }} />

[brycefranzen]

@Dreamacro automatic layout seems to be working for horizontal resizing, but does nothing for vertically resizing the editor to fit the content height. To auto-resize vertically, you have to calculate the height from the content and then set that height on a wrapping element as the editor auto-grows to the size of its parent.

[Jaryt]

The automaticLayout option doesn't seem to fix it for my solution. You can view my source here: https://github.com/CircleCI-Public/visual-config-editor/blob/main/src/components/panes/EditorPane.tsx

I am using the latest version of the monacoEditor. It seems like I might have to create a resize hook for this, but of course it'd be preferable for the monaco editor can handle its sizing itself.

Some notes: The component will grow and shrink vertically perfectly fine. It will also grow horizontally as expected. The width attribute on the div of class monaco-editor does not shrink.

Please let me know if there is anything I'm doing wrong here! :)

[nojaf]

@Jaryt were you ever able to solve this problem? I think I'm running into this problem as well.

[alswl]

@brycefranzen

In the new version, automaticLayout works well.

<DiffEditor language="json" options={{ automaticLayout: true }} />

You are my life saver.