Should the Editor Component expose a clear/reset method?
See original GitHub issueIt 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.
- 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 });
- 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?
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:
- Created 6 years ago
- Reactions:15
- Comments:7
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?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 aeditorState.getCurrentContent is not a function
in the console.Maybe I missed something ?