CM6 - How to add css class to container dom element?

v6
1

I’m currently migrating some code from cm5 to cm6, and everything has gone smoothly except one small detail.

We have a react codemirror editor library that is used extensively in our code base, and is styled for light/dark mode via css.

With codemirror 5, calling codemirrorInstance.setOption(“theme”, “xyz”) could be used to make a “cm-s-xyz” css class be added to the editor’s root dom element.

This allows styling of the editor for light / dark with rules like this:

.cm-editor{
  background: white;
},
.cm-editor.cm-s-dark {
  background: black;
}

In codemirror 6 however, the css class of the EditorView seems to be getting updated continuously with an observer to have this value:

const baseCSSClass = "cm-editor" + (this.hasFocus ? " cm-focused " : " ") + this.themeClasses;

I’d really like to be able to add an additional condition to this value, something like:

const newBaseCSSClass = baseCSSClass + (darkTheme ? " cm-dark" : "");

I tried to do some digging to see if this can be done somehow, and I was hoping there might be some way using the facets like in the themeClasses function?:

get themeClasses() {
  return baseThemeID + " " +
    (this.state.facet(darkTheme) ? baseDarkID : baseLightID) + " " +
    this.state.facet(theme)
}

I do have a workaround of adding the dark theme class to an injected parent div of the editor and updating all our existing css selectors, but I was hoping to avoid that if possible somehow.

Here’s what the workaround looks like for comparison:

.cm-editor{
  background: white;
},
cm-s-dark .cm-editor {
  background: black;
}

I want to eliminate the need to have a wrapper div around the editor if there’s some way to instead put the dark css class on the editor root somehow.

2

Add EditorView.editorAttributes.of({class: "myclass"}) to your extensions.

3

Wow, that’s exactly what I was looking for, it works like a charm, thank you so much!