Github-styled unified text diff viewer (read-only)

v6
1

I want to show a unified textual diff viewer of a SQL query. This editor view would be read-only. The design from the design team is borrowed from Github where changes are highlighted per line.

It would look something like this:

image
image772×716 95.3 KB

I have the data of the before/after of the full query along with a diff array containing of which lines had changes of which type (plus vs minus).

I’m confused on how to give CodeMirror a unified, annotated doc to render. This seems preferable to trying to render one text query in the editor and compare it with the second query to derive the display.

2

The general idea would be to put a data structure describing the lines in some state field, and have separate gutters for the old and new line numbers, plus a gutter for the +/- signs, rendering markers based on the content of that data structure.

(Or, if this is read-only, just render it without an editor, optionally using Lezer to highlight the code. That’s what the Chrome devtools do.)

3

I implement a demo (plan to publish as a component) you can see it in github repo

1 Like
4

Nice. Just to make sure you’re aware, @codemirror/merge also has a unified merge view feature now.