How can I clear the value to an empty/default state by a button click?

[lazycipher]

I have a form which has a few fields and one of them is a lexical rich text field.
There's a button which is supposed to clear the things whatever user wrote and reset it to default initial value.
Is there any way to do it?

Below is my Editor component, I am supplying the value and onChange as props. I

export default function Editor({
  onChange,
  value,
  key,
  classNames = "",
}) {
  const editorStateRef = useRef();
  const editorConfig = useMemo(
    () => ({
      editorState: value ?? null,
      // The editor theme
      theme: EditorTheme,
      // Handling of errors during update
      onError(error) {
        throw error;
      },
      // Any custom nodes go here
      nodes: [
        HeadingNode,
        ListNode,
        ListItemNode,
        QuoteNode,
        CodeNode,
        CodeHighlightNode,
        TableNode,
        TableCellNode,
        TableRowNode,
        AutoLinkNode,
        LinkNode,
      ],
    }),
    [value]
  );

  return (
    <LexicalComposer
      initialConfig={editorConfig}
      key={key || "lexicaldev-editor"}
    >
      <div
        className={`editor-container border rounded-xl w-full ${classNames}`}
      >
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
            ErrorBoundary={LexicalErrorBoundary}
          />
          <OnChangePlugin
            onChange={(editorState, editor) => {
              editorStateRef.current = editorState;
              editor.update(() => {
                const html = $generateHtmlFromNodes(editor, null);
                if (onChange) {
                  onChange(editorState, html);
                }
              });
            }}
          />
          <HistoryPlugin />
          <AutoFocusPlugin />
          <CodeHighlightPlugin />
          <ListPlugin />
          <LinkPlugin />
          <AutoLinkPlugin />
          <ListMaxIndentLevelPlugin maxDepth={7} />
          <MarkdownShortcutPlugin transformers={TRANSFORMERS} />
        </div>
      </div>
    </LexicalComposer>
  );
}

This is my formik state:

  const handleSubmit = (values, actions) => {
    console.log("values: ", values);
  };

  const formik = useFormik({
    initialValues: {
      title: "",
      plainDescription: "",
      description: EMPTY_EDITOR,
      htmlDescription: "",
    },
    onSubmit: handleSubmit,
  });

I am already doing resetForm of formik which is resetting everything to initial state. Every other field works as expected but the Editor is the only thing not working.

const { values, setFieldValue, resetForm, handleSubmit } = formik;
<Editor
        value={values.description}
        onChange={(editorState, htmlDesc) => {
          setFieldValue("description", editorState);
          setFieldValue("htmlDescription", htmlDesc);
          setFieldValue(
            "plainDescription",
            editorState.read(() => $getRoot().getTextContent())
          );
        }}
        classNames="w-full"
      />

 <button className="btn btn-secondary w-full" onClick={resetForm}>
          <BiReset size={20} /> Reset
        </button>

[lazycipher]

Can anyone help please?

[buondevid]

I'm having the same problem: when resetting the Form (I use React Final Form) the Lexical Editor doesn't reset. I know why that happens: it's because the initialConfig is read only on mount once, and the Lexical Editor doesn't remount when the Form is resetted.

So the question is: how do we force Lexical to re-read the InitialState value on a specific condition?

[2wheeh]

Updating key will refresh the editor #3335 (comment).
I would try with utilizing form state as a key.

[buondevid]

Yea I know about the key trick, thanks, but I was honestly hoping for something baked in Lexical that doesn't force me to re-mount the component 🤷

[prudnikov]

Try this

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

[etrepum]

That would leave the root node without any block nodes at all, you would generally want to append a paragraph node after clearing it, and it may leave the selection in a bad state. There is a ClearEditorPlugin for this purpose that implements CLEAR_EDITOR_COMMAND.

[prudnikov]

It looks like this is React component, and in my case I wasn't using react, but I took the code from it, thanks for mentioning this.
So my final code looks like this:

this.editor.update(
  () => {
    const root = $getRoot();
    const selection = $getSelection();
    const paragraph = $createParagraphNode();
    root.clear();
    root.append(paragraph);

    if (selection !== null) {
      paragraph.select();
    }
    if (selection && $isRangeSelection(selection)) {
      selection.format = 0;
    }
  },
  { tag: 'external' },
);