useEditorRef with id from inside a plugin component returns active editor (not id)

[bennyqp]

Hi there,

I'm facing an issue with the useEditorRef hook, where it doesn't seem to reference the intended editor by id. Despite specifying the id of a specific editor instance, it always returns the currently active editor. I'm trying to use it from a plugin component from inside an editor.

Is this an issue, or am I misunderstanding its usage? Any suggestions or fixes would be greatly appreciated.

Thanks!

import { PlateElement, createPluginFactory } from "@udecode/plate-common";
import { useEditorRef } from "@udecode/plate-common";
const ELEMENT_SENTENCE = "sentence";

function SentenceElement({ className, children, ...props }) {
  const outputEditor = useEditorRef("output-editor");

  console.log("output editor: ", outputEditor.id);
  // always logs "input-editor" which is the active one 

  return (
    <PlateElement asChild className={`${className}`} {...props}>
      <span>
        {children}
      </span>
    </PlateElement>
  );
}

export const createSentencePlugin = createPluginFactory({
  key: ELEMENT_SENTENCE,
  isElement: true,
  component: SentenceElement,
});

[12joan]

Can you double check what usePlateStore('output-editor').get.editor().id outputs?

[12joan]

If it's still giving the wrong editor, can you add a breakpoint to this line in jotai-x and make sure that the scope is output-editor and storeContext contains an entry for plate:output-editor?

[12joan]

If, on the other hand, usePlateStore('output-editor') is giving you the correct store, it's the logic in usePlateEditorStore you'll want to debug.

[bennyqp]

Hi Joe,

Thanks for your answer! I tried using usePlateStore('output-editor').get.editor().id, but it still outputs the wrong id. I also looked into useAtomStore() from jotai-x, but can't seem to make it work properly. Guess I'm too inexperienced to debug this correctly, sorry 🙈.

However, I've put together the simplest implementation of the issue in a CodeSandbox. Maybe someone can debug it better or has an idea on how to access another editor from inside a plugin component.

[zbeyens]

This works like React context: it needs to be above the component. That should work:

<Plate id="editor1">
        <Plate id="editor2" initialValue={initialValue} plugins={plugins}>
          <div className="w-full">
            <h1>Editor 1</h1>
            <PlateContent className="editor" placeholder="This is editor1" />
          </div>
            <div className="w-full">
              <h1>Editor 2</h1>
              <PlateContent className="editor" />
            </div>
          </div>
        </Plate>
      </Plate>

[bennyqp]

Yes, that was the problem! Thank you very much. Since I rendered a PlateController at the root of my project (forgot this in the CodeSandbox) I thought I could access each editor from anywhere in my app using useEditorRef. But nesting the Plate components works perfectly!

Thank you so much! You guys are awesome, and so is Plate!

[12joan]

PlateController should probably work in the way you describe. It looks like the problem is indeed in usePlateEditorStore, where if localStore returns a value, PlateController's store is never consulted. localStore comes from usePlateStore(id), which if it can't find an ancestor Plate with a matching ID, just returns the first ancestor Plate of any ID.

@zbeyens We might want to change Jotai-x so that is a scope is specified, it doesn't return a value for a store that doesn't match that scope. The current behaviour of falling back to any scope was an intentional design decision, but it seems to be making it difficult to write reliable code.

[zbeyens]

We should indeed throw an error if there is no matching store for a defined scope.

[zbeyens]

Actually returning undefined for all selectors would be better to not involve conditional hooks in some cases. We can throw an error for setters though.