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.

Hitting backspace on an empty, styled Block doesn't reset it to unstyled.

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
mkampikcommented, Dec 4, 2016

No problem, totally understand. I’m gonna have to move on to something else for a bit, but will let you know if and how I’ve resolved it.

0reactions
krfong916commented, Jan 11, 2022

@mkampik were you able to find a solution or workaround?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Backspace key not working when Normal Style set to ...
My Normal Style is set to indent first lines of paragraphs. The problem that has come back again is that when I press...
Read more >
How can I prevent the backspace key from navigating back?
I've found that an enterprising user might press backspace on a checkbox or a radio button in a vain attempt to clear it...
Read more >
CodeMirror: User Manual
The easiest way to use CodeMirror is to simply load the script and style sheet found ... The editor will be appended to...
Read more >
Untitled
Heidi marnhout svu, Jagad electone, Gangnam style football mascot, ... Jaume matas urdangarin, Samsung gt i9001 hardware reset, Betriebsbremse auto, ...
Read more >
Diff - master^! - apps/libapps/hterm.org - Git at Google
+// Use of this source code is governed by a BSD-style license that can be ... we know the DEL was a synthetic...
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