draft-js-code icon indicating copy to clipboard operation
draft-js-code copied to clipboard

Backspace deletes all tabs instead of just previous tab

Open avk opened this issue 9 years ago • 1 comments

Steps to reproduce

  1. Start at the beginning of a line, with or without text.
  2. Insert 3 tabs via "Tab" key.
  3. Tap "Backspace" key.

Expected

  1. 2 tabs to remain on the current line.

Actual

  1. All tabs are deleted.

I'm not sure what I'm doing differently from the demo, where

  1. a tabbed line without text correctly deletes individual tabs, while
  2. a tabbed line with text deletes individual spaces (instead of tabs)

Here's my relevant code:

  handleKeyCommand(command) {
    let { editorState } = this.state;
    // enable deleting tab characters inserted by CodeUtils.handleTab
    // don't limit to code blocks
    let newState = CodeUtils.handleKeyCommand(editorState, command);
    if (newState) {
      this.setState({ editorState: newState });
      return true;
    }
    return false;
  }

  handleTab(evt) {
    this.setState({
      editorState: CodeUtils.handleTab(evt, this.state.editorState),
    });
  }

  handleWrote(editorState) {
    this.setState({ editorState });
  }

  render() {
    return (
      <div className="project-editor">
        <Editor 
          editorState={this.state.editorState}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.handleWrote}
          onTab={this.handleTab}
        />
      </div>
    );
  }

Have you seen this before? Any ideas?

avk avatar Aug 08 '16 23:08 avk

I'm also seeing this behavior in my app, interesting. Why does that not happen in the demo?!

mxstbr avatar Sep 22 '17 19:09 mxstbr