question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Should the Editor Component expose a clear/reset method?

See original GitHub issue

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 });
  1. 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?

  1. 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?

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:15
  • Comments:7

github_iconTop GitHub Comments

7reactions
SylarRubycommented, Aug 3, 2019

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?

3reactions
tony-gocommented, May 7, 2018

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 ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is it possible to expose a function defined within a React ...
I'm refactoring some old code for an alert widget and am abstracting it into its own component that uses DOM ...
Read more >
Refs and the DOM - React
Avoid using refs for anything that can be done declaratively. For example, instead of exposing open() and close() methods on a Dialog component,...
Read more >
EditorComponent - Editor API - Kendo UI for Angular - Telerik
Sets the disabled state of the component. iframe. boolean. true. If set to false , the Editor will ...
Read more >
Components | Unreal Engine 4.27 Documentation
The Scene Component system does not support attachment cycles. The two primary methods are SetupAttachment , which is useful in constructors and when...
Read more >
CodeMirror 5 User Manual
CodeMirror is a code-editor component that can be embedded in Web pages. ... TextMarker ), which exposes three methods: clear() , to remove...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found