CodeMirrorMerge gets unfocused on value change

[denbalogh]

When I use CodeMirrorMerge with onChange prop in the CodeMirrorMerge.Original component, the editor gets unfocused every time I change the value.

It is happening since the 4.21.2 update.

[denbalogh]

Here's the issue in codesandbox https://codesandbox.io/s/bold-estrela-rzqwck?file=/src/App.js

[denbalogh]

@jaywcjlove I updated to latest release and now it won't even render the editor. Codesandbox

[jaywcjlove]

react-codemirror/merge/src/index.tsx

Lines 11 to 14 in 92c4abe

	/**
	* Default is `false`. If true, the editor will be destroyed and re-rendered every time the editor is updated.
	*/
	destroyRerender?: boolean;

@denbalogh I'm trying to fix it by adding a destroyRerender prop to turn off re-rendering the component on every update.

react-codemirror/merge/src/Internal.tsx

Lines 78 to 84 in 92c4abe

	view.current?.a.dispatch({
	changes: { from: 0, to: originalDoc.length, insert: original.doc || '' },
	// effects: StateEffect.reconfigure.of([
	// ...(originalExtension?.extension || []),
	// ...getDefaultExtensions({ ...originalExtension?.option, theme }),
	// ])
	});

During the update, all extensions will be lost. If you add dispatch({ effects }), an @codemirror/merge internal error will be triggered.

So I thought of a compromise method and regenerated it after updating, which caused the onChange problem.

react-codemirror/merge/src/Internal.tsx

Lines 99 to 119 in 92c4abe

	if (destroyRerender) {
	view.current?.destroy();
	view.current = new MergeView({
	a: {
	...original,
	extensions: [
	...(originalExtension?.extension || []),
	...getDefaultExtensions({ ...originalExtension?.option, theme }),
	],
	},
	b: {
	...modified,
	extensions: [
	...(modifiedExtension?.extension || []),
	...getDefaultExtensions({ ...modifiedExtension?.option, theme }),
	],
	},
	parent: editor.current!,
	...opts,
	});
	}

[denbalogh]

@jaywcjlove Is that a difficult problem to solve, will it take long? Sorry to be a bother, but we count on this functionality in our project.

[jaywcjlove]

https://codesandbox.io/embed/https-github-com-uiwjs-react-codemirror-issues-566-sff6t3?fontsize=14&hidenavigation=1&theme=dark

@denbalogh Looks like the problem is solved

[denbalogh]

@jaywcjlove yes, seems like it is. Thank you, very appreciated 🙏