Slate: How do you completely empty the editors content?

[stefan1968]

Loving this editor so far, but seem to be stumped on resetting / clearing the content.

I have a chat box and when i press send or enter, i want to clear out any text that has been entered.

How to do this?

[cobbweb]

You could make an empty state using Raw?

To reset, just pass the empty state into the editor.

Only downside to this is I don't think undo/redo will work, but based on your use-case that's probably desirable ;)

EDIT: Even simpler, you could use the plain serializer... const emptyState = Plain.deserialize('');

[Soreine]

I have a similar use case, but which needs to keep the undo/redo. I have a editable area and a button Revert changes, and I want people to be able to undo their revert, in case they have lost some important changes.

[ianstormtaylor]

I think the best way currently that preserves history would be to create a Selection from the start to the end block, and .deleteAtRange(selection). And then insert whatever you want the "blank" new state to be.

I'd be open to someone PR'ing a .selectAll() transform if anyone wants to to make this even easier!

[stefan1968]

I don't need to preserve history any method to make it easier Is fine by me.

On 9 Sep 2016 17:17, "Ian Storm Taylor" [email protected] wrote:

I think the best way currently that preserves history would be to create a
Selection from the start to the end block, and .deleteAtRange(selection).
And then insert whatever you want the "blank" new state to be.

I'd be open to someone PR'ing a .selectAll() transform if anyone wants to
to make this even easier!

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/ianstormtaylor/slate/issues/300#issuecomment-245962171,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFPshjSfMBBxLtABfI2EnHtkeONlmHi7ks5qoYalgaJpZM4J4LVG
.

[ianstormtaylor]

@stefan1968 in that case you'd want to go with @cobbweb's suggestion of deserialize a new "empty" state (whether that's a single empty paragraph, or whatever it maybe be for your specific use case) and passing it into the editor via <Editor state={state} ...

[stefan1968]

Thanks great editor by the way. I was using Draft-JS but its inability to have inline code-blocks made me want to pull my hair out..I wanted to be able to position thumbnails side by side. Should be easy, right?

[thepian]

Hmm, so what was the resolution? I still don't know how to empty an existing state or create an initial state that is empty.

• null - fail
• {} - fail
• { nodes: [] } - fail

[Rhjulskov]

@thepian Did you end up doing something like this?
const initialEditorValue = { document: { nodes: [ { object: 'block', type: 'paragraph', nodes: [ { object: 'text', leaves: [ { text: '', }, ], }, ], }, ], }, };

[dons20]

@Soreine in case you still had interest

I managed to keep the previous history by calling editor.moveToRangeOfDocument().insertBlock("")

[DominikSerafin]

For anyone that wants to instantiate editor with empty value or set empty value, see here: https://github.com/ianstormtaylor/slate/issues/713#issuecomment-427957332 (+ my next comment there)