Add option to doc.addLineWidget to add custom classes

[dhyey35]

Custom styling the div node with class .CodeMirror-linewidget is not possible right now as all the line widget's have same class name and there is no way to apply separate styles to each line widgets at the .CodeMirror-linewidget` ( of course applying custom style to child nodes is possible ). Also the node returned by addLineWidget cannot be used as it can change if another line widget is added to the same line.

Ideally addLineWidget should allow adding custom class name to the line widget so we can target it by .CodeMirror-linewidget.my-custom-class

[marijnh]

What kind of style do you need to add to the widget wrapper node?

[dhyey35]

@marijnh A real life use case can be found here Firefox DevTools Editor.css. The overflow: hidden style has been applied to avoid scrolling problems when a line widget is dynamically resized.

[marijnh]

Wouldn't making your widget itself width: 100%; overflow: hidden have a similar effect?

[chriscoyier]

This came up for me just today. Mostly I like the default overflow on .CodeMirror-linewidget, but there is one particular line widget in which I want to style a child with absolute positioning (which collapses the parent line widget) and I need to set overflow: visible; on that one line widget, but have no selector to do so with.

[marijnh]

Would a className option to addLineWidget help?

[chriscoyier]

It would!

Right now I'm querying the DOM after using addLineWidget to find the widget that contains the specific children and then adding an additional class to CodeMirror-linewidget which is a little janky. I even have to do a little setTimeout before doing it for it to work correctly for some reason. Doing it right in the API would be awesome.

[marijnh]

Implemented in attached patch.

[chriscoyier]

Works perfectly and solves my needs, thanks 🙏