How can I clean an Editor after successfully handle onSubmit function?

[dipto0321]

In my react app, I have created a component name RichTextEditor using lexical. Now I want to clean the Editor from a different component. No idea how to do it. I have checked for question regarding this clean. But it's not clear for me how to implement it. Thanks

[thegreatercurve]

You need access to the editor instance from your other component, by passing the MLCComposer provider up to a common parent, but you can then do something like the below to clear the editor state:

editor.update(() => {
  const root = $getRoot();
  root.clear();
});

We provide an importabl plugin called ClearEditorPlugin which will also handle this use case for you.

To clear the editor, you can call editor.dispatchCommand(CLEAR_EDITOR_COMMAND) from your other component.

[Hudson-AmalembaL]

Yeah i know this is late, but for anyone new, here is a full example of the callback.
i noticed just leaving it like can be somewhat too abstracted.

const handleClearEditor = useCallback(() => {
        editor.update(() => {
            const root = $getRoot();
            root.clear();
        })

        editor.focus();
  }, [editor])

then in a button

<button onClick={handleClearEditor} />

:)

[guru-keepspace]

how to get editor instance ?
I am using which is handling initialization by its own

'use client';


export function Editor(): JSX.Element | null {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // When the editor changes, you can get notified via the LexicalOnChangePlugin!
  const handleTextChange = (
    editorState: EditorState,
    editor: LexicalEditor
  ) => {
    editorState.read(() => {
      const htmlString = $generateHtmlFromNodes(editor, null);
      console.log("htmlString: ", htmlString);
    });
  };

  
  if (!isMounted) return null;

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <OnChangePlugin onChange={handleTextChange} />
          <ListPlugin />
          <HistoryPlugin />
          <AutoFocusPlugin />
          <CodeHighlightPlugin />
          <LinkPlugin />
          <TabIndentationPlugin />
          <AutoLinkPlugin />
          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
        </div>
      </div>
    </LexicalComposer>
  );
}

[pkboy]

how to get editor instance ? I am using which is handling initialization by its own

Late but for future reference you can use EditorRefPlugin and useRef.

Then you can get the editor via editorRef.current

  const editorRef = React.useRef<LexicalEditor>(null);
  ...
  <LexicalComposer>
    <EditorRefPlugin editorRef={editorRef} />
    ...
  </LexicalComposer>