Monaco-editor: Disable editing in the modified window (right side) and jump to first diff in diff editor

[terrchen]

Hi,

Is there an official way to disable editing on the modified window (right side) in the diff editor? In the source, I can see you can disable/enable editing on the original (left side). Right now, I'm do a cheap hack to remove editing in the modified window, and was wondering if there is a supported/proper way to do this.

Second question. Is there a way to jump/scroll to the first diff, in the diff editor?

Thanks

[MohammadYounes]

I think this is the way diffEditor.getModifiedEditor().updateOptions({readOnly:true})

Try it in the playground

var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain");


var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

diffEditor.getModifiedEditor().updateOptions({readOnly:true})

[MohammadYounes]

For the second question, did you see Navigating a Diff example ?

[terrchen]

Thanks for the info. Didn't know about the playground and diff nav example. I just used

https://github.com/Microsoft/monaco-editor-samples/blob/master/sample-diff-editor/index.html

as a starting point. Would have save some time if I looked there first.

Cheers

[MohammadYounes]

You may want to use alwaysRevealFirst option to auto jump to the first diff:

var emptyLines = '\n'
for(var l=0;l<10;l++){
    emptyLines+=emptyLines
} 

var originalModel = monaco.editor.createModel("just some text"+emptyLines+"Hello World"+emptyLines+"Some more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some text"+emptyLines+"hello World"+emptyLines+"some more text", "text/plain", "text/plain");


var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

var navi = monaco.editor.createDiffNavigator(diffEditor, {
    followsCaret: true, // resets the navigator state when the user selects something in the editor
    ignoreCharChanges: true, // jump from line to line
    alwaysRevealFirst: true // jump to first diff
});

[terrchen]

Thanks. Everything works like a charm!

https://gitsense.com/insight?c=bitbucket:gitsense/contexts:gs_contexts::default.ccf#b=github:Microsoft/vscode:master&dr=1month&dl=javascript&dp=gulpfile.js

It's pretty crazy that right out of the box you get something this powerful.

Cheers