Skip to content

Conversation

@emilytoppm
Copy link
Contributor

Currently, as described in #246, Draftail does not call plugin keyBindingFns, preventing custom keyboard shortcuts from being used.

This PR addresses this by passing the Draftail keyBindingFn as an extra, final plugin to the plugin Editor component instead. This is done so that:

  • the existing keyBindingFn can continue to prevent Draft responding overly sensitively to keyboard shortcuts (otherwise we could simply use the defaultKeyBindings option of the plugins editor) by returning undefined
  • plugins can add additional key bindings

I haven't added this to the documentation yet - as it's just a fix, I'm not sure where it should go, but happy to add if you think it needs a mention somewhere. Tested in latest Chrome and Firefox on Ubuntu.

Copy link
Collaborator

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking pretty spot on @jacobtoppm!

I’d like to see two additions to this:

  • A demo (Storybook story) of a plugin leveraging this, so we have a way to manually test this works as expected.
  • An additional unit test that demonstrates #246 is indeed fixed – demoing that the editor’s built-in keyBindingFn doesn’t swallow all keyboard shortcuts.

For the demo, looking at what we have currently, you could:

  • Change one of the existing ones – for example, adding a shortcut to insert embeds or section breaks.
  • Add something else that might be simpler to implement – for example, showing a window.alert when a keyboard shortcut is pressed. I think that would be ok enough, but ideally implementing something that’s still relevant to real-world use cases.

@thibaudcolas thibaudcolas added the bug Something isn't working label Apr 15, 2021
@thibaudcolas thibaudcolas added this to the v1.5.0 milestone Apr 15, 2021
@emilytoppm emilytoppm requested a review from thibaudcolas April 15, 2021 14:22
Copy link
Collaborator

@thibaudcolas thibaudcolas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Working really well, picked up a few small things!

// Hack relying on the internals of Draft.js.
// See https://github.com/facebook/draft-js/pull/869
// $FlowFixMe
const IS_MAC_OS = isOptionKeyCommand({ altKey: "test" }) === "test";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feel like I might want to have this be exported by Draftail, otherwise it’ll be impossible for people to display shortcuts like this without resorting to the hack. Maybe for another PR though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants