How to handle key event in Draft js

Question

if I want to handle input of character *, I can use handleBeforeInput(str):

handleBeforeInput(str) {
    if (str !== '*') {
      return false;
    }
    // handling
    return true;
}

if I want to handle input of ENTER, I can use the hook handleReturn(e)

but if I want to handle input of DELETE, how to do?

Miranda

please add more details to your question. – Obala

Answer 1

Draft's Editor component takes an optional prop called keyBindingFn. If you assign a function to it, that function will receive all keyDown events. In theory, you could do whatever you want in this function, but its responsibility is really to return a command, of type string, that should be executed for a specific key (or combination of keys). It could look something like this:

function keyBindingFn(e) {
  if (e.key === 'Delete') {
    return 'delete-me' // name this whatever you want
  }

  // This wasn't the delete key, so we return Draft's default command for this key
  return Draft.getDefaultKeyBinding(e)
}

The Editor component also takes another optional prop called handleKeyCommand. If a function is assigned to this, it will receive all commands executed in the editor. This means that it, if you used my example above, would receive the command 'delete-me', whenever the delete key is pressed. This is the place to handle that command.

function handleKeyCommand(command) {
  if (command === 'delete-me') {
    // Do what you want to here, then tell Draft that we've taken care of this command
    return 'handled'
  }

  // This wasn't the 'delete-me' command, so we want Draft to handle it instead. 
  // We do this by telling Draft we haven't handled it. 
  return 'not-handled'
}

To clarify, you pass these functions to the Editor component like this:

<Editor 
  keyBindingFn={keyBindingFn}
  handleKeyCommand={handleKeyCommand}
  ... // other props
/>

You can read more about it in the Draft docs.

Requiem

Answer 2

The way to do it in draft-js version ^0.11.7 is:

import Editor, {getDefaultKeyBinding, KeyBindingUtil} from 'draft-js';
const {hasCommandModifier} = KeyBindingUtil;

class MyEditor extends React.Component {

  constructor(props) {
    super(props);
    this.handleKeyCommand = this.handleKeyCommand.bind(this);
  }
  // ...

  handleKeyCommand(command: string): DraftHandleValue {
    if (command === 'enter_command') {
      console.log('enter_command');
      return 'handled';
    }

    if (command === 'ctrl_s_command') {
      console.log('ctrl_s_command');
      return 'handled';
    }
    return 'not-handled';
  }

  myKeyBindingFn = (e) => {
    if (e.keyCode === 13 /* `enter` key */ ) {
      return 'enter_command';
    }

    if (e.keyCode === 83 /* `S` key */ && hasCommandModifier(e) /* + `Ctrl` key */) {
      return 'ctrl_s_command';
    }

    //else...
    return getDefaultKeyBinding(e);
  }

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        handleKeyCommand={this.handleKeyCommand}
        keyBindingFn={myKeyBindingFn}
        ...
      />
    );
  }
}

Spoondrift

Answer 3

You can detect Delete key using JavaScript's keydown event as follows:

var input_field = document.getElementById('your_text_field');
input_field.addEventListener('keydown', function () {
    if (event.keyCode == 46) { //Here 46 is key-code of "Delete" key
        //...your work when delete key pressed..
    }
});

Hope, you needed this.

Obala

Thank you very much! But I wonder if there is a method to handle deletion in lifecircle of draft. – Miranda