Hitting backspace on an empty, styled Block doesn't reset it to unstyled. #580
Description
As it stands, hitting the backspace key on an empty, styled Block (e.g. unordered-list-item) removes the Block entirely, and puts the cursor to the previous line. If this is intentional, shouldn't the desired behaviour be that it resets the Block to unstyled instead?
E.g. if you've written 3 bullet points, hit enter and a fourth appears, then hitting the backspace key should remove the fourth bullet point so that you can continue writing on the same line if you wish.
This is what happens on the Draft.js example editor (if you'd like to give it a go), as well as in Word, Google docs etc...
In an attempt to solve the issue, I've started to implement a Key Binding function which is supposed to reset the Block if its styled and empty. Like so:
import Editor from 'draft-js-plugins-editor'
import {Modifier, getDefaultKeyBinding} from 'draft-js'
const BindKeys = (e, editorState) => {
var lastBlock = editorState.getCurrentContent().getLastBlock();
if (e.keyCode === 8) {
if (lastBlock.getType() !== 'unstyled' && lastBlock.getText().length === 0) {
return {
cmd: 'reset-style',
editorState: editorState,
}
}
return getDefaultKeyBinding(e);
}
}
export class MyEditor extends React.Component {
handleKeyCommand = (e) => {
if (e.cmd === 'reset-style') {
// Modifier.replaceText()?
return 'handled';
}
return 'not-handled';
}
//...
return (
<Editor
editorState={editorState}
onChange={this.updateEditorState}
handleKeyCommand={this.handleKeyCommand}
keyBindingFn={ (e) => BindKeys(e, editorState) } />
)
}The function fires on the desired event, but I'm not managing to get Modifier.replaceText to work. Is this the correct method to use at this point?
More importantly tho, is this a good approach to resolving the issue within draft-js-plugins-editor's architecture? It somehow feels like a hack...
Any suggestions and pointers on both resolving the issue and how to make this a useful contribution are much appreciated. Thanks!