I’m using a Compartment() to be able to reconfigure a simple EditorView.baseTheme extension located in the EditorView state.
When I reconfigure it, based on some conditions, it works as expected.
The issue I’m having is the fact that css classes are not replaced but added as if they are in a list and this is causing the affected DOM element to not being styled correctly.
The following is my implementation:
export class App extends LitElement {
#gutterStyles
constructor() {
super();
this.gutterStyles = new Compartment();
}
firstUpdated() {
// Other code...
this.editorView = new EditorView({
state: EditorState.create({
extensions: [
this.editable.of(EditorView.editable.of(true)),
this.readOnly.of(EditorState.readOnly.of(false)),
breakpointGutter,
this.variableValueExtension.of([]),
this.gutterStyles.of([]),
EditorView.baseTheme({
"&light .cm-debugLine": {backgroundColor: "#2a337e38 !important"},
"&dark .cm-debugLine": {backgroundColor: "#2a337e38 !important"}
}),
oneDark,
StreamLanguage.define(vbScript),
lineNumbers(),
highlightActiveLineGutter(),
highlightSpecialChars(),
history(),
foldGutter(),
drawSelection(),
dropCursor(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
bracketMatching(),
closeBrackets(),
autocompletion(),
rectangularSelection(),
crosshairCursor(),
highlightActiveLine(),
highlightSelectionMatches(),
keymap.of([
...closeBracketsKeymap,
...defaultKeymap,
...searchKeymap,
...historyKeymap,
...foldKeymap,
...completionKeymap,
...lintKeymap,
]),
]
}),
parent: parent
})
}
updated(changedProperties) {
//Other code...
// If we are in debug changes editor state to readOnly otherwise makes it editable
if (!this.inDebug && this.editorView.state.readOnly) {
this.editorView.dispatch({
effects: [
this.editable.reconfigure(EditorView.editable.of(true)),
this.readOnly.reconfigure(EditorState.readOnly.of(false)),
this.gutterStyles.reconfigure(
EditorView.baseTheme({
"&light .cm-activeLineGutter": {backgroundColor: "#2c313a !important"},
"&dark .cm-activeLineGutter": {backgroundColor: "#2c313a !important"}
})
)
],
});
} else if (this.inDebug && !this.editorView.state.readOnly) {
this.editorView.dispatch({
effects: [
this.editable.reconfigure(EditorView.editable.of(false)),
this.readOnly.reconfigure(EditorState.readOnly.of(true)),
this.gutterStyles.reconfigure(
EditorView.baseTheme({
"&light .cm-activeLineGutter": {backgroundColor: "#2a337e38 !important"},
"&dark .cm-activeLineGutter": {backgroundColor: "#2a337e38 !important"}
})
)
],
});
}
}
}
