Add possibility to add view zone inside deleted text zone in inline diff editor

[chenmy0917]

first, create diffEditor this.diffEditor = monaco.editor.createDiffEditor(dom, options);

second, get originalEditor this.originalEditor = this.diffEditor.originalEditor;

third, addViewZone to originalEditor

this.originalEditor.changeViewZones((changeAccessor) => {
    const domNode = doucument.createElement('div');
    changeAccessor.addZone({afterLineNumber: 1, domNode});
})

in Chrom, it can work when i use side-by-side

but, when i switch to inline-diff, it can't work

[alexdima]

View zones added to the original editor do not render when the diff editor is configured to be rendered inline. But view zones added to the modified editor will render in both cases.

[vscodebot[bot]]

Please ask your question on StackOverflow. We have a great community over there. They have already answered hundreds of questions and are happy to answer yours as well. You can also try searching through existing issues, looking at API usage samples or at integration samples. See also our issue reporting guidelines.

Happy Coding!

[chenmy0917]

Thank you for your answer. What should I do if I want to implement this feature? I am going to modify the source code, can you give me some suggestions? @alexdima

[alexdima]

View zones added to the original editor do not render when the diff editor is configured to be rendered inline. But view zones added to the modified editor will render in both cases.

You can use this.diffEditor.modifiedEditor

[chenmy0917]

View zones added to the original editor do not render when the diff editor is configured to be rendered inline. But view zones added to the modified editor will render in both cases.

You can use this.diffEditor.modifiedEditor

thanks for your answer! @alexdima

The feature I want to achieve is shown in the figure:

in inline-diff, removed line as view-zone(class named 'view-lines line-delete') render on modifiedEditor, like the figure: in the case, removed line number is 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16 I want add custom dom under the line No.2, and the dom don't cover line No.3

'removed line number is 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16(class named 'view-lines line-delete')' is a viewZone added to modifiedEditor, i can add another viewZone to modifiedEditor, it can be render under line No.16 or above line No.1, like the figure:

but can't render under line No.2, like first figure

[alexdima]

That is currently not possible. It is not possible to insert a view zone inside a deleted zone of text when the diff editor is rendered inline.

[chenmy0917]

@alexdima I thought of a very unsightly method: step 1: assuming the height of removed-line-view-zone(the dom that class named 'view-lines line-delete') is 100px step 2: assuming the height of my customized view-zone is 50px step 3: add a view zone to modifiedEditor, set heightInPx to 50px, like the figure:

step 4: create a dom and set height to 150px, set innerHTML to the dom, make it look like the picture below:

step5: append the dom to my customized view-zone, it will render like the figure:

you can find, the modifiedEditor is blocked by the dom about step5

step 6: translate the dom up by 100px, like the figure:

[chenmy0917]

Wanted to know if it's ok to do that and what would be the best way to do that? Looking forward to your reply, thanks🥳 @alexdima

[chenmy0917]

Wanted to know if it's ok to do that and what would be the best way to do that? Looking forward to your reply, thanks🥳 @alexdima

can't😩 because I can’t insert the zone where I want

[miamagana]

Hello @alexdima, I'm willing to work on fixing this issue or to allow this behavior if some guidance is given, more or less, how much effort do you think this takes?

It's an inconsistency with how the split/unified view works and I'd like to help.

[sami-lujan-cs]

@alexdima Hey Alexandru! Following up on my colleagues message above, we're really eager to resolve this issue. We'd really appreciate your guidance here. Thanks!