fix: sometimes slate does not proper update

also introdces a language switch example that sometimes showed the issue when the lang was changed "outside"

examples/pages/examples/languageSwitch.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import type { Options, Value } from '@react-page/editor';
+import Editor from '@react-page/editor';
+import slate from '@react-page/plugins-slate';
+import image from '@react-page/plugins-image';
+import { ExampleCustomBottomToolbar } from '../../components/ExampleCustomBottomToolbar';
+import { Button } from '@mui/material';
+import customContentPlugin from '../../plugins/customContentPlugin';
+
+const cellPlugins = [slate(), image, customContentPlugin];
+
+const LANGUAGES = [
+  {
+    lang: 'en',
+    label: 'English',
+  },
+  {
+    lang: 'de',
+    label: 'Deutsch',
+  },
+];
+
+// Custom bottom toolbar example with collapse/restore functionality.
+const languageSwitchExample = () => {
+  const [lang, setLang] = React.useState<string>('en');
+  const [value, setValue] = useState<Value>();
+
+  return (
+    <>
+      <select value={lang} onChange={(v) => setLang(v.target.value)}>
+        {LANGUAGES.map((l) => (
+          <option key={l.lang} value={l.lang}>
+            {l.label}
+          </option>
+        ))}
+      </select>
+      <Editor
+        languages={LANGUAGES}
+        cellPlugins={cellPlugins}
+        value={value}
+        onChange={setValue}
+        lang={lang}
+        onChangeLang={(l) => {
+          setLang(l);
+        }}
+      />
+    </>
+  );
+};
+
+export default languageSwitchExample;

packages/plugins/content/slate/src/components/SlateProvider.tsx

@@ -21,9 +21,12 @@ const SlateProvider: FC<PropsWithChildren<SlateProps>> = (props) => {
   );
 
   // unfortunatly, slate broke the controlled input pattern. So we have to hack our way around it, see https://github.com/ianstormtaylor/slate/issues/4992
+  useMemo(() => {
+    // better do this in use effect to avoid certain timing edge cases
+    editor.children = data?.slate;
+  }, [data?.slate]);
 
   useEffect(() => {
-    editor.children = data?.slate;
     try {
       // focus
       ReactEditor.focus(editor);