Relative (VIM style?) Line Numbers?

With the new CodeMirror 6, how can we do relative line numbers that based on the current line where the cursor is?

Like this in this video (shamelessly lifted from Vim’s absolute, relative and hybrid line numbers)
https://jeffkreeftmeijer.com/vim-number/relative.mp4

With CM5, this seemed pretty straight-forward, but with CM6, I’m running into an issue where, while I can make new lines have the proper line numbers, old lines never have their line numbers update.

I made a CodeSandbox to display the issue.

Right, formatNumber only took a number, and the code assumed it only depended on the number, so closing over the view like that wouldn’t work. @codemirror/gutter 0.17.2 passes the editor state to formatNumber and should handle this correctly.

Whoa. That was ridiculously quick! You’re amazing! Thank you so much!

Do you have a working example for this? @wardellbagby

Not of VIM style line numbers; I only used that as an example for my true ends: a way to more generically provide a value for the line number in the gutter that would update when the doc changed.

My usage ended up looking like this:

2 Likes

Thank you for your answer! That helped me a lot :+1:

1 Like

Did you ever come up with a working solution? Very new to Codemirror and could use some pointers :sweat_smile:

I finally figured it out! Here’s a working solution based on @wardellbagby’s original CodeSandbox:

1 Like

I ended up publishing this as an extension on npm: