Embedding an LSP based text Editor in GLSP based diagram editor

We have created two extension in theia -
1.Graphical editor using Theia/GLSP to create flow diagram for our use case.
2.New language support for our DSL using Xtext LSP .

Now while using graphical editor we want end-user to enter some expression on the nodes of the diagram , semantics of which will be based on our DSL language . To assist the end-user in writing these expressions we want to provide the expression editor within the node of a diagram with features like content-assist , error highlighting etc . If we are able to embed LSP based editor then all these functionalities will be available out-of-box.

So how can we embed an LSP based editor within our GSLP based graphical editor ?

@kuldeeparora89 have you tried this framework

@abchakra, Thanks for response.
Sprotty is primarily for visualization not editing .This approach suits for “text-first” solutions but our requirement is more related to “model/diagram first” solutions . Also Its diagram editing support is still in beta therefore we are using GLSP for creating our diagram editor . With this we are able to create/edit our diagram but it seems there is no direct way of including a text/LSP editor within the diagram.

@kuldeeparora89 I know about the Eclipse GLSP Theia integration you can check out (https://github.com/eclipse-glsp/glsp-theia-integration) but I’m not aware if anyone has attempted to use LSP in the actual editor itself. It may be an enhancement that GLSP Theia will welcome.

Thanks @vince-fugnitto,I have raised this issue in GLSP forum as well.

Thanks @kuldeeparora89!

Just for future references, I’m linking the discussion of the GLSP forum about this topic below.
The short version:
There are two ways of doing that:

  1. Either integrating the GLSP diagram server with the language server (ie they will have to be able to communicate with each other directly) and implementing the UI with GLSP’s native auto-complete text editing UI.
  2. Or by using a Sprotty UI Extension and embed a text language client (e.g. Monaco) that can connect to a separate language server.

Option 2 is for sure the more generic and powerful approach. I’d find it very interesting to have some foundational infrastructure for that in GLSP! If you are interested, please open an issue in the GLSP project about this topic too.


Thanks @planger,

It would be great if we have can have some built-in support to include LSP based editor in GLSP.

I have opened a issue already but it got closed -

Should I create it again with your comments ?

Oh, I see! I think this ticket was interpreted as question and not as a feature request.
I’ve opened another issue with this feature request:

If you are interested in contributing / helping out / sponsoring this feature, please contact me anytime! Thanks!

Hi @planger,
Due to busy few weeks I could not share the update earlier , but I was able to embed the LSP editor using AbstractUIExtension in GLSP . From my POC point of view its working fine , once I get time will try to standardize my code.

@kuldeeparora89 Very cool! Thanks for sharing! I’d be great if you could generalize and contribute an abstract base to GLSP! Thanks!

Hi @planger ,

I need a clarification on inclusion of Monaco editor.
Actually I was using “monaco-languageclient” extension earlier to include monaco editor in the GLSP UI Extension . But I think this may not be the best approach due to two reasons -
1.Moanco editor shipped with Theia/Vscode has LSP support so it would be better if we can use @theia/monaco directly instead of any 3rd party dependencies.
2.Theia has also dropped the use of “monaco-languageclient” from version 1.4.0 so I afraid how well this extension will be maintained in the future.

But I am facing some issues while including monaco editor from @theia/moanco , I have documented it in below thread -

Please check , appreciate any suggestion on this !!