An extension to easily integrate third party editors to theia

#1

Hello every body,

I am a user of theia for couple of weeks and have started to learn about writing theia extensions for just 3 days. So, if there is a way to do the thing below already please tell me :slight_smile:

My aim is securely register any third party editors(like svg-edit, custom editors, image editors etc.) over sandboxed iframe via window.postMessage and onMessage protocol. And open the extension to community offcourse :slight_smile:

I think this way has many advantages:

  • it will run under different scope and process in the client side

  • any web based editor which implements a small message handling routine can integrate easily

  • editor can run in different process in server side (my sample is just a client side code) and also can serve from different domains (may be as a free/paid service)

  • it is safe beacuse it is fully sandoxed expect some permitted operations like;

      - opening given data (data exchange over client side)
      - sending the edited data to save (data exchange over client side)
      - requesting a dependent file resource under permission and/or file type filters (for example an xml file can include other xml file in the file tree)
      -consuming file change, find/replace events
      - reflecting permitted keystrokes
      - etc.

I have started to digging around and wrote that extension based on hello-world template and inspired from mini-browser package and can handle just open requests for now. However I am not sure that if the mini-browser code-base is a good place to start or need to start somewhere else (using editor package like monaco??)

I am open to ideas, support, help and contribution offers or I can join any existing efforts.

Thanks.

Note: the graphml editor in the picture is another project of mine based on bpmn.io’s diagram-js which isn’t published yet.

theiacustom.PNG
theiacustom.PNG890×778

[original thread by Mobula Mobular]

#2

Sounds like you need webviews: https://code.visualstudio.com/api/extension-guides/webview

#3

Theia is capable of running VS Code extensions

#4

[Mobula Mobular]

Thanks Anton, It seems the exact thing that I need for. The page says vs-code’s built-in markdown renderer uses webview api. As I know theia’s markdown renderer uses frame’s but not webview api. And it’s not part of the core extensions of theia. Do you know any conflicts(techincal or licensing) or in the roadmap?

#5

[Mobula Mobular]

Oh I have found the basic web view methods in the plugin extension. I think the preferred way is developing a plugin, not extension?

#6

Theia was proposing extensions. We (Red Hat) worked on bringing plug-ins mecanism (runtime loading) and support of VSCode extensions. It’s up to you to use extensions or plug-ins. Plug-in can be installed on any Theia having plug-ins enabled while your extension can mostly only be added at build time.

#7

[Mobula Mobular]

Thanks Florent It’s ok. Actually I have asked about webview’s base api methods (createWebViewPanel etc.) with some ignorance and after inspection I’have found them under plugin/plugin-ext extension. It seems it uses same message mechanism but different use case though. As I understand I’cant do open/save handle contribution with vscode plugins even in VsCode. In fact I’m looking for correct base classes (EditorModel?)/contributions to build an fully functional custom editor in theia. For example just an textarea based editor.

#8

In fact I’m looking for correct base classes (EditorModel?)/contributions to build an fully functional custom editor in theia.

If you need mutiple instances of some kind of a widget then look at WidgetOpenHandler. There are different implementatinos of it to support text editor, preview, minibrowser. You can look at them for particular use cases, for instance how to participate in save cycle.