FR: Allow editor creation to specify a height/width to use for initial layout.

[rchiodo]

I'm attempting to use the monaco editor in a Jupyter like UI. Something that ends up looking like so:

The problem I'm having is that startup of the different editor instances take 500ms a piece. This slows opening my overall webview:

Would it be possible to add an option to the editorCreationOptions to allow for a hardcoded width/height? Right now it looks like the domParent is used and its 'clientHeight' and 'clientWidth' properties are queried. Those properties are the part that takes so long.

However all of the editors have the same clientWidth/Height. If I could just measure one and pass it in, I believe that would solve the problem.

[rebornix]

@rchiodo thanks for reporting the issue. The measurements are used to determine the size of the editor and how components should be positioned (for example scrollbar). But it seems that in your screenshot, every editor has the same width but different heights, passing in same clientWidth/Height won't work in this case.

Meanwhile the measurement triggers an enforced relayout as the height of each editor is actually not determined until they are rendered, which will affect the size of its container DOM nodes. If you already know final size of the editor by some calculation, it should work properly by setting width; height; on those containers to avoid reflow, right?

[rchiodo]

I tried setting the width/height explicitly on the containers and it was faster, but still the long tail was the creation of each editor.

The width could be a constant, and I can compute the editor height given the number of lines (although maybe not with word wrapping).

Ideally the editor wouldn't read the parent DOM element clientHeight/clientWidth at all and I could pass in width or height and it would then adjust itself to fit. Would that be possible?

[mofux]

A somewhat more radical approach could be to render everything inside a single editor. Have a look at how to create zones and decorations (for your output), you might just get away with that:
https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-mouse-events

[rchiodo]

@mofux that sounds very promising. Didn't realize the monaco Editor would support something that VS code doesn't.

[mofux]

@rchiodo It's a pretty powerful feature. The peek definition feature (code lens) of the monaco editor (and vscode) uses zones as well. Have a look into their code, I found it very helpful:
https://github.com/microsoft/vscode/blob/63526965e223417fa872c5cbd61e3aeb4ae93648/src/vs/editor/contrib/codelens/codelensWidget.ts

[rchiodo]

Ideally I'd be able to use multiple editors though. Reworking our layout to be inside of an editor instead of having editor's inside of it is going to be challenging.

[rebornix]

@rchiodo sorry for coming back late. I'm still interested why the reflow takes so long the in screenshot you posted above as in the Interactive Playground in VS Code, it's pretty fast even if we have 11 monaco editors there. If we didn't figure that out, you need to calculate dimensions yourself every time when the window resizes and run layout with the desired dimensions instead of letting Monaco do the calculation itself.

[rebornix]

I was also thinking about how to avoid the reflow. We can probably

• Create a DOM node
• Create a monaco editor and use above DOM node as container. Checking clientWidth won't trigger reflow as it's not in the DOM tree yet
• Add the DOM node to the DOM tree
• Call editor.layout({ width: 400, height: 200 });

[rchiodo]

Thanks @rebornix, we'll give the non attached parent a try to see if that can work. Good idea :)

[rchiodo]

Seems like using a temporary DOM node has fixed the layout problem! Thanks again @rebornix. We were already resizing the editors based on resizing the webView, so I just made another to call layout.

[rchiodo]

Here's the change in case anybody is curious:
https://github.com/microsoft/vscode-python/blob/c0cbd10d9fcf3219d13f8751e944313ccc04222e/src/datascience-ui/react-common/monacoEditor.tsx#L93

[alexdima]

This will be supported with the upcoming versions via a ctor option called dimension, e.g.

monaco.editor.create({ ... dimension: { width: 300, height: 200} ... });