Create a custom form based editor theia extension

[dagoston93]

Hi,
I am trying to create a custom form based editor, that needs to have a couple of text inputs, and a couple of buttons.
I need to associate it with a certain file type, and need to be able to save/load data into that file type. (Basically a json file.)
I managed to create this as a VSCode plugin, but I need to write it now as a Theia Extension instead.

I am struggling a lot, because I cannot find a simple example on how to do it.
I used Yo to generate the TreeViewEditor example, and also had a look at the included Monaco text editor but both of them is very complicated, and takes way too much time to understand how they work. So I am wondering if there is a simple example available somewhere online, or if someone could provide me with a very simple example...

I tried the widget example on the Theia website, but first of all it did not even work, because when you bind your widget to WidgetFactory you have to use getAsync() instead of get(), otherwise you get errors on the console, that you are trying to instanciate a widget that has async dependencies in a synchronous way. (it is due to the @PostConstruct() decorator used).
Also the example shows and says that the widget created appears between the editors and has an entry in the view menu, but for me it shows on the left side, where the Project Explorer is, and no entry in the view menu.

So all in all I cannot find easy to understand example on this, but I might be overlooking or missing something.
I would appreciate any kind of help.

Thanks in advance,
BR,

Agoston

[sdirix]

Hi @dagoston93,

I am struggling a lot, because I cannot find a simple example on how to do it.

That's a good point, there is not really a simple example of an "editor-like" view. The existing examples, like this widget and this yo widget generator, focus on singleton views. However "editor-like" views are typically multi-instance and tied to specific files. The existing examples like the tree-editor are very complex compared to what is needed at bare minimum.

I tried the widget example on the Theia website, but first of all it did not even work, because when you bind your widget to WidgetFactory you have to use getAsync() instead of get(), otherwise you get errors on the console, that you are trying to instanciate a widget that has async dependencies in a synchronous way. (it is due to the @PostConstruct() decorator used).

Good catch! Since an Inversify update a few versions ago this error will be shown. Note that the async in the example is of no use, so you should be able to simply remove the async keyword and the error should be gone.

Also the example shows and says that the widget created appears between the editors and has an entry in the view menu, but for me it shows on the left side, where the Project Explorer is, and no entry in the view menu.

The example showcases the AbstractViewContribution which does all kinds of convenience for you.

The area of the view is configured via this:

defaultWidgetOptions: { area: 'left' },

Adapting this to main should open it next to the editors.

The AbstractViewContribution also offers convenience methods like auto-registering a toggle command and menu item so that they show up in the UI. This is overwritten in the example. By removing the registerCommands override (or calling super within it), you should get them.

I would heavily recommend to check the implementation of AbstractViewCommand in the Theia source as it's rather straightforward. You might even skip using AbstractViewContribution completely once you more heavily customize it.

---

Note that AbstractViewContribution is mainly for singleton views. In case you want to be able to open multiple views at the same time, associated with certain URIs, then you should extend WidgetOpenHandler instead. See here for an example. Via this handler you can make the URI available in your options and therefore load the content already in the WidgetFactory or handle it in your widget yourself.

For integrating with save support, you can implement the SavableSource interface, see here.

My suggestion is to go step by step and orient yourself on how the existing views/editors in the Theia codebase are implemented and following their example. In the long run it would be nice to have a self-contained "editor" example available, either in the yo generator or in the included examples of the Theia base repository. If you manage to make progress, you could think about whether to contribute such an example so that other developers have an easier time in the future.

[dagoston93]

Hi,

Thanks for your answer, I am having a look at the examples you have given. Luckily, I only need to have a single editor, as there can only be a single file of the type in the workspace (at least for now...). So the AbstractViewContribution can be fine...
I tried to change:
defaultWidgetOptions: { area: 'left' },
but still opens by default on one side... but, I realized that I can drag it to the main area manually... not the best, but works for now, but I will need to solve it after having other features working... I managed to add the UI almost exactly as needed using react. Now I will try to make the saving working.

I will think of contributing an example, if I find time to create a proper one, I think that would help a lot to people...

BR,
Agoston