format line numbers on cursorActivity

How do I modify the line numbers on cursorActivity in cm6?

I’ve read through several GitHub issues and forms but haven’t found anything promising. I’m able to format the line numbers when a new line is added, but I want it to also fire when I move the cursor.

Link to CodeSandbox

Bonus: if someone can help me figure this out, I’ll publish a relative line numbers extension and write up a blog post about it :grinning:

I feel like I’m heading in the right direction:

let myView = new EditorView({
  state: EditorState.create({
    doc: "hello",
    extensions: [
      vim(),
      gutter.of(lineNumbers({ formatNumber: relativeLineNumbers })),
      EditorView.updateListener.of((viewUpdate) => {
        if (viewUpdate.selectionSet) {
          viewUpdate.view.dispatch({
            effects: gutter.reconfigure(
              lineNumbers({ formatNumber: relativeLineNumbers })
            )
          });
          console.log("DO SOMETHING WITH THE NEW CODE");
        }
      })
    ]
  }),
  parent: document.body
});

My console.log runs on cursor movement (because selection is changing), but the effect isn’t dispatching.

I think I had to update a package (after reading about a bug here).

I finally have it working! I’ve simplified it and cleaned things up. This example uses TypeScript:

This is now available as a package on npm:

Looks great! (The weird calls that prompted the return "0" case are there to create a placeholder that sets the gutter width. I guess that in a setup like this there won’t really be a problem with the gutter being too narrow and then changing size when scrolling, so returning "0" should work fine here.)

1 Like

OH! That makes way more sense. Thank you for taking a look and demystifying that for me!