Should the Editor Component expose a clear/reset method?

[joshfarrant]

It seems like there's not a simple way to completely clear the Editor Component. From what I've read, it appears that there are a few round-about ways to do it.

1. From #445 - The method I'm using currently, which it seems to work as expected.

    let { editorState } = this.state;
    let contentState = editorState.getCurrentContent();
    const firstBlock = contentState.getFirstBlock();
    const lastBlock = contentState.getLastBlock();
    const allSelected = new SelectionState({
      anchorKey: firstBlock.getKey(),
      anchorOffset: 0,
      focusKey: lastBlock.getKey(),
      focusOffset: lastBlock.getLength(),
      hasFocus: true,
    });
    contentState = Modifier.removeRange(contentState, allSelected, 'backward');
    editorState = EditorState.push(editorState, contentState, 'remove-range');
    editorState = EditorState.forceSelection(
      editorState,
      contentState.getSelectionAfter(),
    );

    this.setState({ editorState });

2. Pushing a new empty state (from StackOverflow, and an older version of draft-js-plugins' FAQ) - This seems to cause some issues with cursor positioning after clearing the input.

const editorState = EditorState.push(
  this.state.editorState,
  ContentState.createFromText(''),
  'remove-range',
);
this.setState({ editorState });

This was removed from the FAQ a couple of months ago with the message "remove points from faq that don't apply anymore". Is this method no longer recommended?

3. EditorState.createEmpty() - I don't think this is recommended for anything other than initialisation.

Which of these is the recommended way to clear/reset the Editor Component? Would it make sense to expose a .clear() method on the Editor?

[elpenao]

I ran into issues with this as well. Think a clear() method would be helpful in many use cases, like a messaging app.

[jcmitch]

Checkout clearEditorContent in https://github.com/jpuri/draftjs-utils

Would be nice if it was supported directly but this worked for me for now.

[tony-go]

Hi Drafters,

Regardless the method I used that doesn't work.

If I use clearEditorContent from draftjs-utils nothing happen. If I use other previous method (EditorState.push()) I get a editorState.getCurrentContent is not a function in the console.

Maybe I missed something ?

[SylarRuby]

Bumping this. I'm sure someone from the core team could point us on the correct path. And why EditorState.createEmpty() is not the right thing to use to clear an input?

[sreetamdas]

Is there any progress on this?

[breytex]

1. solution of OP did not clear list block stylings
2. solution of OP has the well known cursor issues

I found that this is the only working solution:

// https://github.com/jpuri/draftjs-utils/blob/master/js/block.js
const removeSelectedBlocksStyle = (editorState)  => {
    const newContentState = RichUtils.tryToRemoveBlockStyle(editorState);
    if (newContentState) {
        return EditorState.push(editorState, newContentState, 'change-block-type');
    }
    return editorState;
}

// https://github.com/jpuri/draftjs-utils/blob/master/js/block.js
export const getResetEditorState = (editorState) => {
    const blocks = editorState
        .getCurrentContent()
        .getBlockMap()
        .toList();
    const updatedSelection = editorState.getSelection().merge({
        anchorKey: blocks.first().get('key'),
        anchorOffset: 0,
        focusKey: blocks.last().get('key'),
        focusOffset: blocks.last().getLength(),
    });
    const newContentState = Modifier.removeRange(
        editorState.getCurrentContent(),
        updatedSelection,
        'forward'
    );

    const newState = EditorState.push(editorState, newContentState, 'remove-range');
    return removeSelectedBlocksStyle(newState)
}

Its a combination of two helper functions provided by https://github.com/jpuri/draftjs-utils . Didn't want to npm install the entire package for this. It resets the cursor state but keeps the block list styling. This is removed by applying removeSelectedBlocksStyle()

Hope this helps. I just can't belive how a library this mature doesn't offer a one-line reset feature.

[jiminikiz]

@breytex and to add to his point, if you are using Next.js, draftjs-utils is not a safe bet as it does not do the proper checking for the presence of window ...