TypeFox / monaco-languageclient

Repo hosts npm packages for monaco-languageclient, vscode-ws-jsonrpc, monaco-editor-wrapper, @typefox/monaco-editor-react and monaco-languageclient-examples
https://www.npmjs.com/package/monaco-languageclient
MIT License
1.05k stars 178 forks source link

Fix: Multiple Monaco editor issue #666

Closed kaisalmen closed 4 months ago

kaisalmen commented 4 months ago

This fixes #620 It actually didn't require a code change. You only create one language client and the other editor re-uses the globally installed for the registered language (= statemachine in this case). This may have not been as easily configurable in the past.

In addition the PR contains the update to monaco-vscode-api version 5.2.0

wa8f7192 commented 4 months ago

Thanks for resolving this and updating the examples

cdietrich commented 2 months ago

@kaisalmen is there also the option to have the react component twice and have them completely isolated from each other? (two workers, each editor talking to one?)

kaisalmen commented 2 months ago

@cdietrich each editor for a different LS/language?

cdietrich commented 2 months ago

for the same language.

see this branch: https://github.com/cdietrich/my-monaco-editor-react-example/tree/cd/otherFilesExperiments_createModelReference_multi-newer-componentTwice

currently both workers seem to see the files from the other. (also happens when i useMonacoEditorReactComp instead of my MonacoEditorReactCompExtended

CGNonofr commented 2 months ago

I don't think it will be able, monaco/VSCode don't support having multiple isolated "instances" in parallel

The closer you can get is having 2 workspace folders. You can configure a language client to match only a single workspace folder.

kaisalmen commented 2 months ago

The closer you can get is having 2 workspace folders. You can configure a language client to match only a single workspace folder.

We should add that to our Troubleshooting section

cdietrich commented 2 months ago

hmm ok. so this is why monaco dispatches all events to all clients. as we have tabs inside our react app, we are looking into how can unmount when tab is not visible

CGNonofr commented 2 months ago

An alternative can be to use Iframes also of course

kaisalmen commented 2 months ago

@cdietrich and @CGNonofr btw, you can use MessageChannels to communicate in between IFrames or to channel the communication between main and worker or between workers. You can configure this already: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/langium/statemachine/main.ts#L35-L62

Idea: You could have logic either on client or the worker or both to disable communication to silence one LS.

cdietrich commented 2 months ago

yeah but we basically would need very heavy rewrite to isolate on the server side

kaisalmen commented 2 months ago

@cdietrich disconnecting and re-connecting the languageclient on tab change is not an option? You don't have to dispose the worker. This should be fast.

cdietrich commented 2 months ago

we need to check

kaisalmen commented 2 months ago

If something is missing, let us know.