How to reset editor from outside of it?

[giladv]

Couldn't find a single place with a working example or even an idea of the proper way to get the editor cleared up from outside of it.
useResetPlateEditor will work from within a plugin or a component rendered inside Plate, but what about from an outer context?

[12joan]

You might be able to achieve the result you want by adding a key prop on the Plate editor or the component you’re rendering it inside; changing that will reset the entire React component, including any state. This would be a good solution if your end goal is to completely reset the editor and start afresh in response to an event.

Failing that, any of the approaches in this comment should work. Make a code sandbox or update your question with a code sample if you need help getting that to work.

Here’s a working example of cleaning up the editor from outside of it. Replace the value prop in the child component with imperative handles if you want it to be event-driven rather than data-driven.

[giladv]

problem is, all the answers referenced above feel very hacky and make no sense. this level of a project should have a proper api.

my solution for now is something like this:

export function useApi() {
  return useRef<Api | null>(null);
}

const ApiProvider = forwardRef<Api>((props, ref) => {
  const resetEditor = useResetPlateEditor();

  useEffect(() => {
    if (!ref) {
      return;
    }

    if (typeof ref === "function") {
    } else {
      ref.current = {
        resetEditor,
      };
    }
  }, [ref]);


  return null;
});


function MyComponent(){
   const api = useApi();

  /// somewhere in the code
  api.current?.resetEditor();

    return (
      <Plate ...>
         <ApiProvider ref={api}/>
     </Plate>
   )
}

it still, feels like a hack. any official non hacky way?

[12joan]

Most of the time, when you find yourself needing to extend Plate, that can be done using plugins, so no hacks are needed. There are exceptions, of course; the issue you raise seems to be one of them. I can’t think of any solution that I wouldn’t consider at least somewhat hacky, but some less so than others.

If you can think of a nice, generalisable API for handling interactions between Plate and components higher up the component tree, it might be worth creating a PR with a proof of concept implementation. forwardRef and useImperativeHandle on the Plate component, perhaps?

Lack of support for easily sending events down (rather than up) the component tree is more a limitation of React than of Plate, I think.

[zbeyens]

forwardRef is not yet supported by slate Editable, see ianstormtaylor/slate#4082

[12joan]

Theoretically, I can't see anything stopping us from adding a new option to Plate called apiRef (or some more descriptive name) and passing that to useImperativeHandle. But with all the other solutions to this problem already available (PlateProvider being the most official among them), I'm not sure it would be worth it to do so.

[zbeyens]

PlateProvider can be used for that case.

[12joan]

@zbeyens How much refactoring would it take to make Plate usable as a controlled component? If there's no more elegant solution, it seems reasonable that changing the value prop should trigger a useEffect that does whatever is necessary to effect the change.

[12joan]

@giladv You might have some luck using usePlateActions(id).editor() to set the editor; it's used internally by useResetPlateEditor.

[zbeyens]

@12joan value prop change already updates the store value state and pass it to Slate value prop. Slate is the limitation:

• make slate a controlled input ianstormtaylor/slate#5281
• value should be renamed to initialValue ianstormtaylor/slate#4992
• Bug: Cannot update slate state externally ianstormtaylor/slate#4612

[zbeyens]

@giladv thanks for the API feedback, I'll take it into account for the next iteration:

• state prop alternative to individual state selectors + actions
• useCreatePlateState() to create/override the default state
• better docs

[giladv]

@zbeyens much appreciated. Great work!

[giladv]

so my final solution for now on how to both reset or set a value externally:

export const emptyValue = [{ type: "p", children: [{ text: "" }] }];

const ApiProvider = forwardRef<Api>((props, ref) => {
  const state = useEditorState();

  useEffect(() => {
    if (!ref) {
      return;
    }

    if (typeof ref === "function") {
    } else {
      ref.current = {
        setValue: (value = emptyValue) => {
          state.children = value;
          state.onChange();
        },
      };
    }
  }, [ref]);
  return null;
});

then you render ApiProvider inside and pass a ref as a prop.

usage:

editorApi.current.setValue([{ type: "p", children: [{ text: "hello" }] }]);
// or for reset
editorApi.current.setValue();

[VictorBaron]

Hey @giladv , thx for sharing your solution !
Works great, but I'm having issues with the selection.
If the selection was previously on a node that disappears, I get errors like Cannot find a descendant at path X in node [...].

I tried to force the deselect; or to select somewhere else: does not seem to work, I can't change the selection.
Did you, per chance, encountered & solved the issue ?

[zbeyens]

Solved by #2465.