Dynamically update Plate editor content from props

[fbolcic]

Hi,

We are using a Plate editor in read-only mode to show values that are entered in another editor. Unfortunately, the values do not update and only the initial values are rendered. The issue can be seen on this CodeSandbox. The first editor is used to input values and the second is used to show them in read-only mode.

Our use case: we have a preview feature where the read-only editor is used to preview content entered in another editor. This allows us to skip manipulations of native editor value, simply showing it instead.

I have read up on the discussion forum and there was already an answered issue for this. The answer is from 2021 and we are curious if there is some more ergonomic solution for this (also, it is not quite clear how the OP implemented the solution).

I have also seen this possibility with useResetPlateEditor. This does not work in our use case since we do not reset the editor based on a single event - but our editor needs to respond to value changes. Using the useResetPlateEditor in this scenario just causes endless re-rendering.

Any ideas would be really helpful. Thank you in advance!

[12joan]

Would something like this work for your use case? Fork of your code sandbox

const ResetEditorOnValueChange = ({ value }: { value: MyValue }) => {
  const resetPlateEditor = useResetPlateEditor();
  const isFirst = useRef(true);

  useEffect(() => {
    if (isFirst.current) {
      isFirst.current = false;
      return;
    }

    resetPlateEditor();
  }, [value, resetPlateEditor]);

  return null;
};

The isFirst is to prevent an infinite re-render loop.

[fbolcic]

Yeah this works. Thanks!
But is there any other way to achieve this pattern - updating read-only editor dynamically?

[12joan]

This is being discussed in this discussion. Hopefully, there'll be a more elegant solution in the future, but this is the best solution I know of for now.

[fbolcic]

Ok, thank you for your help and a quick reply!