Binding left & right arrow keys?

[coryasato]

Doesn't fall through to the default behavior when returning false from a custom key handler. Crawled the source code but couldn't find anywhere this is being handled. I guess I could manually reset the selection every time after Im done listening in. Perhaps theres an easier way?

[hellendag]

What is your use case?

[coryasato]

I'm trying to listen if the cursor is currently in an inline that has an Entity type of LINK to fire off a popover component to edit the href. This will do a bit more, but for now baby steps. Currently I can achieve this in the onChange event and a little tweak to the 'currentBlockContainsLink' helper.

[hellendag]

If you don't mind positioning the flyout absolutely, outside the Editor itself, you can declaratively set whether to render it based on the current selection state.

getVisibleSelectionRect may need to be modified for the collapsed cursor, but otherwise, I'm thinking that it could be something like this:

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

class LinkMenu extends React.Component {
  render() {
    const isWithinLink = ...;
    if (isWithinLink) {
      const targetRect = getVisibleSelectionRect(...);
      return <div style={/* use targetRect to position */}>...</div>;
    }
    return <div />;
  }
}

[coryasato]

Yup, thats pretty much what I'm doing. :)

We can close this issue if you think that binding to the left / right arrow keys is unnecessary or dangerous. Thanks!

[hellendag]

I think they could be exposed the same way as the up and down arrow keys, especially if it allows better keyboard navigation for flyouts. For instance, I could imagine a mentions result dropdown that allows two dimensions of navigation.

I haven't seen a need for it yet, so I'm fine with holding off for now. But if anyone should see this issue and want to offer up a PR to solve a need, I'm open to it. :)