How to implement a line across two editors in mergeview

Is it possible to implement a line that goes from one end of editor a to the end of editor b like the example above in mergeview?

I am fine with a css solution such as making the line in editor A to superimpose onto editor B but i wasnt able to use z-index to do so

This cannot be done from inside one of the editors (the part sticking out would be clipped by the editor element), so to do something like it you’d have to put the element outside of the editors and overlay them. You’ll probably want to make a wrapper that contains both elements responsible for vertical scrolling in that case, because otherwise keeping this positioned would get painful.

An unrelated question. Assuming I am using merge view and i had added widgets in one of the editors. Is it possible to sync the other editor such as inserting placeholder widgets. However, the important part would be that the widget might be an textarea that is expandable hence the placeholder widget height must also change if needed

The alignment logic will align the top of each range of unchanged code. So widgets in the middle of such a range will misalign the part of the range below the widget, but the next range should be properly aligned.

Dynamic changes in the size of widgets are for the most part picked up automatically by the library, but in rare cases you have to manually call requestMeasure to force a measure.

I can observe you are right about next rang is properly aligned and the widgets in the middle of such a range did misaligned because there was a class cm-mergeSpacer on the other editoor but its not placed in such a way that it would align the editors properly. How do I call requestMeasure then to realign the editors?

requestMeasure won’t realign content directly below your widget. As I described, the extension only aligns the top of each unchanged range.

Is there any way to ensure that the alignment of the editors then?