Javascript Key Binding

This Code helps you to create a key binding. It creates a React component MyEditor that uses the Draft.js library to render a rich text editor with a red border. The myKeyBindingFn function defines custom key bindings for the editor, returning 'editor-a' for the ‘a’ key and 'editor-b' for the ‘b’ key. The handleKeyCommand method handles the key commands, logging whether the key command is handled or not, and updates the state of the component accordingly. The editorChanged method is called when the editor’s content changes, and updates the component’s state. The save method gets the plain text content of the editor and updates the component’s output state. Finally, the MyEditor component is rendered to an element with ID app.

How to Create JavaScript Key Binding

Create the HTML structure for the key binding as follows:

<div id="app"></div>

Load the following scripts before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/draft-js/0.10.1/Draft.js'></script>

Now, add the following JavaScript function:

const { Editor, EditorState } = Draft;

function myKeyBindingFn(e) {
  if (e.keyCode === 65 /* a key */) {
      return 'editor-a';
    } else if (e.keyCode === 66 /* b key */) {
      return 'editor-b';
    }
  return getDefaultKeyBinding(e);
}

class MyEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      output: '' };

  }
  render() {
    const { output, editorState } = this.state;
    const editorStyle = {
      border: '1px solid red',
      padding: 10 };

    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("div", null, "Type In the Red Box:"), /*#__PURE__*/
      React.createElement("div", { style: editorStyle }, /*#__PURE__*/
      React.createElement(Editor, {
        editorState: editorState,
        keyBindingFn: myKeyBindingFn,
        handleKeyCommand: cmd => this.handleKeyCommand(cmd),
        onChange: editorState => this.editorChanged(editorState) })), /*#__PURE__*/

      React.createElement("button", { onClick: () => this.save() }, "Save"), /*#__PURE__*/

      React.createElement("div", null, "Output: ", output)));


  }
  handleKeyCommand(cmd) {
    if (cmd === 'editor-a') {
      console.log('not-handled letter a');
      return 'not-handled'; // Should fall through to default?
    } else if (cmd === 'editor-b') {
      console.log('handled letter b');
      return 'handled';
    }
    console.log('fallthrough');
    return 'not-handled';
  }
  editorChanged(editorState) {
    this.setState({ editorState });
  }
  save() {
    const { editorState } = this.state;
    const content = editorState.getCurrentContent().getPlainText();
    this.setState({
      output: content });

  }}


ReactDOM.render( /*#__PURE__*/
React.createElement(MyEditor, null),
document.getElementById('app'));

That’s all! hopefully, you have successfully created the JavaScript key binding. If you have any questions or suggestions, feel free to comment below.