Keyboard Shortcuts w/ DraftJS ⌨️

DraftJS is opensource Rich Text Editor for React. This is from the Facebook guys themselves. The website has a video where they talk about DraftJS being used in multiple places like Posts, comments etc in Facebook.

How we use it in React is clearly mentioned in the documentation. Here is a sample usage from there.

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
    );
  }
}

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

Although, DraftJS has a bit of learning curve, which has taken some time for me to get comfortable with. This video has helped me understand some of the core concepts of it.

Keyboard Shortcuts ⌨️

It becomes interesting when we want to add/override keyboard shortcuts to DraftJS. There are two parts in doing this.

• Tell Draftjs what all key commands it should handle,
• and how 😆

Documentation Link

Part 1

A keyBindings function will have all the keys that it should respond to. Also we specify which command will executed when the keys are matched, just the name, rest will be done in part 2.

myKeyBindingFn = e => {
  if (e.keyCode === 49 && hasCommandModifier(e)) { //Cmd+1
    return 'header-one';
  }
  return getDefaultKeyBinding(e);
}

This will check for the key combination Cmd+1 and tell Editor to execute `header-one` command.

There are a few predefined key bindings for things like bold, italics and underline, configured in getDefaultKeyBinding.

Part 2

Here we defined what should be done for a specific command.

handleKey = command => {
    if (command === 'header-one') {
      setEditorState(
        RichUtils.toggleBlockType(editorState, 'header-one')
      );
      return 'handled';
    }
    if (command === 'bold') {
      setEditorState(
        RichUtils.toggleInlineStyle(editorState, 'BOLD')
      );
      return 'handled';
    }
    return 'not-handled';
  }

We return ‘handled’ to tell the Editor that we are explicitly performing action and Editor does not have to handle it anymore.

We are done. We just have to add these two functions to the props of the Editor. (check the documentation for the code).

Bonus 🎉

This also has the ability to add powers to it(they call them plugins). 😁

draft-js-plugins/draft-js-plugins

So most likely you will be using plugins-editor from the draft-js-plugins instead of the Editor from draft-js.

import Editor from 'draft-js-plugins-editor';

With this, you will be able to provide a list of plugins as a prop to the Editor and it takes care of initialising them and adding them to the Editor.

That’s all I had to say.

Keep on hacking ✌️

Share this as a tweet

If you liked this article, don’t mind clapping 👏 for this. It will help reach like-minded people like you. Thanks.
Follow me on Twitter and Github.