Comments (15)
EditorState.moveFocusToEnd(EditorState.createEmpty()) helped.
Thanks, this helps give me a hunch about what the issue is here.
When using EditorState.createEmpty
, we can't currently make any assumptions about whether the generated SelectionState
has focus or not, since one may be prepopulating the editor without focus. We therefore create a non-focused SelectionState
.
As you note, using moveFocusToEnd
will resolve the issue. This is because the current selection will be given focus, and subsequent edits make sense to the editor.
I think the right fix here is to create an EditorState.createEmptyWithFocus
method for use cases like these, where the focus should remain in the editor after clearing it, basically exactly as you've implemented above.
static createEmptyWithFocus() {
const empty = EditorState.createEmpty();
return EditorState.moveFocusToEnd(empty);
}
Does that sound like a good solution to you?
from draft-js.
This was great. I feel like this should be in an FAQ somewhere. Clearing the editor should be a pretty common use case.
from draft-js.
Did you mean to do this.setState({editorState: EditorState.createEmpty()})
?
from draft-js.
Sorry, the title is incorrect. I did this.setState({editorState: EditorState.createEmpty()})
from draft-js.
I can't get this to repro. I used the plaintext
example and created a button that calls this.setState({editorState: EditorState.createEmpty()})
when clicked, which worked fine.
Do you have some sample code to share?
from draft-js.
I cleared on handleEnter
which I think was related to the issue. The component clears, but then if you continue typing into it your input goes onto the next line. I'll see if I can make a reproducing case this evening.
from draft-js.
Did you return true
from your handleReturn
function? This tells the keydown handler that the event should not be treated like a newline insertion.
http://facebook.github.io/draft-js/docs/api-reference-editor.html#cancelable-handlers-optional
from draft-js.
Yes, I returned true and then cleared the input. Upon subsequent typing it seemed like my newline was latently sitting there waiting for more text.
from draft-js.
Can you provide a gist?
from draft-js.
Hello! I'm experiencing this issue too. Here is the gist:
https://gist.github.com/Ahineya/e689a012e32a48e6d734
After pressing escape or enter, the editor is cleared, but when I press a letter key, it adds a letter after the cursor, not before. And after pressing a letter key second time, it creates a new line with previous key. It produces this html: https://gist.github.com/Ahineya/bb4556ae3e5503ce1ddf
And after pressing enter or escape, produced html is like this:
https://gist.github.com/Ahineya/a12fcafe7379a43f7261
And when new line is created, pressing escape or enter doesn't remove it.
EditorState.moveFocusToEnd(EditorState.createEmpty())
helped.
from draft-js.
Yes. Any chance you could log a warning if createEmpty is called and the
editor remains focused with a hint to use createEmptyWithFocus? There is no
obvious reason why createEmpty would also cause the component to blur.
On Wed, Mar 2, 2016 at 11:44 AM Isaac Salier-Hellendag <
[email protected]> wrote:
EditorState.moveFocusToEnd(EditorState.createEmpty()) helped.
Thanks, this helps give me a hunch about what the issue is here.
When using EditorState.createEmpty, we can't currently make any
assumptions about whether the generated SelectionState has focus or not,
since one may be prepopulating the editor without focus. We therefore
create a non-focused SelectionState.As you note, using moveFocusToEnd will resolve the issue. This is because
the current selection will be given focus, and subsequent edits make sense
to the editor.I think the right fix here is to create an
EditorState.createEmptyWithFocus method for use cases like these, where
the focus should remain in the editor after clearing it, basically exactly
as you've implemented above.static createEmptyWithFocus() {
const empty = EditorState.createEmpty();
return EditorState.moveFocusToEnd(empty);
}Does that sound like a good solution to you?
—
Reply to this email directly or view it on GitHub
#73 (comment).
from draft-js.
There is no obvious reason why createEmpty would also cause the component to blur.
Hmm, it's hard to say where exactly the warning would go. Within a createEmpty
call, we won't have any awareness of whether the editor is still focused in the DOM.
from draft-js.
Would love a PR for this, with or without a console warning. :)
from draft-js.
Does that sound like a good solution to you?
Yes, thank you. I have understand that this is by-design stuff :)
I think you should add this example to documentation to avoid misunderstanding in future.
from draft-js.
EditorState.moveFocusToEnd
is now added to the docs, so I'm going to go ahead and close this.
from draft-js.
Related Issues (20)
- read-only font size not working
- Ctrl+A selection doesn't work in Firefox when there are action items
- Bug in demo text editor on website HOT 4
- created by DraftEditorTextNode
- state in decorator are memorised
- Add custom classes
- Ordered and unordered lists don't work
- Is/should convertToRaw be based on some kind of open standard? HOT 1
- How to insert texts via google chrome extension to an input created by DraftJS HOT 1
- Pressing return jumps to start of line in Android API 33 HOT 1
- How to change blockType by pressing keyboard
- why draftInlineStyleType only can be default type? HOT 1
- How to get the cursor position? HOT 4
- URGENT :: How to update words arrays in handleStrategy of decorator?
- how to stop the style i add in replaceText?
- pre select inline style, then input in composition mode, the selected inlinestyle not work
- when input some IME punctuation, the editor crashs
- wrong return value of getInlineStyleForCollapsedSelection and getInlineStyleForNonCollapsedSelection
- http://localhost:8000/
- InvalidStateError: 'extend' requires a Range to be added to the Selection HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from draft-js.