Editor component offers flexibility to define custom key bindings
for your editor, via the
keyBindingFn prop. This allows you to match key
commands to behaviors in your editor component.
The default key binding function is
Since the Draft framework maintains tight control over DOM rendering and behavior, basic editing commands must be captured and routed through the key binding system.
getDefaultKeyBinding maps known OS-level editor commands to
strings, which then correspond to behaviors within component handlers.
Ctrl+Z (Win) and
Cmd+Z (OSX) map to the
which then routes our handler to perform an
You may provide your own key binding function to supply custom command strings.
It is recommended that your function use
getDefaultKeyBinding as a
fall-through case, so that your editor may benefit from default commands.
With your custom command string, you may then implement the
prop function, which allows you to map that command string to your desired
'handled', the command is considered
handled. If it returns
'not-handled', the command will fall through.
Let's say we have an editor that should have a "Save" mechanism to periodically write your contents to the server as a draft copy.
First, let's define our key binding function:
Our function receives a key event, and we check whether it matches our criteria:
it must be an
S key, and it must have a command modifier, i.e. the command
key for OSX, or the control key otherwise.
If the command is a match, return a string that names the command. Otherwise, fall through to the default key bindings.
In our editor component, we can then make use of the command via the
'myeditor-save' command can be used for our custom behavior, and returning
'handled' instructs the editor that the command has been handled and no more work
'not-handled' in all other cases, default commands are able to fall
through to default handler behavior.