How to set value from the outside?

[maral]

Hi, I just found out both plate and slate aren't controlled inputs, so I can't simply change the value from the outside. I use plate within a larger wysiwyg editor, which manages history by itself. What is the cleanest approach to sync such changes with my plate editor? I've seen a couple of discussions, with varied states of staleness:

• Plate - dynamically update editor value from props #1262
• How to reset editor from outside of it? #2193
• setValue() not work #2691

I haven't really been happy with any of the solutions. This is a solution that works for me:

function MyRichTextEditor({ value }: { value: RichTextValue }) {
  return (
    <Plate<RichTextValue> initialValue={value} plugins={pluginsWithComponents} onChange={onChange}>
      <ValueSetter value={value} />
      <PlateContent />
    </Plate>
  );
};

function ValueSetter({ value }: { value: RichTextValue }) {
  const replaceEditor = useReplaceEditor();
  const setValue = usePlateActions().value();

  useEffect(() => {
    replaceEditor();
    setValue(value);
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [value]);

  return null;
}

What is currently the cleanest way to set the editor's value? Let's say there's a property coming into the component holding Plate editor, and on every change of that property, I'd like to change the Plate's value to that property.

Also, it would be great if this could be added to the documentation (since it's being mentioned here repeatedly).

[mareksuscak]

@zbeyens could you please provide some clarity here? This should probably be documented as it's not necessarily apparent how to accomplish it (what's the best practice) and it's the most common pattern to use any input in React so I can only imagine that a lot of people would have the same question. Thank you!

[zbeyens]

We now have a Controlled Value guide.