How to access states of all sub-editors within a PlateController?

[atharvashukla]

Our custom editor is composed of multiple sub-editors within a PlateController.

export function PlateEditors() {
  return (
    <PlateController>
      <PlateControllerChildren></PlateControllerChildren>
    </PlateController>
  );
}

function PlateControllerChildren() {
  const stores = usePlateControllerStates().editorStores();
  // Is this the right way to access the editor state of all sub-editors?
  
  return (
    <>
      {/* These hold their own Plate Editors (<Plate> <Editor/> </Plate>) */}
      <EditorA />
      <EditorB />
      <EditorC />
      <EditorD />
    </>
  );
}

I'm looking for a way to access the state of all my sub-editors... but I'm stuck here.

From the docs ("The PlateController Store contains the information required to fetch a Plate Store" and "The PlateStoreState object stores the state of the Plate editor"). I'm assuming there is a straightforward way to access all editor states... but I am not sure how to do that.

I know there is a way to do this with refs, but since the PlateController is recommended in the docs and it already uses a state management library (jotai), I'm curious if I can easily use that.

Any help here would be super appreciated!

[12joan]

One limitation of Jotai is you can only access its stores using React hooks, one hook per store. If your number of editors is unchanging, you can get the array of stores from usePlateControllerSelectors and then pass each store to a usePlateStore to get its editor ref.

If you don't have a constant number of editors, then you'll have to remount the component that contains the hooks every time the number changes. A key={stores.length} prop should do that.

I think the simplest solution would just be to pass a callback ref toeditorRef on each Plate component to register each editor with a global store.

[atharvashukla]

The number of editors can, in fact, change in our case:

I think the latter solution would be better for us. Thank you!