feat: add support for hotkeys

[rpfaeffle]

Description

This PR adds support for hotkeys and a Ctrl+S on Windows and Cmd+S hotkey on Mac as described in #1812.

• I have read and understand the CONTRIBUTING.md document in this repository

Type of change

• New feature (non-breaking change which adds functionality)

Checklist:

• I have added tests that prove my fix is effective or that my feature works
• Existing test suite passes locally with my changes
• I have made corresponding changes to the documentation

PS: I haven't tested it on Windows yet and I'm not quite sure where to put the changes in documentation, because it seems like this would need a new category or should be featured on a specific page for editors.

[jmikrut]

Hey @rpfaeffle — this is great!

I've looked at it with the team and we have a few questions about how this will work with nested editing, i.e. our new drawers functionality but we'll check into that and see if any problems arise. We like the idea and the implementation though for sure.

Thank you - more soon!

[rpfaeffle]

Hey @jmikrut, @PatrikKozak,

you welcome. I'm glad you like the idea and the implementation. I must admit that I forgot about nested editing and how this would work with the useHotkey hook. But one option would be to extend the useDocumentDrawer hook with an onOpen function which could disable the Form it is placed in. What do you think about the idea?

Another point I wanted to bring up is Cmd+Enter and Ctrl+Enter as a hotkey for publishing documents.

[jacobsfletch]

@rpfaeffle if we can access a ref to the save button, we could potentially just trigger a click event from your hotkey hook and stopPropagation of the event. Might be something here.

As far as which hot-keys to enable, we should go based on demand.

[jacobsfletch]

@rpfaeffle I've made a proof-of-concept of this in e89e968 where the hook now triggers the button action directly through a ref and stops propagation of the event. There a few things to go here yet though, which are:

1. The hook needs to be moved from the "draft" button to the generic "submit" button and must be opt-in. This is because there might be multiple buttons rendered on the page simultaneously and we do not want them all the fire.
2. We need to write more tests to cover the edge cases here, like nested drawers.
3. There is a new lodash dependency that we cannot ship, so we need to replace those functions with our own code.

[AlessioGr]

Done! This should now handle nested drawers.

[jacobsfletch]

@PatrikKozak or @JessChowdhury could either or both you pull this down and test it out? Pay special attention to using hot keys in drawers and nested drawers.

[hdodov]

I bumped Payload to 1.14.0 but pressing Cmd + S still results in the browser prompting me to save the document as an HTML page.

Browser: Brave (Version 1.56.20 Chromium: 115.0.5790.171)
OS: macOS Ventura 13.5

Is this supposed to work, or this PR just lays out the foundation for making this feature possible?

[AlessioGr]

I bumped Payload to 1.14.0 but pressing Cmd + S still results in the browser prompting me to save the document as an HTML page.

Browser: Brave (Version 1.56.20 Chromium: 115.0.5790.171) OS: macOS Ventura 13.5

Is this supposed to work, or this PR just lays out the foundation for making this feature possible?

Yep, the PR is supposed to work already! I've just tested it on Brave, Chrome and Safari on macOS with a fresh 1.14.0 payload installation, and it works fine for me.

Could you test it out with a fresh payload installation, and maybe share a screen recording? Moreover, make sure you are inside a document with unsaved changes.

[hdodov]

I have a clone of the Payload repo and tested it with yarn dev _community there as well, at commit f5f2332. Check it out:

Screen.Recording.2023-08-18.at.8.44.56.mov

I tested Cmd + S while switching to both Bulgarian language and English. I know this can make a difference in JavaScript when implementing hotkeys. There's also nothing in the console. It just doesn't work.

I'll try to dig into it.

[hdodov]

@AlessioGr I tested it and found out why it doesn't work. It appears that maxEditDepth differs from editDepth upon pressing Cmd + S:

…so this check fails:

payload/src/admin/hooks/useHotkey.tsx

Lines 91 to 94 in 6754f55

	if (maxEditDepth !== editDepth) {
	// We only want to execute the hotkey from the most top-level drawer / edit depth.
	return;
	}

The logs I've shown on the screenshot can be seen on my branch: https://github.com/hdodov/payload/tree/bug-hotkeys

As a reminder, this happens in the original Payload repo, in the _community playground. This is not in my own project, so I believe it's genuinely a problem with Payload.

Should I open a separate issue for this?

[hdodov]

@AlessioGr hey, the issue persists in Payload 1.15.2. Should I open an issue? Could you reproduce it as well?

[AlessioGr]

@AlessioGr hey, the issue persists in Payload 1.15.2. Should I open an issue? Could you reproduce it as well?

@hdodov Yep, opening an issue for this would be nice!

[revnelson]

Is there a way to opt out of this? I use Colemak keyboard layout and the S key maps to R in the layout. When trying to refresh the page via CMD+R, this grabs it and saves the document instead...

[DanRibbens]

Is there a way to opt out of this?

Hi @revnelson - Not at the moment. I've got some ideas on how we should have the hotkeys in a section of the admin UI in the account page. With that we would be able to surface to the user the hotkeys, so that people can know what is available and even modify them.

In the meantime, some hotkeys settings passed through the config could be a good interim step.

We'd be happy to accept a contribution if that is something you want to make a PR for and we can discuss how it might look prior.