Monaco-editor: Option to reverse split diff layout (original on right, modified on left)

[olane]

monaco-editor npm version: 0.8.0
Browser: All
OS: All

We have an application where, for various reasons, we need to be able to display a split diff with the new version of a file on the _left_ hand side rather than the right. As far as I can tell this isn't currently possible with the monaco diff editor.

I've worked around this by overriding the CSS for the inserted/deleted background colours so that deletions show up as green and insertions show up as red (as well as reversing the inputs so that I input the original file to the "modified" model and vice versa).

However, I've also had to hide the overview ruler on the right hand side of the diff, since I can't override the colours using CSS. This gives me a workable solution but does leave an annoying blank space on the right hand side of the diff. I've also had to disable the +/- line indicators for similar reasons.

Instead of all this, it would be nice to be able to specify an option to lay the split diff out in "mirror mode" with the original/modified panes reversed.

[olane]

For anyone trying to do the same thing, I came up with a horrible hack for the overview ruler involving colour filters on the canvas elements. Here's the full CSS I'm using for my workaround, which gives a decent result:

/* The monaco editor doesn't let us swap the diff panes. As a workaround, make deletions look like insertions and vice versa by swapping the colours */
.monaco-editor .char-delete, .monaco-editor .line-delete {
    background: rgba(40, 210, 40, 0.2);
}
.monaco-editor .char-insert, .monaco-editor .line-insert {
    background: rgba(255, 0, 0, 0.2);
}

/* To swap the colours in the overview rulers we have to do some hacky colour filtering. Note that this doesn't work in IE: http://caniuse.com/#feat=css-filters */
canvas.modified.diffOverviewRuler {
    /* This filter turns green to red */
    filter: hue-rotate(265deg) brightness(80%) saturate(2);
    -webkit-filter: hue-rotate(265deg) brightness(80%) saturate(2);
}
canvas.original.diffOverviewRuler {
    /* This filter turns red to green */
    filter: hue-rotate(95deg) brightness(300%) saturate(0.45);
    -webkit-filter: hue-rotate(95deg) brightness(300%) saturate(0.45);
}

[olane]

Update: with the new theming stuff in 0.9.0 the hack gets a bit more succinct and a bit more robust. You can replace all the CSS above with the following theme:

monaco.editor.defineTheme('flippedDiffTheme', {
    base: 'vs',
    inherit: true,
    rules: [],
    colors: {
        'diffEditor.insertedTextBackground': '#ff000033',
        'diffEditor.removedTextBackground': '#28d22833'
    }
});
monaco.editor.setTheme('flippedDiffTheme');

[mnayan]

+1 for this feature request. The above themes work for flipping the colors, but as mentioned above, the +/- line indicators remain flipped and are hence inaccurate in this case.

[alexdima]

@mnayan The +/- can be turned off via the diff editor renderIndicators option.

[mmichaelbiz]

+1. Any chance for this request to be included?