Plugin Examples

Custom key behaviour example

This simple plugin adds a couple of new functionalities to the editor:

• First, modifies the behaviour of the enyter key so it executes a command instead.

• Second, to mantain the new line functionality we make it so the new line is created with

  Illegal HTML tag removed : ctrl+enter

It will use the keyBindingFn to send a new command instead of the default one and the handleKeyCommand to catch said command and execute the desired function.

import { getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';

const { hasCommandModifier } = KeyBindingUtil;

const CustomEnterBehaviour = () => {
  const keyBindingFn = (e) => {
    if (e.keyCode === 13 && hasCommandModifier(e)) {
      return getDefaultKeyBinding(e);
    }
    if (e.keyCode === 13) {
      return 'enter';
    }
    return getDefaultKeyBinding(e);
  };

  const handleKeyCommand = (command) => {
    if (command === 'enter') {
      console.log('entered command'); // add behaviour
      return 'handled';
    }
    return 'not-handled';
  };

  return {
    handleKeyCommand,
    keyBindingFn,
  };
};

export default CustomEnterBehaviour;