Adding widgets between lines instead of inside lines

We’re working on a CodeMirror side-by-side diff viewer similar to github’s view which we’re hoping to open source

The way we’re approaching this is by having an editor on the left and an editor on the right. Coloring lines is pretty straight forward, a simple line decoration does the job.

Another feature, if there’s a diff that makes one side longer than the other we need to pad the shorter side with empty lines. Our first pass was to use a widget that adds a dom node to pad the line. This kind of works but it has shortcomings:

  • Being inside cm-line means that the padding will inherit things like the background color from the line node, and getting around that is quite annoying
  • If the line difference between both sides is at the very first line then we end up with the 1 in the gutter far from the content

Is it possible to add dom nodes/breaks between cm-lines instead of inside using decorations, or some other non-hacky method?

Yes, use block widgets, either at the end of the line above with side: 1, or at the beginning of the line below, with side: -1.

1 Like

Hi @masad-frost
may i know the repo name which you working for diff view. am also working kind of same. so that it will help to understand and we could collaborate and work.thanks

Thanks Marijn, I’m usually good at reading the docs, sorry about that.

@ramusesan here’s the work so far, very much a work in progress CodeMirror diff view - Replit