StateEffect.reconfigure closes autocomplete on every time I type

v6
1

So I am making a svelte action which takes an object as options. You can pass Codemirror themes and extensions to it as well.

usage looks like this:

<div
	class="codemirror-container"
	use:codemirror={{
		value: code,
		setup: 'basic',
		useTabs: tab,
		tabSize: 2,
		theme: svelteTheme,
		readonly,
		lang,
		langMap: {
			js: () => import('@codemirror/lang-javascript').then((m) => m.javascript()),
			json: () => import('@codemirror/lang-json').then((m) => m.json()),
			md: () => import('@codemirror/lang-markdown').then((m) => m.markdown()),
			css: () => import('@codemirror/lang-css').then((m) => m.css()),
			svelte: () => import('@replit/codemirror-lang-svelte').then((m) => m.svelte())
		},
		extensions: [closeBrackets(), bracketMatching(), codeFolding(), history(), watcher],
		diagnostics,
		instanceStore: cmInstance
	}}
	on:codemirror:change={(e) => {
		code = e.detail;
		dispatch('change', { value: code });
	}}
>

Now, everytime I pass it a new value, it reconfigures the extension. That causes an autocomplete flicker which is annoying. The autocomplete never stays open even if I stop typing, it flickers only on typing and disappears after a few milliseconds.

I tried to use lodash.isEqual to compare all the properties other than value, but for some reason, it always returns false, which makes me think the extensions or themes have some thing to do with screwing up lodash-isEqual.

Is there a way this flicker can be avoided? Or you know a library which can help me check whether only the value changed and nothing else?

2

You kind of already mentioned it yourself—constantly reconfiguring the editor is what causes this, so find a way to not do that.

3

Do you know of a way that extensions can be deep compared? As I stated, lodash isEqual doesn’t work with it, so something that it is doing

4

If they are the actual same extension objects, lodash should see they are equal. If they are different instances of extensions that happen to have the same effect, you won’t be able to find that out by comparing. You’ll want to set up your system in a way that doesn’t cause extensions to be recreated, somehow.