Embedding LSP based text Editor in GLSP based diagram editor

[glsp-bot]

Hi,
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 ?

original thread by kuldeeparora89

[glsp-bot]

[Martin Fleck]

Hi @kuldeeparora89 ,

That is a very interesting use case! In our workflow example we showcase the editing of task type and duration via an UI extension. In this task editor, we query the server for suggestions/context actions (see also the protocol) which the user may or may not apply and validate the user input before actually applying the task edit operation. In this scenario you could provide custom auto-suggestions based on your DSL. However, you would need to make sure that your GLSP server instance is aware of your language server and even then the editor would be a simple text input.

Luckily, you are free to render any HTML element you like by providing it as an UI extension. For instance, the tool palette and the command palette (triggered through Ctrl+Space) are both UI extensions as well. UI extensions can be shown or hidden via dedicated actions based on any custom trigger. So if you want to have a fully-fledged LSP-based editor experience, it should be possible to embed an existing code editor, such as Monaco or Ace, as an UI extension. This way your language server could probably still run in a separate process. You would just need to make sure that the language server is properly started and that you can retrieve the textual content of the embedded editor in order to send the result of the editing to the GLSP server.

I hope this helps you get started on you work!

[glsp-bot]

[kuldeeparora89]

Thanks @martin-fleck(martin-fleck) , I already started evaluating the ways we can embed Monaco editor in the Html and found a library for it - monaco-languageclient (by TypeFox) . Also by knowing the fact that we can have UI extension to render any HTML element in GLSP , I think I can try to embed the Monaco editor using UI extension .