how to clear input

[lcyamcol]

Description

I'm using usePlateEditor to create the editor instance, and I'm passing an initial value. After submitting a form, I want to clear the editor content.

However, calling Transforms.removeNodes(editor, { at: [] }) or resetting editor.children manually doesn't seem to work properly. The content remains visible or the editor crashes in some cases.

I also tried using setEditorValue([]) with a controlled setup, but when using usePlateEditor, the value prop doesn't update after initial render, so I can't reset it that way either.

Plate version

49

Slate React version

19

Browsers

Chrome

[dosubot[bot]]

Hi @lcyamcol! I'm Dosu and I’m helping the plate team.

To clear the editor content when using usePlateEditor, you can't just set editor.children = [] or rely on updating the value prop—Plate's normalization will either crash or re-insert a default node. The recommended way is to remove all nodes and insert a valid root block (like a paragraph). For example:

import { Transforms } from 'slate';

Transforms.removeNodes(editor, { at: [0] }); // Remove all top-level nodes
Transforms.insertNodes(editor, [{ type: 'p', children: [{ text: '' }] }], { at: [0] }); // Insert an empty paragraph

This approach respects Plate's requirement that the document is never empty and avoids crashes or unwanted behavior. If you need a controlled setup where you can reset the value directly, consider using usePlate instead of usePlateEditor, as usePlateEditor is designed for uncontrolled usage and memoizes the initial value only on mount.
More details on why this is necessary can be found here.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}