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

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

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

1 Like

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.

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.

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

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.