custom-editor: restore editor as part of layout

[vince-fugnitto]

Bug Description:

The framework currently does not support restoring custom-editors as part of the layout. If a given custom-editor is opened and the application is restarted (reload the window for example) the editor will not be preserved.

custom-editor-bug.mp4

Steps to Reproduce:

1. use the custom-editor-sample extension.
2. start the application using exampleFiles as a workspace.
3. open example.cscratch - the custom editor should open.
4. reload the application - confirm that the editor is not preserved.

[safisa]

Hi,
Any updates on this issue?
Or, can you help on how to fix it using Theia extension?
Thanks

[vince-fugnitto]

Or, can you help on how to fix it using Theia extension?

@safisa I haven't worked on the issue, if you are interested please don't hesitate on contributing a fix. You'll need to debug as to why the custom-editors are not being properly stored or restored in the layout.

Some interesting places to look:

theia/packages/plugin-ext/src/main/browser/custom-editors/custom-editor-widget.ts

Lines 86 to 97 in 4326029

	override storeState(): CustomEditorWidget.State {
	return {
	...super.storeState(),
	strResource: this.resource.toString(),
	};
	}
	override restoreState(oldState: CustomEditorWidget.State): void {
	const { strResource } = oldState;
	this.resource = new URI(strResource);
	super.restoreState(oldState);
	}

theia/packages/plugin-ext/src/main/browser/custom-editors/plugin-custom-editor-registry.ts

Lines 56 to 72 in 4326029

	@postConstruct()
	protected init(): void {
	this.widgetManager.onDidCreateWidget(({ factoryId, widget }) => {
	if (factoryId === CustomEditorWidget.FACTORY_ID && widget instanceof CustomEditorWidget) {
	const restoreState = widget.restoreState.bind(widget);
	widget.restoreState = state => {
	if (state.viewType && state.strResource) {
	restoreState(state);
	this.resolveWidget(widget);
	} else {
	widget.dispose();
	}
	};
	}
	});
	}

The layout is stored in the localStorage of the browser or electron.

[safisa]

To resolve this issue, we need to registerWebviewPanelSerializer in the vscode extension code. This was missing in my implementation, once I did it (in the following example) the custom editor layout was restored on reload. BUT there was a small issue on restore, getting undefined error in Theia CustomEditorWidget class, the _modelRef is undefined (we got there from a call to the setLayoutData in the application shell):

get saveable(): Saveable {
        return this._modelRef.object;
    }

Once overriding this in my Theia extension:

@injectable()
export class MyCustomEditorWidget extends CustomEditorWidget {

    // override saveable() to fix the undefined _modelRef issue when reviving (restoring state) after reload (when using the registerWebviewPanelSerializer in the vscode extesion)
    get saveable(): Saveable {
        return this._modelRef?.object;
    }
}

An example of a registerWebviewPanelSerializer in the vscode extension code:

let command = vscode.window.registerWebviewPanelSerializer(viewType, {
	async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: any) {
		// `state` is the state persisted using `setState` inside the webview
		//console.log(`Got state: ${state}`);
		// Reset the webview options so we use latest uri for `localResourceRoots`.
		webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
	}
});
context.subscriptions.push(command);

I will open a PR to fix the saveable issue in the CustomEditorWidget class.

[pisv]

Just a note that I'm working on a fix.

[msujew]

@pisv Just a quick FYI: We had a similar issue while implementing the notebook support for Theia. We introduced the DelegatingSaveable for this, which might be useful for your fix.

[pisv]

@msujew Sure, my fix is actually based on using the DelegatingSaveable :-) Thank you!

[pisv]

If there are no objections, the fix will be submitted as a separate commit in a bigger PR for #9079, which will also fix a number of other issues; I'm currently working on saving/restoring state of side-by-side editors containing CustomEditors, and depend on this fix for implementing and testing the feature.

[msujew]

@pisv I think that's perfectly fine, just make sure to include testing steps for all the things you have fixed :)