Is there a setting to allow selecting line(s) by clicking line numbers?

1

Kinda like most IDEs do it. Click and drag over multiple line numbers selecting multiple lines.

1 Like
2

Not as a setting, but you could implement this on top of event handlers on the line number gutter.

1 Like
3

Did anyone manage to set event handlers on line numbers? I have tried setting events on both lineNumbers and gutter.

import {basicSetup} from "@codemirror/basic-setup";
import {gutter, lineNumbers} from "@codemirror/gutter";
const lineNumbersExtension = lineNumbers({
        domEventHandlers: {
            mousedown(view, line) {
                console.log('mousedown', view, line);
            },
            click(...args) {
                console.log('click', args);
            }
        }
    })
const codemirrorExtensions = [
    basicSetup,
    lineNumbersExtension,
]

Instead of setting the event on a div with enough clicking surface (like .cm-gutterElement), the event is set on cm-gutter cm-foldGutter, which is a thin vertical div after the line numbers.

1 Like
4

Here is a quick setup for what I am trying to achieve: trusting-archimedes-74ybs - CodeSandbox.
I was expecting that clicking on the line numbers would log a message through the registered event handler.

5

It seems that the current release was ignoring the domEventHandlers option to the line number gutter. I’ve released @codemirror/gutter 0.19.2 with a fix.

1 Like
6

I tested @codemirror/gutter 0.19.2 and line number events work. Thank you!

I was just about to post a link to a workaround - a copy of your actual lineNumbers extension implementation: silly-jones-h40g4 - CodeSandbox.

7

@loredanacirstea can you post your result?

8

Weird that such a basic feature is not supported out of the box or something…

Anyway, even tho domEventHandlers seem to work with lineNumbers now (not always though, for some reason I wasn’t able to make it work in my code, but works in codesandbox, maybe conflicts with something, got to figure it yet) - I had no luck setting selection without the drawSelection extension, which also feels weird:

9

…updated my codsandbox to drag-select lines.

And, if anyone is curious why didn’t it work with lineNumbers in my project - it was because of my stupidity: I had pointer-events: none on gutters :blush:

10

I recently came across this thread again and decided to roll this feature by myself. My main requirements are that

  1. The whole gutter area should be available for drag-selecting. This is Monaco and Sublime Text’s behavior.
  2. The user should be able to interact with other gutter elements.

I really could not come up with a solution with a custom gutter extension, so I hacked around the gutter area by a view plugin. It was hacky because I extracted the DOM element from the gutter view in order to bind event listeners to it. A dummy fold gutter is included merely for testing.

https://codesandbox.io/p/sandbox/codemirror-gutter-dragger-3b461w

I did not implemented richer selections as @wp0’s example demonstrated, but I think that would be relatively easy to patch.