Reuse/customize theia diff view

Hi all,

In my custom theia, I’m trying to create a new widget that instantiates theia’s diff view along with a table view within the widget. i.e., my widget will have a table view on top and diff view below that.

Progress till now: I’m able to successfully instantiate and use diff view (used MonacoDiffEditor & EditorWidget) inside my widget. This custom widget is added to the main area in the shell.

Some of the issues i’m facing are:

  1. I would like to make the left-hand-side part of diff view as read-only. Currently, both left & right sides are editable in the diff view.

  2. When I try to edit the file in either the left or right view, the same file gets automatically opened in a new tab in the main area of shell.

Can anyone guide me how to address the 2 issues given above ?
Thanks in advance.

I have found a way to address the Issue #2 that I had mentioned above by overriding MonacoWorkspace behavior.

So, now I’m still trying to figure out a way to achieve this:
I would like to make the **left-hand-side part of diff view as read-only** . Currently, both left & right sides are editable in my custom diff widget.

There are several ways to achieve it, you can go down the path and customize the editor model and so on, etc. I usually just customize the EditorManager and do something like this:

export class MyEditorManager extends EditorManager {

    async open(uri: URI, options?: EditorOpenerOptions): Promise<EditorWidget> {
        const widget = await, options);
        const readOnly = await this.isReadOnly(widget);
        if (readOnly) {
            const { editor } = widget;
            if (editor instanceof MonacoEditor) {
                const codeEditor = editor.getControl();
                codeEditor.updateOptions({ readOnly });
        return widget;

    private async isReadOnly(widget EditorWidget): Promise<boolean> {
        // Check if diff editor and other things


(It might not be a full-blown solution for your diff-editor request, in fact, it might not even run, but you will get the idea I hope :blush: )

Thank you, @kittaakos.
I noticed another way too …

  1. Introduce a custom ‘resource resolver’
    export class ReadOnlyFileResourceResolver implements ResourceResolver
  2. and a custom resource (that has only readContents method)
    export class ReadOnlyFileResource implements Resource
  3. When encoding a diff uri, create one of two the uris with “readonly” scheme and use the diff uri to initialize the diff view editor.

Yes, that is the more complex, but the preferred way to support it. We use that approach for the Output view and for the output channels:

hi @rs I am also looking for a similar widget like you have created, is this code open-source,

Are you using MonacoDiffEditor from “react-monaco-editor” or from theia ?

any example how to create a widget like this in theia would be helpful.