`keyBindingFn` not working for draft-js-plugin

[mrolafsson]

Describe the bug

keyBindingFn events are not fired for plugins in Draftail (unless I'm doing something wrong here :)

Which terms did you search for in the documentation and issue tracker?

I've found limited evidence in all three issue trackers (Draft, Draftail and Draft plugins). I did see one issue in Draftail referring to up/down arrows not working in the emoji plugin. I verified the same behaviour.

I suspect draft-js-plugins/issues/1117 could be the cause, meaning that your behaviour.js shortcuts take precedence and some handling is required for subsequent plugins to work?

I can confirm that when I use the draft-js-plugins-editor both of the following key events will fire:

const plugins = [
  {
    keyBindingFn: () => console.log("First"),
  }, {
    keyBindingFn: () => console.log("Other")
  }
];

Environment

Latest Draftail and Draft JS Plugins dependencies. Per Draftail installation I am using 0.10.5 version of Draft.

Steps to reproduce

Here's a sample plugin editor component that will log out key events:

import React, {Component} from 'react';
import Editor from 'draft-js-plugins-editor';
import {EditorState} from 'draft-js';

const plugins = [
  {
    keyBindingFn: (e) => console.log(e),
    handleReturn: (e) => console.log("Return!!!")
  }
];

export default class TextEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={plugins}
      />
    );
  }
}

Whereas this snippet of code will not:

import React, {Component} from 'react';
import {DraftailEditor} from "draftail"
import {EditorState} from 'draft-js';

const plugins = [
  {
    keyBindingFn: (e) => console.log(e),
    handleReturn: (e) => console.log("Return!!!")
  }
];

export default class TextEditor extends Component {

  state = {
    editorState: EditorState.createEmpty(),
  };

  onChange = (editorState) => {
    this.setState({
      editorState,
    });
  };

  render() {
    return (
      <DraftailEditor
        editorState={this.state.editorState}
        onChange={this.onChange}
        plugins={plugins}
      />
    );
  }
}

Actual behavior

Here are the two corresponding console dumps:

Reproducible demo

https://github.com/mrolafsson/draft-js-plugins-vs-draftail-keyboard-bug

Thank you for a great project though! Very thoughtful and elegant. Makes Draft much easier to work with.

[mrolafsson]

Upgrading the Draftail dependencies; Draft to 0.11.2 and plugins editor to 3.0.0 has no effect.

[mrolafsson]

Thoughts?

[lukesmurray]

added a solution on the original issue.

[fridaystreet]

@lukesmurray could you elaborate on your solution please? I'm trying to apply it, but doesn't seem to fix the issue with draftail. when using draftail the keybindings never fire.

Does your solution refer to only using the draft-js-plugins editor?

I'm trying to solve this issue, really don't want to use draft-js-plugins editor.

Interestingly the keybindings don't work in any of the storybook tests in the draftail repo either. If you check, say, the emoji demo, you can't up and down arrow through the suggestions.

any assistance greatly appreciated

[fridaystreet]

update:
for now I've managed to solve my issue by using the onUpArrow, onDownArrow hooks, but as per this comment on an issue in draft-js facebookarchive/draft-js#1714 (comment) those hooks are deprecated. So probably not the best resolution

[lukesmurray]

Are your keybinding functions returning undefined? Here is my original solution. draftTail uses draft-js-plugins-editor internally. In draft-js-plugins-editor functions are called one at a time in the order that the plugins are defined. So if I have plugins [a, b, c] then the editor will call a.keyBindingFn, b.keyBindingFn, c.keyBindingFn. The editor stops calling keyBindingFn as soon as one of the keyBindingFns returns something other than undefined.

I don't use draft tail personally so I can't debug this issue for you. I just use draft-js-plugins-editor. I looked at the draftail code base. It looks like the keybindingFn is defined in
https://github.com/springload/draftail/blob/master/lib/api/behavior.js. I would log the values returned from there and make sure they are undefined.

Hope that was helpful. I don't have time to look into this much more. Sorry!

[fridaystreet]

@lukesmurray no worries thanks for even taking the time to reply, yeah that certainly sheds some light on it. I hadn't gotten as far as working out it was using draft plugins editor. The weird thing is that even with a very basic example with just my own plugin that had a keyBindingFn in it that did return undefined, in debugging that function, it is never called.

I had no other plugins enabled, I was literally just trying to console.log out the event from the keybinding plugin. but like I say, it's never gets called when using draftail. So my assumption is that draftail is is causing the issue you explain somewhere before my plugin.

onUpArrow etc all seem to work. Not really sure where to go from there, but that's working so I guess we'll stick with that until it breaks and maybe try and find a solution in the meantime

[thibaudcolas]

Fixed in #445.