How to make left side (original code) of monaco diff editor editable?

user_2512454 0
Viewed 1261

I'm searching for a possibility to edit the code of both sides - left and right - in monaco diff editor.

I've tried already this:

var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");

var diffEditor = monaco.editor.createDiffEditor(
  document.getElementById("container"), 
  { readOnly: false }
);

diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

But that (readOnly) option effects just the right side, which is by default editable.

Here is a demo link: creating-the-diffeditor-hello-diff-world

monaco-editor diff
1 Answers

Set originalEditable: true in IDiffEditorOptions:

var originalModel = monaco.editor.createModel("heLLo world!", "text/plain");
var modifiedModel = monaco.editor.createModel("hello orlando!", "text/plain");

var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"), {
    originalEditable: true, // for left pane
    readOnly: true,         // for right pane
});
diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});
user_40854410
Related