Editor font size change dynamically

v6
6

Ok, so I have some different code that’s sort of working. But it only changes the editor font size one time despite me passing in different font sizes.

Here’s what I have now:

const theme = new Compartment();

var baseTheme = EditorView.baseTheme({
    "&light": {
    backgroundColor: "white",
        "color-scheme": "light",
    },
    "&dark": {
        "color-scheme": "dark",
    },
});

const editorView = new CodeMirror.EditorView({
  doc: "",
  extensions: [
        // stuff 

        baseTheme,
        theme.of(oneDark),

        // more stuff
  ],
  parent: document.body,
});

function setFontSize(size) {

    baseTheme = EditorView.baseTheme({
        ".cm-content": {
            fontSize : size + "pt",
        },
        ".cm-gutters": {
            fontSize : size + "pt",
        },
    });
    
    editorView.dispatch({
        effects: theme.reconfigure(baseTheme)
    });
}

So I’m calling setFontSize() from a Mac app in Swift. CodeMirror is displayed in a WebKit view.

The font size does change. But only the first time I call it. Is there another way to refresh?

Or is the problem with me re-creating the baseTheme var? I haven’t figured out a way to just reference the baseTheme variable and update the .cm-content and .cm-gutters styles directly. So that’s why I create a new one.

Perhaps there’s a better way? Am I close?