How to properly dispose the editor after creating with initializeMonacoService?

[chiaolinghong]

Hi, I am using the provided demo project in this repository and running into the error of Error: Services are already initialized at checkServicesNotInitialized... when toggling between routes on a single-page application. In the demo, the editor.ts file creates a modelRef and uses monaco.editor.create(...) which then has access to editor.dispose() and modelRef.dispose()
The demo then passes the openNewCodeEditor into ...getViewsServiceOverride(openNewCodeEditor, undefined) as the openEditorFallback option. Maybe I am not undersatnding how this works, but on my copy of the demo example, it does not seem to trigger the fallback? If IUUC, there must be a way to tell initializeMonacoService to use the editor with the modelRef instead, but I can't seem to make it work with the demo files.

How can I properly dispose my editor when creating it using initializeMonacoService? Any direction/guidance would be much appreciated. Thank you.

[CGNonofr]

Hello, ok there are many things here

Hi, I am using the provided demo project in this repository and running into the error of Error: Services are already initialized at checkServicesNotInitialized... when toggling between routes on a single-page application.

initializeMonacoService can only be called once. If you want to re-initialize it with other parameters, you need to refresh the page first

The demo then passes the openNewCodeEditor into ...getViewsServiceOverride(openNewCodeEditor, undefined) as the openEditorFallback option. Maybe I am not undersatnding how this works, but on my copy of the demo example, it does not seem to trigger the fallback?

When using the view service override, the fallback is only used when the EditorService fails to open the editor for some reasons... It's not really expected to be called in a normal use-case

If IUUC, there must be a way to tell initializeMonacoService to use the editor with the modelRef instead, but I can't seem to make it work with the demo files.

I'm not sure to understand what you mean here, do you want to to focus an already existing editor containing the target model? it seems to work well (I've just checked)

How can I properly dispose my editor when creating it using initializeMonacoService? Any direction/guidance would be much appreciated.

initializeMonacoService doesn't create an editor, it initializes the services which then allows you to create as many editors as you wish. Or by editor, are you refering to the EditorPart (the widget with the layout/tabs...)?

[chiaolinghong]

Hi, thank you for the quick response :) Thank you for clearing up my misunderstandings. I am using React to control all the components. So the correct way of doing this would be call initializeMonacoService, which initialize the service once when the app starts (refresh if I wish to restart the service), then I can create my "EditorPart", which returns an IDisposable (attachPart(Parts.EDITOR_PART, editorDiv)) as a component and dispose only that on component unmount.

[CGNonofr]

Correct!

Note that the EditorPart is created during the service initialization (if you use the view service override). attachPart is just rendering it inside your dom element.

Btw, using the EditorPart from the view service override is an intermediate solution that have a lot of downside, it's not really designed to be displayed as a standalone, and you'll have a quite inconsistent experience (Some actions will suggest the user to do things that depends on other components, the layout actions allowing to move or change the layout make no sense...)

I would recommend either using the editor by hands (using monaco.editor.create) or using the whole workbench via the workbench service override.

[chiaolinghong]

Okay, understood :) Thank you for the detailed explanation!