Switch editors for the same <Plate /> component

[yf-yang]

I try to create a multi-tab application. It's something like

function App() {
  const [editor, setEditor] = useState(undefined);

  return <Plate editor={editor} />
}

Unfortunately, when I switch editor, the content does not change.

To make it work, I try to patch the code

plate/packages/core/src/client/components/Plate.tsx

Lines 103 to 114 in a59cdc0

	const editor: E = React.useMemo(
	() =>
	editorProp ??
	createPlateEditor({
	disableCorePlugins,
	id,
	maxLength,
	plugins: pluginsProp as any,
	}),
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[]
	);

by adding editorProp as a dependency, however, the rendered result of PlateContent remains unchanged. Therefore, I guess there are much more memorized state than I expect.

My question is:
Does Plate support the use case mentioned above?
If I am willing to draft a PR, what's the components that should be taken care of?

[felixfeng33]

could you try add a key property?

[yf-yang]

Yep, currently I force a rerender as the workaround. Are there better approaches?

[felixfeng33]

Oh, ok, I misunderstood. I haven’t encountered this situation before.It might be an issue with Slate.js.There is a replaceEditor method.
#3321

[yf-yang]

Check the replaceEditor source code, I guess it does not affect React component.

@zbeyens Do you have any insights?

[yf-yang]

Quite interesting, I find Plate does pass a key prop to Slate. Not sure why it does not work.

plate/packages/core/src/client/hooks/useSlateProps.ts

Lines 38 to 46 in 65cfe84

	return React.useMemo(() => {
	return {
	editor,
	initialValue: value,
	key: editor.key,
	onChange,
	value,
	};
	}, [editor, onChange, value]);