codemirror6可以动态切换主题吗

Question

我想切换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)
          });
        }
      }

首先我将主题存储在地图中，并通过名称获取主题，将主题设置到editorView中。但 codemirror6 主题没有改变，我错过了什么吗？我从这个问题中得到启发https://discuss.codemirror.net/t/how-to-change-editor-theme-dinamically/4173/5来自codemirror6社区。

Answer 1

这是我的解决方案：

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)
})

请注意，当我们初始化编辑器的状态时，我们首先如何使用隔间。然后我们使用同一个隔间创建效果。