Setting OnChange to Plate makes Editor onfocusable

[BasicallyPolaris]

Hello Community!
I am currently migrating from Plate 36 to Plate 39. Previously I used the OnChange method in Plate to provide an external OnChange to other components outside of the Plate editor, allowing for simple access to the editor's value from the outside, without changing the editor's behavior.
Since migrating to Plate 39 however, this does not work. The new OnChange results in me being unable to focus and change the editor value, if set.

Code snippet:

type plateTextEditorProps = {
  /**
   * External Onchange
   */
  onChange?: (value: Value) => void;
};

export function RichTextEditor({
  onChange = () => { },

}: plateTextEditorProps) {
  const localValue =
    typeof window !== 'undefined' && localStorage.getItem('editorContent');

  return (
    <TooltipProvider>
      <Plate editor={editor} onChange={({ value }) => {
        localStorage.setItem('editorContent', JSON.stringify(value));
        onChange(value as Value);
      }}>
        <FixedToolbar>
          <FixedToolbarButtons withModeSelect={withModeSelect} />
        </FixedToolbar>

        <Editor />

        <FloatingToolbar>
          <FloatingToolbarButtons />
        </FloatingToolbar>
      </Plate>
    </TooltipProvider>
  );

My previous implementation did not use the local storage at all, this is something I now added following the new instructions for setting up Plate. If anyone has any tips or knows a way to get the value from the editor from the outside without using OnChange help would be greatly appreciated!

My requirements are that I only need to access the JSON data when submitting a form in which the editor is embedded.

With best regards,
Soheel :)

[zbeyens]

See https://platejs.org/docs/controlled

[BasicallyPolaris]

I tried both the below calls by propagating the methods down, and the out of Plate components using the <PlateController>, but all versions result in my Plate Editor being unresponsive, auto-deselecting itself the moment I try to select it. The proposed solution in getting started also does not work and leads to the same error for me.

[zbeyens]

Could you reproduce it from https://github.com/udecode/plate-playground-template?

[BasicallyPolaris]

https://github.com/BasicallyPolaris/plate-playground-template

This raw implementation used to work on plate 36. Here I get the errors (forked from your plate-playground-template), the editor is not focusable or editable once using onChange (at least the way I use it, and how I understand I should use it reading the docs).

[zbeyens]

Looks like you forgot to use useMemo. The editor is being re-created on each re-render. Or you could use usePlateEditor that is memoized.

[BasicallyPolaris]

Wow... Thank you very much for your time and effort!