Adding widgets between lines instead of inside lines

v6
1

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

image
image1738×1350 194 KB

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

image
image1668×628 54.6 KB

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

2

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
3

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

4

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