Dynamically changing theme in MergeView

v6
1

Hello all! I am implementing a MergeView and trying to dynamically change the theme based on the user choosing light or dark mode. I can get the two editors updated fine by the following:

view.a.dispatch(
	view.a.state.update({
		effects: StateEffect.reconfigure.of([
			...nonThemeExtensions,
			selectedTheme,
		]),
	}),
);
view.b.dispatch(
	view.b.state.update({
		effects: StateEffect.reconfigure.of([
			...nonThemeExtensions,
			selectedTheme,
		]),
	}),
);

Where nonThemeExtensions are as follows:

const nonThemeExtensions = [
	basicSetup.filter((extension) => extension !== highlightActiveLine()),
	EditorView.lineWrapping,
	languageSupport,
	errorHighlightField,
	keymap.of([indentWithTab]),
];

the problem however is when the updates occur, I lose the diff highlighting from MergeView and I cannot seem to get it back. Syntax highlighting all still works on the per editor basis. I have tried to implement the use of reconfigure on MergeView but I encounter an error where the currentConfig in the reconfigure function is returning undefined:

In the MergeConfig interface, it shows all of the options as optional. I try the following:

view.reconfigure({
    highlightChanges: true
});

and get an error here in the reconfigure function definition

let currentConfig = this.a.state.facet(mergeConfig);
let markGutter = gutter2 ? config.gutter !== false : currentConfig.markGutter; <----here

I either need to figure out why currentConfig is undefined, or figure something else out. The only other way which does work is to reinstantiate the entire view and pass the doc state of each editor the new view. This does however make a jarring UI experience as when the theme is swithed there is a .5 sec transition between the colors and since we are completely replacing the view, it is changing color immediately.

If anyone has ideas or has done this successfully I am all ears! Thanks in advance!

2

I will also add this is a Vue project just incase it is relevant. Not sure if how Vue manages the state is making certain values not persist

3

I hope this helps someone in the future. Beat my head against it all day and finally got it to work:

Define a compartment at the top:

const theme = new Compartment();

construct your view initially:

view = new MergeView({
	a: {
		doc: '',
		extensions: [...nonThemeExtensions, theme.of(selectedTheme)],
	},
	b: {
		doc: '',
		extensions: [...nonThemeExtensions, theme.of(selectedTheme)],
	},
	parent: editor.value,
});

And finally when the theme changes do this:

const newTheme = theme.reconfigure(selectedTheme);
  
view.a.dispatch(
	view.a.state.update({
		effects: newTheme
	}),
);
view.b.dispatch(
	view.b.state.update({
		effects: newTheme
	}),
);