Prevent Theia tab (Webview) from closing due to unsaved changes

Hello guys,
I’m currently looking for a way to prevent a Theia tab (displaying a Webview) from closing (in case there is some unsaved changes within it).
From my research, I found out that VSCode API cannot provide such mechanism, since a VSCode extension cannot prevent a tab from closing.
What I’m trying to achieve is :
If user tries to close the tab and we detect somehow from within the Webview that there are some unsaved changes, we prevent it and display a confirmation dialog. Then the user can either effectively close it and lose the changes or cancel the closing and save it from within the Webview.
I was wondering if there is any Contribution Point on Theia I could implement to achieve this ?

Thanks in advance for your help !

@PlanAborted thank you for the question, it may help to provide additional details so we can help further. In your use-case are you looking to implement a Theia extension, or a VS Code one which will be consumed by Theia? In addition, have you you looked at using Custom Editor API (which uses a underlying webview)? With it, you should have the possibility to implement a save and potentially prevent the tab from being closed but I have not tested the behavior in VS Code. Note that we have not yet implemented the Custom Editor API in Theia yet (

Hey there @vince-fugnitto , thanks for the quick reply !
Sure I can provide some more details.
Since there is nothing we can do on the Plugin side (aka VSCode extension), I was looking on Theia extension side.
We currently have some custom Contribution Points implemented (Theia extensions) to “extend” or “modify” Theia behaviour. So, yes, I’m looking to implement a Theia extension for it, if possible.
Indeed, I found out about Custom Editor API but as you pointed out it’s API is not yet implemented in Theia, that reduces the panel of choices that we currently have :confused:

@PlanAborted no problem, if you are implementing an extension you will have more control than a plugin.
I believe your custom webview can implement SaveableSource (which is also implemented by EditorWidget). From if you should have the notion of dirty (unsaved changes) and the framework should be able to handle it out-of-the-box (asking for confirmation before closing the tab). I have not tried myself however but it can definitely be something to try out.

Maybe others will have better ideas but thank you for providing additional information.

Some other helpful links:

Hi @vince-fugnitto, we have a vscode extension where we use vscode.WebviewPanel to display and edit pretty much all of the content coming from a server through REST API.

So I believe CustomEditor API does not provide much value as we’re not opening resources through Theia , and SaveableSource interface would not really be an option, as it’s not part of VSCode API.

My understanding is that we would need to implement our own webviews instead of using VSCodeAPI in order to implement SaveableSource. Please correct me if I’m missing something :slight_smile:.

@raphaelsantos it depends on your implementation and use-case, but you’re correct about SaveableSource being an option only for @theia extension. If you are also planning on implementing a Theia extension you are not obliged to use webviews at all, you can also create more powerful widgets with all the flexibility you require. Again, I haven’t done any of this myself and I’m only trying to provide a bit of information which might help you.

1 Like