我想切换codemirror6主题,现在我这样做:
if (projConf.confYype == ProjConfType.Theme) {
const currentTheme = themeMap.get(projConf.confValue);
if (currentTheme) {
if (!activeEditorView) return;
var theme = new Compartment;
activeEditorView.dispatch({
effects: theme.reconfigure(currentTheme)
});
}
}
首先我将主题存储在地图中
这是我的解决方案:
import { EditorState, Compartment } from '@codemirror/state';
import { javascript } from '@codemirror/lang-javascript';
import { EditorView, basicSetup } from 'codemirror';
import { cobalt as darkTheme, clouds as lightTheme } from 'thememirror';
let theme = 'light';
const themeCompartment = new Compartment;
const extensions = [
basicSetup,
javascript(),
themeCompartment.current.of(theme === 'light' ? lightTheme : darkTheme)
];
let startState = EditorState.create({ doc: '...', extensions });
let editor = new EditorView({
state: startState,
parent: document.querySelector('#editor'),
});
// and then later at some point in your app
editor.dispatch({
effects: themeCompartment.reconfigure(theme === 'light' ? lightTheme : darkTheme)
})
请注意,当我们初始化编辑器的状态时,我们首先如何使用隔间。然后我们使用同一个隔间创建效果。